Шаблони аутентифікації в Next.js

Аутентифікація в Next.js

Next.js пропонує кілька патернів для аутентифікації, використовуючи Серверні Компоненти, Проміжне ПЗ та Обробники Маршрутів. Ключовим є вирішення питання де перевіряти аутентифікацію та як захищати маршрути.

Аутентифікація через Проміжне ПЗ

Перевіряйте аутентифікацію на кожному запиті перед тим, як він досягне ваших сторінок:

tsx

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

const publicPaths = ["/", "/login", "/register", "/api/auth"];

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // Дозволити публічні шляхи
  if (publicPaths.some(path => pathname.startsWith(path))) {
    return NextResponse.next();
  }

  // Перевірка токена аутентифікації
  const token = request.cookies.get("auth-token")?.value;

  if (!token) {
    const loginUrl = new URL("/login", request.url);
    loginUrl.searchParams.set("callbackUrl", pathname);
    return NextResponse.redirect(loginUrl);
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

Аутентифікація через Серверний Компонент

tsx

// lib/auth.ts
import { cookies } from "next/headers";

export async function getSession() {
  const cookieStore = await cookies();
  const token = cookieStore.get("auth-token")?.value;

  if (!token) return null;

  try {
    const user = await verifyToken(token);
    return user;
  } catch {
    return null;
  }
}

tsx

// app/dashboard/page.tsx (Серверний Компонент)
import { redirect } from "next/navigation";
import { getSession } from "@/lib/auth";

export default async function DashboardPage() {
  const session = await getSession();

  if (!session) {
    redirect("/login");
  }

  return (
    <div>
      <h1>Ласкаво просимо, {session.user.name}</h1>
      <DashboardContent />
    </div>
  );
}

Аутентифікація через Обробник Маршрутів

tsx

// app/api/profile/route.ts
import { getSession } from "@/lib/auth";

export async function GET() {
  const session = await getSession();

  if (!session) {
    return Response.json({ error: "Неавторизовано" }, { status: 401 });
  }

  return Response.json({ user: session.user });
}

Аутентифікація через Серверну Дію

tsx

"use server";

import { getSession } from "@/lib/auth";

export async function updateProfile(formData: FormData) {
  const session = await getSession();

  if (!session) {
    throw new Error("Неавторизовано");
  }

  const name = formData.get("name") as string;
  await db.update(users)
    .set({ name })
    .where(eq(users.id, session.user.id));

  revalidatePath("/profile");
}

Аутентифікація з NextAuth.js (Auth.js)

tsx

// auth.ts
import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";
import Credentials from "next-auth/providers/credentials";

export const { auth, handlers, signIn, signOut } = NextAuth({
  providers: [
    GitHub,
    Credentials({
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" },
      },
      authorize: async (credentials) => {
        const user = await getUserByEmail(credentials.email);
        if (!user || !await verifyPassword(credentials.password, user.password)) {
          return null;
        }
        return user;
      },
    }),
  ],
});

// app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth";
export const { GET, POST } = handlers;

Де перевіряти аутентифікацію

Шар	Коли використовувати	Переваги
Проміжне ПЗ	Захистити цілі секції	Виконується перед рендерингом, швидко
Серверний Компонент	Аутентифікація на рівні сторінки	Може отримувати дані користувача
Обробник Маршрутів	Захист API	Стандартна HTTP аутентифікація
Серверна Дія	Захист мутацій	Валідація перед записами в БД
Макет	Аутентифікація на рівні секції	Обгортає всі дочірні сторінки

Найкращі практики

Завжди перевіряйте на сервері — ніколи не довіряйте лише клієнтській аутентифікації
Використовуйте Проміжне ПЗ для широкого захисту маршрутів
Використовуйте Серверні Компоненти для аутентифікації на рівні сторінки з отриманням даних
Завжди валідуйте в Серверних Діях — це викликаються кінцеві точки
HttpOnly cookies для токенів — не localStorage
Комбінуйте шари — Проміжне ПЗ + Серверний Компонент для глибокого захисту

Важливо:

Аутентифікацію в Next.js слід перевіряти на кількох рівнях: Проміжне ПЗ для захисту маршрутів, Серверні Компоненти для доступу на рівні сторінки та Серверні Дії для безпеки мутацій. Використовуйте HttpOnly cookies для зберігання токенів і завжди валідуйте на сервері. Бібліотеки, такі як NextAuth.js (Auth.js), спрощують OAuth та аутентифікацію на основі облікових даних.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань