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 responseType is not 'code', callback will return the GoogleAuth object.
If responseType is 'code', 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:
- In the
responseGoogle(response) {...}
callback function, you should get back a standard JWT located atresponse.hg.id_token
- Send this token to your server (preferably as an
Authorization
header) - 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
- The returned decoded token should have an
hd
key equal to the hosted domain you'd like to restrict to.
params | value | default value | description |
---|---|---|---|
clientId | string | REQUIRED | |
hostedDomain | string | - | |
scope | string | profile email | |
responseType | string | permission | Can be either space-delimited 'id_token', to retrieve an ID Token + 'permission' (or 'token'), to retrieve an Access Token, or 'code', to retrieve an Authorization Code. |
onSuccess | function | REQUIRED | |
onFailure | function | REQUIRED | |
onRequest | function | - | |
buttonText | string | Login with Google | |
className | string | - | |
style | object | - | |
disabledStyle | object | - | |
loginHint | string | - | |
prompt | string | - | |
tag | string | button | sets element tag (div, a, span, etc |
type | string | button | sets button type (submit |
autoLoad | boolean | false | |
fetchBasicProfile | boolean | true | |
disabled | boolean | false | |
discoveryDocs | - | https://developers.google.com/discovery/v1/using | |
uxMode | string | popup | The UX mode to use for the sign-in flow. Valid values are popup and redirect. |
redirectUri | string | - | If using ux_mode='redirect', this parameter allows you to override the default redirect_uri that will be used at the end of the consent flow. The default redirect_uri is the current URL stripped of query parameters and hash fragment. |
isSignedIn | boolean | false | If true will return GoogleUser object on load, if user has given your app permission |
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.
property name | value | definition |
---|---|---|
googleId | string | Google user ID |
tokenId | string | Token Id |
accessToken | string | Access Token |
tokenObj | object | Token details object |
profileObj | object | Profile details object |
property name | value | definition |
---|---|---|
code | object | offline token |
You can also pass child components such as icons into the button component.
<GoogleLogin
clientId={'658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com'}
onSuccess={responseGoogle}
onFailure={responseGoogle}
>
<FontAwesome
name='google'
/>
<span> Login with Google</span>
</GoogleLogin>
onFailure callback is called when either initialization or a signin attempt fails.
property name | value | definition |
---|---|---|
error | string | Error code |
details | string | Detailed error description |
Common error codes include:
error code | description |
---|---|
idpiframe_initialization_failed |
initialization of the Google Auth API failed (this will occur if a client doesn't have third party cookies enabled) |
popup_closed_by_user |
The user closed the popup before finishing the sign in flow. |
access_denied |
The user denied the permission to the scopes required |
immediate_failed |
No user could be automatically selected without prompting the consent flow. |
More details can be found in the official Google docs:
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