Stop Auth Flickers: Edge Middleware in Next.js ⚡

The Amateur UI Flicker

When building protected routes (like /dashboard) in a React Single Page Application (SPA), developers usually handle authentication on the client side. A user navigates to the dashboard, the React component mounts, and a useEffect hook checks if a valid JWT token exists in localStorage. If it doesn't, React redirects them to /login.

This creates the infamous Auth Flicker. Because React has to render the DOM before the useEffect fires, the unauthenticated user physically sees the private dashboard layout flash on their screen for a fraction of a second before being kicked out. Conversely, a logged-in user might see a brief flash of the login screen before being pushed to the dashboard. It destroys the illusion of premium software and leaks private layout structures. To build truly professional SaaS apps, you must protect your routes before the render lifecycle begins using Next.js Edge Middleware.

The Solution: V8 Edge Computing

Next.js Middleware intercepts the incoming HTTP request on the server (or at the CDN Edge) before the request ever reaches your React components.

Because Middleware runs on the lightweight V8 Edge runtime (not Node.js), it executes in less than a millisecond. It inspects the incoming request cookies, validates the auth token natively, and executes HTTP redirects instantly. The browser never receives the HTML for the private dashboard, making the "Auth Flicker" physically impossible.

Architecting the Middleware Guardrail

We create a middleware.ts file at the root of our project to intercept specific route patterns.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { jwtVerify } from 'jose'; // We must use 'jose' as standard jsonwebtoken relies on Node APIs

export async function middleware(request: NextRequest) {
    // 1. Extract the token from HttpOnly cookies
    const token = request.cookies.get('saas_auth_token')?.value;
    const isAuthPage = request.nextUrl.pathname.startsWith('/login');

    try {
        // 2. Validate the JWT directly at the Edge using Jose
        if (token) {
            const secret = new TextEncoder().encode(process.env.JWT_SECRET);
            await jwtVerify(token, secret);
            
            // If they are logged in and trying to view the login page, redirect to dashboard
            if (isAuthPage) {
                return NextResponse.redirect(new URL('/dashboard', request.url));
            }
            
            // Allow the request to proceed to the secure React components
            return NextResponse.next();
        }
    } catch (error) {
        // Token is invalid or expired
    }

    // 3. Fallback: If there is no valid token, and they are trying to access a protected route
    if (!isAuthPage) {
        return NextResponse.redirect(new URL('/login', request.url));
    }

    return NextResponse.next();
}

// 4. ✅ THE ENTERPRISE PATTERN: The Matcher
// We optimize performance by telling Next.js exactly which routes to intercept,
// ensuring we don't waste CPU cycles checking auth for static assets or public images.
export const config = {
    matcher: [
        '/dashboard/:path*',
        '/settings/:path*',
        '/login'
    ],
};

The Engineering ROI

By shifting your authentication checks out of the React lifecycle and up to the Edge Middleware, you deliver a natively fluid user experience. You completely eliminate UI layout leaks, banish the amateurish Auth Flicker, and drastically reduce client-side JavaScript complexity by removing bulky useEffect routing guards from your components.