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

demo

github

i…


This content originally appeared on DEV Community and was authored by Aya Bouchiha

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
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>
    );
};

Have a nice day


This content originally appeared on DEV Community and was authored by Aya Bouchiha


Print Share Comment Cite Upload Translate Updates
APA

Aya Bouchiha | Sciencx (2021-09-04T00:40:53+00:00) My Favourite Library For Providing Logging In & Logging Out With Google Functionalities In My React Apps. Retrieved from https://www.scien.cx/2021/09/04/my-favourite-library-for-providing-logging-in-logging-out-with-google-functionalities-in-my-react-apps/

MLA
" » My Favourite Library For Providing Logging In & Logging Out With Google Functionalities In My React Apps." Aya Bouchiha | Sciencx - Saturday September 4, 2021, https://www.scien.cx/2021/09/04/my-favourite-library-for-providing-logging-in-logging-out-with-google-functionalities-in-my-react-apps/
HARVARD
Aya Bouchiha | Sciencx Saturday September 4, 2021 » My Favourite Library For Providing Logging In & Logging Out With Google Functionalities In My React Apps., viewed ,<https://www.scien.cx/2021/09/04/my-favourite-library-for-providing-logging-in-logging-out-with-google-functionalities-in-my-react-apps/>
VANCOUVER
Aya Bouchiha | Sciencx - » My Favourite Library For Providing Logging In & Logging Out With Google Functionalities In My React Apps. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/04/my-favourite-library-for-providing-logging-in-logging-out-with-google-functionalities-in-my-react-apps/
CHICAGO
" » My Favourite Library For Providing Logging In & Logging Out With Google Functionalities In My React Apps." Aya Bouchiha | Sciencx - Accessed . https://www.scien.cx/2021/09/04/my-favourite-library-for-providing-logging-in-logging-out-with-google-functionalities-in-my-react-apps/
IEEE
" » My Favourite Library For Providing Logging In & Logging Out With Google Functionalities In My React Apps." Aya Bouchiha | Sciencx [Online]. Available: https://www.scien.cx/2021/09/04/my-favourite-library-for-providing-logging-in-logging-out-with-google-functionalities-in-my-react-apps/. [Accessed: ]
rf:citation
» My Favourite Library For Providing Logging In & Logging Out With Google Functionalities In My React Apps | Aya Bouchiha | Sciencx | https://www.scien.cx/2021/09/04/my-favourite-library-for-providing-logging-in-logging-out-with-google-functionalities-in-my-react-apps/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.