react-google-oauth

Directly inspired from react-google-login project.

With react-google-oauth you can quickly and easly add Login and Logout Google button.

• How it works
• Install
• How use it
  • 1- Inject and init Google API script
    • GooleApi props
      • onUpdateSigninStatus - Callback
      • onInitFailure - Callback
  • 2- Add a button
    • GoogleLogin params
    • GoogleLogout params
  • 3- Get informations
    • googleGetBasicProfil
    • googleGetAuthResponse
• Rendering
  • <GoogleLogin> & <GoogleLogout>
  • Text, Color, Width
  • <CustomGoogleLogin> & <CustomGoogleLogout>

How it works

This module is composed by two kind of components :

• <GoogleAPI> used to inject and initialize the Google Api with your Google client ID, follow this Google's documentation to get yours
• <GoogleLogin> <GoogleLogout> <CustomGoogleLogin> <CustomGoogleLogout> components used to display buttons and connect each clickEvents to Google Oauth Api.

Install

npm install react-google-oauth

How use it

1- Inject and init Google API script

Add <GoogleAPI> component in your tree

import React from 'react';
import ReactDOM from 'react-dom';
import {GoogleAPI} from 'react-google-oauth'

ReactDOM.render(
        <GoogleAPI clientId="YOUR CLIENT ID"
            onUpdateSigninStatus={Function}
            onInitFailure={Function} >
         	<YourApp />
        </GoogleAPI>, document.getElementById('root'));

By default the Google API is initialize to make a simple Oauth with profile...

Caution : As other React component <GoogleAPI> can have only one child

GooleAPI props

See Google documentation for complete values

onUpdateSigninStatus - Callback

Doc : listen for changes in the current user's sign-in state

A function that takes a boolean value. Passes true to this function when the user signs in, and false when the user signs out.

onInitFailure - Callback

The function called with an object containing an error property, if GoogleAuth failed to initialize

2- Add a button

Add a button component under GoogleAPI (each button component check if it is a child of GoogleAPI, if not an error message is displayed)

import React from 'react';
import ReactDOM from 'react-dom';
import {GoogleAPI,GoogleLogin,GoogleLogout} from 'react-google-oauth'

ReactDOM.render(
        <GoogleAPI clientId="YOUR CLIENT ID"
            onUpdateSigninStatus={CALLBACK}
            onInitFailure={CALLBACK} >
			<div>
              	<div><GoogleLogin /></div>
              	<div><GoogleLogout /></div>
    		</div>
        </GoogleAPI>, document.getElementById('root'));

GoogleLogin params

GoogleLogout params

3- Get informations

Tow methods can help you to get informations

googleGetBasicProfil

return {id : basicProfile.getId(),
name : basicProfile.getName(),
givenName :basicProfile.getGivenName(),
familyName : basicProfile.getFamilyName(),
imageUrl : basicProfile.getImageUrl(),
email : basicProfile.getEmail(),
hostedDomain : authInstance.currentUser.get().getHostedDomain(),
scopes:authInstance.currentUser.get().getGrantedScopes()}

googleGetAuthResponse

return {accessToken : authResponse.access_token,
id_token : authResponse.id_token,
scope : authResponse.scope,
expiresIn : authResponse.expires_in,
firstIssuedAt : authResponse.first_issued_at,
expiresAt : authResponse.expires_at}

Rendering

<GoogleLogin> & <GoogleLogout>

Without parameters, buttons look like this :

<GoogleLogin />
<GoogleLogout />

Text, Color, Width

With pre-define rendering you can only change the text, the width and the background color.

Sample

<GoogleLogin 
  	backgroundColor="#A31515" 
  	text="login"
  	width="180px"
  	/>

Hover and active state are automaticaly generate (opacity 50% for Hover state and filter:brightness(80%) for active state.)

Login button

Logout button

<CustomGoogleLogin> & <CustomGoogleLogout>

With CustomGoogleLogin and CustomeGoogleLogout you can custom button as you want.

Sample with this rendering

<CustomGoogleLogout tag="div" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" clipRule="evenodd" fillRule="evenodd" viewBox="0 0 500 500">
	<defs><linearGradient gradientUnits="userSpaceOnUse" id="a" x1="362.554" x2="47" y1="227.99" y2="227.99"><stop offset="0" stopColor="#008BFF" /><stop offset="1" stopColor="#0af" />
	</linearGradient></defs>
	<g>
		<rect fill="#D5D6D6" height="389" rx="23" ry="22" width="250" x="210" y="35" />
		<path d="M293 35h144c13 0 23 10 23 23v327c0 13-11 26-23 23l-144-35c-12-3-23-10-23-23v-292c0-13 10-23 23-23z" fill="#f5f5f5" stroke="#434242" strokeWidth="10" />
		<rect fill="none" height="389" rx="23" ry="22" stroke="#434242" strokeWidth="30" width="250" x="210" y="35" />
		<path d="M359 236l-95 73c-4 2-7 3-11 1-3-2-6-5-6-9v-42h-190c-5 0-10-5-10-10v-40c0-5 4-10 10-10h190v-44c0-4 3-7 6-9 4-2 7-1 11 1l95 73c2 2 4 5 4 8s-2 6-4 8z" fill="url(#a)" stroke="#434242" strokeWidth="10" />
	</g>
</svg>
</CustomGoogleLogout>