Web setup guide

On the web, there is one extra step necessary to use the library: to load the Google Client Library and make it available in the browser before calling any of the APIs exposed by this package.

tip

Web support is only available to sponsors️. It takes just a few clicks to get access ❤️.

There are different ways to load the client script. Some of them are:

Next.js

import Script from 'next/script';

<Script
  src="https://accounts.google.com/gsi/client"
  strategy="lazyOnload"
  onLoad={() => {
    // present the one-tap popup
  }}
/>;

Simple html

See here

useEffect

useEffect(() => {
  const scriptTag = document.createElement('script');
  scriptTag.src = 'https://accounts.google.com/gsi/client';
  scriptTag.async = true;
  scriptTag.onload = () => {
    setLoaded(true);
  };
  scriptTag.onerror = () => {
    console.error('Failed to load Google One-tap script');
  };

document.body.appendChild(scriptTag);
}, []);

After the script is loaded, you can call the functions for signing in and render the WebGoogleSigninButton.

If you call any of the One-tap functions before the client library is loaded, such calls will reject with the PLAY_SERVICES_NOT_AVAILABLE error code.

You can read the official docs for loading the Client Library here.