Реализация входа без пароля в проекте Next.js 13 с помощью NextAuth.js и Prisma

В этой статье будут подробно рассмотрены шаги, необходимые для реализации аутентификации без пароля в проекте Next.js с использованием библиотеки NextAuth.js. Кроме того, для достижения этой цели мы будем использовать Prisma в качестве адаптера базы данных.

Аутентификация без пароля — это инновационный подход, который устраняет необходимость использования традиционных комбинаций имени пользователя и пароля. Вместо этого он предлагает более безопасную и удобную для пользователя процедуру аутентификации за счет использования альтернативных методов, таких как магические ссылки по электронной почте или одноразовые коды, отправляемые через SMS.

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

Кроме того, мы будем использовать Prisma в качестве адаптера базы данных. Prisma — это инструмент ORM (объектно-реляционное сопоставление), который упрощает взаимодействие с базой данных, предоставляя типобезопасный и автоматически создаваемый построитель запросов. Он поддерживает несколько баз данных, включая 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.

Настройка Призмы

Чтобы использовать аутентификацию без пароля в проекте 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 prismagenerate`.

Клиент 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 prismamigrate 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 };

В файле универсального маршрута мы импортируем библиотеку 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. Настройка Призмы:

— Экземпляр PrismaClient создается с помощью new PrismaClient(). Это обеспечивает связь с Prisma ORM и базовой базой данных.

3. Варианты аутентификации:

• authOptions — это объект, определяющий конфигурацию аутентификации в NextAuthJS.

• Для свойства adapter установлено значение PrismaAdapter(prisma), которое соединяет NextAuthJS с Prisma с помощью PrismaAdapter.

• Массив providers содержит одного поставщика, EmailProvider. Он настроен с указанием необходимых данных почтового сервера и адреса электронной почты from.

4. Обработчик NextAuth:

• Функция NextAuth вызывается с authOptions в качестве аргумента, создавая обработчик аутентификации.

• Полученный обработчик присваивается переменной handler.

5. Экспорт:

• handler экспортируется как 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. Файл cookie токена CSRF: NextAuthJS устанавливает файл cookie токена CSRF (подделка межсайтовых запросов) для защиты от атак CSRF. Токен CSRF — это уникальное значение, созданное NextAuthJS и сохраненное в файле cookie. Он используется для проверки и проверки подлинности последующих запросов, сделанных пользователем. Когда пользователь отправляет формы или выполняет конфиденциальные действия, токен CSRF включается в заголовки или текст запроса, чтобы гарантировать, что запрос исходит из сеанса проверенного пользователя, а не из вредоносного источника.

3. Куки URL-адреса обратного вызова: NextAuthJS устанавливает файл cookie URL-адреса обратного вызова для хранения исходного URL-адреса, к которому пользователь пытался получить доступ, прежде чем он будет перенаправлен в поток аутентификации. Этот файл cookie помогает NextAuthJS перенаправить пользователя обратно на нужную страницу после успешной аутентификации. Это обеспечивает удобство работы с пользователем, плавно возвращая пользователя в пункт назначения вместо общей целевой страницы.

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

Отличная работа по успешной интеграции NextAuthJS с адаптером Prisma в ваше приложение Next.js! Благодаря простоте и адаптивности, обеспечиваемым NextAuthJS, теперь у вас есть надежная система аутентификации.

Код, используемый в этом руководстве, можно найти в репозитории GitHub, указанном ниже: https://github.com/codelabsacademy/next-auth-guide.

Но зачем здесь останавливаться? Если вы увлечены веб-разработкой и хотите улучшить свои навыки, подумайте о том, чтобы подать заявку на наш учебный курс по веб-разработке. Наш учебный лагерь предлагает комплексный опыт обучения, давая вам знания и практические навыки, необходимые для достижения успеха в динамичном мире веб-разработки.

Присоединившись к нашему учебному курсу, вы получите практический опыт работы с передовыми технологиями, поработаете над реальными проектами и получите персональные рекомендации от отраслевых экспертов. Независимо от того, являетесь ли вы новичком или опытным разработчиком, наша программа предназначена для того, чтобы поднять ваши навыки веб-разработки на новый уровень.

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