loopback-project-authentication

A tutorial for setting up a basic configuration :

• for passport-otp module which login a user using OTP method

• for passport-local

• for third party login provider (facebook, google, twitter etc.)

• Overview

• Prerequisites

• Client ids/secrets from third party

• Tutorial - Facebook

• Tutorial - passport-otp

Overview

LoopBack example for loopback-passport module. It demonstrates how to use LoopBack's user/userIdentity/userCredential models and passport to interact with other auth providers.

• Log in or sign up to LoopBack using third party providers (aka social logins)
• Link third party accounts with a LoopBack user (for example, a LoopBack user can have associated facebook/google accounts to retrieve pictures).
• Log in to Loopback using OTP(one time password) method provided by passport-otp module.

Prerequisites

Before starting this tutorial, make sure you have the following installed:

• Node
• NPM
• StrongLoop Controller
• Postman (API testing tool)

Client ids/secrets from third party

• facebook
• google
• twitter
• Keys from the message provdier. For eg, Twilio SMS Service

Tutorial - passport-otp

1. Quick Start

$ git clone https://github.com/yash17525/loopback-project-authentication.git
$ cd loopback-project-authentication
$ npm install

2. Get your keys(Auth Token, Account SID) and Twilio-Mobile-Number from your Twilio Account.

• Visit your twilio account
• In the dashboard, you will see your Account SID and Auth Token
• Get one twilio mobile number from your account for testing purpose.

3. Create providers.json

• Copy providers.json.template to providers.json
• Under "otp" configuration do the following things:

1. Generate your model for saving tokens/OTP (with schema identity(string),secret(string) ) and enter the name of the model in against "modelToSaveGeneratedKeys"
2. Select one of the options from "email", "phone" for "sendOtpVia" field.
3. For "sendOtpVia" : "email" , enter your "emailInfo" and for "sendOtpVia":"phone" enter your "twilioInfo" using information from your twilio account.
4. Your may also override the default SMS service (twilio) or default email service (gmail) by passing your custom method for SMS service. See, messageProvider in server.js file. You may declare a similar custom method which will take thre arguments namely type,emailOrPhone and token. Then, you have to pass this function to configureProvider method of Passport Configurator. For example, in the server.js file;

   • Define your custom method :

   • Pass this method messageProvider to the Passport Configurator.(Lookup the code given in the image below in server.js and uncomment the commented statements.

   • "type" will be either "email" or "phone", "emailOrPhone" field will contain email-id/phone-number of user depending upon the type.

   • It's all of your responsibility to implement the custom method. otp-passport module will just call this method with type, emailOrPhone and generated token.

   • Note: If you don't want to use custom method, then comment the lines you have uncommented earlier while passing the configuration to Passport Configurator.

"otp": {
  "authScheme": "otp",
  "provider": "passport-otp",
  "module": "passport-otp",
  "authPath": "/auth/otp",
  "callbackPath": "/auth/verify",
  "successRedirect": "/auth/account",
  "failureRedirect": "/otp",
  "failureFlash": true,
  "callbackHTTPMethod": "post",
  "modelToSaveGeneratedKeys": "YOUR_MODEL_NAME (schema for model is : identity(string),secret(string) )",
  "sendOtpVia": "choose one of "phone" or "email"",
  "emailInfo": {
    "gmail": "YOUR_GMAIL_ID",
    "password": "GMAIL_PASSWORD",
    "emailSubject": "<Email Subject> , this field is optional",
    "messageBody" : "<Message Body> this field is optional"
  },
  "twilioInfo": {
    "accountSid": "TWILIO_ACCOUNT_SID",
    "authToken":"TWILIO_ACCOUNT_AUTH_TOKEN",
    "mobileNumber": "TWILIO_ACCOUNT_MOBILE_NUMBER",
    "messageBody" : "<Message Body> this field is optional"
  },
  "window":"<window>"
}

4. Data file

• If you need to see your account info for testing purposes, in server\datasources.json, add:

"file":"db.json"

after

"connector": "memory",

or after

"connector" : "mongodb"

• The account info will be saved into this file.

5. Run the application

$ node .

• Open Postman(API Testing Tool) to check the api end points for /auth/otp and /auth/verify

• If "sendOtpVia" field in provider.json is "phone" then you have to make a GET request using your mobile number and if "sendOtpVia" field is "email" then make a GET request with your email-id.

• For "sendOtpVia" as "phone", make a GET request by replacing countryCode ,YourMobileNumber with your own country code and mobile number : http://127.0.0.1:3000/auth/otp?countryCode=%2BcountryCode&mobile=YourMobileNumber

• For "sendOtpVia" as "gmail", make a GET request as follows by repalcing userEmail with user's email: http://127.0.0.1:3000/auth/otp?email=userEmail

• After receiving the OTP on mobile/email account, make a POST request ( http://127.0.0.1:3000/auth/verify ) and supply the (countryCode, mobile, OTP) or (email,OTP) by the request body as a JSON Object.

• For making post request using phone, { "countryCode":"+91", "mobile":"82198404086" "token":"348790"}

• For making post request using email, request json body will be : { "token":"715542", "email":"yashwant2451@gmail.com" }

• If OTP is valid you will be logged in as a user.

Tutorial - Facebook

1. Clone the application

$ git clone https://github.com/yash17525/loopback-project-authentication.git
$ cd loopback-project-authentication
$ npm install

2. Get your client ids/secrets from third party(social logins)

• To get your app info: facebook
• Click on My Apps, then on Add a new App
• Pick the platform [iOS, Android, Facebook Canvas, Website]
• Select proper category for your app.
• Write your app name and "Site URL".
• Skip the quick start to get your "App ID" and "App Secret", which is in "Settings"
• Your app may not work if the settings are missing a contact email and/or "Site URL".
• if you are testing locally, you can simply use localhost:[port#] as your "Site URL".

3. Create providers.json

• Copy providers.json.template to providers.json

• Update providers.json with your own values for clientID/clientSecret.

  "facebook-login": {
    "provider": "facebook",
    "module": "passport-facebook",
    "clientID": "xxxxxxxxxxxxxxx",
    "clientSecret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "callbackURL": "/auth/facebook/callback",
    "authPath": "/auth/facebook",
    "callbackPath": "/auth/facebook/callback",
    "successRedirect": "/auth/account",
    "failureRedirect": "/login",
    "scope": ["email"],
    "failureFlash": true
  },
  "facebook-link": {
    "provider": "facebook",
    "module": "passport-facebook",
    "clientID": "xxxxxxxxxxxxxxx",
    "clientSecret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "callbackURL": "/link/facebook/callback",
    "authPath": "/link/facebook",
    "callbackPath": "/link/facebook/callback",
    "successRedirect": "/auth/account",
    "failureRedirect": "/login",
    "scope": ["email", "user_likes"],
    "link": true,
    "failureFlash": true
  }
  

4. Facebook profile info

In a recent update, Facebook no longer returns all fields by default (email, gender, timezone, etc). If you need more information, modify the providers template.

The current template contains:

"profileFields": ["gender", "link", "locale", "name", "timezone", "verified", "email", "updated_time"],

We recommend modifying the fields to suit your needs. For more information regarding the providers template, see http://loopback.io/doc/en/lb2/Configuring-providers.json.html.

5. Data file

• If you need to see your account info for testing purposes, in server\datasources.json, add:

"file":"db.json"

after

"connector": "memory",

• The account info will be saved into this file.

6. Run the application

$ node .

• Open your browser to http://localhost:3000
• Click on 'Log in' (in the header, on the rigth)
• Click on 'Login with Facebook'.
• Sign up using a local account, then link to your Facebook account.