Next.js Auth Template

Шаблон фронтенда на Next.js (App Router) с cookie‑based аутентификацией через внешний API. Проект предназначен как стартовая точка: логин, защищённые разделы, авто‑refresh токена и logout уже встроены.

Быстрый старт

npm run dev

Нужно указать адрес backend API в .env.example:

NEXT_PUBLIC_API_URL=https://your-api.example.com

Архитектура и структура

src/
  api/                # Обёртки над запросами к backend API
  app/                # App Router: страницы, layout'ы, route handlers
    (auth)/           # Публичные страницы аутентификации
    (protected)/      # Защищённые страницы (доступ по токенам)
    auth/             # Route handlers для refresh/logout
  components/         # UI-компоненты
  lib/                # Утилиты
  styles/             # Глобальные стили
  types/              # Типы

Контракты с backend

Шаблон ожидает следующие эндпоинты на backend:

• POST /auth/login — возвращает Set-Cookie с access/refresh токенами.
• POST /auth/verify — проверяет access token.
• POST /auth/refresh — обновляет токены и возвращает Set-Cookie.
• POST /auth/logout — инвалидирует сессию и возвращает Set-Cookie для очистки.

Логика сервера Next.js

1. Логин: клиент вызывает login() в src/api/auth.ts, backend выставляет cookies, далее переход на /dashboard.
2. Проверка доступа: src/app/(protected)/layout.tsx вызывает verify() и пропускает пользователя или редиректит на refresh.
3. Refresh: src/app/auth/refresh/route.ts проксирует /auth/refresh, получает Set-Cookie и редиректит на целевую страницу.
4. Страницы логина: src/app/(auth)/layout.tsx проверяет cookies, и если сессия валидна — отправляет на /dashboard.
5. Logout: src/app/auth/logout/route.ts проксирует /auth/logout и очищает cookies.

Примечания

• Вся критичная логика с токенами работает на сервере Next.js, что упрощает безопасность.
• Клиентская часть не хранит токены в localStorage.
• В качестве UI библиотеки используется shadcn/ui.
• Ваш бекенд и токены должен работать на куках.