React Google Login

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

Install

npm install react-google-login

How to use

import React from 'react';
import ReactDOM from 'react-dom';
import GoogleLogin from 'react-google-login';

const responseGoogle = (response) => {
  console.log(response);
}

ReactDOM.render(
  <GoogleLogin
    clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
    buttonText="Login"
    onSuccess={responseGoogle}
    onFailure={responseGoogle}
  />,
  document.getElementById('googleButton')
);

onSuccess callback

If offline is false callback will return the GoogleAuth object.

If offline is true callback will return the offline token for use on your server.

If you use the hostedDomain param, make sure to validate the id_token (a JSON web token) returned by Google on your backend server:

In the responseGoogle(response) {...} callback function, you should get back a standard JWT located at response.hg.id_token
Send this token to your server (preferably as an Authorization header)
Have your server decode the id_token by using a common JWT library such as jwt-simple or by sending a GET request to https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=YOUR_TOKEN_HERE
The returned decoded token should have an hd key equal to the hosted domain you'd like to restrict to.

Parameters

params	value	default value
clientId	string	REQUIRED
hostedDomain	string	-
scope	string	profile email
onSuccess	function	REQUIRED
onFailure	function	REQUIRED
onRequest	function	-
offline	boolean	false
buttonText	string	Login with Google
className	string	-
style	object	-
loginHint	string	-
redirectUri	string	postmessage
approvalPrompt	string	-
tag	string	button
autoLoad	boolean	false

Google Scopes List: https://developers.google.com/identity/protocols/googlescopes

onSuccess callback ( w/ offline false)

onSuccess callback returns a GoogleUser object which provides access to all of the GoogleUser methods listed here: https://developers.google.com/identity/sign-in/web/reference#users .

You can also access the returned values via the following properties on the returned object.

property name	value	definition
googleId	string	Google user ID
tokenId	string	Token Id
accessToken	string	Access Token
tokenObj	object	Token details object
profileObj	object	Profile details object

onSuccess callback ( w/ offline true)

property name	value	definition
code	object	offline token

If approvalPrompt is set to "force", refresh token will always be returned while exchanging auth code for tokens. Otherwise, refresh token will only be returned for the first time user gives permission to the app.

You can now also pass child components such as icons into the button component.

  <GoogleLogin
    clientId={'658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com'}
    onSuccess={responseGoogle}
    onFailure={responseGoogle}
    offline={false}
  >
    <FontAwesome
      name='google'
    />
    <span> Login with Google</span>
  </GoogleLogin>

Dev Server

npm run start

Default dev server runs at localost:8080 in browser. You can set IP and PORT in webpack.config.dev.js

Run Tests

npm run test:watch

Production Bundle

npm run bundle

Vishal0203/react-google-login