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

[andriiwp3]

Context

• Locale property is not working? #56

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

Changes

This PR introduces a new locale prop on the <GoogleOAuthProvider /> component instead of the button itself, as this way it can now be included in the script tag. At the same time, the old prop on the <GoogleLogin /> button is no longer needed and has been removed. This is not backwards compatible, so it will probably have to wait until the next major.

Workaround

  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>
  );

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
react-oauth	⬜️ Ignored (Inspect)	Visit Preview		Oct 9, 2024 10:37pm

[changeset-bot]

⚠️ No Changeset found

Latest commit: 793c545

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[andriiwp3]

@MomenSherif would appreciate any feedback on this