Better Auth UI

The anonymous UI plugin contributes one "Continue as guest" button to the copied authentication forms. A successful sign-in refreshes the session and follows the redirectTo configured on <AuthProvider>.

Setup

Configure the Better Auth server plugin

Add Better Auth's Anonymous plugin:

lib/auth.ts

import { betterAuth } from "better-auth"
import { anonymous } from "better-auth/plugins"

export const auth = betterAuth({
  // ...
  plugins: [
    anonymous() 
  ]
})

Run the Better Auth migration command so the user table includes isAnonymous:

bunx @better-auth/cli migrate

Configure the Better Auth client plugin

Add anonymousClient() to the browser client:

lib/auth-client.ts

import { createAuthClient } from "better-auth/react"
import { anonymousClient } from "better-auth/client/plugins"

export const authClient = createAuthClient({
  plugins: [
    anonymousClient() 
  ]
})

Install the UI plugin

Install the button and local plugin factory:

bun x shadcn@latest registry add @better-auth-ui=https://better-auth-ui.com/r/{style}/{name}.json

bunx --bun shadcn@latest add @better-auth-ui/anonymous

The registry item adds:

src/lib/auth/anonymous-plugin.ts
src/components/auth/anonymous/anonymous-button.tsx

Register the plugin

Pass anonymousPlugin() to the copied <AuthProvider>:

components/providers.tsx

import { AuthProvider } from "@/components/auth/auth-provider"
import { anonymousPlugin } from "@/lib/auth/anonymous-plugin"

<AuthProvider
  authClient={authClient}
  navigate={navigate}
  plugins={[
    anonymousPlugin() 
  ]}
>
  {children}
</AuthProvider>

Change the label

anonymousPlugin({
  localization: {
    continueAsGuest: "Explore as a guest"
  }
})

Prop

Type

This integration only adds guest entry. If your application later lets guests create a permanent account, configure Better Auth's server-side onLinkAccount callback to move application data to the new user.