Web setup guide

The web implementation doesn't depend on React Native (or React Native Web). That means you can use it even with regular web apps created with NextJS, Vite and etc.

tip

The functionality covered in this page is available in the licensed version. You can get a license here ⭐️.

On the web, 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.

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 GoogleOneTapSignIn.authenticate and render the WebGoogleSigninButton.

If you call authenticate before the client library is loaded, the onResponse callback receives an error with the PLAY_SERVICES_NOT_AVAILABLE error code. Advanced web authentication methods report the same error through onError.

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

Usage

See here.