Username

The username plugin adds username-based authentication to your auth UI. Users can sign in with a username instead of an email address, and optionally check username availability during sign-up and profile updates.

It contributes:

• A <SignInUsername /> view that accepts both username and email, routing to the appropriate sign-in method
• A <UsernameField /> renderer for the username additional field with real-time availability checking
• useSignInUsername and useIsUsernameAvailable hooks
• Automatic username field injection into sign-up and user profile forms

Setup

The username plugin requires no additional UI installation — the components are built-in. You only need to configure the Better Auth server plugin and register the client plugin.

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

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

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

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

import { usernamePlugin } from "@/lib/auth/username-plugin"
import { AuthProvider } from "@/components/auth/auth-provider"

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

Components

<SignIn />

<SignUp />

<UserProfile />

Options

Localization