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

npm install react-google-login

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')
);

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:

1. In the responseGoogle(response) {...} callback function, you should get back a standard JWT located at response.hg.id_token
2. Send this token to your server (preferably as an Authorization header)
3. 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
4. The returned decoded token should have an hd key equal to the hosted domain you'd like to restrict to.

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

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.

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>

npm run start

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

npm run test:watch

npm run bundle