Skip to content

fix id token #342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
33 changes: 24 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ useGoogleOneTapLogin({
});
```

### Custom login button (implicit & authorization code flow)
### Custom login button (implicit, authorization code & credential flow)

#### Implicit flow

Expand All @@ -140,7 +140,9 @@ const login = useGoogleLogin({
onSuccess: tokenResponse => console.log(tokenResponse),
});

<MyCustomButton onClick={() => login()}>Sign in with Google 🚀</MyCustomButton>;
<MyCustomButton onClick={() => login()}>
Sign in with Google 🚀{' '}
</MyCustomButton>;
```

#### Authorization code flow
Expand All @@ -155,7 +157,26 @@ const login = useGoogleLogin({
flow: 'auth-code',
});

<MyCustomButton onClick={() => login()}>Sign in with Google 🚀</MyCustomButton>;
<MyCustomButton onClick={() => login()}>
Sign in with Google 🚀{' '}
</MyCustomButton>;
```

#### Credential flow

This will return a JWT token in `tokenResponse.credential`.

```jsx
import { useGoogleLogin } from '@react-oauth/google';

const login = useGoogleLogin({
onSuccess: credentialsResponse => console.log(tokenResponse),
flow: 'credential',
});

<MyCustomButton onClick={() => login()}>
Sign in with Google 🚀{' '}
</MyCustomButton>;
```

#### Checks if the user granted all the specified scope or scopes
Expand All @@ -182,16 +203,13 @@ const hasAccess = hasGrantedAnyScopeGoogle(
);
```

#### [Content Security Policy (if needed)](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#content_security_policy)

## API

### GoogleOAuthProvider

| Required | Prop | Type | Description |
| :------: | ------------------- | ---------- | --------------------------------------------------------------------------- |
| ✓ | clientId | `string` | [**Google API client ID**](https://console.cloud.google.com/apis/dashboard) |
| | nonce | `string` | Nonce applied to GSI script tag. Propagates to GSI's inline style tag |
| | onScriptLoadSuccess | `function` | Callback fires on load gsi script success |
| | onScriptLoadError | `function` | Callback fires on load gsi script failure |

Expand Down Expand Up @@ -225,7 +243,6 @@ const hasAccess = hasGrantedAnyScopeGoogle(
| | intermediate_iframe_close_callback | `function` | Overrides the default intermediate iframe behavior when users manually close One Tap |
| | itp_support | `boolean` | Enables upgraded One Tap UX on ITP browsers |
| | hosted_domain | `string` | If your application knows the Workspace domain the user belongs to, use this to provide a hint to Google. For more information, see the [hd](https://developers.google.com/identity/protocols/oauth2/openid-connect#authenticationuriparameters) field in the OpenID Connect docs |
| | use_fedcm_for_prompt | `boolean` | Allow the browser to control user sign-in prompts and mediate the sign-in flow between your website and Google. |

### useGoogleLogin (Both implicit & authorization code flow)

Expand Down Expand Up @@ -265,5 +282,3 @@ const hasAccess = hasGrantedAnyScopeGoogle(
| | promptMomentNotification | `(notification: PromptMomentNotification) => void` | [PromptMomentNotification](https://developers.google.com/identity/gsi/web/reference/js-reference) methods and description |
| | cancel_on_tap_outside | `boolean` | Controls whether to cancel the prompt if the user clicks outside of the prompt |
| | hosted_domain | `string` | If your application knows the Workspace domain the user belongs to, use this to provide a hint to Google. For more information, see the [hd](https://developers.google.com/identity/protocols/oauth2/openid-connect#authenticationuriparameters) field in the OpenID Connect docs |
| | disabled | `boolean` | Controls whether to cancel the popup in cases such as when the user is already logged in |
| | use_fedcm_for_prompt | `boolean` | Allow the browser to control user sign-in prompts and mediate the sign-in flow between your website and Google. |
35 changes: 25 additions & 10 deletions packages/@react-oauth/google/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ $ npm install @react-oauth/google@latest
$ yarn add @react-oauth/google@latest
```

## Demo & How to use to fetch user details
## Demo

https://react-oauth.vercel.app/

Expand Down Expand Up @@ -129,7 +129,7 @@ useGoogleOneTapLogin({
});
```

### Custom login button (implicit & authorization code flow)
### Custom login button (implicit, authorization code & credential flow)

#### Implicit flow

Expand All @@ -140,7 +140,9 @@ const login = useGoogleLogin({
onSuccess: tokenResponse => console.log(tokenResponse),
});

<MyCustomButton onClick={() => login()}>Sign in with Google 🚀</MyCustomButton>;
<MyCustomButton onClick={() => login()}>
Sign in with Google 🚀{' '}
</MyCustomButton>;
```

#### Authorization code flow
Expand All @@ -155,7 +157,26 @@ const login = useGoogleLogin({
flow: 'auth-code',
});

<MyCustomButton onClick={() => login()}>Sign in with Google 🚀</MyCustomButton>;
<MyCustomButton onClick={() => login()}>
Sign in with Google 🚀{' '}
</MyCustomButton>;
```

#### Credential flow

This will return a JWT token in `tokenResponse.credential`.

```jsx
import { useGoogleLogin } from '@react-oauth/google';

const login = useGoogleLogin({
onSuccess: credentialsResponse => console.log(tokenResponse),
flow: 'credential',
});

<MyCustomButton onClick={() => login()}>
Sign in with Google 🚀{' '}
</MyCustomButton>;
```

#### Checks if the user granted all the specified scope or scopes
Expand All @@ -182,16 +203,13 @@ const hasAccess = hasGrantedAnyScopeGoogle(
);
```

#### [Content Security Policy (if needed)](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#content_security_policy)

## API

### GoogleOAuthProvider

| Required | Prop | Type | Description |
| :------: | ------------------- | ---------- | --------------------------------------------------------------------------- |
| ✓ | clientId | `string` | [**Google API client ID**](https://console.cloud.google.com/apis/dashboard) |
| | nonce | `string` | Nonce applied to GSI script tag. Propagates to GSI's inline style tag |
| | onScriptLoadSuccess | `function` | Callback fires on load gsi script success |
| | onScriptLoadError | `function` | Callback fires on load gsi script failure |

Expand Down Expand Up @@ -225,7 +243,6 @@ const hasAccess = hasGrantedAnyScopeGoogle(
| | intermediate_iframe_close_callback | `function` | Overrides the default intermediate iframe behavior when users manually close One Tap |
| | itp_support | `boolean` | Enables upgraded One Tap UX on ITP browsers |
| | hosted_domain | `string` | If your application knows the Workspace domain the user belongs to, use this to provide a hint to Google. For more information, see the [hd](https://developers.google.com/identity/protocols/oauth2/openid-connect#authenticationuriparameters) field in the OpenID Connect docs |
| | use_fedcm_for_prompt | `boolean` | Allow the browser to control user sign-in prompts and mediate the sign-in flow between your website and Google. |

### useGoogleLogin (Both implicit & authorization code flow)

Expand Down Expand Up @@ -265,5 +282,3 @@ const hasAccess = hasGrantedAnyScopeGoogle(
| | promptMomentNotification | `(notification: PromptMomentNotification) => void` | [PromptMomentNotification](https://developers.google.com/identity/gsi/web/reference/js-reference) methods and description |
| | cancel_on_tap_outside | `boolean` | Controls whether to cancel the prompt if the user clicks outside of the prompt |
| | hosted_domain | `string` | If your application knows the Workspace domain the user belongs to, use this to provide a hint to Google. For more information, see the [hd](https://developers.google.com/identity/protocols/oauth2/openid-connect#authenticationuriparameters) field in the OpenID Connect docs |
| | disabled | `boolean` | Controls whether to cancel the popup in cases such as when the user is already logged in |
| | use_fedcm_for_prompt | `boolean` | Allow the browser to control user sign-in prompts and mediate the sign-in flow between your website and Google. |
Loading