React Google Login Lite

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

Install

npm install react-google-login-lite

How to use

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(
    <GoogleLogin 
    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.

    <GoogleLogin 
    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

params	value	default value	description
client_id	string	REQUIRED	You can create a clientID by creating a new project
scope	string	profile email
longtitle	boolean	true	You can change it to 'false' to change it into your country's language.
height	number	50
theme	string	dark	There are two values: 'dark' and 'light'
cookiepolicy	string	single_host_origin
onSuccess	function	REQUIRED
onFailure	function	REQUIRED
isSignedIn	boolean	false	If true will return GoogleUser object on load, if user has given your app permission
Google Scopes List: scopes

onFailure callback

onFailure callback is called when either initialization or a signin attempt fails.

property name	value	definition
error	string	Error code
details	string	Detailed error description

More details can be found in the official Google docs:

• Google developers website

👉 Follow me on Youtube: @devat-vietnam

👉 Buy Me a Coffee . Thank You ! 💗: (https://www.buymeacoffee.com/QK1DkYS)