Sometimes we just want to use an application without having to sign up and sign in with our email and password first.

However, the application's owners need to know how many users have used their application in order to get feedback on who is using it and how.

This is why using Google authentication benefits both the user and the application owner. Because Google is the world's most popular email platform.

In this article, we will learn how to integrate Google Authentication into our React application.

Here is the live link to a demo app GAuth and here is the github link Repo for accessing all code.

npm packages required for the Google authentication.

1. React-google-login
2. Gapi-script

• gapi-script for loading Google API scripts and initialising some functions.

• React-google-login enables us to integrate the Google authentication feature into our React app.

We need to create a Google client ID before we can integrate Google authentication into your react app.

Getting a Google client ID for your project

To generate a Google Client ID, navigate to Google Cloud Console.

Make a new project and give it any name you want.

I named my project google-authentication-app.

After creating the new project go to the dashboard section.

Now configure the consent screen for your React app.

The consent screen notifies the user that they are leaving your app's page and entering a third-party site.

It prompts the user to authorise access to any information or activities that your app is permitted to access.

The Google login consent screen that your app displays to the user may include a brief description of your project, its policies, and the requested information.

Unless your application is a Google verified organisation or application, you must select external and click Create.

On this page, you must complete at least three tasks.

1. Application Name
2. Notification Email
3. Contact Information of Developer

Click on Save and continue.

On left side menu click on Credentials, then click on Create Credentials and after that click OAuth client ID.

On this page select application type.

Because we are integrating Google authentication into a React app, we must choose Web Application.

Simply enter the desired Name. This will not be displayed to the user.

You must include the URL where you hosted your application in authorized JavaScript origins.

You must enter the URL where you want to redirect the user after successful login in authorised redirect URL. In my case, the URLs are identical.

We have now successfully generated our web client ID. We can return to the react app now.

Integrating react-google-login to the react app.

To integrate Google authentication into your React project, we must first install the two packages mentioned earlier. To install them, use the command below.

npm install react-google-login

npm install gapi-script

• Importing the gapi-script module in the app.js file

• Make a variable for the clientID.

• In the Login and Logout components, the clientID is passed as a prop.

import { gapi } from 'gapi-script';
// Added gapi to access people api resources from google.

import Login from './components/Login';
import Logout from './components/Logout';

// Google OAuth 2.0 client Id (Without this you can't login with google)
const clientID = '381842122352-##########p84t56lsf95q##########.apps.googleusercontent.com'

function App() {
  return (
    <div className="App">
      {/* Adding login component and passing clientID as prop. */}
      <Login clientID={clientID}/>
      <Logout clientID={clientID} />
    </div>
  );
}

export default App;

• We can now proceed to the Login component.

• Importing GoogleLogin from react-google-login module in the Login component.

• Adding a login button to the project now.

import { GoogleLogin } from 'react-google-login';

function Login({ clientID }) {

  // This function will be called on successfull login
      const responseGoogle = (res) => {
        console.log(res)
      }

  // This will be called when login is failed
      const failedRes = (res) => {
        console.log(res)
      }

  return (
    <GoogleLogin
                clientId={clientID}
                buttonText="Login with Google"
                onSuccess={responseGoogle}
                onFailure={failedRes}
                cookiePolicy={'single_host_origin'}
     />
  )
}

• We can now proceed to the Logout component.

• Importing GoogleLogout from react-google-login module in the Logout component.

• Adding a logout button to the project now.

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

const Logout = ({ clientId }) => {
    const onSuccess = () => {
        alert("Logged out successfully")
    }

    return (
        <>
            <GoogleLogout
                clientId={clientId}
                buttonText="Logout"
                onLogoutSuccess={onSuccess}
            />
        </>
    )
}

export default Logout;

• The 'alert' message on successful logout will be "Logged out successfully."

Conclusion

Google login is a important feature for improving the user experience. Another reason to include this feature is that it is quick and simple to implement and use.

Hope this article helped you understand and how to implement the Google Authentication to your own project.