DEV Community

Dhyanesh Siddhartha
Dhyanesh Siddhartha

Posted on

How to add LOGIN with Google in your WEBAPPS using Passport

_To add Google login to your web application using Passport.js, you'll need to follow these general steps:

  1. Set up a Google Developer Console project:

    • Go to the Google Developer Console (
    • Create a new project.
    • Navigate to "OAuth consent screen" under "OAuth 2.0 Client IDs" and configure your OAuth consent screen with the necessary details.
    • Go to "Credentials" and create a new OAuth 2.0 Client ID. Select "Web application" as the application type.
    • Add the authorized redirect URI for your application (e.g., http://localhost:3000/auth/google/callback).
  2. Install Passport and Passport Google OAuth Strategy:

   npm install passport passport-google-oauth20
Enter fullscreen mode Exit fullscreen mode
  1. Configure Passport in your application:
    • Initialize Passport and set up the Google OAuth 2.0 Strategy in your server file (e.g., app.js or server.js).
    • Use your Google Client ID and Client Secret obtained from the Google Developer Console.
   const passport = require('passport');
   const GoogleStrategy = require('passport-google-oauth20').Strategy;

   passport.use(new GoogleStrategy({
       clientID: GOOGLE_CLIENT_ID,
       clientSecret: GOOGLE_CLIENT_SECRET,
       callbackURL: '/auth/google/callback'
   (accessToken, refreshToken, profile, done) => {
       // Save user profile to your database or retrieve an existing user
       return done(null, profile);

   passport.serializeUser((user, done) => {
       done(null, user);

   passport.deserializeUser((user, done) => {
       done(null, user);
Enter fullscreen mode Exit fullscreen mode
  1. Set up routes for authentication:
    • Define routes for handling Google authentication and callback.
       passport.authenticate('google', { scope: ['profile', 'email'] }));

       passport.authenticate('google', { failureRedirect: '/login' }),
       (req, res) => {
           // Successful authentication, redirect home.
Enter fullscreen mode Exit fullscreen mode
  1. Protect your routes:
    • Use Passport's authenticate method to protect routes that require authentication.
   function ensureAuthenticated(req, res, next) {
       if (req.isAuthenticated()) {
           return next();

   app.get('/profile', ensureAuthenticated, (req, res) => {
       res.render('profile', { user: req.user });
Enter fullscreen mode Exit fullscreen mode
  1. Configure sessions (optional):
    • If you want to use sessions to persist authentication state, configure Express session middleware and Passport session middleware.
       secret: 'your_secret_key',
       resave: false,
       saveUninitialized: true

Enter fullscreen mode Exit fullscreen mode
  1. Add a "Login with Google" button to your frontend:

    • Create a button that redirects the user to /auth/google to initiate the OAuth flow.
  2. Run your application:

    • Start your server and test the Google login functionality.

Top comments (0)