Google OAuth

Google OAuth lets users sign in with their Google account using a popup-based flow. The SDK handles the popup, redirect, and session creation automatically.

By default, the Google OAuth flow uses a Zerodev-managed Google account for authentication. This allows you to get started quickly without any additional configuration. You can customize the OAuth flow by providing your own Google OAuth client ID and secret in the developer dashboard.

Important: Using custom credentials requires creating a new project with no wallets already created. You cannot switch an existing project from the default Zerodev-managed OAuth setup to a custom client configuration.

Hook

• useAuthenticateOAuth — Trigger the OAuth flow

Example

import { useAccount, useDisconnect } from 'wagmi'
import {
  useAuthenticateOAuth,
  OAUTH_PROVIDERS,
} from '@zerodev/wallet-react'
 
function GoogleAuth() {
  const { address, isConnected } = useAccount()
  const { disconnectAsync } = useDisconnect()
  const authenticateOAuth = useAuthenticateOAuth()
 
  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <button onClick={() => disconnectAsync()}>Logout</button>
      </div>
    )
  }
 
  return (
    <div>
      <button
        onClick={() =>
          authenticateOAuth.mutateAsync({
            provider: OAUTH_PROVIDERS.GOOGLE,
          })
        }
        disabled={authenticateOAuth.isPending}
      >
        {authenticateOAuth.isPending
          ? 'Signing in...'
          : 'Sign in with Google'}
      </button>
 
      {authenticateOAuth.isError && (
        <p>Error: {authenticateOAuth.error.message}</p>
      )}
    </div>
  )
}

How it works

1. Open popup: useAuthenticateOAuth opens a popup window to the KMS backend's OAuth endpoint.

2. Google sign-in: The backend initiates the Google OAuth flow with PKCE. The user signs in with their Google account.

3. Backend callback: Google redirects back to the backend, which exchanges the auth code for tokens and sets a session cookie.

4. Popup redirect: The backend redirects the popup to your app with ?oauth_success=true.

5. Auto-detect: The SDK detects the success parameter. If running in a popup, it sends a postMessage to the opener window and closes. The main window then calls the backend's auth endpoint (reading the session cookie) to get a session.

After the flow completes, the Wagmi connector is connected and the user's address is available via useAccount.