Auth Components

Pre-built authentication components including user buttons, login forms, and other auth-related UI elements

Overview

This collection provides ready-to-use authentication components that you can integrate into your application. Each component is designed to handle common authentication patterns while being customizable to match your design system.

User Button

A user profile button component that displays the authenticated user's information and provides access to account actions.

'use client'

import { useTheme } from 'next-themes'

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  BellIcon,
  CreditCardIcon,
  LaptopIcon,
  LogOutIcon,
  MoonIcon,
  ShieldIcon,
  SunIcon,
  SunMoonIcon,
  UserIcon,
} from 'lucide-react'

export default function UserButton() {
  const { theme, setTheme } = useTheme()

  const user = {
    name: 'Tiesen',
    email: 'yuki@example.con',
    image: 'https://github.com/tiesen243.png',
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        <Avatar className='size-9 cursor-pointer'>
          <AvatarImage src={user.image} />
          <AvatarFallback>{user.name.slice(0, 2)}</AvatarFallback>
        </Avatar>
        <span className='sr-only'>Open user menu</span>
      </DropdownMenuTrigger>

      <DropdownMenuContent align='end' className='min-w-60'>
        <DropdownMenuLabel className='flex flex-col'>
          <p className='text-sm font-medium'>{user.name}</p>
          <p className='text-xs text-muted-foreground'>{user.email}</p>
        </DropdownMenuLabel>

        <DropdownMenuSeparator />

        <DropdownMenuGroup>
          {userNavItems.map((item) => (
            <DropdownMenuItem key={item.label} asChild>
              <a href={item.href}>
                <item.icon /> {item.label}
                <DropdownMenuShortcut>{item.shortcut}</DropdownMenuShortcut>
              </a>
            </DropdownMenuItem>
          ))}

          <DropdownMenuSub>
            <DropdownMenuSubTrigger className="gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground">
              <SunMoonIcon /> Apperance
            </DropdownMenuSubTrigger>
            <DropdownMenuPortal>
              <DropdownMenuSubContent>
                <DropdownMenuItem
                  className={
                    theme === 'light'
                      ? 'text-foreground'
                      : 'text-muted-foreground'
                  }
                  onClick={() => {
                    setTheme('light')
                  }}
                >
                  <SunIcon /> Light mode
                  <DropdownMenuShortcut>⌘L</DropdownMenuShortcut>
                </DropdownMenuItem>
                <DropdownMenuItem
                  className={
                    theme === 'dark'
                      ? 'text-foreground'
                      : 'text-muted-foreground'
                  }
                  onClick={() => {
                    setTheme('dark')
                  }}
                >
                  <MoonIcon /> Dark mode
                  <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
                </DropdownMenuItem>
                <DropdownMenuItem
                  className={
                    theme === 'system'
                      ? 'text-foreground'
                      : 'text-muted-foreground'
                  }
                  onClick={() => {
                    setTheme('system')
                  }}
                >
                  <LaptopIcon /> System
                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
                </DropdownMenuItem>
              </DropdownMenuSubContent>
            </DropdownMenuPortal>
          </DropdownMenuSub>
        </DropdownMenuGroup>

        <DropdownMenuSeparator />

        <DropdownMenuGroup>
          <DropdownMenuItem>
            <LogOutIcon /> Sign out
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

const userNavItems = [
  {
    href: '/account/profile',
    label: 'Profile',
    icon: UserIcon,
    shortcut: '⌘P',
  },
  {
    href: '/account/billing',
    label: 'Billing',
    icon: CreditCardIcon,
    shortcut: '⌘B',
  },
  {
    href: '/account/notifications',
    label: 'Notifications',
    icon: BellIcon,
    shortcut: '⌘N',
  },
  {
    href: '/account/security',
    label: 'Security',
    icon: ShieldIcon,
    shortcut: '⌘⇧S',
  },
]

'use client'import { useTheme } from 'next-themes'import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuGroup,  DropdownMenuItem,  DropdownMenuLabel,  DropdownMenuPortal,  DropdownMenuSeparator,  DropdownMenuShortcut,  DropdownMenuSub,  DropdownMenuSubContent,  DropdownMenuSubTrigger,  DropdownMenuTrigger,} from '@/components/ui/dropdown-menu'import {  BellIcon,  CreditCardIcon,  LaptopIcon,  LogOutIcon,  MoonIcon,  ShieldIcon,  SunIcon,  SunMoonIcon,  UserIcon,} from 'lucide-react'export default function UserButton() {  const { theme, setTheme } = useTheme()  const user = {    name: 'Tiesen',    email: 'yuki@example.con',    image: 'https://github.com/tiesen243.png',  }  return (    <DropdownMenu>      <DropdownMenuTrigger>        <Avatar className='size-9 cursor-pointer'>          <AvatarImage src={user.image} />          <AvatarFallback>{user.name.slice(0, 2)}</AvatarFallback>        </Avatar>        <span className='sr-only'>Open user menu</span>      </DropdownMenuTrigger>      <DropdownMenuContent align='end' className='min-w-60'>        <DropdownMenuLabel className='flex flex-col'>          <p className='text-sm font-medium'>{user.name}</p>          <p className='text-xs text-muted-foreground'>{user.email}</p>        </DropdownMenuLabel>        <DropdownMenuSeparator />        <DropdownMenuGroup>          {userNavItems.map((item) => (            <DropdownMenuItem key={item.label} asChild>              <a href={item.href}>                <item.icon /> {item.label}                <DropdownMenuShortcut>{item.shortcut}</DropdownMenuShortcut>              </a>            </DropdownMenuItem>          ))}          <DropdownMenuSub>            <DropdownMenuSubTrigger className="gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground">              <SunMoonIcon /> Apperance            </DropdownMenuSubTrigger>            <DropdownMenuPortal>              <DropdownMenuSubContent>                <DropdownMenuItem                  className={                    theme === 'light'                      ? 'text-foreground'                      : 'text-muted-foreground'                  }                  onClick={() => {                    setTheme('light')                  }}                >                  <SunIcon /> Light mode                  <DropdownMenuShortcut>⌘L</DropdownMenuShortcut>                </DropdownMenuItem>                <DropdownMenuItem                  className={                    theme === 'dark'                      ? 'text-foreground'                      : 'text-muted-foreground'                  }                  onClick={() => {                    setTheme('dark')                  }}                >                  <MoonIcon /> Dark mode                  <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>                </DropdownMenuItem>                <DropdownMenuItem                  className={                    theme === 'system'                      ? 'text-foreground'                      : 'text-muted-foreground'                  }                  onClick={() => {                    setTheme('system')                  }}                >                  <LaptopIcon /> System                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>                </DropdownMenuItem>              </DropdownMenuSubContent>            </DropdownMenuPortal>          </DropdownMenuSub>        </DropdownMenuGroup>        <DropdownMenuSeparator />        <DropdownMenuGroup>          <DropdownMenuItem>            <LogOutIcon /> Sign out          </DropdownMenuItem>        </DropdownMenuGroup>      </DropdownMenuContent>    </DropdownMenu>  )}const userNavItems = [  {    href: '/account/profile',    label: 'Profile',    icon: UserIcon,    shortcut: '⌘P',  },  {    href: '/account/billing',    label: 'Billing',    icon: CreditCardIcon,    shortcut: '⌘B',  },  {    href: '/account/notifications',    label: 'Notifications',    icon: BellIcon,    shortcut: '⌘N',  },  {    href: '/account/security',    label: 'Security',    icon: ShieldIcon,    shortcut: '⌘⇧S',  },]

Features

Display user avatar and name
Dropdown menu with account actions
Sign out functionality
Customizable styling

A complete login form component with validation and error handling for user authentication.

'use client'

import * as z from 'zod'

import { Button } from '@/components/ui/button'
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
} from '@/components/ui/field'
import { Input } from '@/components/ui/input'

import { useForm } from '@/registry/hooks/use-form'

const formSchema = z.object({
  email: z.email('Invalid email address'),
  password: z.string().min(6, 'Password must be at least 6 characters long'),
})

export default function LoginForm() {
  const form = useForm({
    defaultValues: { email: '', password: '' },
    schema: formSchema,
    onSubmit: (data) => {
      console.log('Form submitted:', data)
    },
  })

  return (
    <form
      className='min-w-lg rounded-xl border bg-card p-6 text-card-foreground shadow-sm'
      onSubmit={form.handleSubmit}
    >
      <FieldSet>
        <FieldLegend>Login </FieldLegend>
        <FieldDescription>
          Enter your email and password to log in to your account.
        </FieldDescription>

        <FieldGroup>
          <form.Field
            name='email'
            render={({ meta, field }) => (
              <Field data-invalid={meta.errors.length > 0}>
                <FieldLabel htmlFor={meta.fieldId}>Email</FieldLabel>
                <Input {...field} type='email' placeholder='abc@example.com' />
                <FieldError id={meta.errorId} errors={meta.errors} />
              </Field>
            )}
          />

          <form.Field
            name='password'
            render={({ meta, field }) => (
              <Field data-invalid={meta.errors.length > 0}>
                <FieldLabel htmlFor={meta.fieldId}>Password</FieldLabel>
                <Input {...field} type='password' placeholder='******' />
                <FieldError id={meta.errorId} errors={meta.errors} />
              </Field>
            )}
          />

          <Field>
            <Button disabled={form.state.isPending}>Log in</Button>
          </Field>
        </FieldGroup>

        <FieldSeparator className='[&>[data-slot=field-separator-content]]:bg-card'>
          or
        </FieldSeparator>

        <Field>
          <Button
            type='button'
            variant='outline'
            disabled={form.state.isPending}
          >
            Sign in with Google
          </Button>
        </Field>
      </FieldSet>
    </form>
  )
}

'use client'import * as z from 'zod'import { Button } from '@/components/ui/button'import {  Field,  FieldDescription,  FieldError,  FieldGroup,  FieldLabel,  FieldLegend,  FieldSeparator,  FieldSet,} from '@/components/ui/field'import { Input } from '@/components/ui/input'import { useForm } from '@/registry/hooks/use-form'const formSchema = z.object({  email: z.email('Invalid email address'),  password: z.string().min(6, 'Password must be at least 6 characters long'),})export default function LoginForm() {  const form = useForm({    defaultValues: { email: '', password: '' },    schema: formSchema,    onSubmit: (data) => {      console.log('Form submitted:', data)    },  })  return (    <form      className='min-w-lg rounded-xl border bg-card p-6 text-card-foreground shadow-sm'      onSubmit={form.handleSubmit}    >      <FieldSet>        <FieldLegend>Login </FieldLegend>        <FieldDescription>          Enter your email and password to log in to your account.        </FieldDescription>        <FieldGroup>          <form.Field            name='email'            render={({ meta, field }) => (              <Field data-invalid={meta.errors.length > 0}>                <FieldLabel htmlFor={meta.fieldId}>Email</FieldLabel>                <Input {...field} type='email' placeholder='abc@example.com' />                <FieldError id={meta.errorId} errors={meta.errors} />              </Field>            )}          />          <form.Field            name='password'            render={({ meta, field }) => (              <Field data-invalid={meta.errors.length > 0}>                <FieldLabel htmlFor={meta.fieldId}>Password</FieldLabel>                <Input {...field} type='password' placeholder='******' />                <FieldError id={meta.errorId} errors={meta.errors} />              </Field>            )}          />          <Field>            <Button disabled={form.state.isPending}>Log in</Button>          </Field>        </FieldGroup>        <FieldSeparator className='[&>[data-slot=field-separator-content]]:bg-card'>          or        </FieldSeparator>        <Field>          <Button            type='button'            variant='outline'            disabled={form.state.isPending}          >            Sign in with Google          </Button>        </Field>      </FieldSet>    </form>  )}

Features

Email and password inputs
Form validation
Error handling and display
Loading states
Forgot password link

Customization

All components accept standard React props and can be styled using CSS classes or styled-components. Refer to the individual component code for available props and customization options.

Auth Components

Overview

User Button

Features

Login Form

Features

Customization

On this page