Communitygithub.com

sakilanwar12/nextjs-typescript-skills

Verwenden Sie diese Skill, um Authentifizierung zu Next.js hinzuzufügen – Auth.js/NextAuth Credentials oder OAuth, Middleware-Routenschutz, Session-Zugriff in RSC und Server Actions, Rollenprüfungen.

Was ist nextjs-typescript-skills?

Diese Skill bietet eine strukturierte Anleitung zur Integration von Auth.js v5 (NextAuth) in eine Next.js-Anwendung. Sie definiert klare Regeln für die zentrale Konfiguration in einer `auth.ts`-Datei, die sichere Verwaltung von Provider-Geheimnissen und die Validierung von Umgebungsvariablen mit Zod. Die Skill beschreibt zwei Schutzebenen: Middleware für die Benutzererfahrung (UX) und serverseitige Session-Überprüfungen in Server Actions zur Autorisierung. Sie unterstützt die Session-Lesung in Server Components mit `await auth()` und in Client Components mit `useSession()`. Zudem wird die Erweiterung des Session-Typs für Rollen (z. B. `user.role`) durch Modulaugmentation und serverseitige Durchsetzung von Rollenprüfungen behandelt. Für Entwickler ist die Skill nützlich, da sie bewährte Muster und eine Checkliste für die Produktionsbereitschaft bietet und mit Next.js, TypeScript und Auth.js v5 kompatibel ist.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/sakilanwar12/nextjs-typescript-skills/tree/HEAD/skills/nextjs-auth

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Next.js Auth (Auth.js v5)

Regeln

  1. Konfiguration in auth.ts zentralisieren (NextAuth() Export: handlers, auth, signIn, signOut). Provider-Geheimnisse niemals verstreuen.
  2. Routen in middleware.ts schützen (Edge-sicherer auth-Wrapper) und Session innerhalb von Server Actions/Mutationen erneut prüfen – Middleware ist UX, nicht Autorisierung.
  3. Session in Server Components über await auth() lesen. In Client Components useSession() von next-auth/react mit <SessionProvider> verwenden.
  4. Geheimnisse (AUTH_SECRET, Provider-Schlüssel) niemals mit NEXT_PUBLIC_-Präfix exponieren. Env-Variablen beim Start mit Zod validieren.
  5. Rollenprüfungen: Session-Typ über Modulaugmentation erweitern (user.role), serverseitig durchsetzen.

Patterns

// auth.ts
import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [GitHub],
  callbacks: {
    async session({ session, token }) {
      if (session.user) (session.user as { role?: string }).role = token.role as string;
      return session;
    },
    async jwt({ token, user }) {
      if (user) token.role = (user as { role?: string }).role ?? 'user';
      return token;
    },
  },
});

// middleware.ts
export { auth as middleware } from '@/auth';
export const config = { matcher: ['/dashboard/:path*', '/admin/:path*'] };

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';
export const { GET, POST } = handlers;
// Server Component Gate
import { auth } from '@/auth';
import { redirect } from 'next/navigation';

export default async function AdminPage() {
  const session = await auth();
  if (!session?.user) redirect('/login');
  if ((session.user as { role?: string }).role !== 'admin')
    redirect('/dashboard');
  return <AdminView />;
}
// types/next-auth.d.ts — Rollen-Augmentation
import 'next-auth';
declare module 'next-auth' {
  interface User { role?: string }
}

Checkliste

  • middleware.ts Matcher deckt geschützte Pfade ab?
  • Session in Aktionen/Mutationen erneut geprüft?
  • Keine Geheimnisse clientseitig exponiert?
  • Rolle serverseitig durchgesetzt, nicht nur versteckte UI?
  • Abmeldung + Session-Ablauf behandelt?

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Verwandte Skills