L’interface est localisée ; les présentations et documents des Skills sont traduits automatiquement par IA dans votre langue. Le code, les commandes, chemins et termes techniques restent en version originale, et le document de l’auteur fait foi.
Explorer les Skills
Développement · SKILL.md

adding-auth

adding-auth

Add authentication to a web application using NextAuth.js (Auth.js), including OAuth providers, session management, and protected routes.

Independent GitHub snapshot · Automated classification · Original documentation governs

Documentation de la Skill

GitHub

name: adding-auth description: Add authentication to a web application using NextAuth.js (Auth.js), including OAuth providers, session management, and protected routes.

Add Authentication (Auth.js)

Use this skill when the user asks to add authentication, login, sign-up, OAuth, or session management.

Steps

  1. Install dependencies

    npm install next-auth@beta
    
  2. Generate an auth secret

    npx auth secret
    

    This adds AUTH_SECRET to .env.local.

  3. Create the auth config — create auth.ts in the project root:

    import NextAuth from "next-auth";
    import GitHub from "next-auth/providers/github";
    import Google from "next-auth/providers/google";
    
    export const { handlers, signIn, signOut, auth } = NextAuth({
      providers: [GitHub, Google],
    });
    
  4. Add the route handler — create app/api/auth/[...nextauth]/route.ts:

    import { handlers } from "@/auth";
    export const { GET, POST } = handlers;
    
  5. Add environment variables for each provider:

    AUTH_SECRET=...
    AUTH_GITHUB_ID=...
    AUTH_GITHUB_SECRET=...
    AUTH_GOOGLE_ID=...
    AUTH_GOOGLE_SECRET=...
    
  6. Add sign-in/sign-out UI — create components that call the signIn and signOut server actions, or use <Link href="/api/auth/signin">.

  7. Protect routes — use the auth() function in server components or middleware:

    import { auth } from "@/auth";
    
    export default async function ProtectedPage() {
      const session = await auth();
      if (!session) redirect("/api/auth/signin");
      return <div>Welcome {session.user?.name}</div>;
    }
    
  8. Add database adapter (optional) — if the user needs persistent sessions or user records, install a database adapter (e.g. @auth/drizzle-adapter, @auth/prisma-adapter) and configure it in the auth config.

Notes

  • Auth.js v5 works with Next.js App Router and Server Actions natively.
  • For Pages Router, use getServerSession in getServerSideProps and useSession on the client.
  • Add NEXTAUTH_URL for production deployments.
  • Store minimal user data in the session; fetch full profiles from the database when needed.
Skills enregistrées