skills.rest
Levironexe
LevironexeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

NextAuth.js / Auth.js

Configure NextAuth.js session handling with centralized authOptions and route protection.

1|Updated May 2, 2026
Search Tags:#jwt#middleware#next.js#authjs#role-based access#nextauth#session strategy
One-click install
npx skills add https://github.com/Levironexe/architect --skill nextauth-js-auth-js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: NextAuth.js / Auth.js
Source: https://github.com/Levironexe/architect/tree/main/skills/patterns/nextauth
Command: npx skills add https://github.com/Levironexe/architect --skill nextauth-js-auth-js

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Authentication setups in Next.js apps easily become inconsistent and unsafe when route handlers, session configuration, and role checks are scattered across the codebase. Architecting NextAuth correctly prevents broken sign-in/CSRF flows, avoids mismatched session strategies, and ensures protected routes reliably enforce authorization across both server and client.

Core Features & Use Cases

  • Centralized auth configuration: Keep providers, callbacks, adapter wiring, JWT/database session strategy, and custom session field mapping in a single exported authOptions file.
  • Correct NextAuth route handling: Use the catch-all NextAuth route handler directory and export both GET and POST handlers so OAuth callbacks and CSRF protection work end-to-end.
  • Consistent session access and protection: Use getServerSession for Server Components and routes, useSession for Client Components, and protect routes via NextAuth middleware with an appropriate matcher and role-based authorized callback.

Quick Start

Ask your coding agent to implement a NextAuth.js/Auth.js setup using app/api/auth/[...nextauth]/route.ts with GET and POST exports, a single src/lib/auth.ts authOptions export, and middleware protection for protected routes while using getServerSession on the server and useSession in client components.

Frequently Asked Questions about NextAuth.js / Auth.js

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up NextAuth.js route handlers correctly in Next.js?▼

Set up NextAuth.js route handlers by creating a catch-all app/api/auth/[...nextauth]/route.ts file and exporting both GET and POST handlers. This ensures OAuth callbacks and CSRF protection function end-to-end across your Next.js application.

How do I configure JWT and database session strategies in NextAuth?▼

Configure JWT and database session strategies by defining providers, callbacks, and adapter wiring in a single centralized authOptions file. Keep custom session field mappings for user id and role in this authoritative configuration to maintain consistency.

Why does my Next.js middleware block the NextAuth handler?▼

Next.js middleware blocks the NextAuth handler when the matcher rules are too broad. Configure middleware matcher rules to explicitly avoid blocking the NextAuth handler path while protecting your designated dashboard and admin routes.

What is the correct way to access NextAuth sessions in server and client components?▼

Access NextAuth sessions consistently by using getServerSession for Server Components and API routes, and useSession for Client Components. This prevents unsafe session access patterns and maintains reliable authorization checks across your app.

How do I add role-based access control to protected routes using NextAuth middleware?▼

Add role-based access control by implementing an authorized callback within your NextAuth middleware configuration. Map custom user roles into the session object via authOptions callbacks, then enforce role checks within the middleware matcher rules.

Can I use custom user fields like id and role in a NextAuth session?▼

Yes, you can include custom user fields like id and role in a NextAuth session. Map these fields inside the session callback of your centralized authOptions configuration, ensuring the JWT or database strategy correctly passes the custom data to the client.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
mrlynnmrlynn
8

mongodb-rbac-middleware

Implement role-based access control for Next.js edge middleware routes.

Community
Intermediate
jpoutrinjpoutrin
14

oauth

Implement OAuth 2.0 and OpenID Connect authorization code flows with PKCE.

Community
Intermediate
zzafergokzzafergok
1

auth-patterns-nextjs

Implement NextAuth.js v5 authentication patterns for Next.js App Router projects.

Community
Advanced