Authentication

🔍 What Is It?

Authentication in Next.js involves three layers working together:

1. Middleware — runs at the edge, verifies JWT/session cookie, redirects unauthenticated users before the page loads
2. Layout — fetches the full session, validates it, redirects if invalid, makes user data available to child pages
3. Server Components / Route Handlers — check permissions for specific resources

Auth libraries for Next.js:

• →NextAuth v5 (Auth.js) — open source, supports OAuth, email, credentials, database sessions
• →Clerk — managed auth service, best DX, handles UI, MFA, organisations
• →Lucia — lightweight, full control, good for custom auth requirements

🎯 Why Do We Need It?

Auth is one of the most complex parts of any web app. Getting it wrong has serious consequences:

• →Unauthorised data access
• →Session fixation attacks
• →CSRF vulnerabilities
• →Token leakage

Using a battle-tested library (NextAuth, Clerk) handles these edge cases. The App Router's multi-layer approach gives you both performance (edge redirects) and correctness (server-side session validation).

🏗️ What Happens in Real Projects?

Auth architecture in a SaaS product:

• →Public routes: /, /pricing, /blog — no auth required
• →Auth routes: /login, /register — redirect authenticated users to dashboard
• →Protected routes: /dashboard, /settings — redirect unauthenticated users to login
• →Admin routes: /admin — require role = 'admin'
• →API routes: /api/v1/* — require Bearer token

⚙️ How It Works

Auth.js (NextAuth v5) flow:

1. User submits credentials or clicks OAuth provider
2. Auth.js validates credentials / exchanges OAuth code
3. Creates a session (JWT or database session)
4. Sets a session cookie (httpOnly, secure, sameSite)
5. Middleware reads the cookie, verifies JWT on every request
6. Session data available in Server Components via auth()

💻 Example

NextAuth v5 Setup and Multi-layer Auth — Complete auth setup with middleware, layout protection, and Server Component session access.

// auth.ts (project root)
import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';
import Credentials from 'next-auth/providers/credentials';
import { db } from '@/lib/db';
import { verifyPassword } from '@/lib/crypto';

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    GitHub,
    Credentials({
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      authorize: async ({ email, password }) => {
        const user = await db.user.findUnique({ where: { email: email as string } });
        if (!user || !user.passwordHash) return null;
        const valid = await verifyPassword(password as string, user.passwordHash);
        if (!valid) return null;
        return { id: user.id, email: user.email, name: user.name, role: user.role };
      },
    }),
  ],
  callbacks: {
    jwt({ token, user }) {
      if (user) token.role = (user as any).role;
      return token;
    },
    session({ session, token }) {
      session.user.role = token.role as string;
      return session;
    },
  },
});

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits