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;
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 ="#A31515" ="login" ="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 |