Easy Google OAuth 2.0 Login for React

Table of Contents

1. Introduction
2. Creating a Google Project
3. Configuring OAuth Consent Screen
4. Adding Scopes to Your Google API
5. Adding Test Users
6. Creating OAuth Client
7. Setting Up the React Application
8. Creating Login Button Component
9. Creating Logout Button Component
10. Initializing the Google API Client
11. Testing the Login and Logout Functionality
12. Getting Access Tokens for Google API Script
13. Conclusion

Article

How to Create a React Login with Google OAuth 2.0 in Five Minutes

Do you want to implement Google OAuth 2.0 in your React application for user authentication? Look no further! In this tutorial, I will guide you through the process of creating a React login with Google OAuth 2.0 in just five minutes. So let's get started!

1. Introduction

User authentication is a vital part of any web application. By allowing users to login using their Google credentials, you can provide a seamless and secure authentication experience. In this tutorial, I will show you how to integrate Google OAuth 2.0 into your React application, enabling users to log in and access your application with ease.

2. Creating a Google Project

To get started, you need to create a Google project. Head over to the Google Developers Console and click on "Create a Project" button. Give your project a suitable name and select your organization if applicable. Once done, click on "Create" to proceed.

3. Configuring OAuth Consent Screen

The OAuth consent screen is the screen that users see when they try to log in using their Google credentials. To configure the OAuth consent screen, navigate to the "APIs & Services" section in the Google Cloud Console and click on "OAuth consent screen." I recommend using the "External" user type to enable testing with any Google account. Fill in the required details like the app name, user support email, and developer contact email. Once done, save and continue.

4. Adding Scopes to Your Google API

Scopes define the access permissions of your Google API. To add scopes to your Google API, go back to the OAuth consent screen and select the "Scopes" tab. Here, you can add the necessary scopes that your app requires, such as access to email addresses and personal info. Don't forget to click "Update" and "Save" to save your changes.

5. Adding Test Users

To allow specific users to log in using Google OAuth, add their email addresses as test users. In the OAuth consent screen, scroll down to the "Test users" section and click on "Add Users." Enter the email addresses of the test accounts you want to use for logging in. Remember, only these test users will be able to log in to your application. Save and continue.

6. Creating OAuth Client

Next, we need to create the OAuth client that will handle the authentication process. In the Google Cloud Console, navigate to the "Credentials" section and click on the "Create Credentials" button. Choose "OAuth client ID" and select the "Web application" option. Enter the authorized JavaScript origins and authorized redirect URLs, typically your application's URL. Click "Create" to generate a client ID and client secret. Make sure to save these credentials in a secure location.

7. Setting Up the React Application

Before we dive into coding, let's set up our React application. Open your terminal, navigate to an empty folder, and run the command npx create-react-app [folder-name] to create a new React project. Once created, navigate into the project folder by running cd [folder-name] in the terminal.

8. Creating Login Button Component

To handle the login functionality, let's create a Login button component. Create a new folder called "components" inside the "src" folder. Inside the "components" folder, create a new file called "Login.js". Import the GoogleLogin component from the react-google-login library, and define a functional component named Login. Use the GoogleLogin component to render a login button, and provide onSuccess and onFailure functions as props. These functions will handle the login success and failure scenarios, respectively.

import React from "react";
import { GoogleLogin } from "react-google-login";

const CLIENT_ID = "YOUR_CLIENT_ID_HERE";

const Login = () => {
  const handleLoginSuccess = (response) => {
    // Handle login success
  };

  const handleLoginFailure = (response) => {
    // Handle login failure
  };

  return (
    <div>
      <GoogleLogin
        clientId={CLIENT_ID}
        onSuccess={handleLoginSuccess}
        onFailure={handleLoginFailure}
        buttonText="Login with Google"
      />
    </div>
  );
};

export default Login;

9. Creating Logout Button Component

Similar to the login button component, let's create a Logout button component to handle the logout functionality. Inside the "components" folder, create a new file called "Logout.js". Import the GoogleLogout component from the react-google-login library, and define a functional component named Logout. Use the GoogleLogout component to render a logout button, and provide an onSuccess function to handle the logout success.

import React from "react";
import { GoogleLogout } from "react-google-login";

const Logout = () => {
  const handleLogoutSuccess = () => {
    // Handle logout success
  };

  return (
    <div>
      <GoogleLogout
        onLogoutSuccess={handleLogoutSuccess}
        buttonText="Logout"
      />
    </div>
  );
};

export default Logout;

10. Initializing the Google API Client

To start using the Google API client, we need to initialize it. Import the gapi script and the useEffect hook from React into your "App.js" file. Import the CLIENT_ID constant that we defined earlier to access the client ID. Create a start function that uses gapi.client.init to initialize the client with your client ID and the required scope. Finally, use the useEffect hook to call the start function when the component mounts.

11. Testing the Login and Logout Functionality

Now that we have created the login and logout button components and initialized the Google API client, let's test the functionality. Start your React application by running npm start in the terminal. Navigate to your application in the browser and verify that the login and logout buttons are visible. Clicking on the login button should trigger the Google OAuth flow and log you in with your test account. Clicking on the logout button should log you out.

12. Getting Access Tokens for Google API Script

If your application requires access tokens for using Google API services, you can obtain them using the Google API script. This script allows you to retrieve the access token of the currently signed-in user, enabling seamless integration with various Google services. Implement this functionality as per your application's requirements.

13. Conclusion

Congratulations! You have successfully implemented a React login with Google OAuth 2.0 in just five minutes. By following this tutorial, you can now integrate Google authentication into your React applications and provide a seamless user experience. Feel free to explore additional functionalities and customization options to enhance your application's authentication process