How to add Google Authentication in your react project

Google Authentication pic for reference

Following are the steps to execute to add google authentication to your react project —

1. Visit this link
2. Create a project with your desired name
3. Add URI’s (For ex , in dev case : http://locahost:3000/)
4. Copy paste the same URI for redirected Auth URI
5. Copy ClientID under the section OAuth 2.0 Client IDs
6. Add these changes to your JS/JSX file —

import GoogleLogin from ‘react-google-login’;

import { GoogleLogout } from ‘react-google-login’;

const responseGoogle = (response) => {

console.log(response);

console.log(response.profileObj);

setName(response.profileObj.name);

setEmail(response.profileObj.email);

}

const [name, setName] = useState(“”);

const [email, setEmail] = useState(“”);

const logOut = () => {

setName(“”);

setEmail(“”);

setUrl(“”);

window.location.reload();

}

<GoogleLogin

clientId=”Paste_the_client_id_copied_from_there”

buttonText=”Login”

onSuccess={responseGoogle}

onFailure={responseGoogle}

cookiePolicy={‘single_host_origin’}

isSignedIn={true}

render={renderProps => (

<Avatar src={google_pic} className=”google_button” onClick={renderProps.onClick} disabled={renderProps.disabled}/>

)}

/>

<GoogleLogout

clientId=”Paste_the_client_id_copied_from_there”

buttonText=”Logout”

//isSignedIn={false}

onLogoutSuccess={logOut}

render={renderProps => (

<Avatar src={url} className=”google_button” onClick={renderProps.onClick} disabled={renderProps.disabled}/>

)}

>

</GoogleLogout>