BETTER-AUTH. UI
Plugins

Anonymous

Let users continue with a temporary guest account.

The anonymous UI plugin contributes one "Continue as guest" button to the 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() 
  ]
})

Register the Better Auth UI plugin

Pass anonymousPlugin() to <AuthProvider>:

components/providers.tsx
import { AuthProvider } from "@better-auth-ui/heroui"
import { anonymousPlugin } from "@better-auth-ui/heroui/plugins"

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

Change the label

Override the plugin localization when the default wording does not fit your product:

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.

Last updated on

On this page