Skip to content
This repository has been archived by the owner on Sep 21, 2023. It is now read-only.

Commit

Permalink
Add support for multiple login buttons with different scopes
Browse files Browse the repository at this point in the history
  • Loading branch information
Eliran Amar committed Dec 21, 2021
1 parent 7db5b96 commit 7c8eb9a
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 35 deletions.
60 changes: 30 additions & 30 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,37 +137,37 @@ Use GoogleLogout button to logout the user from google.
```
## Login Props

| params | value | default value | description |
|:------------:|:--------:|:------------------------------------:|:----------------:|
| clientId | string | REQUIRED | You can create a clientID by creating a [new project on Google developers website.](https://developers.google.com/identity/sign-in/web/sign-in) |
| 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 | |
| params | value | default value | description |
|:------------:|:--------:|:------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
| clientId | string | REQUIRED | You can create a clientID by creating a [new project on Google developers website.](https://developers.google.com/identity/sign-in/web/sign-in) |
| 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 | Base scopes requested, Passing `scope` prop will be added additionally to `profile email`. Passing none will request only `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 |
| 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](https://developers.google.com/identity/protocols/googlescopes)

## Logout Props
Expand Down
16 changes: 11 additions & 5 deletions src/use-google-login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const useGoogleLogin = ({
}) => {
const [loaded, setLoaded] = useState(false)

function handleSigninSuccess(res) {
function handleSignInSuccess(res) {
/*
offer renamed response keys to names that match use
*/
Expand Down Expand Up @@ -56,6 +56,12 @@ const useGoogleLogin = ({
const options = {
prompt
}
// Add to the default scopes (email profile) the additional scopes required if passed via props
// Read more at https://developers.google.com/identity/sign-in/web/reference#gapiauth2offlineaccessoptions
if (scope) {
options.scope = scope
}

onRequest()
if (responseType === 'code') {
GoogleAuth.grantOfflineAccess(options).then(
Expand All @@ -64,7 +70,7 @@ const useGoogleLogin = ({
)
} else {
GoogleAuth.signIn(options).then(
res => handleSigninSuccess(res),
res => handleSignInSuccess(res),
err => onFailure(err)
)
}
Expand All @@ -80,6 +86,7 @@ const useGoogleLogin = ({
'google-login',
jsSrc,
() => {
// Not passing 'scope' to the params will use the default "email profile" scope.
const params = {
client_id: clientId,
cookie_policy: cookiePolicy,
Expand All @@ -89,7 +96,6 @@ const useGoogleLogin = ({
discoveryDocs,
ux_mode: uxMode,
redirect_uri: redirectUri,
scope,
access_type: accessType
}

Expand All @@ -107,7 +113,7 @@ const useGoogleLogin = ({
const signedIn = isSignedIn && res.isSignedIn.get()
onAutoLoadFinished(signedIn)
if (signedIn) {
handleSigninSuccess(res.currentUser.get())
handleSignInSuccess(res.currentUser.get())
}
}
},
Expand All @@ -126,7 +132,7 @@ const useGoogleLogin = ({
if (isSignedIn && GoogleAuth.isSignedIn.get()) {
setLoaded(true)
onAutoLoadFinished(true)
handleSigninSuccess(GoogleAuth.currentUser.get())
handleSignInSuccess(GoogleAuth.currentUser.get())
} else {
setLoaded(true)
onAutoLoadFinished(false)
Expand Down

0 comments on commit 7c8eb9a

Please sign in to comment.