Skip to content

Google OAuth

Authenticate with Google

Google OAuth lets users sign in with their Google account through a popup. The SDK opens the popup, handles the OAuth redirect, creates the session, and connects the ZeroDev Wagmi connector.

Use Google OAuth when you want a familiar social login flow without building the OAuth exchange yourself.

Dashboard setup

The default Google OAuth configuration works out of the box for getting started. Add your app origin to the project's ACL allowlist before testing the popup flow.

If you want to use your own Google OAuth client, configure the client ID and secret in the ZeroDev dashboard.

Add Google login

Use useAuthenticateOAuth with OAUTH_PROVIDERS.GOOGLE.

import {
  OAUTH_PROVIDERS,
  useAuthenticateOAuth,
} from '@zerodev/wallet-react'
import { useAccount, useDisconnect } from 'wagmi'
 
export function GoogleLogin() {
  const { address, isConnected } = useAccount()
  const { disconnect } = useDisconnect()
  const authenticateOAuth = useAuthenticateOAuth()
 
  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <button type="button" onClick={() => disconnect()}>
          Disconnect
        </button>
      </div>
    )
  }
 
  return (
    <div>
      <button
        type="button"
        disabled={authenticateOAuth.isPending}
        onClick={() =>
          authenticateOAuth.mutate({
            provider: OAUTH_PROVIDERS.GOOGLE,
          })
        }
      >
        {authenticateOAuth.isPending ? 'Signing in...' : 'Continue with Google'}
      </button>
 
      {authenticateOAuth.error ? (
        <p>{authenticateOAuth.error.message}</p>
      ) : null}
    </div>
  )
}

How it works

  1. useAuthenticateOAuth opens the OAuth popup.
  2. The user signs in with Google.
  3. The SDK completes the OAuth callback and creates a ZeroDev session.
  4. The popup closes and the main window connects the ZeroDev Wagmi connector.

After the flow completes, use useAccount, useSignMessage, and useSendTransaction like any other Wagmi app.

Notes

  • Popup blockers can block OAuth if the mutation is not triggered directly from a user action.
  • The dashboard ACL allowlist must include the exact origin that opens the popup.
  • The authenticated user's email and linked login methods are available through useAuthenticators.

Next steps