goo
@react-oauth/google
npm i @react-oauth/google
goo

@react-oauth/google

Google OAuth2 using the new Google Identity Services SDK for React πŸš€

by Mo'men Sherif

0.9.0 (see all)License:MITTypeScript:Built-In
npm i @react-oauth/google
Readme

React OAuth2 | Google

Google OAuth2 using the new Google Identity Services SDK for React @react-oauth/googleπŸš€

Install

$ npm install @react-oauth/google@latest

# or

$ yarn add @react-oauth/google@latest

Demo

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

Seamless sign-in and sign-up flows

Sign In With Google

Add a personalized and customizable sign-up or sign-in button to your website.

personalized button

One-tap sign-up

Sign up new users with just one tap, without interrupting them with a sign-up screen. Users get a secure, token-based, passwordless account on your site, protected by their Google Account.

One-tap sign-up

Automatic sign-in

Sign users in automatically when they return to your site on any device or browser, even after their session expires.

Automatic sign-in

User authorization for Google APIs (with custom button)

OAuth 2.0 implicit and authorization code flows for web apps

The Google Identity Services JavaScript library helps you to quickly and safely obtain access tokens necessary to call Google APIs. Your web application, complete either the OAuth 2.0 implicit flow, or to initiate the authorization code flow which then finishes on your backend platform.

How to use

  1. Get your Google API client ID

Key Point: Add both http://localhost and http://localhost:<port_number> to the Authorized JavaScript origins box for local tests or development.

  1. Configure your OAuth Consent Screen

  2. Wrap your application with GoogleOAuthProvider

import { GoogleOAuthProvider } from '@react-oauth/google';

<GoogleOAuthProvider clientId="<your_client_id>">...</GoogleOAuthProvider>;

Sign In With Google

import { GoogleLogin } from '@react-oauth/google';

<GoogleLogin
  onSuccess={credentialResponse => {
    console.log(credentialResponse);
  }}
  onError={() => {
    console.log('Login Failed');
  }}
/>;

One-tap

import { useGoogleOneTapLogin } from '@react-oauth/google';

useGoogleOneTapLogin({
  onSuccess: credentialResponse => {
    console.log(credentialResponse);
  },
  onError: () => {
    console.log('Login Failed');
  },
});

or

import { GoogleLogin } from '@react-oauth/google';

<GoogleLogin
  onSuccess={credentialResponse => {
    console.log(credentialResponse);
  }}
  onError={() => {
    console.log('Login Failed');
  }}
  useOneTap
/>;

If you are using one tap login, when logging user out consider this issue may happen, to prevent it call googleLogout when logging user out from your application.

import { googleLogout } from '@react-oauth/google';

googleLogout();

Automatic sign-in

auto_select prop true


<GoogleLogin
    ...
    auto_select
/>

useGoogleOneTapLogin({
    ...
    auto_select
});

Custom login button (implicit & authorization code flow)

Implicit flow

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

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

<MyCustomButton onClick={() => login()}>
  Sign in with Google πŸš€{' '}
</MyCustomButton>;

Authorization code flow

Requires backend to exchange code with access and refresh token.

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

const login = useGoogleLogin({
  onSuccess: codeResponse => console.log(codeResponse),
  flow: 'auth-code',
});

<MyCustomButton onClick={() => login()}>
  Sign in with Google πŸš€{' '}
</MyCustomButton>;

Checks if the user granted all the specified scope or scopes

import { hasGrantedAllScopesGoogle } from '@react-oauth/google';

const hasAccess = hasGrantedAllScopesGoogle(
  tokenResponse,
  'google-scope-1',
  'google-scope-2',
);

Checks if the user granted any of the specified scope or scopes

import { hasGrantedAnyScopeGoogle } from '@react-oauth/google';

const hasAccess = hasGrantedAnyScopeGoogle(
  tokenResponse,
  'google-scope-1',
  'google-scope-2',
);

API

GoogleOAuthProvider

RequiredPropTypeDescription
βœ“clientIdstringGoogle API client ID
onScriptLoadSuccessfunctionCallback fires on load gsi script success
onScriptLoadErrorfunctionCallback fires on load gsi script failure

GoogleLogin

RequiredPropTypeDescription
βœ“onSuccess(response: CredentialResponse) => voidCallback fires with credential response after successfully login
onErrorfunctionCallback fires after login failure
typestandard | iconButton type type
themeoutline | filled_blue | filled_blackButton theme
sizelarge | medium | smallButton size
textsignin_with | signup_with | continue_with | signinButton text. For example, "Sign in with Google", "Sign up with Google" or "Sign in"
shaperectangular | pill | circle | squareButton shape
logo_alignmentleft | centerGoogle logo alignment
widthstringbutton width, in pixels
localestringIf set, then the button language is rendered
useOneTapbooleanActivate One-tap sign-up or not
promptMomentNotification(notification: PromptMomentNotification) => voidPromptMomentNotification methods and description
cancel_on_tap_outsidebooleanControls whether to cancel the prompt if the user clicks outside of the prompt
auto_selectbooleanEnables automatic selection on Google One Tap
ux_modepopup | redirectThe Sign In With Google button UX flow
login_uristringThe URL of your login endpoint
native_login_uristringThe URL of your password credential handler endpoint
native_callback(response: { id: string; password: string }) => voidThe JavaScript password credential handler function name
prompt_parent_idstringThe DOM ID of the One Tap prompt container element
noncestringA random string for ID tokens
contextsignin | signup | useThe title and words in the One Tap prompt
state_cookie_domainstringIf you need to call One Tap in the parent domain and its subdomains, pass the parent domain to this attribute so that a single shared cookie is used
allowed_parent_originstring | string[]The origins that are allowed to embed the intermediate iframe. One Tap will run in the intermediate iframe mode if this attribute presents
intermediate_iframe_close_callbackfunctionOverrides the default intermediate iframe behavior when users manually close One Tap
itp_supportbooleanEnables upgraded One Tap UX on ITP browsers
hosted_domainstringIf your application knows the Workspace domain the user belongs to, use this to provide a hint to Google. For more information, see the hd field in the OpenID Connect docs

useGoogleLogin (Both implicit & authorization code flow)

RequiredPropTypeDescription
flowimplicit | auth-codeTwo flows, implicit and authorization code are discussed. Both return an access token suitable for use with Google APIs
onSuccess(response: TokenResponse\|CodeResponse) => voidCallback fires with response (token | code) based on flow selected after successfully login
onError(errorResponse: {error: string; error_description?: string,error_uri?: string}) => voidCallback fires after login failure
onNonOAuthError(nonOAuthError: NonOAuthError) => voidSome non-OAuth errors, such as the popup window is failed to open or closed before an OAuth response is returned. popup_failed_to_open | popup_closed | unknown
scopestringA space-delimited list of scopes that are approved by the user
enable_serial_consentbooleandefaults to true. If set to false, more granular Google Account permissions will be disabled for clients created before 2019. No effect for newer clients, since more granular permissions is always enabled for them.
hintstringIf your application knows which user should authorize the request, it can use this property to provide a hint to Google. The email address for the target user. For more information, see the login_hint field in the OpenID Connect docs
hosted_domainstringIf your application knows the Workspace domain the user belongs to, use this to provide a hint to Google. For more information, see the hd field in the OpenID Connect docs

useGoogleLogin (Extra implicit flow props)

RequiredPropTypeDescription
prompt'' | none | consent | select_accountdefaults to 'select_account'. A space-delimited, case-sensitive list of prompts to present the user
statestringNot recommended. Specifies any string value that your application uses to maintain state between your authorization request and the authorization server's response

useGoogleLogin (Extra authorization code flow props)

RequiredPropTypeDescription
ux_modepopup | redirectThe UX mode to use for the authorization flow. By default, it will open the consent flow in a popup. Valid values are popup and redirect
redirect_uristringRequired for redirect UX. Determines where the API server redirects the user after the user completes the authorization flow The value must exactly match one of the authorized redirect URIs for the OAuth 2.0 client which you configured in the API Console and must conform to our Redirect URI validation rules. The property will be ignored by the popup UX
statestringRecommended for redirect UX. Specifies any string value that your application uses to maintain state between your authorization request and the authorization server's response
select_accountbooleandefaults to 'false'. Boolean value to prompt the user to select an account

useGoogleOneTapLogin

RequiredPropTypeDescription
βœ“onSuccess(response: CredentialResponse) => voidCallback fires with credential response after successfully login
onErrorfunctionCallback fires after login failure
promptMomentNotification(notification: PromptMomentNotification) => voidPromptMomentNotification methods and description
cancel_on_tap_outsidebooleanControls whether to cancel the prompt if the user clicks outside of the prompt
hosted_domainstringIf your application knows the Workspace domain the user belongs to, use this to provide a hint to Google. For more information, see the hd field in the OpenID Connect docs
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate