Next.js 14: HTTP Basic Auth per App-Router-Middleware

Inhaltsverzeichnis

Middleware.ts
Auth Route
Github Repo

In diesem Tutorial zeige ich Ihnen, wie Sie HTTP-Basic-Auth in Ihre Next.js 14 App integrieren können. Basic Auth ist eine Funktion, die Vercel anbietet, aber nur für den Pro Plan. Also, machen wir es selbst, um etwas Geld zu sparen ;-)

Nextjs 14 Middleware Basic Auth - basic auth — Basic Auth Pop-Up

Manchmal benötigt man eine einfache Authentifizierung für kleine Projekte oder die Entwicklungsphase. Hier kommt Basic Auth ins Spiel und das Gute ist ->

Alle Browser unterstützen HTTP Basic Authentication nativ.

Nextjs 14 Middleware Basic Auth - vscode basic auth — Project Overview Next.js 14.1.0

Wir benötigen eine API-Route und eine Middleware-Datei. Unten ist die Middleware-Datei

Middleware.ts

##src/middleware.ts##
# Middleware.ts
import { NextRequest, NextResponse } from "next/server";

export const config = {
  matcher: ["/", "/index"],
};

export function middleware(req: NextRequest) {
  // Getting the Pup IP from the request
  const { ip } = req;
  // console.log("Middleware IP:", ip);
  const basicAuth = req.headers.get("authorization");
  const url = req.nextUrl;

  // Bypass the basic auth on a certain env variable and Pub IP
  if (
    process.env.LOCAL_URL === "http://localhost:3000" &&
    ip !== "xx.xxx.xxx.xxx"
  ) {
    if (basicAuth) {
      const authValue = basicAuth.split(" ")[1];
      const [user, pwd] = atob(authValue).split(":");

      const validUser = process.env.BASIC_AUTH_USER;
      const validPassWord = process.env.BASIC_AUTH_PASSWORD;

      if (user === validUser && pwd === validPassWord) {
        return NextResponse.next();
      }
    }
    url.pathname = "/api/basicauth";

    return NextResponse.rewrite(url);
  }
}

the corresponding .env.local file

##.env.local##
# Basic Auth
BASIC_AUTH_USER=testuser
BASIC_AUTH_PASSWORD="testpassword"

die entsprechende .env.local Datei

Auth Route

##src/app/api/basicauth/route.ts##
export async function GET(request: Request) {
  console.log("GET /api/basicauth/route.ts");
  return new Response("Authentication Required!", {
    status: 401,
    headers: {
      "WWW-Authenticate": "Basic realm='private_pages'",
    },
  });
}

Beachten Sie, dass hier eine sehr einfache Middleware-Integration zu sehen ist. Wenn Sie vorhaben, Lokalisierung/Internationalisierung zu verwenden oder Daten aus einem Headless-CMS zu nutzen, wird die Middleware.ts-Datei ganz anders und komplexer aussehen.

Github Repo

Wenn Ihnen gefällt, was Sie sehen, dann unterstützen Sie mich bitte mit einem "Clap" oder folgen Sie mir auf medium.com.

Next.js 14 - App Router Middleware HTTP Basic Auth mit Typescript

Middleware.ts

Auth Route

Github Repo