Login with Google Account using React | Integrate Google Login Button in React

Source Code

import React, { useState } from 'react';
import { GoogleLogin, GoogleLogout } from 'react-google-login';

const clientId = "Your-Client-Id";

function Login() {

    const [showloginButton, setShowloginButton] = useState(true);
    const [showlogoutButton, setShowlogoutButton] = useState(false);
    const onLoginSuccess = (res) => {
        console.log('Login Success:', res.profileObj);
        setShowloginButton(false);
        setShowlogoutButton(true);
    };

    const onLoginFailure = (res) => {
        console.log('Login Failed:', res);
    };

    const onSignoutSuccess = () => {
        alert("You have been logged out successfully");
        console.clear();
        setShowloginButton(true);
        setShowlogoutButton(false);
    };

    return (
        <div>
            { showloginButton ?
                <GoogleLogin
                    clientId={clientId}
                    buttonText="Sign In"
                    onSuccess={onLoginSuccess}
                    onFailure={onLoginFailure}
                    cookiePolicy={'single_host_origin'}
                    isSignedIn={true}
                /> : null}

            { showlogoutButton ?
                <GoogleLogout
                    clientId={clientId}
                    buttonText="Sign Out"
                    onLogoutSuccess={onSignoutSuccess}
                >
                </GoogleLogout> : null
            }
        </div>
    );
}
export default Login;

import React, { useState } from 'react';

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

const clientId = "Your-Client-Id";

function Login() {

const [showloginButton, setShowloginButton] = useState(true);

const [showlogoutButton, setShowlogoutButton] = useState(false);

const onLoginSuccess = (res) => {

console.log('Login Success:', res.profileObj);

setShowloginButton(false);

setShowlogoutButton(true);

};

const onLoginFailure = (res) => {

console.log('Login Failed:', res);

};

const onSignoutSuccess = () => {

alert("You have been logged out successfully");

console.clear();

setShowloginButton(true);

setShowlogoutButton(false);

};

return (

<div>

{ showloginButton ?

<GoogleLogin

clientId={clientId}

buttonText="Sign In"

onSuccess={onLoginSuccess}

onFailure={onLoginFailure}

cookiePolicy={'single_host_origin'}

isSignedIn={true}

/> : null}

{ showlogoutButton ?

<GoogleLogout

clientId={clientId}

buttonText="Sign Out"

onLogoutSuccess={onSignoutSuccess}

</GoogleLogout> : null

}

</div>

);

}

export default Login;

This is the App component where we have the simple google login button for this you need to install the below library using the npm command as shown below

npm i react-google-login

And then it will also have the logout button and it will show the profile of the user in the dashboard page as shown below