Authentication

Build your own authentication system from scratch with complete control over implementation

Build your own authentication system from scratch with complete control over implementation. This collection provides authentication components and utilities that you can customize to fit your exact requirements, supporting multiple database adapters and OAuth providers.

Installation

CLI

Base The core authentication components and utilities for building your own auth system.
npx shadcn add https://ui.tiesen.id.vn/r/auth-base.json
npx shadcn add https://ui.tiesen.id.vn/r/auth-base.json
pnpm dlx shadcn add https://ui.tiesen.id.vn/r/auth-base.json
bunx --bun shadcn add https://ui.tiesen.id.vn/r/auth-base.json
Includes:
- Authentication hooks and utilities
- Session management components
- Base UI components (sign-in/sign-out forms)
- TypeScript types and interfaces

Drizzle Authentication system with Drizzle ORM integration for SQL databases.

npx shadcn add https://ui.tiesen.id.vn/r/auth-drizzle.json

npx shadcn add https://ui.tiesen.id.vn/r/auth-drizzle.json

pnpm dlx shadcn add https://ui.tiesen.id.vn/r/auth-drizzle.json

bunx --bun shadcn add https://ui.tiesen.id.vn/r/auth-drizzle.json

Includes:

Everything from Base
Drizzle schema definitions
Database connection utilities
SQL-optimized auth queries

Prisma Authentication system with Prisma ORM integration and type-safe database operations.

npx shadcn add https://ui.tiesen.id.vn/r/auth-prisma.json

npx shadcn add https://ui.tiesen.id.vn/r/auth-prisma.json

pnpm dlx shadcn add https://ui.tiesen.id.vn/r/auth-prisma.json

bunx --bun shadcn add https://ui.tiesen.id.vn/r/auth-prisma.json

Includes:

Everything from Base
Prisma schema models
Type-safe database client
Migration utilities

Mongoose Authentication system for MongoDB using Mongoose ODM for document-based storage.

npx shadcn add https://ui.tiesen.id.vn/r/auth-mongoose.json

npx shadcn add https://ui.tiesen.id.vn/r/auth-mongoose.json

pnpm dlx shadcn add https://ui.tiesen.id.vn/r/auth-mongoose.json

bunx --bun shadcn add https://ui.tiesen.id.vn/r/auth-mongoose.json

Includes:

Everything from Base
Mongoose schemas and models
MongoDB connection setup
Document validation utilities

Manual

Download and customize the source code directly from the registry: Source

Schema Setup

After installation, the database schema will be added to your project. Depending on your chosen adapter:

Drizzle: Schema added to server/db/auth-schema.ts
Prisma: Schema added to prisma/auth-schema.prisma
Mongoose: Models added to server/db/auth.models.ts

For Drizzle and Prisma, you'll need to integrate this with your existing database setup:

Copy the schema content to your main database schema file, or
Rename the generated file to your preferred naming convention

Ensure your database instance is properly exported:

// server/db/index.ts or server/db.ts
const db = ... // your database instance
export { db }

You can customize the Session and User interfaces by extending them with additional fields. By default, these interfaces extend from your database schema.

server/auth/config.ts

declare module '@/server/auth/core/types.d.ts' {
  interface User {
    // Add custom user fields here
  }
  interface Session {
    // Add custom session fields here
  }
}

OAuth Providers

Configure OAuth authentication with supported providers:

Supported providers:

Discord
Facebook
GitHub
Google

Environment variables:

.env

AUTH_{PROVIDER}_ID={YOUR_ID}
AUTH_{PROVIDER}_SECRET={YOUR_SECRET}

Configuration:

server/auth/config.ts

import Provider from '@/server/auth/providers/{provider}'

export const authOptions = {
  // ... other options
  providers: {
    '{provider}': Provider({
      clientId: process.env.AUTH_{PROVIDER}_ID ?? '',
      clientSecret: process.env.AUTH_{PROVIDER}_SECRET ?? '',
    }),
  },
}

API Endpoints

Configure authentication endpoints for your chosen framework:

Next.js API Routes

import { handlers } from '@/server/auth'

export const { GET, POST } = handlers

React Router (v7)

Configure authentication routes for React Router v7:

src/routes/api.auth.$.ts

import type { Route } from './+types/api.auth.$'
import { handlers } from '@/server/auth'

const { GET, POST } = handlers
export const loader = ({ request }: Route.LoaderArgs) => GET(request)
export const action = ({ request }: Route.ActionArgs) => POST(request)

Tanstack Start

Set up authentication routes for Tanstack Start:

src/routes/api.auth.$.ts

import { createServerFileRoute } from '@tanstack/react-start/server'

import { handlers } from '@/server/auth'

const { GET, POST } = handlers
export const ServerRoute = createServerFileRoute('/api/auth/$').methods({
  GET: ({ request }) => GET(request),
  POST: ({ request }) => POST(request),
})

Usage

Server side

Get session data:

Retrieve the current user's session information on the server:

import { auth } from '@/server/auth'

const session = await auth({ headers: request.headers })

// Or for Next.js
import { headers } from 'next/headers'
const session = await auth({ headers: await headers() })

Sign in a user:

Authenticate a user and set the session cookie:

import { cookies } from 'next/headers'

import { signIn } from '@/server/auth'

const result = await signIn({ email: '', password: '' })
//      ^ Session data with token and expiry

;(await cookies()).set({
  name: 'auth.token',
  value: result.token,
  expires: result.expires,
  path: '/',
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production',
  sameSite: 'lax',
})

Sign out a user:

Clear the user's session and invalidate their token:

import { headers } from 'next/headers'

import { signOut } from '@/server/auth'

await signOut({ headers: await headers() })

Client side

Wrap your app with the SessionProvider:

Set up the session context for your application:

import { SessionProvider } from '@/hooks/use-session'

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return <SessionProvider>{children}</SessionProvider>
}

Use the useSession hook to access session data:

Access session state and authentication methods in your components:

import { useSession } from '@/hooks/use-session'

export function MyComponent() {
  const { session, status, signIn, signOut } = useSession()

  if (status === 'loading') return <div>Loading...</div>
  else if (status === 'unauthenticated')
    return (
      <button
        onClick={() => {
          void signIn(provider, options)
          /*              ^ Provider name (e.g., 'credentials', 'google', etc.)
           *  If provider is creadentials, options can include:
           *    { email: '', password: '' }
           *  If provider is OAuth, options can include:
           *    { redirectUrl: '/' } // Optional redirect URL after sign in
           */
        }}
      >
        Sign in with {provider}
      </button>
    )

  return (
    <div>
      <p>Welcome, {session.user.name}!</p>
      <button
        onClick={() => {
          void signOut({ redirectUrl: '/' })
          //                  ^ Optional redirect URL after sign out
        }}
      >
        Sign out
      </button>
    </div>
  )
}

On this page