Nextjs Authentication
Wire Auth.js 5 into a Next.js App Router solo project with typed sessions, middleware protection, and a login flow without guessing folder layout.
Overview
nextjs-authentication is an agent skill for the Build phase that implements Auth.js 5 on Next.js App Router with typed sessions, middleware protection, and login UI structure.
Install
npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill nextjs-authenticationWhat is this skill?
- Documents full App Router tree: auth.ts, middleware.ts, [...nextauth] API route, and SessionProvider in layout
- TypeScript module augmentation for Session, User, and JWT with id, role, and permissions
- Custom login page plus protected dashboard pattern with sign-in and avatar components
- Auth.js 5 / next-auth@beta install paths and middleware-based route protection
- Data Access Layer (lib/dal.ts) pattern alongside auth utilities
Adoption & trust: 1k installs on skills.sh; 271 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building Next.js and need Auth.js 5 wired correctly—routes, types, middleware, and session UI—without reverse-engineering half-finished tutorials.
Who is it for?
Solo builders on Next.js App Router adding sign-in, roles, or protected dashboards before first production deploy.
Skip if: Teams that already have a frozen auth provider contract, non-Next frameworks, or passwordless-only flows with no App Router.
When should I use this skill?
Scaffolding or extending Next.js App Router authentication with Auth.js 5, middleware, and typed sessions.
What do I get? / Deliverables
After the skill runs you get a documented file layout, auth.ts and middleware patterns, API handler placement, and TypeScript session/JWT extensions ready to customize with your providers.
- auth.ts configuration
- middleware.ts route rules
- types/next-auth.d.ts extensions
Recommended Skills
Journey fit
Authentication is core product infrastructure you implement during the build phase before ship-ready routes exist. Session providers, API route handlers, JWT extensions, and DAL utilities are server-side backend concerns in App Router.
How it compares
Use this procedural Auth.js 5 layout instead of asking the agent to freestyle next-auth snippets from outdated Pages Router examples.
Common Questions / FAQ
Who is nextjs-authentication for?
Solo and indie developers shipping Next.js SaaS or internal tools who want Auth.js 5 with App Router, middleware, and typed sessions in one guided setup.
When should I use nextjs-authentication?
During Build when you add login, OAuth, or role-based routes; when scaffolding a new my-app tree; or when migrating to Auth.js 5 beta and need middleware and [...nextauth] handler placement.
Is nextjs-authentication safe to install?
It is documentation-style procedural knowledge—review the Security Audits panel on this Prism page and treat OAuth secrets and session config as sensitive when you implement.
SKILL.md
READMESKILL.md - Nextjs Authentication
# Auth.js 5 Setup Guide Complete setup guide for Auth.js 5 with Next.js App Router. ## Installation ```bash npm install next-auth@beta # or specific version npm install @auth/nextjs@latest ``` ## Project Structure ``` my-app/ ├── auth.ts # Main auth configuration ├── middleware.ts # Route protection ├── types/ │ └── next-auth.d.ts # TypeScript type extensions ├── app/ │ ├── api/ │ │ └── auth/ │ │ └── [...nextauth]/ # API route handler │ │ └── route.ts │ ├── login/ │ │ └── page.tsx # Custom login page │ ├── dashboard/ │ │ └── page.tsx # Protected page │ └── layout.tsx # Root layout with SessionProvider ├── components/ │ └── auth/ │ ├── sign-in-button.tsx │ └── user-avatar.tsx └── lib/ ├── auth.ts # Auth utilities └── dal.ts # Data Access Layer ``` ## Complete Configuration ### 1. TypeScript Types ```typescript // types/next-auth.d.ts import { DefaultSession, DefaultUser } from "next-auth"; import { JWT } from "next-auth/jwt"; declare module "next-auth" { interface Session { user: { id: string; role: "user" | "admin" | "moderator"; permissions: string[]; } & DefaultSession["user"]; } interface User extends DefaultUser { role?: "user" | "admin" | "moderator"; permissions?: string[]; } } declare module "next-auth/jwt" { interface JWT { id?: string; role?: "user" | "admin" | "moderator"; permissions?: string[]; } } ``` ### 2. Auth Configuration ```typescript // auth.ts import NextAuth from "next-auth"; import { PrismaAdapter } from "@auth/prisma-adapter"; import { prisma } from "@/lib/prisma"; // Providers import GitHub from "next-auth/providers/github"; import Google from "next-auth/providers/google"; import Credentials from "next-auth/providers/credentials"; import bcrypt from "bcryptjs"; export const { handlers: { GET, POST }, auth, signIn, signOut, } = NextAuth({ // Database adapter (optional - for database sessions) adapter: PrismaAdapter(prisma), // Session configuration session: { strategy: "jwt", // or "database" maxAge: 30 * 24 * 60 * 60, // 30 days updateAge: 24 * 60 * 60, // 24 hours }, // Cookie configuration cookies: { sessionToken: { name: `__Secure-next-auth.session-token`, options: { httpOnly: true, sameSite: "lax", path: "/", secure: process.env.NODE_ENV === "production", }, }, }, // Authentication providers providers: [ GitHub({ clientId: process.env.GITHUB_ID!, clientSecret: process.env.GITHUB_SECRET!, allowDangerousEmailAccountLinking: true, }), Google({ clientId: process.env.GOOGLE_CLIENT_ID!, clientSecret: process.env.GOOGLE_CLIENT_SECRET!, allowDangerousEmailAccountLinking: true, }), Credentials({ name: "credentials", credentials: { email: { label: "Email", type: "email" }, password: { label: "Password", type: "password" }, }, async authorize(credentials) { if (!credentials?.email || !credentials?.password) { return null; } const user = await prisma.user.findUnique({ where: { email: credentials.email as string }, }); if (!user || !user.password) { return null; } const isPasswordValid = await bcrypt.compare( credentials.password as string, user.password ); if (!isPasswordValid) { return null; } return { id: user.id, email: user.email, name: user.name, image: user.image, role: user.role, }; }, }), ], // Callbacks for customizing behavior callbacks: { async signIn({ user, account, profile }) { // Allow OAuth sign-ins without restrictions if (ac