Demystifying Passport.js Social Login Strategies

Published in

Webtips

5 min readFeb 6, 2022

Nowadays, social sign-ins have taken over the traditional authentication method that requires the user to remember the password and username for every app. People want to get into the new app as soon as possible without spending time on the irksome process of forming constrained passwords and user names for every app. Social Sign-in is one of the approaches that behaves like a password-less method to let the user sign in and use the app’s main functionality.

In this blog, I tried to explain how to plugin the passport strategies along with how to get social sign-ins dev portals configurations. Passport works on OAuth implementation and supports both OAuth1.0 and OAuth 2.0 Strategies for social sign-ins.

For every Strategy, we need to provide credentials from the developer account after registering/ creating the app at the developer portal for respective social sign-ins. The Developer account provides credentials in form of client id and client secret. Callback URL or redirect URL to your app or website should be provided to the developer portal.

Let’s have a look at the code first

The above code simply shows the main app.js file that runs first with some added middle-wares like cookie-parser that helps to manage cookies and cors for cross-origin resource sharing in case you are running backend and frontend locally with different ports.
At the last, there is a simple error handler that can catch 503 errors in case any error comes.

Let’s have a look at strategies now:

Implementation of all strategies is quite the same for all in terms of code.

Login via Spotify

First, make a Spotify account, go to their developer portal https://developer.spotify.com/, go to the dashboard, and create a new app.

Get your Client Id and Secret and try to add a callback URL (/Spotify/redirect) for your app in the settings tab.
In Spotify, it supports only 25 people in development mode to whom you have to add in the user and access tab. For production, one needs to apply for an extension request.

Now, let’s define the routes :

/Spotify route for Spotify login, you can hit this using the social login in button at the frontend app.
/Spotify/redirect: Redirect URL for App after login.

You may simply define your strategies in a separate file where you need to mention app credentials you created at the dev portal and can use it in app.js as a middleware. After login, you will get the user profile, social sign-in access, and refresh token that can be used for other services like using APIs for other functionalities. I simply used the above to fetch an artist’s songs name through Spotify API.

I added a separate middleware Authlogic.js to handle DB, Authentication token handling, business logic operations, or developer-defined redirection accordingly.

That’s it for the coding part, Now when you hit /Spotify URL from the browser you will be directed to social sign-in login and then after successful login, you will be redirected to the redirect URL for your app. You may add failure redirection as well in redirect middleware.

Redirection after user’s successful login

The above process is quite similar for all other social sign-ins except their developer portal configuration.

2. Login through Google:

Go to google dev portal https://console.developers.google.com/
Create your app and OAuth credentials as shown below to feed to code.

In google social sign-in you still option for testing and production to make it accessible to your organization’s users otherwise you can make it accessible to the external domains as well.

so when you hit /google you will be directed to google login and after successful login, you will reach your callback URL and get your user.