How to Set Up the New Google Auth in a React and Express App

In this article, you’ll learn how to configure the new Google Auth “Sign in with Google” button in a React.js and Express.js application.

Integrating Google Login React functionality has become simpler and more robust with the updated “Sign in with Google” button. Using Google’s latest Identity Services SDK, developers can easily implement a secure and seamless Google login experience for their users.

This method introduces features such as profile picture previews for account selection, One Tap login for effortless user access, and enhanced token management to maintain sessions. With the deprecation of the old “Sign In With Google” JavaScript library, it is now crucial to transition to this updated approach for new and existing projects.

In this guide, you’ll learn how to configure the new “Sign in with Google” button in a React.js and Express.js application. We’ll cover everything from generating a Google Client ID and Secret to implementing authentication flows on both the client and server sides.

Here’s the source code for this article: Server and Client.

Key Takeaways

Simplified Google Auth Integration: This article provides a comprehensive guide on integrating the new “Sign in with Google” button in applications built with React.js and Express.js, highlighting the simplified authentication process, which includes benefits like allowing users to choose their account using a profile picture, and the necessity to adopt this method due to the deprecation of the old Google Sign-In JavaScript library.
Step-by-Step Implementation Guide: From generating a Google Client ID and Secret in the Google console to setting up the React Google auth and Express environments, the article walks through every step required to implement Google Auth, including handling client-side and server-side configurations and providing code snippets and explanations for each part of the process.
Final Outcome and Resources: Upon completing the steps outlined, developers will have a functional authentication system that leverages Google’s secure login. The article also links to the full source code for both the server and client-side implementations, ensuring readers have access to all necessary resources to successfully implement the new Google auth method in their projects.

Generate a Google Client ID and Secret

To set up sign-in with Google React, the first step is to generate a Google Client ID and Secret using the Google Cloud Console. These credentials are essential for setting up secure authentication in your application.

Follow these steps to create a new OAuth 2.0 Client and configure your project to support both web applications and One Tap log in.

Step 1: Navigate to Google Console

We begin by heading to Google Console.

Step 2: Create a New Project

Click the project dropdown in the top navigation and select “New Project.”. After that, click on the new project highlighted below.

Step 3: Enter Project Details

Enter a project name, such as connect-google-auth-2024, and click “Create.”.

Then, navigate back to the project dropdown and select the newly created project.

From the left menu, click “APIs & Services.” The screen you will see should look like the sample below.

Then, click “OAuth consent screen” to configure OAuth consent.

Select the type of consent you want, and click CREATE.

Complete the consent screen form, providing app details like app name, support email, and logo. Save your settings.

Note: when you’re ready to deploy your application, you should replace the URI1 and URI2 with the domain name you want to use — such as https://example.com.

Step 5: Creating Credentials

Go to “Credentials” and create a new OAuth 2.0 Client ID:

Application type: Web application

Authorized redirect URIs: Add http://localhost and http://localhost:3000. (when deploying to production, replace these with your domain, e.g., https://example.com.)

Step 6: Download Client ID and Secret

Once your credentials have been stored successfully, you can copy or download the generated Client ID and Secret.

Setup React App

Start by bootstrapping your React.js app with Create React App or an equivalent modern setup. Open a terminal, create your project folder, and run the following command:

npx create-react-app app

For modern applications, consider using tools like Vite for faster builds. Install the @react-oauth/google package to leverage Google’s Identity Services SDK:

npm install @react-oauth/google

Setting Up the Express Server

Create another folder in the root directory named server. Then, open a terminal and cd into server: cd server.

After that, create a file named server.js and run npm init -y to create the package.json file. Next, install the following packages:

Express.js: A minimal Node.js web application framework that provides a robust set of features for web and mobile applications.

CORS: A Node.js package that provides Connect/Express middleware that can be used to enable cross-origin resource sharing with various options.
Dotenv: A Node.js package that loads environment variables from .env file.
Google-auth-library: Google API’s Authentication Client Library for Node.js.
Jsonwebtoken: A JSON Web Token implementation library for Node.js.
Nodemon: A simple monitor script for use during the development of a Node.js app.

You can install the packages above by running the following command:

npm install express cors dotenv google-auth-library jsonwebtoken nodemon

After that, configure your script by doing this:

// package.json
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },

Your package.json should look like this:

// package.json
{
  "name": "connect-google-auth-article",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^16.0.2",
    "express": "^4.18.1",
    "google-auth-library": "^8.5.2",
    "jsonwebtoken": "^8.5.1",
    "nodemon": "^2.0.20"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

After that, write the following code in server.js and run npm run dev to start your server:

// server.js
const express = require("express");
const app = express();
require("dotenv/config"); // configure reading from .env
const cors = require("cors");
const { OAuth2Client } = require("google-auth-library");
const jwt = require("jsonwebtoken");

app.use(
  cors({
    origin: ["http://localhost:3000"],
    methods: "GET,POST,PUT,DELETE,OPTIONS",
  })
);
app.use(express.json());

let DB = [];

app.listen("5152", () => console.log("Server running on port 5152"));

Preparing the React App

Modern applications no longer require adding the Google script manually. Instead, import the GoogleLogin component from the @react-oauth/google package for a cleaner integration. Example:

import { GoogleLogin } from '@react-oauth/google';

Our index.html file should look like this:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!-- Google Signup/signin script  -->
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Next, we’ll create two folders in the src folder named screens and hooks. The screens folder will contain five files: Home.jsx, Landing.jsx, Login.jsx, Signup.jsx and index.js. The hooks folder will contain only one file: useFetch.jsx.

Configure Client-Side Routing

The package we’ll leverage for the client-side routing is react-router-dom. Open a new terminal, cd into the app, and run the following command:

npm install react-router-dom

We can then update our App.js to look like this:

// App.js
import React, { useEffect } from "react";
import { useState } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

const App = () => {
  const [user, setUser] = useState({});

  return (
    <BrowserRouter>
      <Routes>

      </Routes>
    </BrowserRouter>
  );
};

export default App;

Creating the Landing Page

In this application, the landing page is the only page available for an unauthenticated user. It will contain links to the sign-up and login pages and will look like this:

// Landing.jsx
import React from "react";
import { Link } from "react-router-dom";

const Landing = () => {
  return (
    <>
      <header style={{ textAlign: "center" }}>
        <h1>Welcome to my world</h1>
      </header>
      <main style={{ display: "flex", justifyContent: "center", gap: "2rem" }}>
        <Link
          to="/signup"
          style={{
            textDecoration: "none",
            border: "1px solid gray",
            padding: "0.5rem 1rem",
            backgroundColor: "wheat",
            color: "#333",
          }}
        >
          Sign Up
        </Link>
        <Link
          to="/login"
          style={{
            textDecoration: "none",
            border: "1px solid gray",
            padding: "0.5rem 1rem",
            backgroundColor: "whitesmoke",
            color: "#333",
          }}
        >
          Login
        </Link>
      </main>
    </>
  );
};

export default Landing;

Let’s break it down:

The component returns a React fragment element represented by an empty tag.
The fragment contains two elements: <header> and <main>. The header returns an <h1> and centers the text in it, while the main element returns two links from react-router-dom and also centers them.
A different background color is provided for the two links to improve UX.

Next, we can open the screens/index.js file and export the Landing.jsx like so:

// index.js

export { default as Landing } from "./Landing";

After that, we can import it into the App.js file, where we configure a route for it:

// App.js

import {  Landing } from "./screens";

<Route

  path="/"

  element={user?.email ? <Navigate to="/home" /> : <Landing />}

  />

Creating a useFetch Hook

A hook in React is a special function that allows you to use React’s functionality. To create a hook, open hooks/useFetch.jsx and add the following code:

// useFetch.jsx
import { useState } from "react";

const useFetch = (url) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const handleGoogle = async (response) => {
    console.log(response)
  };
  return { loading, error, handleGoogle };
};

export default useFetch;

Open the screens/Signup.jsx file and add the following code:

// Signup.jsx
import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import useFetch from "../hooks/useFetch";

// https://developers.google.com/identity/gsi/web/reference/js-reference

const SignUp = () => {
  const { handleGoogle, loading, error } = useFetch(
    "http://localhost:5152/signup"
  );

  useEffect(() => {
    /* global google */
    if (window.google) {
import { useGoogleLogin } from '@react-oauth/google';
const login = useGoogleLogin({
  onSuccess: tokenResponse => console.log(tokenResponse),
  onError: () => console.error('Login Failed'),
});


 google.accounts.id.renderButton(document.getElementById("signUpDiv"), {
        // type: "standard",
        theme: "filled_black",
        // size: "small",
        text: "continue_with",
        shape: "pill",
      });

      // google.accounts.id.prompt()
    }
  }, [handleGoogle]);

  return (
    <>
      <nav style={{ padding: "2rem" }}>
        <Link to="/">Go Back</Link>
      </nav>
      <header style={{ textAlign: "center" }}>
        <h1>Register to continue</h1>
      </header>
      <main
        style={{
          display: "flex",
          justifyContent: "center",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        {error && <p style={{ color: "red" }}>{error}</p>}
        {loading ? (
          <div>Loading....</div>
        ) : (
          <div id="signUpDiv" data-text="signup_with"></div>
        )}
      </main>
      <footer></footer>
    </>
  );
};

export default SignUp;

Let’s break it down:

We extract the available states and functions from the useFetch hook. We also pass the URL that we’ll be calling to handle our sign-on to the server.
In useEffect, we check for the availability of Google’s script — handled by the script we put in the public.index.html file.
We then use the initialize method available in the script to handle the functionality of the authentication button.
We also pass a callback function, which we’ve already defined in the useFetch hook.

Next, we’ll use the renderButton method to display our authentication button on the screen. The first parameter we pass is the element in which the button will be embedded, using the getElementById method. The next parameters that we can pass are used to customize the look of the button. It has the following required settings:

type: Accepts two values — standard and icon.

Moreover, it has optional settings, including the following:

theme: The button theme. It can accept one of the following: filled_blue, outline, and filled_black.
size: Defines the size of the button. It accepts large, medium, and small.
text: Defines the button text. It accepts one of the following: signin_with, signup_with, continue_with, and sign in.
shape: Defines the shape of the button. It accepts rectangular, pill, circle, or square.
logo_alignment: Defines how the logo will be placed on the button. It can be left or center.
width: Defines the width of the button. The maximum width is 400.
locale: Used to set a specific language for the text.

The login page is similar to the sign-up screen. The only difference is the server URL and the button text. The code should look like this:

// Login.jsx
import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import useFetch from "../hooks/useFetch";

// https://developers.google.com/identity/gsi/web/reference/js-reference

const Login = () => {
  const { handleGoogle, loading, error } = useFetch(
    "http://localhost:5152/login"
  );

  useEffect(() => {
    /* global google */
    if (window.google) {
      google.accounts.id.initialize({
        client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
        callback: handleGoogle,
      });

      google.accounts.id.renderButton(document.getElementById("loginDiv"), {
        // type: "standard",
        theme: "filled_black",
        // size: "small",
        text: "signin_with",
        shape: "pill",
      });

      // google.accounts.id.prompt()
    }
  }, [handleGoogle]);

  return (
    <>
      <nav style={{ padding: "2rem" }}>
        <Link to="/">Go Back</Link>
      </nav>
      <header style={{ textAlign: "center" }}>
        <h1>Login to continue</h1>
      </header>
      <main
        style={{
          display: "flex",
          justifyContent: "center",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        {error && <p style={{ color: "red" }}>{error}</p>}
        {loading ? <div>Loading....</div> : <div id="loginDiv"></div>}
      </main>
      <footer></footer>
    </>
  );
};

export default Login;

Also create a .env.local file in the root folder and add the following:

REACT_APP_GOOGLE_CLIENT_ID=your client id

Next, we export the sign-up and login page from the screens.index.js file:

// index.js...
export { default as Login } from "./Login";
export { default as Signup } from "./SignUp";

After that, we configure their routes in the App.js file:

// App.js
import {  Landing, Login, Signup } from "./screens";

...

<Route
    path="/signup"
    element={user?.email ? <Navigate to="/home" /> : <Signup />}
  />
  <Route
    path="/login"
    element={user?.email ? <Navigate to="/home" /> : <Login />}
  />

The google.accounts.id.prompt() is used to automatically ask the user to sign in immediately after they open your web page. It can be placed in the root file or the login page. This behaviour is known as the one-tap login.

useEffect(() => {
  if (window.google) {
    google.accounts.id.initialize({
      client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
      callback: handleGoogle,
    });

    // Enable One Tap
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        console.warn("One Tap prompt was not displayed.");
      }
    });
  }
}, [handleGoogle]);

// Token refresh

const refreshAccessToken = async () => {
  try {
    const response = await fetch('http://localhost:5152/refresh-token', {
      method: 'POST',
      credentials: 'include', // includes cookies
    });

    const data = await response.json();
    if (data.token) {
      localStorage.setItem("user", JSON.stringify(data));
    } else {
      throw new Error('Token refresh failed.');
    }
  } catch (error) {
    console.error('Token refresh error:', error);
  }
};

Sometimes, the Default Google login button may not align with your branding. In such cases, you can create a custom button like the one below:

import { useGoogleLogin } from '@react-oauth/google';

const CustomGoogleButton = () => {
  const login = useGoogleLogin({
    onSuccess: (response) => console.log(response),
    onError: () => console.error('Login Failed'),
  });

  return (
    <button
      onClick={login}
      style={{
        backgroundColor: '#4285F4',
        color: 'white',
        padding: '10px 20px',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer',
      }}
    >
      Sign in with Google
    </button>
  );
};

export default CustomGoogleButton;

Updating useFetch

The Google authentication returns a response with JWT credentials. However, to verify its authenticity and also create a session for the user, we’ll be making subsequent calls to the server. We should update our hooks/useFetch file to look like this:

// useFetch.jsx
  const handleGoogle = async (response) => {
    setLoading(true);
    fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },

      body: JSON.stringify({ credential: response.credential }),
    })
      .then((res) => {
        setLoading(false);

        return res.json();
      })
      .then((data) => {
        if (data?.user) {
          localStorage.setItem("user", JSON.stringify(data?.user));
          window.location.reload();
        }

        throw new Error(data?.message || data);
      })
      .catch((error) => {
        setError(error?.message);
      });
  };

Let’s break this down:

Our callback function accepts a parameter from Google authentication passed in as a response.
We then use fetch to request the server.
When we get the appropriate response, we store the user in the localStorage in JSON format.

Open the server.js file. First of all, we’ll create a function that verifies the credentials we’ll be receiving:

// server.js
/**
 *  This function is used verify a google account
 */
const GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID;
const client = new OAuth2Client(GOOGLE_CLIENT_ID);

async function verifyGoogleToken(token) {
  try {
    const ticket = await client.verifyIdToken({
      idToken: token,
      audience: GOOGLE_CLIENT_ID,
    });
    return { payload: ticket.getPayload() };
  } catch (error) {
    return { error: "Invalid user detected. Please try again" };
  }
}

Create a .env file in the root folder of the server and add the following:

# .env
GOOGLE_CLIENT_ID=your client id
JWT_SECRET=mySecret

Next, create the sign-up route:

// server.js
app.post("/signup", async (req, res) => {
  try {
    // console.log({ verified: verifyGoogleToken(req.body.credential) });
    if (req.body.credential) {
      const verificationResponse = await verifyGoogleToken(req.body.credential);

      if (verificationResponse.error) {
        return res.status(400).json({
          message: verificationResponse.error,
        });
      }

      const profile = verificationResponse?.payload;

      DB.push(profile);

      res.status(201).json({
        message: "Signup was successful",
        user: {
          firstName: profile?.given_name,
          lastName: profile?.family_name,
          picture: profile?.picture,
          email: profile?.email,
          token: jwt.sign({ email: profile?.email }, "myScret", {
            expiresIn: "1d",
          }),
        },
      });
    }
  } catch (error) {
    res.status(500).json({
      message: "An error occurred. Registration failed.",
    });
  }
});

Also, create the login route:

// server.js
app.post("/login", async (req, res) => {
  try {
    if (req.body.credential) {
      const verificationResponse = await verifyGoogleToken(req.body.credential);
      if (verificationResponse.error) {
        return res.status(400).json({
          message: verificationResponse.error,
        });
      }

      const profile = verificationResponse?.payload;

      const existsInDB = DB.find((person) => person?.email === profile?.email);

      if (!existsInDB) {
        return res.status(400).json({
          message: "You are not registered. Please sign up",
        });
      }

      res.status(201).json({
        message: "Login was successful",
        user: {
          firstName: profile?.given_name,
          lastName: profile?.family_name,
          picture: profile?.picture,
          email: profile?.email,
          token: jwt.sign({ email: profile?.email }, process.env.JWT_SECRET, {
            expiresIn: "1d",
          }),
        },
      });
    }
  } catch (error) {
    res.status(500).json({
      message: error?.message || error,
    });
  }
});

Let’s break it down:

In the routes, we first check that the credentials are passed into the body. We then attempt to verify the credentials. If there’s an error, we send it back to the client in JSON format.
In the sign-up route, we store users’ profiles in the DB array and send a successful response with a JWT-signed email as a token.
In the login route, we check if the user exists in the DB, and if not, we throw an error. If it exists, we also send a successful response with a JWT-signed email as a token with other parameters.

Updating App.js

In the App.js of the client app, we’ll update the file to check for a user in the local storage with the following code:

// App.js
 useEffect(() => {
    const theUser = localStorage.getItem("user");

    if (theUser && !theUser.includes("undefined")) {
      setUser(JSON.parse(theUser));
    }
  }, []);

Creating Home.jsx

The Home.jsx file is the page that will be available to the user after a successful signup or login:

// Home.jsx
import React from "react";

const Home = ({ user }) => {
  const logout = () => {
    localStorage.removeItem("user");
    window.location.reload();
  };
  return (
    <div style={{ textAlign: "center", margin: "3rem" }}>
      <h1>Dear {user?.email}</h1>

      <p>
        You are viewing this page because you are logged in or you just signed
        up
      </p>

      <div>
        <button
          onClick={logout}
          style={{
            color: "red",
            border: "1px solid gray",
            backgroundColor: "white",
            padding: "0.5rem 1rem",
            cursor: "pointer",
          }}
        >
          Logout
        </button>
      </div>
    </div>
  );
};

export default Home;

Next, we’ll export it from the screens/index.js file like so:

export { default as Home } from "./Home";

After that, we’ll import and set up its route in App.js:

import { Home, Landing, Login, Signup } from "./screens";

...

<Route
    path="/home"
    element={user?.email ? <Home user={user} /> : <Navigate to="/" />}
  />

Comparison with Other Authentication Methods

While Google Authentication offers seamless integration and modern features, it’s important to evaluate other authentication methods available for different use cases. Here is a comparison of different authentication options:

Method	Pros	Cons
Google Auth	Seamless login, profile integration, One Tap login support.	Requires Google account, dependent on third-party.
Facebook Auth	Social integration, wide user base.	Privacy concerns, lower adoption vs Google.
GitHub Auth	Ideal for developer tools, integrates with GitHub APIs.	Limited to developers; not suitable for general apps.
Email/Password	No dependency on third-party services.	Requires additional password management security.

Conclusion

Congratulations! You’ve successfully implemented Google Sign In Reactusing the latest Identity Services SDK in a React.js and Express.js application. This setup supports both web-based logins and One Tap login for enhanced user convenien

The combination of React Google Auth, Google OAuth React, and react-oauth/google provides a robust authentication framework that simplifies integration while maintaining scalability.ce. Don’t forget to test your application thoroughly to ensure secure and seamless authentication.

Once again, the source code is available here: Server and Client.

Related reading:

FAQs on How to Set Up the New Google Auth React and Express App

To implement React Google Login, start by creating credentials in the Google Developer Console to obtain a Google Client ID. Use this ID to configure the OAuth consent screen, ensuring you’ve set the authorized JavaScript origins and redirect URIs.

Install necessary npm packages like express, cors, and google-auth-library on your server. In your React app, use the react-google-login component for front-end integration. This process taps into Google APIs to facilitate user sign-ins and securely manage access tokens.

Navigate to the Google Developer Console, select or create a new project, and access the OAuth consent screen section. Here, you’ll specify the user authorization details, including your application’s name, the support email, and the authorized domains. This screen is crucial for obtaining user consent to access Google APIs with your React app.

How Can I Safely Obtain Access Tokens in a React and Express Application?

To safely obtain access tokens in a Google Login React implementation, use the react-oauth/google package, which leverages Google’s OAuth 2.0 protocol. This ensures secure handling of authentication tokens without exposing sensitive data.

To implement logout functionality, provide a logout button that, when clicked, calls a function to remove the user details from local storage and the session from the server. This should invalidate the session and redirect the user to the login screen to ensure the user is fully logged out.

Use the refresh token provided by Google’s OAuth 2.0 server to obtain new access tokens when the current one expires. Set up a middleware in your Express backend that checks the token’s validity and refreshes it as needed. This keeps the user signed in without requiring them to repeatedly enter their credentials.

What Is the Best Practice for Managing User Details in React Google Authentication?

After a successful login, use the ID token returned by Google to retrieve user details. Store these details in local storage or your state management solution to personalize the user experience without compromising security. Ensure sensitive data handling conforms to best practices to protect user information.

Yes, you can customize the Google Sign-In button to better fit the design of your web application. Google provides options to change the button’s appearance, including its size, text, and color through the react-google-login component. Utilize these customization options to create a unique and seamless sign-in flow.

Implement detailed error handling both on the client side in your React components and on the server side in your Express app. Catch and log errors effectively, provide meaningful error messages to users, and ensure that the user can recover gracefully from issues during the sign-in process.

What Are the Necessary Steps to Configure a New Project for Google Authentication in the Google Cloud Console?

To configure a new project, go to the Google Cloud Console, click on ‘Create Project’, enter your project name, and then navigate to the APIs & Services dashboard. From there, enable the Google+ API and configure your OAuth 2.0 credentials by specifying your client ID and client secret, as well as redirecting URIs.

How Can I Use the Access Token Returned by Google for Further API Requests in My React and Express Applications?

Use the access token to make authorized API requests to Google services by attaching it to the HTTP Authorization header. This allows your application to access Google APIs on behalf of the user, enabling functionalities such as retrieving profile information or interacting with Google services by attaching it to the HTTP Authorization header. This allows your application to access Google APIs on behalf of the user, enabling functionalities such as retrieving profile information or interacting with Google services.