Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/MomenSherif/react-oauth/llms.txt

Use this file to discover all available pages before exploring further.

GoogleOAuthProvider is the required wrapper for your application. It loads the Google Identity Services (GSI) JavaScript library and exposes the OAuth client ID through React context. All other components and hooks from @react-oauth/google must be rendered inside this provider.

​
Usage

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

export default function App() {
  return (
    <GoogleOAuthProvider clientId="<your_client_id>">
      {/* Your app components */}
    </GoogleOAuthProvider>
  );
}
Get your client ID from the Google API Console. Add both http://localhost and http://localhost:<port_number> to the Authorized JavaScript origins for local development.

​
Props

​
clientId
string
required
Your Google API client ID. You can find this value in the Google API Console.
​
nonce
string
Nonce string applied to the GSI script tag. This value propagates to the GSI inline style tag, which is useful for Content Security Policy (CSP) compliance.
​
locale
string
Override the default locale for all child Google components. When set, button labels and prompts are rendered in the specified language.
​
onScriptLoadSuccess
() => void
Callback fired when the GSI script loads successfully.
​
onScriptLoadError
() => void
Callback fired when the GSI script fails to load. Use this to show a fallback UI or log the error.

​
Accessing context

Use the useGoogleOAuth hook inside any descendant component to access the values exposed by this provider: 
import { useGoogleOAuth } from '@react-oauth/google';

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

  if (!scriptLoadedSuccessfully) {
    return <p>Loading Google services...</p>;
  }

  return <p>Client ID: {clientId}</p>;
}
All hooks and components from @react-oauth/google throw an error if used outside of GoogleOAuthProvider. Always render the provider at or near the root of your component tree.

Build docs developers (and LLMs) love

Get started for freeTalk to us