diff --git a/packages/@react-oauth/google/src/GoogleLogin.tsx b/packages/@react-oauth/google/src/GoogleLogin.tsx index dc8777b..c0a85ad 100644 --- a/packages/@react-oauth/google/src/GoogleLogin.tsx +++ b/packages/@react-oauth/google/src/GoogleLogin.tsx @@ -33,13 +33,12 @@ export default function GoogleLogin({ shape, logo_alignment, width, - locale, click_listener, containerProps, ...props }: GoogleLoginProps) { const btnContainerRef = useRef(null); - const { clientId, scriptLoadedSuccessfully } = useGoogleOAuth(); + const { clientId, locale, scriptLoadedSuccessfully } = useGoogleOAuth(); const onSuccessRef = useRef(onSuccess); onSuccessRef.current = onSuccess; diff --git a/packages/@react-oauth/google/src/GoogleOAuthProvider.tsx b/packages/@react-oauth/google/src/GoogleOAuthProvider.tsx index 3cd9ee3..8f059bc 100644 --- a/packages/@react-oauth/google/src/GoogleOAuthProvider.tsx +++ b/packages/@react-oauth/google/src/GoogleOAuthProvider.tsx @@ -6,6 +6,7 @@ import useLoadGsiScript, { interface GoogleOAuthContextProps { clientId: string; + locale?: string; scriptLoadedSuccessfully: boolean; } @@ -19,6 +20,7 @@ interface GoogleOAuthProviderProps extends UseLoadGsiScriptOptions { export default function GoogleOAuthProvider({ clientId, nonce, + locale, onScriptLoadSuccess, onScriptLoadError, children, @@ -27,10 +29,12 @@ export default function GoogleOAuthProvider({ nonce, onScriptLoadSuccess, onScriptLoadError, + locale, }); const contextValue = useMemo( () => ({ + locale, clientId, scriptLoadedSuccessfully, }), diff --git a/packages/@react-oauth/google/src/google-auth-window.d.ts b/packages/@react-oauth/google/src/google-auth-window.d.ts index 5cb4257..3bd4a84 100644 --- a/packages/@react-oauth/google/src/google-auth-window.d.ts +++ b/packages/@react-oauth/google/src/google-auth-window.d.ts @@ -16,7 +16,7 @@ declare global { prompt: (momentListener?: MomentListener) => void; renderButton: ( parent: HTMLElement, - options: GsiButtonConfiguration, + options: GsiButtonConfiguration & { locale?: string }, ) => void; disableAutoSelect: () => void; storeCredential: ( diff --git a/packages/@react-oauth/google/src/hooks/useLoadGsiScript.ts b/packages/@react-oauth/google/src/hooks/useLoadGsiScript.ts index 03a3853..5ba3963 100644 --- a/packages/@react-oauth/google/src/hooks/useLoadGsiScript.ts +++ b/packages/@react-oauth/google/src/hooks/useLoadGsiScript.ts @@ -5,6 +5,10 @@ export interface UseLoadGsiScriptOptions { * Nonce applied to GSI script tag. Propagates to GSI's inline style tag */ nonce?: string; + /** + * ISO-639 code of [locale](https://developers.google.com/identity/gsi/web/reference/js-reference#locale) to use for content + */ + locale?: string; /** * Callback fires on load [gsi](https://accounts.google.com/gsi/client) script success */ @@ -18,7 +22,7 @@ export interface UseLoadGsiScriptOptions { export default function useLoadGsiScript( options: UseLoadGsiScriptOptions = {}, ): boolean { - const { nonce, onScriptLoadSuccess, onScriptLoadError } = options; + const { nonce, locale, onScriptLoadSuccess, onScriptLoadError } = options; const [scriptLoadedSuccessfully, setScriptLoadedSuccessfully] = useState(false); @@ -32,6 +36,7 @@ export default function useLoadGsiScript( useEffect(() => { const scriptTag = document.createElement('script'); scriptTag.src = 'https://accounts.google.com/gsi/client'; + if (locale) scriptTag.src += `?hl=${locale}`; scriptTag.async = true; scriptTag.defer = true; scriptTag.nonce = nonce; diff --git a/packages/@react-oauth/google/src/types/index.ts b/packages/@react-oauth/google/src/types/index.ts index b5d67d8..88f147c 100644 --- a/packages/@react-oauth/google/src/types/index.ts +++ b/packages/@react-oauth/google/src/types/index.ts @@ -91,8 +91,6 @@ export interface GsiButtonConfiguration { logo_alignment?: 'left' | 'center'; /** The button [width](https://developers.google.com/identity/gsi/web/reference/js-reference#width), in pixels */ width?: string | number; - /** If set, then the button [language](https://developers.google.com/identity/gsi/web/reference/js-reference#locale) is rendered */ - locale?: string; /** If set, this [function](https://developers.google.com/identity/gsi/web/reference/js-reference#click_listener) will be called when the Sign in with Google button is clicked. */ click_listener?: () => void; }