Helper Functions

Utility functions for signing out and checking granted OAuth scopes.

These standalone functions complement the React components and hooks provided by @react-oauth/google.

googleLogout

Disables automatic sign-in by calling google.accounts.id.disableAutoSelect(). Call this whenever the user signs out of your application to prevent Google One Tap from automatically signing them back in.

Signature

function googleLogout(): void

Usage

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

function LogoutButton() {
  const handleLogout = () => {
    googleLogout();
    // clear your local session state here
  };

  return <button onClick={handleLogout}>Sign out</button>;
}

If you use One Tap or automatic sign-in and do not call googleLogout on sign-out, Google may automatically sign the user back in on their next visit. See the Google documentation for more detail.

---

hasGrantedAllScopesGoogle

Checks whether the user has granted all of the specified OAuth scopes in a given token response.

Signature

function hasGrantedAllScopesGoogle(
  tokenResponse: TokenResponse,
  firstScope: string,
  ...restScopes: string[]
): boolean

Parameters

tokenResponse · TokenResponse · required

The token response object returned by useGoogleLogin in implicit flow.

Show TokenResponse properties

access_token · string · required

The OAuth 2.0 access token.

expires_in · number · required

The lifetime of the access token in seconds.

token_type · string · required

The token type. Always Bearer.

scope · string · required

A space-delimited list of scopes granted by the user.

prompt · string · required

The prompt value used during authorization.

hd · string

The hosted Workspace domain of the signed-in user.

state · string

The state string from the authorization request.

firstScope · string · required

The first scope to check. At least one scope is required.

...restScopes · string[]

Additional scopes to check.

Return value

Returns true if the user has granted every specified scope. Returns false if any scope is missing or if the Google library is not loaded.

Usage

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

function DriveButton() {
  const login = useGoogleLogin({
    onSuccess: tokenResponse => {
      const hasAccess = hasGrantedAllScopesGoogle(
        tokenResponse,
        'https://www.googleapis.com/auth/drive.readonly',
        'https://www.googleapis.com/auth/drive.metadata',
      );

      if (hasAccess) {
        // proceed with Drive API calls
      }
    },
    scope: 'https://www.googleapis.com/auth/drive.readonly https://www.googleapis.com/auth/drive.metadata',
  });

  return <button onClick={() => login()}>Connect Google Drive</button>;
}

---

hasGrantedAnyScopeGoogle

Checks whether the user has granted at least one of the specified OAuth scopes in a given token response.

Signature

function hasGrantedAnyScopeGoogle(
  tokenResponse: TokenResponse,
  firstScope: string,
  ...restScopes: string[]
): boolean

Parameters

tokenResponse · TokenResponse · required

The token response object returned by useGoogleLogin in implicit flow. See the TokenResponse properties listed under hasGrantedAllScopesGoogle above.

firstScope · string · required

The first scope to check. At least one scope is required.

...restScopes · string[]

Additional scopes to check.

Return value

Returns true if the user has granted at least one of the specified scopes. Returns false if none of the scopes are granted or if the Google library is not loaded.

Usage

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

function CalendarButton() {
  const login = useGoogleLogin({
    onSuccess: tokenResponse => {
      const hasAccess = hasGrantedAnyScopeGoogle(
        tokenResponse,
        'https://www.googleapis.com/auth/calendar',
        'https://www.googleapis.com/auth/calendar.readonly',
      );

      if (hasAccess) {
        // proceed with Calendar API calls
      }
    },
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  });

  return <button onClick={() => login()}>Connect Google Calendar</button>;
}