Настройка Auth.js в App Router Next.js
Установите Auth.js, настройте обработчики маршрутов и добавьте поставщика OAuth GitHub.
«Настройка Auth.js в App Router Next.js» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Что такое Auth.js
Auth.js (ранее NextAuth.js v5) — полнофункциональная библиотека аутентификации для Next.js. Она из коробки поддерживает провайдеров OAuth, учётные данные, сеансы и JWT.
Установка
Установите бета-версию Auth.js и инициализируйте файл конфигурации.
npm install next-auth@beta
# Create auth.ts at project root
touch auth.tsСоздание конфигурации аутентификации
Определите конфигурацию аутентификации в файле auth.ts в корне проекта, указав провайдеров и функции обратного вызова.
import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [GitHub],
callbacks: {
session({ session, token }) {
session.user.id = token.sub!;
return session;
},
},
});Настройка обработчика маршрута
Создайте универсальный обработчик маршрута в app/api/auth/[...nextauth]/route.ts, который передаёт обработку обработчикам Auth.js.
// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';
export const { GET, POST } = handlers;Переменные окружения
Задайте необходимые переменные окружения для провайдеров OAuth. Для подписи JWT требуется AUTH_SECRET.
# .env.local
AUTH_SECRET=your-random-secret-here
# GitHub OAuth
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret
# Generate AUTH_SECRET:
# npx auth secretДобавление кнопок входа и выхода
Импортируйте signIn и signOut из auth.ts и используйте их в формах серверных компонентов.
import { signIn, signOut } from '@/auth';
export function SignInButton() {
return (
<form action={async () => { 'use server'; await signIn('github'); }}>
<button type="submit">Sign in with GitHub</button>
</form>
);
}
export function SignOutButton() {
return (
<form action={async () => { 'use server'; await signOut(); }}>
<button type="submit">Sign out</button>
</form>
);
}Чтение сеанса в серверных компонентах
Вызовите auth() из auth.ts в любом серверном компоненте или обработчике маршрута, чтобы получить текущий сеанс.
import { auth } from '@/auth';
export default async function ProfilePage() {
const session = await auth();
if (!session) redirect('/login');
return <h1>Welcome, {session.user?.name}</h1>;
}Защита страниц с помощью промежуточного ПО
Используйте промежуточное ПО Auth.js для защиты маршрутов на периферии, не выполняя серверную логику при каждом запросе.
// middleware.ts
export { auth as middleware } from '@/auth';
export const config = {
matcher: ['/dashboard/:path*', '/profile/:path*'],
};Сеансы в базе данных
Добавьте адаптер базы данных (например, @auth/prisma-adapter), чтобы сохранять сеансы, пользователей и учётные записи в базе данных вместо JWT.
import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from '@/lib/prisma';
export const { handlers, auth, signIn, signOut } = NextAuth({
adapter: PrismaAdapter(prisma),
providers: [GitHub],
session: { strategy: 'database' },
});Настройка типа сеанса
Расширьте типы сеансов Auth.js, добавив пользовательские поля, например ID пользователя или роль.
// types/next-auth.d.ts
import { DefaultSession } from 'next-auth';
declare module 'next-auth' {
interface Session {
user: { id: string; role: string } & DefaultSession['user'];
}
}Обработка ошибок
По умолчанию Auth.js перенаправляет на /error при ошибках аутентификации. Создайте app/error/page.tsx, чтобы настроить страницу ошибки.
Быстрая проверка
Какой файл необходимо создать, чтобы предоставить обработчики Auth.js GET и POST в маршрутизаторе приложения Next.js?
Повторение
Установите next-auth@beta, создайте auth.ts с провайдерами и функциями обратного вызова, предоставьте обработчики в app/api/auth/[...nextauth]/route.ts, задайте AUTH_SECRET и переменные окружения провайдеров, а затем получайте сеанс с помощью auth() в серверных компонентах.
Часто задаваемые вопросы
Урок «Настройка Auth.js в App Router Next.js» бесплатный?
Да — полный текст урока «Настройка Auth.js в App Router Next.js» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Настройка Auth.js в App Router Next.js»?
Установите Auth.js, настройте обработчики маршрутов и добавьте поставщика OAuth GitHub. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Настройка Auth.js в App Router Next.js»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка Auth.js в App Router Next.js
- Управление сеансами и хук useSession
- Поставщик Credentials и пользовательский вход
- Защита маршрутов на основе промежуточного ПО