examples/passport-login/README.md
A tutorial for implementing authentication in LoopBack 4 using passport modules.
This example demonstrates how to use the LoopBack 4 features (like
@authenticate decorator, strategy providers, etc) with
passport strategies. It includes the OAuth2 strategies
to interact with external OAuth providers like Facebook, Google, etc as well as
local and basic strategies.
You can use this example to see how to,
Before starting this tutorial, make sure you have Client-ids/Secrets from third party apps
Take a look at how to use passport strategies as Express middleware using interceptors
Take a look at how to use passport strategies by invoking independent of Express
Run the lb4 example command to install example-passport-login repository:
lb4 example passport-login
change into directory and then install the required dependencies:
cd loopback4-example-passport-login && npm i
By default the user data is stored using a memory connector and saved locally to
data/db.json
Start the application with
$ npm start
To use Google, Facebook or Twitter logins, you'll need:
oauth2-providers.template.json from this example project's root to
oauth2-providers.json.OAUTH_PROVIDERS_LOCATION environment variable to
../oauth2-providers.json.Open browser to http://localhost:3000
Sign Up from the header menu and register as a local user.Login from the header menu and enter registered email id and
password. The View account page loads with user information.Login from the header menu, You will see various buttons under
Other login options.
View account
page is loaded.View account
page will display all the linked accounts for that locally registered user.Login from the header menu, You will see various buttons under
Other login options.
View account
page is loaded.View account
page will display the external profile used to login under the
linked accounts section.My Apps tab in the dashboard menu, and then select Add a new AppApp creation page. Pick the platform as Website and then
enter app category, app name and "Site URL" (Skip the quick start)Settings tab from the left hand side navigation menu, note the "App
ID" and "App Secret" and saveRoles tab from the left hand side navigation menu, then the
Test users link under it, to display a list of test users. You can also
create a new test user.Change permissions granted by this test user and add [email,
manage_pages] scopes to permissionslocalhost:[port#] as your
"Site URL".Copy oauth2-providers.template.json from this example project's root to
oauth2-providers.json
Update Facebook oauth2 config with the values for clientID/clientSecret from
your test app.
"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,
"profileFields": ["gender", "link", "locale", "name", "timezone", "verified", "email", "updated_time"]
}
The profileFields field above tells Facebook details to return in profile data
after authentication. For more information regarding the providers template, see
http://loopback.io/doc/en/lb2/Configuring-providers.json.html.
http://localhost:3000Log In from the example app header menuLog In with Facebook buttonOAuth consent screen from the left hand side navigation menu,
select External, click Create buttonApplication page to register your app. Enter app name and
check if scopes has email permissionCredentials link in the left hand side navigation menuCreate Credentials tab, and select OAuth Client IDCreate Client ID page. Select application type as
web application, enter name and click Create buttonCopy oauth2-providers.template.json from this example project's root to
oauth2-providers.json
Update Google oauth2 config with the values for clientID/clientSecret from
your Google test app.
"google-login": {
"provider": "google",
"module": "passport-google-oauth2",
"strategy": "OAuth2Strategy",
"clientID": "{google-client-id}",
"clientSecret": "{google-client-secret}",
"callbackURL": "/api/auth/thirdparty/google/callback",
"authPath": "/api/auth/thirdparty/google",
"callbackPath": "/api/auth/thirdparty/google/callback",
"successRedirect": "/auth/account",
"failureRedirect": "/login",
"scope": ["email", "profile"],
"failureFlash": true
}
http://localhost:3000Log In from the example app header menuLog In with Google buttonCreate an app to create a new app.App details page, fill the callback URL field with
http://localhost:3000/api/auth/thirdparty/twitter/callback.Terms of Service URL and
Privacy policy URL. This is needed since we will need to request users for
email address in the Permissions settings.Keys and tokens tab, no changes are needed. You will see the
Consumer API keys section which has the API key and secret. These values
will be used in the LoopBack application.Permissions tab, under additional permissions section, select
Request email address. Make sure you have the term of service and privacy
policy urls information filled in in the Add details tab, otherwise the
Request email address will be disabled for you.Keys and tokens
tab for regeneration.passport-twitter repo.Copy oauth2-providers.template.json from this example project's root to
oauth2-providers.json
Update Twitter oauth config with the values for consumerKey/consumerSecret
from your test app.
"twitter-login": {
"provider": "twitter",
"module": "passport-twitter",
"strategy": "OAuth2Strategy",
"consumerKey": "xxxxxxxxxxxxxx",
"consumerSecret": "xxxxxxxxxxxxxxx",
"callbackURL": "/api/auth/thirdparty/twitter/callback?source=twitter",
"authPath": "/api/auth/thirdparty/twitter",
"callbackPath": "/api/auth/thirdparty/twitter/callback",
"successRedirect": "/auth/account",
"failureRedirect": "/login",
"includeEmail": true,
"scope": ["email", "profile"],
"failureFlash": true
},
http://localhost:3000Log In from the example app header menuLog In with Twitter buttonAuthorize app.