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

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 complet values

| Parameters | Default value | Comment | Type | | -------------------- | ------------------------- | ---------------------------------------- | ------ | | clientId | REQUIRED | | String | | responseType | 'permission' | | String | | Prompt | '' | Doc | String | | cookiePolicy | 'single_host_origin' | | String | | fetchBasicProfile | true | Automatically add profile and email in Scope see Doc | Bool | | uxMode | 'popup' | | String | | hostedDomain | None | | String | | redirectUri | None | | String | | Scope | '' | More scope on this page | String | | onUpdateSigninStatus | f => f | See below | Func | | onInitFailure | err => console.error(err) | See below | Func |

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

| Callback | Default value | Comment | | ------------------------ | ---------------------- | ---------------------------------------- | | onLoginSuccess(response) | f => f | Function called when the authentification is done. Maybe it's more preferable to use onUpdateSigninStatus from <GoogleAPI>. Fulfilled with the GoogleUser instance when the user successfully authenticates and grants the requested scopes. | | onLoginFailure(error) | f => f | function called when a error occured. By example when a user closed the Google's popup before he choiced an account. This function take an object containing an error property. See Error Code on Google's documentation for more details. | | onRequest() | f => f | Called just before the call to Google Api Script, you can used this callback to display a loader by example. None parameter. | | Text | ' Sign in with Google' | Text displayed in button | | backgroundColor | #4285f4 | See Rendering paragraph | | disabled | False | See Rendering paragraph | | width | 240px | See Rendering paragraph |

GoogleLogout params

| Callback | Default value | Comment | | ---------------------- | ---------------------- | ---------------------------------------- | | onLogoutSuccess() | f => f | Function called when the user has been signed out | | onLogoutFailure(error) | f => f | function called when a error occured. This function take an object containing an error property. See Error Code on Google's documentation for more details. | | onRequest() | f => f | Called just before the call to Google Api Script, you can used this callback to display a loader by example. None parameter. | | Text | ' Sign in with Google' | Text displayed in button | | backgroundColor | #4285f4 | See Rendering paragraph | | disabled | False | See Rendering paragraph | | width | 240px | See Rendering paragraph |

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

| Parameter | Default value | | --------------- | ------------------- | | text | Sign in with Google | | width | 240px | | backgroundColor | #4285f4 |

Logout button

| Parameter | Default value | | --------------- | ------------- | | text | Sign out | | width | 180px | | backgroundColor | #A31515 |