GoogleButton

Branded "Continue with Google" button that starts the SimpleAuth Google OAuth redirect flow.

Overview

GoogleButton wraps useGoogleAuth and calls auth.signInWithGoogle when clicked. Configure your app and allowlisted origins in the Google sign-in guide.

Preview

Interactive preview requires JavaScript.

Install

npx @simpleauthjs/react add google-auth

Props

Prop	Type	Default	Description
`redirectUrl`	`string`	—	Required. Absolute URL on your app after sign-in. The URL’s origin must match allowed redirect origins in the dashboard.
`label`	`string`	`"Continue with Google"`	Button label.
`variant`	`"light" \| "dark"`	`"light"`	Visual style.

Usage

import { GoogleButton } from "@/components/simpleauth"

export default function LoginPage() {
  return <GoogleButton redirectUrl="https://myapp.com/dashboard" />
}

With SignInForm, pass googleRedirectUrl (and optionally githubRedirectUrl) so the form shows the same button below the email fields:

<SignInForm
  appName="Acme"
  googleRedirectUrl="https://myapp.com/dashboard"
/>

Source

components/simpleauth/hooks/use-google-auth.ts

"use client"

import { useState } from "react"
import { SimpleAuthError } from "@simpleauthjs/core"
import { useSimpleAuthClient } from "../provider"

function getErrorMessage(error: unknown) {
  if (error instanceof SimpleAuthError) {
    return error.message
  }

  if (error instanceof Error) {
    return error.message
  }

  return "Unable to start Google sign-in."
}

export function useGoogleAuth() {
  const auth = useSimpleAuthClient()
  const [isRedirecting, setIsRedirecting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  function signInWithGoogle(input: { redirectUrl: string }) {
    setIsRedirecting(true)
    setError(null)

    try {
      auth.signInWithGoogle({ redirectUrl: input.redirectUrl })
    } catch (requestError) {
      setIsRedirecting(false)
      setError(getErrorMessage(requestError))
      throw requestError
    }
  }

  function reset() {
    setError(null)
    setIsRedirecting(false)
  }

  return {
    signInWithGoogle,
    isRedirecting,
    error,
    isError: Boolean(error),
    reset,
  }
}

Generated files live at components/simpleauth/ui/google-button.tsx and components/simpleauth/styles/google-button.css. Edit them directly, or remove the OAuth block from sign-in-form.tsx / sign-up-form.tsx if you only want email auth.