Configuring Google Credentials
Head over the Google API Dashboard.
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.
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.
If you want to get things up and running quickly, just enter the application name and hit save at the bottom left.
Once the consent screen is created, select Credentials on the left menu.
At the top click Create Credentials. Select OAuth client ID.
To create the Client ID, we need to enter a few pieces of info.
- Firstly set the Application Type to Web application.
- Give your Client a suitable name.
- Set the redirect URI. This is where the user gets redirected to after authenticating with Google.
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.
In a directory of your choice, create a folder to house the application and navigate to it.
Initialise the project with npm.
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.
"start": "nodemon src/index.js"
Create a src folder in the root directory of the application.
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 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
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
Ensure the google auth is working by navigating to
After signing in, you should be redirected to the profile page.
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.
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.
Thanks for reading!
If you found this article useful, a clap 👏 is always appreciated.
Check out my source code here.