Google Login Implementation in React and Node.js

Learn how to implement Google Login in React and Node.js with OAuth authentication. Securely authenticate users and manage their data with Google’s OAuth API.

Key Points

Seamless Authentication: Enable secure Google Login in your React Web app using OAuth for a smooth user experience.
Backend Integration: Use Node.js and Google APIs to validate users and store their data securely.
Step-by-Step Guide: Follow an easy-to-understand setup for Google OAuth in React and Node.js with complete code examples.

Co-Founder

Vandana Abrol

3 min read

An enthusiastic developer and skilled business management expert with over a decade of experience in the field

image showing google login implementation in react and node js

In this guide, we will walk you through the step-by-step process of implementing Google OAuth in React and Node.js. By following this tutorial, you will learn how to configure Google Login in React, set up the Google OAuth client, and handle user authentication in a Node.js backend.

In modern web development and mobile app development, user authentication plays a crucial role in ensuring security and a smooth user experience. Whether you're building an eCommerce website, a SaaS platform, or a custom mobile application, integrating Google OAuth can help streamline user sign-ins, reduce password-related issues, and improve overall security.

Step 1: Configure Google Console

To use Google OAuth, you first need to configure it in the Google Developers Console

Steps to Configure Google Console:

Go to Google Console and create a new project.
Navigate to API & Services > Credentials.
Before creating credentials, configure the OAuth consent screen by filling in the necessary details such as application name, user type, and authorized domains.

In Credentials, select OAuth Client ID and create credentials by providing:

Application type (Select Web Application for React apps)
Authorized JavaScript origins (Your frontend URL)
Authorized redirect URIs (Your backend endpoint for authentication handling)

Once created, copy the Client ID and Client Secret, as you will need them later.

Step 2: React Setup for Google Login

To integrate Google Login in React, follow these steps:

In your react app Install @react-oauth/google with npm i @react-oauth/google
After installing wrap your app.jsx with GoogleOAuthProvider and google client Id

                                           <GoogleOAuthProvider clientId="Your_google_client_id">
     <BrowserRouter>
       <Provider store={store}>
         <ContextProvider>
           <ChatWidget />
         </ContextProvider>
       </Provider>
     </BrowserRouter>
   </GoogleOAuthProvider>

After this go to your login page and add a function on your google login button

                                        const handleGoogleLogin = useGoogleLogin({
   onSuccess: (response) => {
   console.log(response)
   },
   onError: (error) => console.log(error),
   scope: "profile email",
   access_type: "offline", // Request offline access for refresh token
   prompt: "consent",
   flow: "auth-code",
 });

NOTE: make sure to add flow : auth-code
This will provide us a code in response which will help us to get user details in our backend

After getting the response you need to send code to via api which will handle to get user response and save it in Database

Step 3: Node.js Setup for Google Authentication

Now, let's set up Google authentication in Node.js.

Install your Node/Express app , Install googleapis with
npm i googleapis
After installing, create a helper function like this which will need Google client id and Google client secret and redirect url which we have mentioned in Google OAuth

                                        const GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID;
const GOOGLE_CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET;

export const oauth2Client = new google.auth.OAuth2(
   GOOGLE_CLIENT_ID,
   GOOGLE_CLIENT_SECRET,
   'http://localhost:3000'  // Redirect url mentioned in google app
);

Import this variable in your controller file and get token from code which you have sent from the client side and then call the api to get user details from that token

                                        const googleRes = await oauth2Client.getToken(code)
   oauth2Client.setCredentials(googleRes.tokens);

   const userRes = await axios.get(
    `https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=${googleRes.tokens.access_token}`
   );

Save the user details in your database for further use.

Step 4: Test and Deploy

To test your implementation, follow these steps:

Run your Node.js server:
Start your React app:
npm start
Click the Google Login button and ensure the authentication process works as expected.
Once verified, deploy your React frontend and Node.js backend to platforms likeVercel, Netlify, or Heroku.

Why Google Login Matters in Web and Mobile App Development

In today's digital landscape, user authentication has emerged as a crucial function in web development and mobile app development. Whether it's an eCommerce platform, a business dashboard, or a social networking app, Google login definitely enhances the user experience by:

Reducing Password Fatigue: Users no longer need to remember multiple passwords.
Improving Security: OAuth authentications reduce the risk of passwords leaking.
Improving User Engagement: Easy login means increased retention of users.

At Digittrix, we specialize in developing secure and scalable web and mobile applications. When it comes to custom user authentication systems or custom applications in React and Node.js, our highly-skilled developers can help you build customized solutions that are designed to fit your needs.

If you're looking for mobile app development, web development, or secure authentication solutions, reach us out today!

Do you want help implementing this?