Вступ

У цій статті ми розглянемо процес впровадження NextAuth для аутентифікації в проєкті Next.js 15 з використанням TypeScript. NextAuth — це чудова бібліотека для додавання аутентифікації в вашому додатку Next.js, і ми покажемо, як налаштувати її за допомогою CredentialsProvider (вхід через email/пароль) і інтегрувати в ваш проєкт крок за кроком.

Необхідні попередні налаштування

Перед тим як почати, переконайтесь, що у вас налаштовано:

• Проєкт Next.js 15 з TypeScript.
• Налаштований Prisma для роботи з базою даних.
• Базові знання про те, як працюють Next.js та TypeScript.

Крок 1: Встановлення залежностей

Спочатку встановіть необхідні залежності для NextAuth та Prisma:

npm install next-auth bcryptjs prisma @prisma/client

Крок 2: Налаштування Prisma

Якщо ви ще не налаштували Prisma у своєму проєкті, потрібно це зробити. Створіть файл schema.prisma в папці prisma, якщо його ще немає, і визначте модель User ось так:

// schema.prisma  
model User {  
 id Int @id @default(autoincrement())  
 email String @unique  
 password String  
 firstName String  
 lastName String  
 phone String  
}

Далі виконайте команду для генерації клієнта Prisma:

npx prisma generate

Крок 3: Налаштування NextAuth у вашому проєкті

Тепер налаштуємо NextAuth у вашому проєкті. Створіть файл під назвою route.ts у папці app/api/auth/[...nextauth] і налаштуйте його ось так:

// app/api/auth/[...nextauth]/route.ts  
import NextAuth from 'next-auth'  
import CredentialsProvider from 'next-auth/providers/credentials'  
import bcrypt from 'bcryptjs'  
import prisma from '@/lib/db' // Переконайтесь, що у вас налаштовано prisma  

export const authOptions = {  
 providers: [  
 CredentialsProvider({  
 name: 'Credentials',  
 credentials: {  
 email: { label: 'Email', type: 'email' },  
 password: { label: 'Password', type: 'password' },  
 },  
 async authorize(credentials) {  
 if (!credentials?.email || !credentials?.password) {  
 throw new Error('Email і пароль обов\'язкові.')  
 }  

 const user = await prisma.user.findUnique({  
 where: { email: credentials.email },  
 })  

 if (!user) {  
 throw new Error('Невірний email або пароль.')  
 }  

 const isPasswordValid = await bcrypt.compare(credentials.password, user.password)  
 if (!isPasswordValid) {  
 throw new Error('Невірний email або пароль.')  
 }  

 return { id: user.id, email: user.email, firstName: user.firstName, lastName: user.lastName, phone: user.phone }  
 },  
 }),  
 ],  
 session: {  
 strategy: 'jwt', // Використовуємо JWT для управління сесією  
 },  
 pages: {  
 signIn: '/auth/signin', // Налаштуйте свою сторінку входу, якщо потрібно  
 },  
 callbacks: {  
 async jwt({ token, user }) {  
 if (user) {  
 token.id = user.id  
 token.email = user.email  
 token.firstName = user.firstName  
 token.lastName = user.lastName  
 token.phone = user.phone  
 }  
 return token  
 },  
 async session({ session, token }) {  
 if (token) {  
 session.user.id = token.id  
 session.user.email = token.email  
 session.user.firstName = token.firstName  
 session.user.lastName = token.lastName  
 session.user.phone = token.phone  
 }  
 return session  
 },  
 },  
 secret: process.env.JWT_SECRET || 'your_secret_key', // Необов\'язково, вкажіть секретний ключ JWT  
}  

const handler = NextAuth(authOptions)  
export { handler as GET, handler as POST }

Крок 4: Створення фронтенду для аутентифікації

Вам також потрібно створити фронтенд для вашої аутентифікації.
Ось як створити просту сторінку входу за допомогою API NextAuth:

// pages/auth/signin.tsx  
'use client'import { signIn } from 'next-auth/react'  
import { useState } from 'react'export default function SignIn() {  
 const [email, setEmail] = useState('')  
 const [password, setPassword] = useState('')  
 const [error, setError] = useState('')const handleSubmit = async (e: React.FormEvent) => {  
 e.preventDefault()  
 const result = await signIn('credentials', {  
 email,  
 password,  
 redirect: false,  
 })  

 if (result?.error) {  
 setError(result.error)  
 }  
 }return (  

Sign In
 setEmail(e.target.value)}    className="w-full p-2 rounded-[30px] border border-gray-300"    />     setPassword(e.target.value)}    className="w-full p-2 rounded-[30px] border border-gray-300"    />    {error && 
{error}
}        Sign In            
    )   } ```  

## Крок 5: Обробка стану аутентифікації в вашому додатку

Після налаштування аутентифікації, ви можете використовувати хуки **NextAuth** для керування станом аутентифікації в вашому додатку. Ось приклад, як це можна зробити:

// components/Header.tsx 'use client' import { useSession, signOut } from 'next-auth/react' export default function Header() { const { data: session } = useSession() return (
My App
{session ? ( signOut()} className="bg-red-500 p-2 rounded-[30px]"> Sign Out ) : ( Sign In )}
) } ```

Висновок

Тепер ви успішно налаштували NextAuth для аутентифікації у вашому додатку Next.js 15 з використанням TypeScript. Ця конфігурація використовує CredentialsProvider для аутентифікації користувачів за допомогою email і пароля.

Не соромтеся налаштовувати потік аутентифікації на ваш розсуд і впроваджувати більш складні функції, такі як соціальний вхід або збереження сесії.

Якщо ви хочете глибше зануритись у NextAuth або вивчити розширені можливості, документація NextAuth стане чудовим ресурсом.

Перекладено з: How to Implement Authentication with NextAuth in Next.js 15 and TypeScript