Implementing Google Sign-In in React

by
Tiempo de lectura: 3 minutos

Today we are going to learn how to implement Google Sign-in with React, also compatible with Next.js.

The first thing we need to do is install the React Oauth2 Google library:

npm install @react-oauth/google@latest

Once installed, we need to create our credentials:

Go to Google Cloud Platform (https://cloud.google.com/) and click on Console.

Now select your project (if you already have one created by Firebase) or create a new one.

Next, search for: oauth clients

Choose External:

Fill in the application name and requested data:

Then fill in Developer contact information:

Click on save and continue.

In the next screen, don’t touch anything and click again on save and continue.

Do the same for optional information.

Now we need to add allowed keys, go to Credentials

Click on Create Credentials and choose OAuth client ID and create a new one as a web type.

Copy the code that we will use later.

In authorized origins add the address:

For next.js/react:

http://localhost:3000

For vite:

http://localhost:5137

We also add our website:

http://devcodelight.com

In Authorized redirect URIs:

We put:

http://localhost/callback

Now create a new file in our project called GoogleSigninUtils.tsx

And inside add our code:

export const GoogleSigninClientId = "XXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com"

*Indicate yours.

Go to our main file index.tsx or _app.tsx (next.js) and wrap our APP with the provider:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { GoogleOAuthProvider } from "@react-oauth/google"
import {GoogleSigninClientId } from "@GoogleSigninUtils"

ReactDOM.createRoot(document.getElementById('root')).render(
  <GoogleOAuthProvider clientId={GoogleSigninClientId}>
      <App />
  </GoogleOAuthProvider>
)

Now create a component called BotoGoogleSignin.tsx

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

interface Props {
    onSuccess: (response: CredentialResponse) => void;
    errorMessage: () => void;
}

const LoginGoogle: React.FC<Props> = ({ onSuccess, errorMessage }) => {
    return (
        <div>
            <GoogleLogin onSuccess={onSuccess} onError={errorMessage} />
        </div>
    )
};

export default LoginGoogle;

And to invoke it we use:

<LoginGoogle onSuccess={(response) => {
                  console.log('Google Login Success:', response);
                }
                } errorMessage={() => {
                  console.log('Google Login Error:');
                }
                } />

Now, when executed, we will see this:

And when clicked, it allows us to log in.

It will return a token in JWT format.

To decode it, you can follow this tutorial: https://devcodelight.com/?p=7898

Once obtained, you will have the user data that we can validate with a back-end server.

For example:

Python: https://devcodelight.com/verificar-token-de-google-auth-google-sign-usando-python/

Post Views: 4

Leave a Comment