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

Add support for multiple login buttons with different scopes + minor naming change #494

Open
eliranamar wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add support for multiple login buttons with different scopes + minor naming change #494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 30 additions & 30 deletions README.md
View file
Open in desktop
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` |
Copy link
Author

@eliranamar eliranamar Dec 21, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please view this file diff in rich text mode

| 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
Open in desktop
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