Next.js SDK

Official Next.js SDK for AuthSafe with full support for App Router and Pages Router. Next.js integration for secure authentication across your app.

App Router

Pages Router

TypeScript

Overview

The authsafe-nextjs SDK provides seamless OAuth 2.1 and OpenID Connect authentication for Next.js applications. It includes both client-side and server-side utilities for modern Next.js development.

Full Stack Authentication

Client-side React hooks, server-side auth helpers, route protection middleware, and pre-built UI components — everything you need for Next.js authentication.

Features

App Router & Pages Router — Full support for both Next.js paradigms
Server Components — SSR-friendly authentication with getAuth()
Client Hooks — useAuth(), useSession(), useMfa() for reactive UI
Route Protection — Middleware for protecting entire route groups
Pre-built UI — SignInButton, SignOutButton, UserButton, Profile
Automatic Token Refresh — Seamless session management
TypeScript — Full type safety out of the box
MFA Support — TOTP, Email OTP, WebAuthn
Secure Cookies — HttpOnly, SameSite, Secure by default

Installation

npm install authsafe-nextjs

Quick Start

1. Environment Variables

Create a .env.local file:

NEXT_PUBLIC_AUTHSAFE_CLIENT_ID=your-client-id
NEXT_PUBLIC_AUTHSAFE_DOMAIN=https://authsafe.in
AUTHSAFE_CLIENT_SECRET=your-client-secret

2. Root Layout (App Router)

Wrap your app with AuthProvider:

import { AuthProvider } from 'authsafe-nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AuthProvider
          config={{
            clientId: process.env.NEXT_PUBLIC_AUTHSAFE_CLIENT_ID,
            domain: process.env.NEXT_PUBLIC_AUTHSAFE_DOMAIN,
          }}
        >
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

3. API Routes

Create authentication endpoints:

// app/api/auth/[...authsafe]/route.ts
import { handleSignIn, handleCallback, handleLogout, handleRefresh } from 'authsafe-nextjs/server';
import type { Locale } from '@/utils/locale';

export const GET = handleSignIn;
export const POST = handleCallback;

Available APIs

Providers

AuthProvider — Authentication context provider for your app

Hooks

useAuth() — Main authentication hook for client components
useSession() — Lightweight hook for accessing user session
useMfa() — Hook for managing multi-factor authentication

Server-Side

Server Authentication — Server-side auth helpers for Server Components
API Handlers — Pre-built OAuth route handlers
Middleware — Route protection middleware

Components

Pre-built Components — Ready-to-use authentication UI components
Profile — Full-featured profile management UI