<GoogleOneTap /> | OneAuxilia

<GoogleOneTap /> component

Important

To use Google One Tap with OneAuxilia, you must enable Google as a social connection in the OneAuxilia Dashboard and make sure to use custom credentials.

The <GoogleOneTap /> component renders the Google One Tap UI so that users can use a single button to sign-up or sign-in to your OneAuxilia application with their Google accounts.

By default, this component will redirect users back to the page where the authentication flow started. However, you can override this with force redirect URL props or force redirect URL environment variables.

GoogleOneTapProps

cancelOnTapOutside? boolean

If true, the One Tap prompt closes automatically if the user clicks outside of the prompt. Default: true.

itpSupport? boolean

If true, enables the ITP-specific UX when One Tap is rendered on ITP browsers such as Chrome on iOS, Safari, and FireFox. Default: true.

fedCmSupport? boolean

If true, enables Google One Tap to use the FedCM API to sign users in. See Google's docs on best practices when disabling FedCM support. Default: true

signInForceRedirectUrl? string

Useful if you want to redirect to a path specific to Google One Tap users. If provided, this URL will always be redirected to after the user signs in, overriding any redirect URL props or redirect URL environment variables.

signUpForceRedirectUrl? string

Useful if you want to redirect to a path specific to Google One Tap users. If provided, this URL will always be redirected to after the user signs up, overriding any redirect URL props or redirect URL environment variables.

Usage with frameworks

The following example includes basic implementation of the <GoogleOneTap /> component. You can use this as a starting point for your own implementation.

Note

does not render if the user is already signed into your OneAuxilia application, so there's no need to manually check if a user is signed in yourself before rendering it.

app/layout.tsx

import React from 'react'
import { OneAuxiliaProvider, GoogleOneTap } from '@oneauxilia/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <title>Google One Tap with OneAuxilia and Next.js</title>
      </head>
      <OneAuxiliaProvider>
        <GoogleOneTap />
        <body>{children}</body>
      </OneAuxiliaProvider>
    </html>
  )
}

layouts/Layout.astro

---
import { GoogleOneTap } from '@oneauxilia/astro/components'
---

<html lang="en">
  <head>
    <title>Google One Tap with OneAuxilia and Astro</title>
  </head>

  <GoogleOneTap />
</html>

Usage with JavaScript

The methods in this section are available on instances of the OneAuxilia class and are used to render and control the <GoogleOneTap /> component.

Note

The examples in this section assume you have completed the JavaScript quickstart to set up the OneAuxilia JS SDK in your project.

openGoogleOneTap()

Opens the <GoogleOneTap /> component.

function openGoogleOneTap(params: GoogleOneTapProps): void

openGoogleOneTap() usage

index.js

import { OneAuxilia } from '@oneauxilia/oneauxilia-js'

// Initialize OneAuxilia with your OneAuxilia publishable key
const oneauxilia = new OneAuxilia('YOUR_PUBLISHABLE_KEY')
await oneauxilia.load()

const params = {
  cancelOnTapOutside: false,
  itpSupport: false,
  fedCmSupport: false,
}
oneauxilia.openGoogleOneTap(params)

index.html

<!-- Initialize OneAuxilia with your
OneAuxilia Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-oneauxilia-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@oneauxilia/oneauxilia-js@latest/dist/oneauxilia.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener('load', async function () {
    await OneAuxilia.load()
    const params = {
      cancelOnTapOutside: false,
      itpSupport: false,
      fedCmSupport: false,
    }
    OneAuxilia.openGoogleOneTap(params)
  })
</script>

closeGoogleOneTap()

Closes the <GoogleOneTap /> component.

function closeGoogleOneTap(): void

closeGoogleOneTap() usage

index.js

import { OneAuxilia } from '@oneauxilia/oneauxilia-js'

// Initialize OneAuxilia with your OneAuxilia publishable key
const oneauxilia = new OneAuxilia('YOUR_PUBLISHABLE_KEY')
await oneauxilia.load()

const params = {
  cancelOnTapOutside: false,
  itpSupport: false,
  fedCmSupport: false,
}
oneauxilia.openGoogleOneTap(params)

// Do something else

oneauxilia.closeGoogleOneTap()

index.html

<!-- Add a <div id="sign-in"> element to your HTML -->
<div id="sign-in"></div>

<!-- Initialize OneAuxilia with your
OneAuxilia Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-oneauxilia-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@oneauxilia/oneauxilia-js@latest/dist/oneauxilia.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener('load', async function () {
    await OneAuxilia.load()
    const params = {
      cancelOnTapOutside: false,
      itpSupport: false,
      fedCmSupport: false,
    }
    OneAuxilia.openGoogleOneTap(params)

    // Do something else

    OneAuxilia.closeGoogleOneTap()
  })
</script>

authenticateWithGoogleOneTap()

Authenticates the user with a token generated from Google identity services. Also sets the user's current session to active.

function authenticateWithGoogleOneTap(
  props?: AuthenticateWithGoogleOneTapParams,
): Promise<SignInResource | SignUpResource>

AuthenticateWithGoogleOneTapParams

token? string A

Google authentication token from Google identity services.

authenticateWithGoogleOneTap() usage

index.js

import { OneAuxilia } from '@oneauxilia/oneauxilia-js'

// Initialize OneAuxilia with your OneAuxilia publishable key
const oneauxilia = new OneAuxilia('YOUR_PUBLISHABLE_KEY')
await oneauxilia.load()

// Optionally, you can set redirect URLs.
const customUrls = {
  signInUrl: '/sign-in',
  signUpUrl: '/sign-up',
}
// Initiate the authentication flow.
const signInOrUp = await oneauxilia.authenticateWithGoogleOneTap({ token: 'xxxx' })
// Set the session as active, and handle any navigation or redirects
await oneauxilia.handleGoogleOneTapCallback(signInOrUp, customUrls)

index.html

<!-- Initialize OneAuxilia with your
OneAuxilia Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-oneauxilia-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@oneauxilia/oneauxilia-js@latest/dist/oneauxilia.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener('load', async function () {
    await OneAuxilia.load()
    // Optionally, you can set redirect URLs.
    const customUrls = {
      signInUrl: '/sign-in',
      signUpUrl: '/sign-up',
    }
    // Initiate the authentication flow.
    const signInOrUp = await oneauxilia.authenticateWithGoogleOneTap({ token: 'xxxx' })
    // Set the session as active, and handle any navigation or redirects
    await oneauxilia.handleGoogleOneTapCallback(signInOrUp, customUrls)
  })
</script>

handleGoogleOneTapCallback()

Completes a Google One Tap redirection flow started by authenticateWithGoogleOneTap(). Also calls OneAuxilia.setActive() and performs a custom navigation if given a custom navigation function.

function handleGoogleOneTapCallback(
  signInOrUp: SignInResource | SignUpResource,
  params: HandleOAuthCallbackParams,
  customNavigate?: (to: string) => Promise<unknown>,
): Promise<unknown>

See authenticateWithGoogleOneTap() usage for an example of how to use handleGoogleOneTapCallback().

handleGoogleOneTapCallback() params

signInOrUp SignInResource | SignUpResource

The SignIn or SignUp object returned from authenticateWithGoogleOneTap().

params HandleOAuthCallbackParams

An object containing redirect URLs. Useful if you want to set URLs specific to Google One Tap. Otherwise, consider using environment variables to set redirect URLs.

customNavigate? (to: string) => Promise

Allows you to define a custom navigation function.

Limitations

If your application will use the Google API on behalf of your users, OneAuxilia's component is not recommended, as Google does not provide OneAuxilia with an access or refresh token that you can use.
Users with the 1Password browser extension may not be able to render the Google One Tap UI. They must disable this extension.
When testing in development, if you select the X button to close the Google One Tap UI, you may encounter a cooldown that prevents you from rendering it again for a period of time. To bypass the cooldown, remove the g_state cookie.

Previous<SignUp />NextUser Components

Last updated 1 month ago