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.
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
The OAuth client ID passed to GoogleOAuthProvider.
true once the Google Identity Services script has loaded and is ready to use. false while loading or if the script failed to load.
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
export function useGoogleOAuth() {
const context = useContext(GoogleOAuthContext);
if (!context) {
throw new Error(
'Google OAuth components must be used within GoogleOAuthProvider',
);
}
return context;
}
