Locale property is not working?

[Bodrie]

To be honest I'm not sure if I am doing something wrong but it seems that the locale property of the the GoogleLogin component isn't working, in your and in the google documentation is stated that: locale: string, e.g. "zh_CN", but even the example isn't working.

Is this the case or I miss understhood something?

[MomenSherif]

<GoogleLoginOauth
  locale="zh_CN"
  onSuccess={() => console.log('onSuccesss.')}
  onError={() => {
    console.log('onError')
  }}
/>

It's working!

[Bodrie]

Sorry but that is pretty inappropriate, to close and mark the issue as invalid w/o any explanation or further discution...

[Bodrie]

The locale is set...

The button stays in the browser def lang...

[MomenSherif]

https://developers.google.com/identity/gsi/web/reference/js-reference#locale

The pre-set locale of the button text. If it's not set, the browser's default locale or the Google session user’s preference is used. Therefore, different users might see different versions of localized buttons, and possibly with different sizes.

Maybe the user account has a strong preference that google respects.

[Crsk]

https://developers.google.com/identity/gsi/web/reference/js-reference#locale

The pre-set locale of the button text. If it's not set, the browser's default locale or the Google session user’s preference is used. Therefore, different users might see different versions of localized buttons, and possibly with different sizes.

Maybe the user account has a strong preference that google respects.

From the Google side, the user account has not a strong preference, so the locale property should also have priority over Google account and browser.

BTW, the locale is not working for me either, same as @Bodrie I did set the property and the button stays in another lang which in my case is Spanish. Seems like this is not working if your default Google account or browser is set to other than English

---

Edit, I did some testing (making sure to hard reload):

OS and Browser	Google account	Locale prop	Text result
English	Spanish	undefined	Spanish
English	Spanish	zh_CN	Spanish
English	English	zh_CN	English
English	English	es-CL	English
English	Portuguese	es-CL	Portuguese
English	Portuguese	undefined	Portuguese
English	Portuguese	en_AU	Portuguese
English	Chinese	en_US	Chinese

So, my theory about

Locale not working if your default Google account or browser is set to other than English

seems pretty much incorrect. I have no idea why it works on some people but it doesn't for some others.

[buraketmen]

any update?

[Whitelistedd]

doesnt work for me too

[andriiwp3]

Hey guys! I have ran into this issue as well
The reason why this doesn't work according to Google's documentation is that the library doesn't pass the hl directive

Add the hl parameter and language code to the src directive when loading the library, for example: gsi/client?hl=<iso-639-code>

If it's not set, the browser's default locale or the Google session user's preference is used

I have found a workaround to get around it for now

This works perfectly for me, so feel free to use it. In the meantime, I'll try to open a PR to this repo to fix the issue globally

  const onScriptLoaded = () => {
    document.body.removeChild(document.querySelector('[src="https://accounts.google.com/gsi/client"]'));
    const scriptTag = document.createElement('script');
    scriptTag.src = `https://accounts.google.com/gsi/client?hl=${locale}`;
    scriptTag.onload = () => {
      setIsReady(true);
    };
    document.body.appendChild(scriptTag);
  };

  return (
    <div ref={ref}>
      <GoogleOAuthProvider
        clientId={googleSignInToken}
        onScriptLoadSuccess={onScriptLoaded}
      >
        {isReady && <GoogleLogin {...props} />}
      </GoogleOAuthProvider>
    </div>
  );

[andriiwp3]

Here we go

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