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
Top comments (0)