Loading auth...
Hard20 minNext.js Fundamentals
UpdatedAug 3, 2026
Edit

Authentication Patterns in Next.js

CONCEPTS:Authentication Patterns

Question Variations

  • "How would you protect a `/dashboard` route in Next.js?"
  • "What is the difference between client-side and server-side authentication in Next.js?"
  • "How do you access the current user's session in a Server Component?"
  • "How do you handle log-out in the App Router?"

Why This Is Asked

The App Router changed how we think about “Auth.” We no longer rely solely on client-side context. Interviewers want to know if you can architect a secure system that works across the server/client boundary and leverages Middleware for efficient route protection.

Key Concepts

  • Middleware vs. Page-level Checks: When to use which.
  • HTTP-only Cookies: Why they are essential for Server Components.
  • Auth.js (NextAuth.js): The industry-standard library for Next.js auth.
  • Session Providers: How to share session state with Client Components.
  • CSRF Protection: How Next.js handles this automatically in Actions.

Question Variations

  • “How would you protect a /dashboard route in Next.js?”
  • “What is the difference between client-side and server-side authentication in Next.js?”
  • “How do you access the current user’s session in a Server Component?”
  • “How do you handle log-out in the App Router?”

Answers by Technology

+ Add Variant
Next.jsImprove this answer ✏️

Expected Answer

Authentication in the App Router is server-first. The standard pattern involves:

  1. Storage: Use HTTP-only, secure cookies to store the session or JWT. This allows the server to read the auth state during the initial request.
  2. Protection (Global): Use Middleware to check for the cookie. If missing on a protected route (like /dashboard), redirect to /login. This is efficient as it happens before any page rendering.
  3. Protection (Granular): In Server Components, you can call cookies() or a helper like auth() from Auth.js to get the user’s details and render personalized content.
  4. Client-side: For interactive parts, wrap your layout in a SessionProvider (if using Auth.js) to access the session via useSession().

Why It Matters

Moving auth to the server prevents “layout shift” where a guest UI flashes before the user is redirected. It also improves security by keeping sensitive tokens out of reach of client-side JavaScript (XSS protection).

Example Code

Middleware Protection

TypeScript

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const session = request.cookies.get('session');
  
  if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

JavaScript

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const session = request.cookies.get('session');
  
  if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

Server Component Auth

// app/dashboard/page.tsx
import { auth } from '@/auth'; // Assuming Auth.js

export default async function Page() {
  const session = await auth();
  
  if (!session) return <div>Access Denied</div>;

  return <h1>Welcome, {session.user.name}</h1>;
}

Common Mistakes

  • Relying ONLY on Middleware: Middleware is for routing. Sensitive data fetching in pages or actions should always re-verify the session.
  • Using localStorage for tokens: This makes your Server Components unusable for authenticated content, as they can’t access localStorage.
  • Not using HTTPS-only cookies: Leaving your auth tokens vulnerable to theft via malicious scripts.

Follow-up Questions

  • How do you handle Token Refresh? (Answer: This can be done in Middleware or a Route Handler by checking the expiration and calling the Auth provider’s refresh endpoint).
  • Can you use Third-party Auth (like Supabase or Firebase) with Next.js? (Answer: Yes, they provide their own helper libraries that integrate with Next.js cookies and middleware).

References