@vitra-ai/nextjs-auth
v0.9.0
Published
Next.js authentication library built with better-auth for Vitra AI
Maintainers
vitraaiReadme
@vitra-ai/nextjs-auth
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-authQuick 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
],
});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 devContributing
This package is part of the Vitra AI monorepo. For contributions, please follow the monorepo guidelines.
License
Proprietary - Vitra AI
Author
Shikhar Singh [email protected]