Implementing Google OAuth in React.js

import "./App.css";
import Login from "./google-OAuth/login";
import Logout from "./google-OAuth/logout";

function App() {
  return (
    <div className="App">
      <h1>Google Auth</h1>
      <div className="center">
        <Login />
      </div>
      <div className="center">
        <Logout />
      </div>
    </div>
  );
}

export default App;

https://console.cloud.google.com/cloud-resource-manager

Picture 8. See the Cloud resource manager panel.

Click on the Navigation Menu.

Picture 9. Go to the APIs and services Click it and go to click Credentials.

Picture 10. Click on the Download icon and get your OAuth client ID credentials in a JSON file.

Now we get the Credentials ID.

Get the API Key Click on the SHOW KEY button.

Picture 11. Open the API KEY popup window and copy the API KEY.

Step 4. Create the env file in the client

The .env file, "environment," is commonly used in React and Node.js applications to store configuration variables. These variables can include sensitive information like API keys, database connection strings, or any other configuration parameters specific to the environment where the application is running.

Let's create an Environment variable in Node js.

1. Go to the dotenv npm page. Install the npm package for dotenv for your node js application.
2. Create an env file in node-js. Do not create a js file. Name it .env.

Go to the Client project create the ‘.env’ file and add Client-Id and API-key

Example

• REACT_APP_GOOGLE_CLIENT_ID=23747474755454-l00bbj245pfb858lke849j1cjiv3c8n2b734ae.apps.googleusercontent.com
• REACT_APP_GOOGLE_API_KEY=AIzDdSdWdaSyBMPeM-5gf5gf5g5f4_VBUMlmXXHMED-xqg

Picture 12. Add the client ID and API key.

Step 5. Create the Login Page

Now I will create the Login page and refer to the @react-oauth/google npm package.

import React from 'react'
import {
  GoogleOAuthProvider,
  GoogleLogin,
  googleLogout,
} from "@react-oauth/google";
import { jwtDecode } from "jwt-decode";

const CLIENT_ID = process.env.REACT_APP_GOOGLE_CLIENT_ID;

export default function login() {

  const handelLogin=(googleData)=>{
    const userData = jwtDecode(googleData);
    console.log(userData);
  }

  return (
    <div className="App">
        <GoogleOAuthProvider clientId={CLIENT_ID}>
          <GoogleLogin
            onSuccess={(credentialResponse) => {
              handelLogin(credentialResponse.credential);
            }}
            onError={() => {
            }}
          />
        </GoogleOAuthProvider>
    </div>
  )
}

• <GoogleOAuthProvider clientId={CLIENT_ID}>: This component named GoogleOAuthProvider is used for handling Google OAuth authentication. It likely takes a prop clientId, the client ID needed for authentication.

  <GoogleOAuthProvider clientId={CLIENT_ID}>
          <GoogleLogin
            onSuccess={(credentialResponse) => {
              handelLogin(credentialResponse.credential);
            }}
            onError={() => {
            }}
          />
        </GoogleOAuthProvider>

• <GoogleLogin>: This is another component, possibly provided by the GoogleOAuthProvider, used to handle the login process with Google. It likely has event handlers like onSuccess and onError that are called when the login is successful or encounters an error.
• jwtDecode: A function from the jwt-decode library that decodes JSON Web Tokens (JWT).

 const handelLogin=(googleData)=>{
    const userData = jwtDecode(googleData);
    console.log(userData);
  }

onSuccess has a function called handleLogin which passes the value from Google-Data and decodes the Google-Date using jwtDecode.

Now I'm going to run my app.

Picture 13. Now you can see our page is running.

Click on the Sign in with Google button.

Picture 14. Login with gmail.

Get the console output by userData here.

Picture 15. Get the login information here.

We get the Google token from the Google login.

Conclusion

In this article, we've walked through the process of implementing Google OAuth in a React.js application. By leveraging the OAuth 2.0 protocol, we've ensured a secure method for third-party applications to access user data without compromising user credentials. We started by setting up a new React.js project and installing essential packages. Then, we configured OAuth credentials, created login and logout pages, and integrated Google OAuth using Google Identity. By following these steps, you can provide your users with a smooth and secure login experience. For more detailed information, refer to my previous article on Understanding Google OAuth. With this knowledge.