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
• Solid username availability and username sign-in mutations through the Better Auth client
• Automatic username field injection into sign-up and user profile forms

Setup

The username plugin requires the Better Auth server plugin, the matching client plugin, and the copied Zaidan UI plugin wrapper.

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

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

import { createAuthClient } from "@better-auth-ui/solid"
import { usernameClient } from "better-auth/client/plugins"

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

npx shadcn@latest add https://better-auth-ui.com/r/solid/username.json

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

export function Providers(props: { children?: JSX.Element }) {
  return (
    <AuthProvider
      authClient={authClient}
      plugins={[
        usernamePlugin() 
      ]}
    >
      {props.children}
    </AuthProvider>
  )
}

Components

These previews use mocked auth clients and do not call live Better Auth endpoints.

<SignIn />

<SignUp />

<UserProfile />

Options

Localization