My Favourite Library For Providing Logging In & Logging Out With Google Functionalities In My React Apps

#javascript #react #webdev #beginners

Hi I'm Aya Bouchiha, I decided to share with you my favorite react library for providing logging in and logging out with google functionalities in my react apps which is react-google-login.

react-google-login

demo
github

installation

npm i react-google-login

yarn add react-google-login

Login code

If you don't have a client Id, please check this article: how to get google client id and client secret.

import GoogleLogin from 'react-google-login';

const Login = () => {
    const handleSuccess = (response) => {
        console.log(response);
        alert("you're logged in successfully!");
    };
    const handleFailure = () => {
        alert('something went wrong');
    };

    return (
        <>
            <GoogleLogin
                // you client Id
                clientId={process.env.CLIENT_ID}
                buttonText='Login'
                onSuccess={handleSuccess}
                onFailure={handleFailure}
                // for calling onSuccess callback when the page load to keep the user logged in.
                isSignedIn={true}
            />
        </>
    );
};

Logout code

import { GoogleLogout } from 'react-google-login';
const Logout = () => {
    const handleLogout = () => {
        alert("you're logged out!!!");
    };
    return (
        <GoogleLogout
            clientId={process.env.CLIENT_ID}
            buttonText='Logout'
            onLogoutSuccess={handleLogout}>
        </GoogleLogout>
    );
};