Social Media Login Using NodeJs and PassportJs

Social media login is a very easy step for registering for the new apps. This allows end-users for using their existing information from social network platforms like Facebook, Google, Twitter, and LinkedIn. The user can use these websites instead of creating new accounts. This is just one step process for getting registered into the new app. This also reduces the verification step for the new users.

In this article, we will see how to register using Google and Facebook accounts using NodeJs and PassportJs.

PassportJs is the library that provides authentication strategies for different social media accounts. This use as middleware in NodeJs projects.

Let’s Dive In

Step 1: Project Structure

First, create the base folder (authentication-project) which contains all the project-related files and directories.

Our project will have the server.js which has the server code, the .env file which has all environmental variables, passport-setup.js will have the code setting up different strategies.

Directory SetUp

Step 2: Initialize App

Now our next step to initialize our project by running the below command in the terminal.

$ npm init -y

Now we will install the required dependencies.

$ npm i express dotenv nodemon ejs passport passport-facebook passport-google-oauth2 cookie-session

1. Express: Express is used as a web application framework.
2. Dotenv: Dotenv module has zero dependencies that load environmental variables.
3. Nodemon: This tool is used to automatically restart the server when the change detected.
4. Ejs: Ejs is a templating engine.
5. Passport: Passport is authentication middleware for the NodeJs.
6. Passport-facebook: Passport-facebook is the passport strategy for authenticating Facebook.
7. Passport-google-oauth2: Passport-google-oauth2 is the passport sategy for authenticating google.
8. Cookie-session: Cookies-session is a middleware module the stores our data on the client side.

After installing all the modules this is how our package.json looks like.

Package.json

Step 3: Configure Strategies

For configuring different media platforms we need APP_ID and APP_SECRET for each media strategy. The APP_ID and APP_SECRET can be obtained by creating the app in the developer link.

The developer app links for the different media platforms.

1. Facebook: https://developers.facebook.com/
2. Google: https://console.cloud.google.com/apis/dashboard
3. LinkedIn: https://www.linkedin.com/developers/
4. Twitter: https://developer.twitter.com/en

In this article, we will configure Google APP_ID and APP_SECRET.

For Configure Google APP_ID and APP_SECRET Follow the below steps:

1. Go to the Google console developer link https://console.cloud.google.com/apis/dashboard and log in with your Google account.
2. Once you registered then go to the project dropdown and select the existing project or create the new project.

This window will be shown

3. Now go to the credentials under APIs & Services.

4. Now select the create credentials drop list and choose OAuth Client ID.

5. Now choose Web Application under the Application type.

6. Now give the authorized URL under the Authorized redirect URLs. like we are giving http://localhost:3000/google/callback and the last step is to click create button.

Now the pop up comes on the screen which has the APP_ID and APP_SECRET

Similarly, you can get APP_ID and APP_SECRET for all the media platforms.

Now we set up passport-setup.js. In this file, we configure all the social media strategies. These strategies use to authenticate the user and handle the callback.

Now we write the server code in the server.js.

Now our last step is to create the frontend.

Step 4: Create Frontend

We create the templates using the ejs template engine. we create two pages index.ejs and the profile.ejs under the views/pages/ directories.

Our App is completed. Now we can test.

Step 5: Test the work

Start up the server and open the project URL on the browser.

The project URL is http://localhost:3000

Hit this URL on the browser

Index page

With on click of the google button, the URL redirects and displays this signing dialog box.

After choosing the email. The URL will be redirected to a Profile page.

Profile Page

Similarly, we can test all the media platforms.

Conclusion

In this article, I explained how to authenticate different social media platforms to the App. We see how to configure different passport strategies for a different social media account and we also look at how to get client_id and the secret_id for configuring the strategies.

You can find the code [here]

Read my other articles

How to Serve Static Resource With Node.js

How to Send Emails With Templates using NodeJs

Image upload using NodeJs

Crud Operation

Registration And Login With JWT Using NodeJs & ExpressJs

Getting started with NodeJs

If you like this article, give it a clap 👏 ❤️.