Next.js SDK

SDK oficial de Next.js para AuthSafe con soporte completo para App Router y Pages Router. integración de Next.js para una autenticación segura en tu 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