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.
The GoogleLogin component renders Google’s official branded button and handles the full sign-in flow. It supports popup and redirect modes, and renders the button using Google’s own GSI (Google Identity Services) SDK.
Basic usage
import { GoogleLogin } from '@react-oauth/google';
<GoogleLogin
onSuccess={credentialResponse => {
console.log(credentialResponse);
}}
onError={() => {
console.log('Login failed');
}}
/>
onSuccess receives a CredentialResponse containing:
credential — a JWT ID token you can verify on your backendclientId — the client ID used to sign inselect_by — how the credential was selected (e.g. btn, user_1tap, auto)
Use these props to control how the button looks.
Type
Theme
Size
Text
Shape
{/* Standard button with text (default) */}
<GoogleLogin onSuccess={...} type="standard" />
{/* Icon-only button */}
<GoogleLogin onSuccess={...} type="icon" />
| Value | Description |
|---|
standard | Full button with Google logo and text (default) |
icon | Google logo only, no text |
{/* White button with border (default) */}
<GoogleLogin onSuccess={...} theme="outline" />
{/* Blue filled button */}
<GoogleLogin onSuccess={...} theme="filled_blue" />
{/* Black filled button */}
<GoogleLogin onSuccess={...} theme="filled_black" />
<GoogleLogin onSuccess={...} size="large" /> {/* 40px height */}
<GoogleLogin onSuccess={...} size="medium" /> {/* 32px height */}
<GoogleLogin onSuccess={...} size="small" /> {/* 20px height */}
<GoogleLogin onSuccess={...} text="signin_with" /> {/* "Sign in with Google" (default) */}
<GoogleLogin onSuccess={...} text="signup_with" /> {/* "Sign up with Google" */}
<GoogleLogin onSuccess={...} text="continue_with" /> {/* "Continue with Google" */}
<GoogleLogin onSuccess={...} text="signin" /> {/* "Sign in" */}
<GoogleLogin onSuccess={...} shape="rectangular" /> {/* Default */}
<GoogleLogin onSuccess={...} shape="pill" />
<GoogleLogin onSuccess={...} shape="circle" /> {/* Use with type="icon" */}
<GoogleLogin onSuccess={...} shape="square" /> {/* Use with type="icon" */}
Width and logo alignment
<GoogleLogin
onSuccess={...}
width="300"
logo_alignment="center"
/>
width — button width in pixels (string or number)logo_alignment — "left" (default) or "center"
Locale
The GoogleOAuthProvider locale prop controls the button language globally for all child components. The button language is automatically inherited from the provider — there is no per-button locale override on GoogleLogin itself.
<GoogleOAuthProvider clientId="YOUR_CLIENT_ID" locale="fr">
{/* This button will render in French */}
<GoogleLogin onSuccess={...} />
</GoogleOAuthProvider>
UX mode
By default, the button opens a popup window. You can switch to a full-page redirect instead.
Google Workspace
If your app is restricted to users from a specific Google Workspace organization, pass the domain via hosted_domain:
<GoogleLogin
onSuccess={credentialResponse => {
console.log(credentialResponse);
}}
hosted_domain="yourcompany.com"
/>
hd claim in the ID token on your backend.
Full example
import { GoogleLogin } from '@react-oauth/google';
export function LoginPage() {
return (
<GoogleLogin
onSuccess={credentialResponse => {
// Send credentialResponse.credential (JWT) to your backend to verify
fetch('/api/auth/google', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ credential: credentialResponse.credential }),
});
}}
onError={() => {
console.log('Login failed');
}}
theme="filled_blue"
size="large"
shape="pill"
text="continue_with"
/>
);
}
