DEV Community 👩‍💻👨‍💻

Aya Bouchiha
Aya Bouchiha

Posted on

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)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!