fix: include hl directive into script tag if locale is passed (#370)

Co-authored-by: Mo'men Sherif <[email protected]>

Author: andriiwp3

.changeset/spicy-socks-breathe.md

@@ -0,0 +1,5 @@
+---
+'@react-oauth/google': patch
+---
+
+fix locale parameter to gsi script

.gitignore

@@ -22,3 +22,8 @@ yarn-debug.log*
 yarn-error.log*
 
 .turbo
+
+.yarn/install-state.gz
+.yarn/unplugged/
+.yarn/build-state.yml
+.yarn/cache/

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -37,5 +37,6 @@
     "commitizen": {
       "path": "cz-conventional-changelog"
     }
-  }
+  },
+  "packageManager": "[email protected]+sha512.5383cc12567a95f1d668fbe762dfe0075c595b4bfff433be478dbbe24e05251a8e8c3eb992a986667c1d53b6c3a9c85b8398c35a960587fbd9fa3a0915406728"
 }

packages/@react-oauth/google/src/GoogleLogin.tsx

@@ -33,14 +33,13 @@ export default function GoogleLogin({
   shape,
   logo_alignment,
   width,
-  locale,
   click_listener,
   state,
   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

@@ -96,8 +96,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;
   /** If set, this [string](https://developers.google.com/identity/gsi/web/reference/js-reference#state) returns with the ID token. */