useGoogleOAuth

Context hook that exposes the GoogleOAuthProvider values to descendant components.

useGoogleOAuth reads the context provided by GoogleOAuthProvider. Use it when building custom components that need to know the current client ID, locale, or whether the Google Identity Services script has loaded.

This hook throws an error if called outside of a GoogleOAuthProvider. Always ensure your component is rendered as a descendant of the provider.

Usage

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

function CustomGoogleButton() {
  const { clientId, scriptLoadedSuccessfully } = useGoogleOAuth();

  if (!scriptLoadedSuccessfully) {
    return <button disabled>Loading...</button>;
  }

  return (
    <button
      onClick={() => {
        window.google.accounts.oauth2.initTokenClient({
          client_id: clientId,
          scope: 'openid profile email',
          callback: response => console.log(response),
        }).requestAccessToken();
      }}
    >
      Sign in with Google
    </button>
  );
}

Return value

clientId · string · required

The OAuth client ID passed to GoogleOAuthProvider.

scriptLoadedSuccessfully · boolean · required

true once the Google Identity Services script has loaded and is ready to use. false while loading or if the script failed to load.

locale · string

The locale passed to GoogleOAuthProvider, if any.

Error behavior

If useGoogleOAuth is called outside a GoogleOAuthProvider, it throws:

Google OAuth components must be used within GoogleOAuthProvider

This matches the runtime check in the source:

export function useGoogleOAuth() {
  const context = useContext(GoogleOAuthContext);
  if (!context) {
    throw new Error(
      'Google OAuth components must be used within GoogleOAuthProvider',
    );
  }
  return context;
}