nextjs middleware auth?

Hallo, ich bin neu in nextjs.

Ich habe ein Login form, das prüft ob der Nutzer existiert und ob die eingeben Daten passen (prisma sqlite). Dann leitet es weiter auf /dashboard. Leider kann man die Seite dashboard auch ohne Login aufrufen.

Wie ich es verstanden braucht man im src/app eine Datei Namen middleware.js, aber ich weiß nicht was ich da hineinschreiben soll.

Danke im voraus

Answer 1

[regex9]

Eine middleware.js-Datei ist soweit erst einmal nur ein Mittel, um Logiken einzuschieben, die bei jeder Anfrage an die Seite, noch vor dem Aufruf irgendeiner Route ausgeführt werden sollen.

Was da nun tatsächlich passieren soll, musst du selbst definieren. In deinem Fall wäre es eine Prüfung, ob der Nutzer bereits angemeldet ist oder nicht.

Beispiel:

import { NextResponse } from "next/server";

export default function middleware(request) {
  if (!isLoggedIn()) {
    return NextResponse.redirect("/login");
  }

  return NextResponse.next();
}

function isLoggedIn(request) {
  // check if the current user is logged in ...
}
 
export const config = {
  matcher: "/dashboard/:path*",
}

Mit dem matcher-Property des config-Objekts kannst du bestimmen/herausfiltern, für welche Pfade die Middleware berücksichtigt/ausgeführt werden soll. Im obigen Fall ist es nur ein Pfad, für mehrere müsste ein String-Array angegeben werden.

Alternativ könntest du aber auch den Pfad aus dem NextRequest-Objekt herausholen und prüfen.

if (request.nextUrl.pathname.startsWith("/dashboard")) 

Das macht Sinn, wenn für unterschiedliche Pfade unterschiedliche Aktionen ausgeführt werden sollen.

Generell kommst du über das request-Objekt an alle relevanten Request-Informationen heran.

Statt eine eigene Authentifikation zu implementieren, könntest du allerdings auch Next-Auth verwenden.

Comments

[crRaphi]

Danke für die Erklärung.

Wenn ich next-auth benutze bekomme ich damm nur die Funktionen dafür oder auch schon ein externes Login Feld?

[regex9]

@crRaphi

Next-Auth liefert Standardseiten für Login, etc.. Die können aber bei Bedarf auch überschrieben werden. Schau in deren Dokumentation.

[crRaphi]

@regex9

Ich werde es ausprobieren, danke