React Google Login Lite

> A Google oAUth Sign-in / Log-in Component for React

Install



npm install react-google-login-lite





How to use

js

import GoogleLogin from 'react-google-login-lite';

// or

import { GoogleLogin } from 'react-google-login-lite';





const onSuccess = (googleUser) => {

  console.log(googleUser);

}



const onFailure = (err) => {

  console.log(err);

}



//or typescript

const onSuccess = (googleUser: GoogleLoginResponse) => {

  console.log(googleUser);

}



const onFailure = (err: any) => {

  console.log(err);

}





ReactDOM.render(

        client_id='your-google-client-id'

    cookiepolicy='single_host_origin'

    onSuccess={onSuccess}

    onFailure={onFailure}

    />,

    document.getElementById('root')

);





Stay Logged in

isSignedIn={true} attribute will call onSuccess

 callback on load to keep the user signed in.

jsx

        client_id='your-google-client-id'

    cookiepolicy='single_host_origin'

    onSuccess={onSuccess}

    onFailure={onFailure}

    isSignedIn={true}

    />







onSuccess callback



 1. In the

onSuccess(googleUser) {...}

 callback function, you can use:

  *

googleUser.getId()

googleUser.isSignedIn()

googleUser.getBasicProfile()

googleUser.getAuthResponse()



  * You should get back a standard JWT located at

googleUser.getAuthResponse().id_token



 2. Send this id_token to your server 

 3. Have your server decode the id_token by using a common JWT library such as google-auth-library or by sending a GET request to

https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=YOUR_TOKEN_HERE



 4. The returned decoded token should have an

hd` key equal to the hosted domain you'd like to restrict to.

More details can be found in the official Google docs:
* https://developers.google.com/identity/sign-in/web/reference#users

Login Props

onFailure callback

$3