Sling Academy
Home/Node.js/How to implement Google Sign In with Express.js

How to implement Google Sign In with Express.js

Last updated: December 30, 2023

Introduction

Implementing Google Sign-In in your Express.js application allows users to register or log in with their Google accounts, enhancing user experience by providing a familiar authentication method. This article explores the integration process using the latest Node.js and JavaScript/TypeScript features such as arrow functions, async/await, and ES modules. We’ll assume you’re familiar with Node.js & Express and have a basic understanding of OAuth 2.0.

Setting Up the Project

Before implementing Google Sign-In, we need to set up an Express.js project and install required packages. Create your project directory and initialize a new node project:

mkdir my-google-sign-in
 cd my-google-sign-in
 npm init -y

Next, install Express and other dependencies:

npm install express passport passport-google-oauth20 dotenv

Configuring Google API Credentials

To use Google Sign-In, you need to create a project in Google Cloud Platform, enable the Google+ API and create credentials:

  • Go to the Google Developers Console.
  • Create a new project or select an existing one.
  • Navigate to “OAuth Consent Screen” tab and set up the consent screen details.
  • Go to the “Credentials” tab and click “Create credentials” > “OAuth client ID”.
  • Choose “Web application” and set the authorized redirect URIs (e.g., http://localhost:3000/auth/google/callback).
  • Upon creating your credentials, you’ll receive your client ID and client secret which are to be kept secure.

Implementing Google Sign-In Backend

Inside your Express application, create or edit an environment file to store your Google API credentials:

//.env
GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret

Using the passport.js library, setup the Google authentication strategy:

//auth.js
import passport from 'passport';
import { Strategy as GoogleStrategy } from 'passport-google-oauth20';
import dotenv from 'dotenv';
dotenv.config();

passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "/auth/google/callback"
  },
  async (accessToken, refreshToken, profile, cb) => {
    // Here you would find or create a user in your database
    cb(null, profile);
  })
);

Once the authentication strategy is in place, create the Express routes to handle authentication requests:

//index.js
import express from 'express';
import passport from './auth.js';

const app = express();
app.use(passport.initialize());

app.get('/auth/google',
  passport.authenticate('google', { scope: ['profile'] })
);

app.get('/auth/google/callback', 
  passport.authenticate('google', { failureRedirect: '/login' }),
  (req, res) => {
    // Successful authentication, redirect home.
    res.redirect('/');
  }
);

app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

Complete Example

Here’s a simplified, complete code example:

// Import necessary modules
import express from 'express';
import passport from 'passport';
import { Strategy as GoogleStrategy } from 'passport-google-oauth20';
import dotenv from 'dotenv';

// Load environment variables
dotenv.config();

// Google OAuth2 Strategy Configuration
passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "/auth/google/callback"
  },
  async (accessToken, refreshToken, profile, cb) => {
    // In a real application, you would find or create a user in your database here
    cb(null, profile);
  })
);

// Initialize Express application
const app = express();

// Initialize Passport
app.use(passport.initialize());

// Define routes
app.get('/auth/google',
  passport.authenticate('google', { scope: ['profile'] })
);

app.get('/auth/google/callback', 
  passport.authenticate('google', { failureRedirect: '/login' }),
  (req, res) => {
    // Successful authentication, redirect home
    res.redirect('/');
  }
);

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server started on http://localhost:${PORT}`);
});

Before running this code, ensure you have a .env file in the root of your project with your Google Client ID and Client Secret:

GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret

This code sets up an Express server that utilizes the Passport.js library with the Google OAuth2 strategy for authentication. It defines routes for initiating the Google authentication process and handling the callback after Google authenticates the user. Upon successful authentication, the user is redirected to the home route.

This example provides the basic structure for integrating Google Sign-In and should be expanded with proper user handling and security measures for a production application.

Conclusion

Incorporating Google Sign-In in an Express.js application streamlines user authentication, leveraging Google’s security and providing a quick sign-in experience. With this simple guide and the power of OAuth 2.0 and Passport.js, you can conveniently integrate third-party authorization mechanisms into your projects.

Next Article: How to implement Facebook Sign In with Express.js

Previous Article: How to create a Discord bot with Node.js

Series: Node.js Intermediate Tutorials

Node.js

You May Also Like

  • NestJS: How to create cursor-based pagination (2 examples)
  • Cursor-Based Pagination in SequelizeJS: Practical Examples
  • MongooseJS: Cursor-Based Pagination Examples
  • Node.js: How to get location from IP address (3 approaches)
  • SequelizeJS: How to reset auto-increment ID after deleting records
  • SequelizeJS: Grouping Results by Multiple Columns
  • NestJS: Using Faker.js to populate database (for testing)
  • NodeJS: Search and download images by keyword from Unsplash API
  • NestJS: Generate N random users using Faker.js
  • Sequelize Upsert: How to insert or update a record in one query
  • NodeJS: Declaring types when using dotenv with TypeScript
  • Using ExpressJS and Multer with TypeScript
  • NodeJS: Link to static assets (JS, CSS) in Pug templates
  • NodeJS: How to use mixins in Pug templates
  • NodeJS: Displaying images and links in Pug templates
  • ExpressJS + Pug: How to use loops to render array data
  • ExpressJS: Using MORGAN to Log HTTP Requests
  • NodeJS: Using express-fileupload to simply upload files
  • ExpressJS: How to render JSON in Pug templates