DEV Community

Aya Bouchiha
Aya Bouchiha

Posted on

27 11

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

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

installation

npm i react-google-login
Enter fullscreen mode Exit fullscreen mode
yarn add react-google-login
Enter fullscreen mode Exit fullscreen mode

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}
            />
        </>
    );
};
Enter fullscreen mode Exit fullscreen mode

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>
    );
};
Enter fullscreen mode Exit fullscreen mode

Have a nice day

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up