react-google-login-bcamarneiro v5.2.2
React Google Login
A Google oAUth Sign-in / Log-in Component for React
Storybook
Install
npm install react-google-login
How to use
import React from "react";
import ReactDOM from "react-dom";
import GoogleLogin from "react-google-login";
// or
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}
cookiePolicy={"single_host_origin"}
/>,
document.getElementById("googleButton")
);
Google button without styling or custom button
ReactDOM.render(
<GoogleLogin
clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
render={(renderProps) => (
<button onClick={renderProps.onClick} disabled={renderProps.disabled}>
This is my custom Google button
</button>
)}
buttonText="Login"
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={"single_host_origin"}
/>,
document.getElementById("googleButton")
);
Stay Logged in
isSignedIn={true}
attribute will call onSuccess
callback on load to keep the user signed in.
<GoogleLogin
clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
onSuccess={responseGoogle}
isSignedIn={true}
/>
Login Hook
import { useGoogleLogin } from "react-google-login";
const { signIn, loaded } = useGoogleLogin({
onSuccess,
onAutoLoadFinished,
clientId,
cookiePolicy,
loginHint,
hostedDomain,
autoLoad,
isSignedIn,
fetchBasicProfile,
redirectUri,
discoveryDocs,
onFailure,
uxMode,
scope,
accessType,
responseType,
jsSrc,
onRequest,
prompt,
pluginName,
});
Logout Hook
import { useGoogleLogout } from "react-google-login";
const { signOut, loaded } = useGoogleLogout({
jsSrc,
onFailure,
clientId,
cookiePolicy,
loginHint,
hostedDomain,
fetchBasicProfile,
discoveryDocs,
uxMode,
redirectUri,
scope,
accessType,
onLogoutSuccess,
});
onSuccess callback
If responseType is not 'code', callback will return the GoogleAuth object.
If responseType is 'code', callback will return the authorization code that can be used to retrieve a refresh token from the 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.tokenId
orres.getAuthResponse().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.
Logout
Use GoogleLogout button to logout the user from google.
import { GoogleLogout } from "react-google-login";
<GoogleLogout
clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
buttonText="Logout"
onLogoutSuccess={logout}
></GoogleLogout>;
Login Props
params | value | default value | description | ||
---|---|---|---|---|---|
clientId | string | REQUIRED | You can create a clientID by creating a new project on Google developers website. | ||
jsSrc | string | https://apis.google.com/js/api.js | URL of the Javascript file normally hosted by Google | ||
hostedDomain | string | - | The G Suite domain to which users must belong to sign in | ||
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. | ||
accessType | string | online | Can be either 'online' or 'offline'. Use offline with responseType 'code' to retrieve an authorization code for fetching a refresh token | ||
onSuccess | function | REQUIRED | |||
onFailure | function | REQUIRED | |||
onScriptLoadFailure | function | - | If defined, will be called when loading the 'google-login' script fails (otherwise onFailure will be called) | ||
onRequest | function | - | |||
onAutoLoadFinished | function | - | |||
buttonText | string | Login with Google | |||
className | string | - | |||
style | object | - | |||
disabledStyle | object | - | |||
loginHint | string | - | |||
prompt | string | - | Can be 'consent' to force google return refresh token. | ||
tag | string | button | sets element tag (div, a, span, etc | ||
type | string | button | sets button type (submit | button) | |
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. | ||
theme | string | light | If set to dark the button will follow the Google brand guidelines for dark. Otherwise it will default to light (https://developers.google.com/identity/branding-guidelines) | ||
icon | boolean | true | Show (true ) or hide (false ) the Google Icon | ||
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 | ||
render | function | - | Render prop to use a custom element, use renderProps.onClick |
Google Scopes List: scopes
Logout Props
params | value | default value | description | ||
---|---|---|---|---|---|
clientId | string | REQUIRED | You can create a clientID by creating a new project on Google developers website. | ||
jsSrc | string | https://apis.google.com/js/api.js | URL of the Javascript file normally hosted by Google | ||
hostedDomain | string | - | The G Suite domain to which users must belong to sign in | ||
scope | string | profile email | |||
accessType | string | online | Can be either 'online' or 'offline'. Use offline with responseType 'code' to retrieve an authorization code for fetching a refresh token | ||
onLogoutSuccess | function | REQUIRED | |||
onFailure | function | REQUIRED | |||
onScriptLoadFailure | function | - | If defined, will be called when loading the 'google-login' script fails (otherwise onFailure will be called) | ||
buttonText | string | Logout of Google | |||
className | string | - | |||
disabledStyle | object | - | |||
loginHint | string | - | |||
tag | string | button | sets element tag (div, a, span, etc | ||
type | string | button | sets button type (submit | button) | |
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. | ||
theme | string | light | If set to dark the button will follow the Google brand guidelines for dark. Otherwise it will default to light (https://developers.google.com/identity/branding-guidelines) | ||
icon | boolean | true | Show (true ) or hide (false ) the Google Icon | ||
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 | ||
render | function | - | Render prop to use a custom element, use renderProps.onClick |
Google Scopes List: scopes
onSuccess callback ( w/ offline false)
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 |
onSuccess callback ( w/ offline true)
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
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:
Dev Server
npm run start
Default dev server runs at localost:8080 in browser. You can set IP and PORT in webpack.config.dev.js
Run Tests
npm run test:watch
Production Bundle
npm run bundle
Deploy Storybook
npm run deploy-storybook
Checkout my other login: React Instagram Login
Checkout keppelen's React Facebook Login
Follow me on Twitter: @anthonyjgrove
npm