fix: include hl directive into script tag if locale is passed

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<HTMLDivElement>(null);
-  const { clientId, scriptLoadedSuccessfully } = useGoogleOAuth();
+  const { clientId, locale, scriptLoadedSuccessfully } = useGoogleOAuth();
 
   const onSuccessRef = useRef(onSuccess);
   onSuccessRef.current = onSuccess;

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,
     }),

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: (

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;

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 # with Google button is clicked. */
   click_listener?: () => void;
 }