Log In With Google: OAuth 2.0, Node.js, and Passport.js.

Giuseppe
Giuseppe
Jun 13 · 4 min read

Setup Google Authentication in 4 minutes.

Image for post
Image for post
Photo by Author

Configuring Google Credentials

Head over the Google API Dashboard.

Image for post
Image for post

At the top right of the page, click on Select a project. When the modal opens, click on New Project at the top right.

Give the project a meaningful name and then click create.

Image for post
Image for post

Once the project is created, we need to configure the consent screen of our application.

On the left menu, select OAuth consent screen.

For the User-Type, choosing external permits any user with a Google account to sign in to your application. Now click create.

Image for post
Image for post

If you want to get things up and running quickly, just enter the application name and hit save at the bottom left.

Image for post
Image for post

Once the consent screen is created, select Credentials on the left menu.

Image for post
Image for post

At the top click Create Credentials. Select OAuth client ID.

Image for post
Image for post

To create the Client ID, we need to enter a few pieces of info.

  1. Firstly set the Application Type to Web application.
  2. Give your Client a suitable name.
  3. Under Authorised Javascript origins, we want to enter the URL of our website. Since we’re still developing, we can use the localhost URI. localhost:3000
  4. Set the redirect URI. This is where the user gets redirected to after authenticating with Google. localhost:3000/auth/google/callback
Image for post
Image for post

As soon as you create the Client ID you’ll see a pop-up which tells you the Client ID and the Client Secret.

Keep a note of these as we’ll need to use them in our application.

Code Setup

In a directory of your choice, create a folder to house the application and navigate to it.

mkdir google-auth-tutorial
cd google-auth-tutorial

Initialise the project with npm.

npm init

Running npm init creates a package.json file for us. This file details information about the project, such as its name, its dependencies and the different scripts associated with it.

Add nodemon to the project.

npm i nodemon

Using nodemon, our application is automatically refreshed every time we make a change to the code. This saves us development time as we do not have to manually restart the server to test every little change.

Now add a start script to package.json.

"scripts": {
"start": "nodemon src/index.js"
}

Create a src folder in the root directory of the application.

mkdir src

Add Google Credentials

We want to store the Google credentials we created earlier inside the environment of our application. To make this super easy, install the dotenv package.

npm i dotenv

Now create a file in the root of the application directory called .env. We can add any secrets that we need for the application in this file.

GOOGLE_CLIENT_ID = your-client-idGOOGLE_CLIENT_SECRET = your-client-secretCALLBACK_URL = your-callback-url

Passport

Passport is authentication middleware for Node.js. It provides over 500 authentication strategies including Google, Facebook, and Twitter to name a few.

Add passport and the google authentication strategy to the project.

npm i passport
npm i passport-google-oauth20

In the src folder, create a file passport.js.

Notice on line 1 we are executing require("dotenv").config() . Doing this makes the variables inside of our .env file available in node’s process.env .

Create the Server

Add express and cookie-session to the project.

npm i express
npm i cookie-session

In the src folder, create a file index.js.

Start the server using npm start and you should be good to go.

A Spot of Testing

Head over to the browser and navigate to localhost:3000 .

Image for post
Image for post

Ensure the google auth is working by navigating tolocalhost:3000/auth/google .

After signing in, you should be redirected to the profile page.

Image for post
Image for post

The middleware checkUserLoggedIn checks if the request is associated with a logged-in user. This middleware is used to protect the /profile route. Let’s see what happens if we logout and then try to access the profile page.

Navigate to localhost:3000/logout . This should redirect you to the home page.

Now if you try to access the profile page you should see an unauthorized message.

Image for post
Image for post

Final Words

Thanks for reading!

If you found this article useful, a clap 👏 is always appreciated.

Check out my source code here.

The Dev Café

Code. Learn. Share.

Sign up for Top Stories

By The Dev Café

A newsletter that delivers The Dev Café's most popular stories to your inbox once a week. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store