Web support

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 ⭐️.

Providing a unified API across all platforms is a bit more tricky than it may seem. The web experience is different from the mobile one, and so are the underlying Google's APIs.

On the web, the signIn and createAccount functions are not Promise-based but callback-based as seen below. That means they return void and you need to provide callbacks for success and error handling. Even so, the argument and result types are the same as for native, allowing to reuse the logic for both success and error handling across all platforms.

info

The reason for callback-based apis rather than promise-based is that it's possible to get into an "error" state (when one-tap is not available) and later get a successful sign in from the button flow. Because of how the Google Sign In for web SDK is done, modeling this with a promise-based api is not possible.

note

The implementation has been migrated to FedCM though you can disable this via use_fedcm_for_prompt parameter of configure.

Usage

To implement web support, follow these two steps:

Call GoogleOneTapSignIn.signIn upon page load. This attempts to present the One-tap UI. It also sets up a listener for authentication events and calls the onSuccess callback when the user signs in (either with the One-tap flow or the Sign-In button).

If you do not want to present the one-tap UI, pass skipPrompt: true in the OneTapSignInParams object. This only sets up the listener for authentication events, and then relies on the user signing in via the WebGoogleSigninButton.

warning

You should display the One Tap UI on page load or other window events, instead of it being displayed by a user action (e.g. a button press). Otherwise, you may get a broken UX. Users may not see any UI after a user action, due to globally opt-out, cool-down, or no Google session.

useEffect(() => {
  GoogleOneTapSignIn.configure({
    webClientId,
    iosClientId: config.iosClientId,
  });
  if (Platform.OS === 'web') {
    GoogleOneTapSignIn.signIn(
      {
        ux_mode: 'popup',
      },
      {
        onResponse: (response) => {
          if (response.type === 'success') {
            console.log(response.data);
          }
        },
        onError: (error) => {
          // handle error
        },
        momentListener: (moment) => {
          console.log('moment', moment);
        },
      },
    );
  }
}, []);

Optionally, you can provide a momentListener callback function. The callback is called when important events take place. See reference.

Render the WebGoogleSigninButton component

One-tap UI may not always be available: This happens if you disable it (skipPrompt), when user has opted out or when they cancel the prompt several times in a row, entering the cooldown period.

WebGoogleSigninButton serves as a fallback. Tapping it opens the regular Google Sign-In dialog (or redirect, based on ux_mode param). When user signs in, the onResponse callback is called.

Methods

The methods on the web are the same as on native — see here for their docs.

Usage​

Methods​

Usage

Methods