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

Commit 7c8eb9a

Browse files
author
Eliran Amar
committed
Add support for multiple login buttons with different scopes
1 parent 7db5b96 commit 7c8eb9a

File tree

2 files changed

+41
-35
lines changed

2 files changed

+41
-35
lines changed

‎README.md‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -137,37 +137,37 @@ Use GoogleLogout button to logout the user from google.
137137
```
138138
## Login Props
139139

140-
| params | value | default value | description |
141-
|:------------:|:--------:|:------------------------------------:|:----------------:|
142-
| 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) |
143-
| jsSrc | string |https://apis.google.com/js/api.js|URL of the Javascript file normally hosted by Google|
144-
| hostedDomain | string | - |The G Suite domain to which users must belong to sign in|
145-
| scope | string | profile email | |
146-
| 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.
147-
| accessType | string | online | Can be either 'online' or 'offline'. Use offline with responseType 'code' to retrieve an authorization code for fetching a refresh token |
148-
| onSuccess | function | REQUIRED | |
149-
| onFailure | function | REQUIRED | |
150-
| onScriptLoadFailure | function | - | If defined, will be called when loading the 'google-login' script fails (otherwise onFailure will be called) |
151-
| onRequest | function | - | |
152-
| onAutoLoadFinished | function | - | |
153-
| buttonText | string | Login with Google | |
154-
| className | string | - | |
155-
| style | object | - | |
156-
| disabledStyle| object | - | |
157-
| loginHint | string | - | |
158-
| prompt | string | - | Can be 'consent' to force google return refresh token. |
159-
| tag | string | button | sets element tag (div, a, span, etc |
160-
| type | string | button |sets button type (submit || button) |
161-
| autoLoad | boolean | false | |
162-
| fetchBasicProfile | boolean | true | |
163-
| disabled | boolean | false | |
140+
| params | value | default value | description |
141+
|:------------:|:--------:|:------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
142+
| 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) |
143+
| jsSrc | string | https://apis.google.com/js/api.js | URL of the Javascript file normally hosted by Google |
144+
| hostedDomain | string | - | The G Suite domain to which users must belong to sign in |
145+
| scope | string | profile email | Base scopes requested, Passing `scope` prop will be added additionally to `profile email`. Passing none will request only `profile email` |
146+
| 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.
147+
| accessType | string | online | Can be either 'online' or 'offline'. Use offline with responseType 'code' to retrieve an authorization code for fetching a refresh token |
148+
| onSuccess | function | REQUIRED | |
149+
| onFailure | function | REQUIRED | |
150+
| onScriptLoadFailure | function | - | If defined, will be called when loading the 'google-login' script fails (otherwise onFailure will be called) |
151+
| onRequest | function | - | |
152+
| onAutoLoadFinished | function | - | |
153+
| buttonText | string | Login with Google | |
154+
| className | string | - | |
155+
| style | object | - | |
156+
| disabledStyle| object | - | |
157+
| loginHint | string | - | |
158+
| prompt | string | - | Can be 'consent' to force google return refresh token. |
159+
| tag | string | button | sets element tag (div, a, span, etc |
160+
| type | string | button | sets button type (submit || button) |
161+
| autoLoad | boolean | false | |
162+
| fetchBasicProfile | boolean | true | |
163+
| disabled | boolean | false | |
164164
| discoveryDocs | - | https://developers.google.com/discovery/v1/using |
165-
| uxMode | string | popup | The UX mode to use for the sign-in flow. Valid values are popup and redirect. |
166-
| 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) |
167-
| icon | boolean | true | Show (`true`) or hide (`false`) the Google Icon |
168-
| 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. |
169-
| isSignedIn | boolean | false | If true will return GoogleUser object on load, if user has given your app permission |
170-
| render | function | - | Render prop to use a custom element, use renderProps.onClick |
165+
| uxMode | string | popup | The UX mode to use for the sign-in flow. Valid values are popup and redirect. |
166+
| 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) |
167+
| icon | boolean | true | Show (`true`) or hide (`false`) the Google Icon |
168+
| 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. |
169+
| isSignedIn | boolean | false | If true will return GoogleUser object on load, if user has given your app permission |
170+
| render | function | - | Render prop to use a custom element, use renderProps.onClick |
171171
Google Scopes List: [scopes](https://developers.google.com/identity/protocols/googlescopes)
172172

173173
## Logout Props

‎src/use-google-login.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const useGoogleLogin = ({
2626
}) => {
2727
const [loaded, setLoaded] = useState(false)
2828

29-
function handleSigninSuccess(res) {
29+
function handleSignInSuccess(res) {
3030
/*
3131
offer renamed response keys to names that match use
3232
*/
@@ -56,6 +56,12 @@ const useGoogleLogin = ({
5656
const options = {
5757
prompt
5858
}
59+
// Add to the default scopes (email profile) the additional scopes required if passed via props
60+
// Read more at https://developers.google.com/identity/sign-in/web/reference#gapiauth2offlineaccessoptions
61+
if (scope) {
62+
options.scope = scope
63+
}
64+
5965
onRequest()
6066
if (responseType === 'code') {
6167
GoogleAuth.grantOfflineAccess(options).then(
@@ -64,7 +70,7 @@ const useGoogleLogin = ({
6470
)
6571
} else {
6672
GoogleAuth.signIn(options).then(
67-
res => handleSigninSuccess(res),
73+
res => handleSignInSuccess(res),
6874
err => onFailure(err)
6975
)
7076
}
@@ -80,6 +86,7 @@ const useGoogleLogin = ({
8086
'google-login',
8187
jsSrc,
8288
() => {
89+
// Not passing 'scope' to the params will use the default "email profile" scope.
8390
const params = {
8491
client_id: clientId,
8592
cookie_policy: cookiePolicy,
@@ -89,7 +96,6 @@ const useGoogleLogin = ({
8996
discoveryDocs,
9097
ux_mode: uxMode,
9198
redirect_uri: redirectUri,
92-
scope,
9399
access_type: accessType
94100
}
95101

@@ -107,7 +113,7 @@ const useGoogleLogin = ({
107113
const signedIn = isSignedIn && res.isSignedIn.get()
108114
onAutoLoadFinished(signedIn)
109115
if (signedIn) {
110-
handleSigninSuccess(res.currentUser.get())
116+
handleSignInSuccess(res.currentUser.get())
111117
}
112118
}
113119
},
@@ -126,7 +132,7 @@ const useGoogleLogin = ({
126132
if (isSignedIn && GoogleAuth.isSignedIn.get()) {
127133
setLoaded(true)
128134
onAutoLoadFinished(true)
129-
handleSigninSuccess(GoogleAuth.currentUser.get())
135+
handleSignInSuccess(GoogleAuth.currentUser.get())
130136
} else {
131137
setLoaded(true)
132138
onAutoLoadFinished(false)

0 commit comments

Comments
 (0)