Next.js SDK

Offizielles Next.js SDK für AuthSafe mit vollständiger Unterstützung für App Router und Pages Router. Next.js-Integration für sichere Authentifizierung in Ihrer App.

App Router

Pages Router

TypeScript

Überblick

Das authsafe-nextjs SDK bietet nahtlose OAuth 2.1 und OpenID Connect Authentifizierung für Next.js-Anwendungen. Es enthält sowohl clientseitige als auch serverseitige Hilfsmittel für moderne Next.js-Entwicklung.

Full-Stack-Authentifizierung

Clientseitige React-Hooks, serverseitige Auth-Helfer, Route-Protection-Middleware und vorgefertigte UI-Komponenten — alles, was Sie für die Next.js-Authentifizierung benötigen.

Funktionen

App Router & Pages Router — Vollständige Unterstützung für beide Next.js-Paradigmen
Server Components — SSR-freundliche Authentifizierung mit getAuth()
Client Hooks — useAuth(), useSession(), useMfa() für reaktive UI
Route-Schutz — Middleware zum Schutz ganzer Routengruppen
Vorgefertigte UI — SignInButton, SignOutButton, UserButton, Profile
Automatische Token-Aktualisierung — Nahtloses Session-Management
TypeScript — Vollständige Typsicherheit von Anfang an
MFA-Unterstützung — TOTP, E-Mail-OTP, WebAuthn
Sichere Cookies — HttpOnly, SameSite, Secure standardmäßig

Installation

npm install authsafe-nextjs

Schnellstart

1. Umgebungsvariablen

Erstellen Sie eine .env.local-Datei:

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)

Umschließen Sie Ihre App mit 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-Routen

Erstellen Sie Authentifizierungsendpunkte:

// 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;

Verfügbare APIs

Provider

AuthProvider — Authentifizierungskontext-Provider für Ihre App

Hooks

useAuth() — Haupt-Authentifizierungs-Hook für Client-Komponenten
useSession() — Leichtgewichtiger Hook für den Zugriff auf die Benutzersitzung
useMfa() — Hook für die Verwaltung der Multi-Faktor-Authentifizierung

Serverseitig

Server Authentication — Serverseitige Auth-Helfer für Server Components
API Handlers — Vorgefertigte OAuth-Route-Handler
Middleware — Route-Protection-Middleware

Komponenten

Pre-built Components — Sofort einsetzbare Authentifizierungskomponenten
Profile — Voll ausgestattete Profilverwaltungs-UI