Аутентификация в Next.js от простых решений к промышленным стандартам

Аутентификация — один из ключевых аспектов любого веб‑приложения. В Next.js подход к ней зависит от архитектуры (App Router или Pages Router), требований к безопасности и скорости разработки.

Важное различие:

• Аутентификация (Authentication): Процесс проверки личности пользователя (Кто это?).
• Авторизация (Authorization): Процесс проверки прав доступа (Что этому пользователю можно делать?). В современных приложениях мы всегда работаем с обоими понятиями одновременно.

Вариант 1. Базовая защита «в лоб» (для внутренних инструментов)

Самый простой способ — проверить статический пароль и положить флаг в cookie. Это не подходит для публичных проектов, но годится для внутренних дашбордов, демо‑стендов и прототипов, где не нужна регистрация.

Пример на серверном компоненте (App Router):

// app/api/login/route.ts
import { type NextRequest, NextResponse } from 'next/server';

const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || 'secret123';

export async function POST(req: NextRequest) {
  const { password } = await req.json();
  if (password !== ADMIN_PASSWORD) {
    return NextResponse.json({ ok: false, error: 'Invalid password' }, { status: 401 });
  }

  const response = NextResponse.json({ ok: true });
  response.cookies.set('auth_token', 'simple-token', {
    httpOnly: true, // Защита от XSS (скрипт не может прочитать cookie)
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
    maxAge: 60 * 60 * 24, 
  });
  return response;
}

Вариант 2. Сессии на сервере (NextAuth.js / Auth.js)

Это рекомендуемый стандарт для Next.js. NextAuth.js (теперь развивающийся как Auth.js) берет на себя всю сложную логику: работу с базой данных, OAuth (Google, GitHub), управление сессиями и безопасность.

Современный подход: Server Actions + Auth.js

В App Router вместо классических API-роутов всё чаще используются Server Actions. Это позволяет работать с формой напрямую, без создания лишних эндпоинтов.

Пример логина через Server Action:

// app/lib/actions.ts
'use server'
import { signIn } from 'next-auth/react'; // Или использование auth() в v5

export async function loginAction(formData: FormData) {
  const email = formData.get('email');
  const password = formData.get('password');

  // В v5 это делается через прямой вызов функции auth()
  // Это позволяет избежать лишних клиентских ререндеров
  await signIn('credentials', {
    email,
    password,
    redirect: true,
    redirectTo: '/dashboard',
  });
}

Защита роутов через Middleware (Edge Runtime)

Middleware в Next.js работает на Edge Runtime (легковесная среда). Это значит, что вы не можете использовать тяжелые Node.js библиотеки (например, jsonwebtoken). Вместо них используйте библиотеку jose для работы с JWT.

// middleware.ts
import { withAuth } from "next-auth/middleware";
import { NextResponse } from 'next/server';

export default withAuth(
  function middleware(req) {
    // Здесь можно добавить дополнительную логику авторизации (ролей)
    const token = req.auth;
    if (req.nextUrl.pathname.startsWith('/admin') && token?.user?.role !== 'admin') {
      return NextResponse.redirect(new URL('/login', req.url);
    }
  },
  {
    callbacks: {
      // Функция проверяет, авторизован ли пользователь
      authorized: ({ token }) => !!token,
    },
  }
);

export const config = { matcher: ["/admin/:path*", "/dashboard/:path*"] };

Вариант 3. JWT-аутентификация (API-first)

Если ваше приложение — это в первую очередь API, а фронтенд может быть отдельным (или мобильным), используйте JWT (JSON Web Tokens). Клиент получает токен и передаёт его в заголовке Authorization: Bearer <token>.

Плюсы: Идеально для микросервисов и мобильных приложений. Минусы: Нужно самостоятельно управлять механизмом Refresh Tokens (обновление токена, когда старый истек) и ротацией ключей.

Вариант 4. Внешние Identity Providers (Clerk, Supabase, Auth0)

Когда не хочется тратить время на создание таблиц User, Session и настройки MFA (двухфакторной аутентификации), используют Identity-as-a-Service.

• Clerk: Лучший выбор для Next.js. Дает готовые компоненты <UserProfile />, <SignUp />.
• Supabase Auth: Идеально, если вы используете Supabase как бэкенд (автоматическая синхронизация с БД).

Практические рекомендации по безопасности

1. Хеширование: Никогда не храните пароли в открытом виде. Используйте bcrypt или argon2. 2.Cookie Security: Всегда устанавливайте флаги httpOnly (защита от XSS) и secure (только HTTPS).
2. Валидация: Используйте библиотеки типа Zod для валидации входящих данных при регистрации/логине.
3. Rate Limiting: Ограничивайте количество запросов к API логина, чтобы защититься от брутфорса (подбора пароля).

Как выбрать?