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 :- \ used to inject and initialize the Google Api with your Google client ID, follow this Google's documentation to get yours
- \ \ \ \ 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 \ component in your treeimport 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 \ 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 | 'singlehostorigin' | | 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 stateA 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 anerror
property, if GoogleAuth
failed to initialize2°) 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 \. Fulfilled with theGoogleUser
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
\ & \
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 |