Реалізація входу без пароля в проекті Next.js 13 за допомогою NextAuth.js і Prisma

У цій статті ми розповімо про кроки, необхідні для реалізації автентифікації без пароля в проекті Next.js за допомогою бібліотеки NextAuth.js. Крім того, для досягнення цієї мети ми будемо використовувати Prisma як наш адаптер бази даних.

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

Next.js — популярний фреймворк React для створення веб-додатків, відомий своєю простотою та ефективністю. Ми можемо легко включити автентифікацію без пароля в наш проект, інтегрувавши NextAuth.js, бібліотеку автентифікації, розроблену явно для Next.js.

Крім того, ми будемо покладатися на Prisma як наш адаптер бази даних. Prisma — це інструмент ORM (Object-Relational Mapping), який спрощує взаємодію з базою даних, надаючи безпечний для типів і автоматично створений конструктор запитів. Він підтримує кілька баз даних, включаючи PostgreSQL, MySQL і SQLite, що робить його універсальним вибором для нашої реалізації автентифікації.

У цьому посібнику ми надамо покрокові інструкції щодо встановлення та налаштування автентифікації без пароля за допомогою NextAuth.js у проекті Next.js. Ми також продемонструємо, як інтегрувати Prisma як наш адаптер бази даних, що забезпечує безперебійний зв’язок між нашою програмою та базою даних.

Зараз ми розглянемо, як покращити безпеку та взаємодію з користувачем нашої програми Next.js за допомогою автентифікації без пароля та можливостей NextAuth.js і Prisma. Давайте почнемо.

Що таке вхід без пароля?

Вхід без пароля, як випливає з назви, є методом автентифікації, який усуває потребу в традиційних комбінаціях імені користувача та пароля. Замість цього він використовує альтернативні засоби перевірки особи користувача, такі як чарівні посилання електронною поштою або одноразові коди, надіслані через SMS. Цей підхід має кілька переваг перед традиційними методами входу. По-перше, це усуває ризик уразливості, пов’язаної з паролем, наприклад слабкі паролі або повторне використання пароля. По-друге, це спрощує роботу користувача, усуваючи необхідність запам’ятовувати та вводити складні паролі.

Щоб реалізувати вхід без пароля за допомогою чарівних посилань електронної пошти або одноразових кодів, нам потрібен сервер SMTP (Простий протокол передачі пошти).

Сервер SMTP відповідає за надсилання електронних листів через Інтернет. У контексті автентифікації без пароля сервер надсилає чарівні посилання або одноразові коди на зареєстровану електронну адресу користувача. Коли користувач ініціює процес входу, електронного листа з унікальним посиланням або кодом створюється та надсилається користувачеві. Потім користувач може натиснути посилання або ввести код, щоб завершити процес автентифікації. Сервер SMTP діє як посередник між програмою та службою електронної пошти користувача, забезпечуючи безпечну та надійну доставку повідомлень автентифікації. Використовуючи SMTP-сервер, ми можемо ефективно реалізувати вхід без пароля та забезпечити безперебійну автентифікацію для наших користувачів.

Давайте розпочнемо!

По-перше, нам потрібно створити новий проект Next.js. Для цього скористайтеся такою командою:

npx create-next-app@latest

Після створення нового проекту Next.js ви можете перейти до новоствореного каталогу проекту.

Змінивши каталог у проекті, ви зможете досліджувати різні папки та файли, які складають структуру проекту Next.js.

Розуміння структури проекту має важливе значення для ефективної розробки та організації вашої програми Next.js. Звернувшись до офіційної документації, ви можете використати найкращі практики та отримати уявлення про те, як структурувати свій код, керувати статичними ресурсами та створювати багаторазові компоненти.

Встановлення наших залежностей

Щоб увімкнути автентифікацію без пароля в нашому проекті Next.js за допомогою NextAuth.js, ми повинні спочатку встановити необхідні залежності. Виконайте команду yarn add next-auth nodemailer, щоб додати NextAuth.js і nodemailer до нашого проекту.

Ми спеціально використовуємо nodemailer, оскільки це популярний і універсальний модуль для надсилання електронних листів у Node.js. Він забезпечує простий і надійний спосіб надсилання магічних посилань або одноразових кодів, необхідних для автентифікації без пароля, електронною поштою.

Далі давайте інтегруємо Prisma як наш адаптер бази даних. Почніть із встановлення необхідних пакетів Prisma за допомогою команди:

yarn add @prisma/client @next-auth/prisma-adapter

Ці пакети забезпечать безперебійний зв’язок між нашою програмою Next.js і базою даних. Крім того, нам також потрібно встановити Prisma як залежність від розробника, виконавши:

yarn add prisma --dev

Цей крок гарантує, що у нас є необхідні інструменти для роботи з Prisma та її автоматично створеним конструктором запитів для взаємодії з базою даних.

Встановлюючи ці залежності, ми заклали основу для реалізації автентифікації без пароля за допомогою NextAuth.js і Prisma в нашому проекті Next.js.

Налаштувати Prisma

Для використання автентифікації без пароля в проекті Next.js необхідно налаштувати Prisma та мати доступ до SMTP-сервера для надсилання електронної пошти. Цей посібник допоможе вам використовувати особистий обліковий запис Gmail для надсилання електронних листів. Для успішного налаштування виконайте наведені нижче дії.

Спочатку створіть папку «prisma» у корені вашого проекту. У цій папці будуть розміщені файли та конфігурації, пов’язані з Prisma. Потім у папці «prisma» створіть новий файл під назвою «schema.prisma». Файл схеми визначає структуру вашої бази даних і служить схемою для автоматично створеного коду Prisma.

Якщо ви вперше знайомі зі схемою, не хвилюйтеся! Схема визначає таблиці, поля, зв’язки та обмеження бази даних. Щоб створити схему, ви можете звернутися до офіційної документації NextAuth.js і скопіювати наданий там приклад схеми. Ця схема є відправною точкою та може бути налаштована відповідно до вимог вашої програми.

Далі створіть файл ".env" у корені вашого проекту. У цьому файлі зберігатимуться ваші змінні середовища, включаючи необхідні конфігурації для вашого SMTP-сервера. Щоб заповнити файл ".env", ви можете скопіювати наведені нижче приклади конфігурацій. Обов’язково введіть облікові дані свого облікового запису Gmail і налаштування сервера SMTP у відповідні поля.

EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret

Виконуючи ці кроки, ви налаштуєте Prisma та налаштуєте сервер SMTP для надсилання електронних листів за допомогою свого облікового запису Gmail. Ця підготовка має вирішальне значення для ввімкнення потоку автентифікації без пароля у вашому проекті Next.js.

Примітка

Ви повинні створити пароль програми, якщо ви ввімкнули двофакторну автентифікацію (2FA) для свого облікового запису Google. Пароль додатка – це окремий пароль, який надає доступ до певних додатків або пристроїв без розкриття основного пароля облікового запису Google. Дотримуйтеся вказівок нижче, щоб створити пароль програми.

1. Перейдіть на сторінку налаштувань облікового запису Google, відвідавши https://myaccount.google.com/.

2. Перейдіть на вкладку «Безпека».

3. Знайдіть розділ «2FA», прокрутіть униз і виберіть «Паролі програм».

4. Вам може бути запропоновано ще раз ввести пароль облікового запису Google для перевірки безпеки.

5. У спадному списку «Виберіть програму» виберіть «Пошта» або «Інше (спеціальна назва)».

• Якщо опція «Пошта» доступна, виберіть її.

• Якщо опція «Пошта» недоступна, виберіть «Інше (Власне ім’я)» та введіть власне ім’я для ідентифікації.

6. Натисніть кнопку «Створити» або «Створити пароль».

7. Google створить для вас унікальний пароль програми. Запам'ятайте цей пароль, оскільки ми будемо використовувати його в нашій програмі для надсилання електронних листів.

8. Використовуйте цей згенерований пароль програми в конфігурації SMTP-сервера програми Next.js. Замініть звичайний пароль облікового запису Gmail на цей пароль програми.

Це гарантує, що навіть якщо ввімкнено 2FA, ваша програма може безпечно надсилати електронні листи за допомогою вашого облікового запису Gmail.

PostgreSQL з використанням Supabase

Перш ніж ми зможемо продовжити, нам потрібно переконатися, що база даних для нашого проекту функціонує правильно. Для цієї демонстрації ми рекомендуємо використовувати базу даних Supabase PostgreSQL. Щоб почати роботу з проектом Supabase і отримати URL-адресу підключення PostgreSQL, виконайте такі дії:

1. Перейдіть на сторінку supabase.io та увійдіть у свій обліковий запис або створіть новий, якщо у вас його немає.

2. Після входу в систему вас буде спрямовано на інформаційну панель Supabase. Натисніть «Створити новий проект», щоб почати новий проект.

3. Назвіть свій проект і виберіть регіон, найближчий до вашого поточного місцезнаходження. Запам'ятайте свій пароль, він вам знадобиться пізніше.

4. Коли ви створите проект, ви перейдете на інформаційну панель проекту. Натисніть «База даних» на лівій бічній панелі, щоб отримати доступ до налаштувань бази даних.

5. У розділі «База даних» ви знайдете URL-адресу підключення PostgreSQL. Ця URL-адреса містить усю необхідну інформацію для підключення до бази даних вашого проекту Supabase, таку як хост, порт, ім’я бази даних, ім’я користувача та пароль. Він відображатиметься у форматі: postgres://<ім’я користувача>:<пароль>@<хост>:<порт>/<база даних>

6. Скопіюйте URL-адресу підключення PostgreSQL і збережіть її в безпеці. Він знадобиться для встановлення зв’язку між вашим додатком і базою даних Supabase.

    // .env
    
    DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
    ```

Тепер давайте переконаємося, що ми створили наш клієнт Prisma, виконавши таку команду: `npx prisma generate`.

Клієнт Prisma — це клієнт бази даних, автоматично створений на основі вашої схеми. За замовчуванням клієнт Prisma створюється в папці `node_modules/.prisma/client`, але ви можете [за потреби вказати спеціальне розташування](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Далі ми перейдемо до створення початкової міграції. Виконайте таку команду: `npx prisma migrate dev`. Ви можете дати кожній міграції описову назву.

У Prisma міграція — це метод, який використовується для керування коригуванням вашої схеми бази даних з часом. Це дозволяє змінювати структуру вашої бази даних, не втрачаючи будь-яких раніше існуючих даних. Ці міграції мають вирішальне значення, оскільки вони гарантують, що ваша схема бази даних узгоджується з потребами вашої програми, коли вони змінюються. За допомогою інструменту міграції Prisma ви можете зручно версії, застосування та скасування цих змін, спрощуючи командну роботу та підтримуючи єдину схему бази даних у різних середовищах.

Тепер, якщо ми перевіримо нашу базу даних, ми зможемо побачити зміни від нашої початкової міграції, відображені в розділі бази даних.

Виконуючи початкову міграцію, ми застосували зміни до схеми нашої бази даних, як визначено в сценарії міграції.

![Database Tables after Migration](https://drive.google.com/uc?export=view&id=1PZ6ban5h4VZs3UHQoJS_5kNYkhqs-MAx)

### Налаштування NextAuthJS за допомогою адаптера Prisma

У додатку Next.js NextAuthJS використовує маршрут загального доступу, також відомий як шаблон підстановки або резервний маршрут, для керування запитами автентифікації. Цей динамічний маршрут визначається за допомогою файлової системи маршрутизації в Next.js.

Створіть папку з назвою «**api**» у своєму каталозі «**app**». У папці «**api**» створіть папку «**auth**». Усередині папки «**auth**» створіть загальний маршрут під назвою «**[...nextauth]**» як папку. Нарешті, створіть файл "**route.ts**" у папці маршруту для всіх маршрутів і додайте наступний код.

```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';

const prisma = new PrismaClient();

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

У файл маршруту catch-all ми імпортуємо бібліотеку NextAuthJS і налаштовуємо параметри автентифікації, постачальників і конфігурації. NextAuthJS обробляє аналіз вхідних запитів, визначає необхідну дію автентифікації та виконує відповідну логіку відповідно до вказаних параметрів.

Наданий код налаштовує NextAuthJS з адаптером Prisma для автентифікації за допомогою постачальника електронної пошти. Пояснимо кожне твердження:

1. Імпорт:

• PrismaAdapter і PrismaClient імпортуються з @next-auth/prisma-adapter і @prisma/client відповідно. Вони використовуються для інтеграції NextAuthJS із Prisma.

• NextAuth імпортується з next-auth і є основною бібліотекою для обробки автентифікації в програмах Next.js.

• EmailProvider імпортується з next-auth/providers/email і використовується як постачальник для автентифікації на основі електронної пошти.

2. Налаштування Prisma:

• Примірник PrismaClient створюється за допомогою new PrismaClient(). Це дозволяє зв’язуватися з Prisma ORM і основною базою даних.

3. Параметри автентифікації:

• authOptions – це об’єкт, який визначає конфігурацію для автентифікації в NextAuthJS.

• Для властивості adapter встановлено значення PrismaAdapter(prisma), яке з’єднує NextAuthJS із Prisma за допомогою PrismaAdapter.

• Масив providers містить одного постачальника, EmailProvider. Він налаштований із зазначенням необхідних даних сервера електронної пошти та електронної адреси від.

4. Обробник NextAuth:

• Функція NextAuth викликається з authOptions як аргументом, створюючи обробник автентифікації.

• Отриманий обробник призначається змінній handler.

5. Експорт:

• обробник експортується як GET і POST для підтримки запитів HTTP GET і POST.

Тепер давайте запустимо наш сервер і перевіримо функціональність. Спочатку запустіть сервер розробки, запустивши yarn dev. Далі відкрийте свій браузер і відвідайте localhost:3000, щоб побачити програму в дії.

Щоб перевірити функцію автентифікації, відвідайте localhost:3000/api/auth/signin. Тут ви відчуєте магію NextAuthJS. Наданий шаблон, включений у NextAuthJS, дає змогу входити без пароля. Щоб спробувати, введіть дійсну адресу електронної пошти.

Після того, як ви надішлете електронний лист, NextAuthJS впорається з закулісним процесом. По-перше, він створить і надішле електронний лист, що містить унікальне посилання для входу, на надану адресу електронної пошти. Це посилання служить маркером безпечної автентифікації для користувача. Потім, коли користувач натискає посилання, NextAuthJS перевірить маркер і автентифікує користувача.

Ця функція входу без пароля покращує безпеку та взаємодію з користувачем, усуваючи потребу в паролях. Користувачі можуть швидко та безпечно отримати доступ до своїх облікових записів, просто натиснувши посилання, отримане електронною поштою. Це оптимізує процес входу та зменшує ризик уразливості, пов’язаної з паролями.

Коли користувач натискає електронну пошту для входу, згенеровану NextAuthJS, і проходить автентифікацію, кілька дій виконуються за лаштунками, щоб полегшити процес входу.

1. Перевірка посилання електронною поштою: коли користувач натискає посилання для входу, NextAuthJS перевіряє маркер автентифікації, вбудований у посилання. Цей маркер забезпечує безпеку та цілісність процесу автентифікації.

2. Процес автентифікації: після успішної перевірки токена NextAuthJS ідентифікує користувача та завершує процес автентифікації. Він перевіряє особу користувача на основі наданого токена та будь-яких додаткових налаштованих факторів автентифікації, наприклад багатофакторної автентифікації.

3. Створення сеансу: після успішної автентифікації NextAuthJS створює сеанс для користувача. Сеанс — це постійний стан, який представляє статус автентифікації користувача та дозволяє йому отримувати доступ до захищених ресурсів без необхідності повторної автентифікації для наступних запитів.

4. Файли cookie: NextAuthJS встановлює безпечні файли cookie лише HTTP у браузері користувача для керування сеансом. Ці файли cookie відіграють вирішальну роль у підтримці автентифікованого стану користувача під час кількох запитів. Залежно від конфігурації автентифікації файли cookie зазвичай включають сеансовий файл cookie та, за бажанням, файл cookie маркера оновлення.

1. Файл cookie сеансу: файл cookie сеансу містить ідентифікатор сеансу (наприклад, випадково згенерований рядок), який унікально ідентифікує сеанс користувача. Це допомагає NextAuthJS пов’язувати наступні запити з правильним сеансом і користувачем.

2. CSRF Token Cookie: NextAuthJS встановлює CSRF (Cross-Site Request Forgery) маркер cookie для захисту від атак CSRF. Маркер CSRF — це унікальне значення, згенероване NextAuthJS і збережене в файлі cookie. Він використовується для підтвердження та перевірки автентичності наступних запитів, зроблених користувачем. Коли користувач надсилає форми або виконує конфіденційні дії, маркер CSRF включається в заголовки або тіло запиту, щоб переконатися, що запит походить із сеансу автентифікованого користувача, а не зі зловмисного джерела.

3. Callback URL Cookie: NextAuthJS встановлює файл cookie URL-адреси зворотного виклику для збереження оригінальної URL-адреси, до якої користувач намагався отримати доступ перед тим, як його було перенаправлено до процесу автентифікації. Цей файл cookie допомагає NextAuthJS перенаправляти користувача назад на потрібну сторінку після успішної автентифікації. Це забезпечує зручну взаємодію з користувачем, плавно повертаючи користувача до потрібного пункту призначення замість загальної цільової сторінки.

Використовуючи безпечні файли cookie лише HTTP, NextAuthJS гарантує, що стан автентифікації залишається безпечним і захищеним від втручання. Файли cookie зашифровані, що запобігає несанкціонованому доступу або модифікації зловмисниками.

Чудова робота з успішної інтеграції NextAuthJS з адаптером Prisma у ваш додаток Next.js! Завдяки простоті та адаптивності, які забезпечує NextAuthJS, тепер у вас є надійна система автентифікації.

Перегляньте сховище GitHub, посилання на яке наведено нижче, щоб знайти код, використаний у цьому посібнику: https://github.com/codelabsacademy/next-auth-guide.

Але навіщо тут зупинятися? Якщо ви захоплюєтеся веб-розробкою та прагнете вдосконалити свої навички, подайте заявку на участь у нашому навчальному семінарі з веб-розробки. Наш навчальний табір пропонує комплексний досвід навчання, озброївши вас знаннями та практичними навичками, необхідними для досягнення успіху в динамічному світі веб-розробки.

Приєднавшись до нашого навчального табору, ви отримаєте практичний досвід роботи з передовими технологіями, попрацюєте над реальними проектами та отримаєте персоналізовані рекомендації від експертів галузі. Незалежно від того, початківець ви чи досвідчений розробник, наша програма створена, щоб вивести ваші навички веб-розробки на новий рівень.

Не пропустіть цю можливість прискорити свій шлях веб-розробки. Подайте заявку на наш навчальний курс із веб-розробки сьогодні і розкрийте свій повний потенціал у захоплюючій сфері веб-розробки. Давайте разом створювати дивовижні цифрові можливості та формувати майбутнє Інтернету.