A comprehensive Next.js authentication library built on top of Better Auth, providing a complete authentication solution with pre-built UI components, hooks, and utilities.

Features

🔐 Complete Auth Solution - Pre-built authentication flows with customizable UI
🎨 Beautiful UI Components - Modern, accessible components built with Radix UI
🔌 Plugin System - Flexible configuration for all Better Auth plugins
🏢 Organization Management - Multi-tenant support with roles and permissions
📱 Multiple Auth Methods - Email OTP, Magic Links, OAuth, Passkeys, and more
🎯 Type-Safe - Full TypeScript support with IntelliSense
🌍 Internationalization - Built-in localization support
⚡ Server & Client - Server-side and client-side authentication utilities

Installation

npm install @vitra-ai/nextjs-auth better-auth
# or
bun install @vitra-ai/nextjs-auth better-auth

Quick Start

1. Create Auth Client

Create your authentication client with the plugins you need:

// lib/auth-client.ts
import { createAuthClient } from "@vitra-ai/nextjs-auth";

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  plugins: {
    emailOTP: { enabled: true },
    organization: {
      enabled: true,
      // dynamicAccessControl and description field are included by default
    },
  },
});

See CREATE_AUTH_CLIENT.md for full documentation.

2. Wrap Your App

// app/layout.tsx
import { AuthUIProvider } from '@vitra-ai/nextjs-auth';
import { authClient } from '@/lib/auth-client';
import '@vitra-ai/nextjs-auth/css';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AuthUIProvider authClient={authClient}>
          {children}
        </AuthUIProvider>
      </body>
    </html>
  );
}

3. Use Auth Components

// app/page.tsx
import { AuthView, SignedIn, SignedOut } from '@vitra-ai/nextjs-auth';

export default function Page() {
  return (
    <>
      <SignedOut>
        <AuthView />
      </SignedOut>
      <SignedIn>
        <h1>Welcome! You're signed in.</h1>
      </SignedIn>
    </>
  );
}

Core Features

Authentication Client

The createAuthClient function provides a type-safe, flexible way to configure your authentication:

import { createAuthClient } from "@vitra-ai/nextjs-auth";

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  plugins: {
    emailOTP: { enabled: true },
    organization: { enabled: true },
    twoFactor: { enabled: true },
    passkey: { enabled: true },
  },
  additionalPlugins: [
    // Add custom plugins here
  ],
});

📖 Full Documentation

UI Components

Pre-built, customizable components for common authentication flows:

<AuthView /> - Complete authentication flow
<SignedIn> / <SignedOut> - Conditional rendering
<OrganizationSwitcher /> - Multi-tenant organization selector
Settings views for profile, security, organizations, and more

Hooks

Powerful hooks for authentication state and actions:

import { useAuthData, useCurrentOrganization } from '@vitra-ai/nextjs-auth/hooks';

function MyComponent() {
  const { user, session } = useAuthData();
  const { organization } = useCurrentOrganization();

  return <div>Welcome, {user?.name}</div>;
}

Server Utilities

Server-side authentication helpers (coming soon):

import { getSession } from "@vitra-ai/nextjs-auth/server";

export async function GET() {
  const session = await getSession();
  if (!session) {
    return new Response("Unauthorized", { status: 401 });
  }
  // ...
}

Documentation

Create Auth Client - Comprehensive guide to configuring the auth client
Settings Paths Usage - Guide to using settings paths and navigation
Settings Sidebar Example - Example implementation of settings sidebar
Country Selector Quick Start - Adding country selection to your forms

Available Plugins

The library supports all Better Auth plugins with easy configuration:

✉️ Email OTP - Passwordless authentication with email codes
🏢 Organization - Multi-tenant support with roles and permissions
🔑 Passkey - WebAuthn/Passkey authentication
🔐 Two-Factor - TOTP-based 2FA
✨ Magic Link - Passwordless authentication via email links
👥 Multi-Session - Support for multiple concurrent sessions
🔧 API Key - API key authentication
👤 Anonymous - Anonymous user sessions
📝 Username - Username-based authentication
🌐 Generic OAuth - Custom OAuth providers
🔵 One Tap - Google One Tap sign-in

Exports

The package provides multiple export paths for different use cases:

// Main exports - Components, hooks, types
import { AuthView, useAuthData } from "@vitra-ai/nextjs-auth";

// Hooks only
import { useAuthData } from "@vitra-ai/nextjs-auth/hooks";

// Server utilities
import { getSession } from "@vitra-ai/nextjs-auth/server";

// Form components
import { LoginForm } from "@vitra-ai/nextjs-auth/forms";

// Extra utilities
import { Toaster } from "@vitra-ai/nextjs-auth/goodies";

// Styles
import "@vitra-ai/nextjs-auth/css";

Development

# Install dependencies
bun install

# Build the package
bun run build

# Watch mode for development
bun run dev

Contributing

This package is part of the Vitra AI monorepo. For contributions, please follow the monorepo guidelines.

License

Proprietary - Vitra AI

Author

Shikhar Singh shikhar.singh@vitra.ai

Keywords

FAQs

What is @vitra-ai/nextjs-auth?

Is @vitra-ai/nextjs-auth well maintained?

Package last updated on 29 Apr 2026

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@vitra-ai/nextjs-auth