The developer team in charge of updating react google sign-up/sign-out has stopped package support for the react-google-login method of adding google sign-up/ sign-out option in the registration and login page and has introduced @react-oauth/google as the new method of adding Google sign-in/sign-out option to react project.

The method to implement this is similar to the old method with few changes in the area of dependency to install and how to structure your code. let’s work through the process below

Note. You have to create react app before following this step. To create your react app, follow the process at this link https://www.w3schools.com/react/react_getstarted.asp

1. The first step is to install @react-oauth/google by copying any of the commands below to your project terminal

npm install @react-oauth/google@latest

# or

yarn add @react-oauth/google@latest

2. Next add this at the top of your project file import {GoogleOAuthProvider} from ‘@react-oauth/google’;

3. Based on your project requirement, add the Googlelogin import { GoogleLogin } from ‘@react-oauth/google’; and import { googleLogout } from ‘@react-oauth/google’; at the top of your project file

4. Add this tag to your function return div or fragment in your project file which will wrap any code that is part of the google sign-up/sign-in option<GoogleOAuthProvider clientId=”<your_client_id>”>…</GoogleOAuthProvider>;

5. Add this code in the middle of the Google0AuthProvide tag

<GoogleLogin onSuccess={credentialResponse => { console.log(credentialResponse); }} onError={() => { console.log(‘Login Failed’); }} />;

Note: you can modify this to your taste. check https://www.npmjs.com/package/@react-oauth/google to add more features to this

For your code to work, you need to create Google client ID to replace <your_client_id> in your wrapper <GoogleOAuthProvider clientId=”<your_client_id>”>…</GoogleOAuthProvider>;

Thanks.