Web setup guide

On the web, there is one extra step necessary to use the library: you need 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 sign in 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 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 module functions before the client library is loaded, such calls trigger the onError callback with the PLAY_SERVICES_NOT_AVAILABLE error code.

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