Magic Link Sign in using Next Auth, Prisma, Amazon SES и Supabase

Введение

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

Установка необходимых библиотек и загрузка проекта

Прежде чем мы начнем, нам нужно начать с загрузки нового приложения NextJS App. Это можно сделать, выполнив команду

npx create-next-app --ts

Это поможет нам загрузить приложение NextJS с автоматически настроенным Typescript. Теперь нам нужно установить наши зависимости, которыми будут prisma и next-auth. Мы можем сделать это, выполнив команды

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

Давайте также добавим файл .env, который выглядит так, как показано ниже

DATABASE_URL = 
SMTP_HOST= 
SMTP_PORT = 587 
SMTP_USER = 
SMTP_PASSWORD = 
SMTP_FROM=
NEXTAUTH_SECRET = 

Supabase

Создание нашего проекта

Теперь нам нужно создать быструю базу данных с помощью Supabase. Если у вас нет аккаунта, вы можете зарегистрироваться здесь и создать бесплатный аккаунт. После этого просто перейдите на приборную панель и создайте новый проект.

Обязательно запишите свой пароль, чтобы не забыть его. Позже он понадобится вам для подключения к базе данных.

Захват URI нашей базы данных

Мы можем найти URI нашей базы данных, перейдя в раздел settings -> database -> connection string -> URI. Я привел несколько снимков ниже, чтобы помочь вам найти его в вашем проекте.

Пароль будет просто паролем, который вы установили при настройке проекта.

Prisma

Настройка нашей схемы

Убедитесь, что вы обновили файл .env с URI базы данных, который мы взяли из supabase. Он должен быть назван DATABASE_URL в файле .env.

Теперь, когда у нас есть рабочая база данных, мы можем начать настраивать схему prisma для работы с ней. Давайте начнем с выполнения команды

npx prisma init

Это создаст для нас новый файл schema.prisma, который мы хотим переопределить с помощью следующего кода

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

Теперь давайте проверим, что наша база данных работает так, как мы планировали, запустив миграцию с помощью команды

npx prisma migrate dev

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

Настройка Amazon Simple Email Service (SES)

Создание верифицированной личности

Amazon SES — это почтовая служба, предоставляемая компанией Amazon, которая помогает вам отправлять электронные письма, используя AWS SDK или SMTP Endpoint, которые они предоставляют. В этой статье мы будем использовать их учетные данные SMTP.

Сначала создайте учетную запись AWS, если вы ее еще не создали. AWS — это крыло Amazon по облачным вычислениям, которое предоставляет множество различных услуг. Вы можете сделать это здесь. После создания новой учетной записи перейдите на приборную панель SES и нажмите на Verified Identities.

Если вы владеете доменом, вам придется подождать некоторое время, прежде чем вы сможете начать отправлять электронные письма с зарегистрированного домена.

Создание пользователя IAM с учетными данными SMTP

Теперь, когда у нас есть рабочий проверенный домен, нам нужно настроить действительного пользователя IAM с учетными данными SMTP. Для этого мы можем просто перейти на экран Account Dashboard на странице SES.

Теперь просто создайте нового пользователя с помощью мастера. Назовите его как угодно, но запишите имя пользователя и пароль, которые предоставит вам Amazon. Они понадобятся вам для настройки нашего потока входа NextAuth.

Таким образом, мы получили все необходимые нам данные.

NextAuth

Настройка нашего провайдера

Теперь давайте начнем настраивать NextAuth в нашем проекте. Сначала откроем наш файл _app.tsx и добавим в него провайдеры NextAuth

import "../styles/globals.css";
import { SessionProvider } from "next-auth/react";

export default function App({
  //@ts-ignore
  Component,
  //@ts-ignore
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

Как вы можете видеть, у нас теперь есть новый провайдер сессий, который может помочь нам использовать NextAuth в нашем приложении. Это поможет отслеживать отдельные сессии, запущенные в нашем приложении, и, в свою очередь, использовать такие полезные функции, как useSession hook в нашем приложении.

Обновление маршрута Next Auth API

Теперь нам нужно создать новый маршрут в созданном нами проекте NextJS. Маршрут будет иметь вид pages/api/auth/[...nextauth].js и будет выглядеть так, как показано ниже.

import NextAuth from "next-auth";
import EmailProvider from "next-auth/providers/email";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    EmailProvider({
      server: `smtp://${process.env.SMTP_USER}:${process.env.SMTP_PASSWORD}@${process.env.SMTP_HOST}:${process.env.SMTP_PORT}`,
      from: process.env.SMTP_FROM,
    }),
    // ...add more providers here
  ],
  adapter: PrismaAdapter(prisma),
});

Теперь нам нужно убедиться, что наш файл .env имеет соответствующие значения

• SMTP_USER: Это имя пользователя, сгенерированное AWS при создании нового пользователя IAM.
• SMTP_PASSWORD: Это пароль, сгенерированный AWS, когда мы создали нового пользователя IAM с привилегиями SMTP.
• SMTP_HOST: Это зависит от того, в каком регионе вы хотите отправлять электронные письма. Для моего региона это email-smtp.ap-southeast-1.amazonaws.com, а конкретную конечную точку SMTP можно найти здесь.
• SMTP_PORT: 587
• SMTP_FROM: Это значение, которое будет отображаться в поле FROM в вашем письме. Обратите внимание, что на этом этапе вы можете добавлять только те письма, которые были проверены SES.

Настройка index.tsx

Теперь у нас все готово. Давайте проверим, работает ли это, для этого мы можем использовать наше приложение NextJS для тестирования. Давайте создадим быстрое приложение, которое использует хук useSession для того, чтобы проверить, работает ли наша аутентификация по волшебной ссылке.

import type { NextPage } from "next";
import { signIn, signOut, useSession } from "next-auth/react";

const Home: NextPage = () => {
  const { data: session } = useSession();

  if (session) {
    return (
      <div>
        Authenticated <button onClick={() => signOut()}>Sign Out</button>
      </div>
    );
  }

  return (
    <div>
      Unauthenticated Boi <button onClick={() => signIn()}>Sign in</button>
    </div>
  );
};

export default Home;

Затем мы можем попытаться войти в систему, нажав кнопку Sign In (Войти).

Это приведет нас на страницу входа, как показано ниже

Которая, когда мы заполняем наш email, перенаправляет нас на страницу

Мы можем убедиться, что наша функция электронной почты работает, проверив, получили ли мы письмо. В данном случае я использовал домен admin@ivanleo.com.

Когда мы нажимаем на него, пользователь может войти в систему и отобразить экран Authenticated, как показано ниже.

Развертывание на Vercel

Давайте развернем этот новый проект, который мы создали. Мы можем сделать это с помощью Vercel, который обеспечивает простое развертывание в один клик с Github. Просто перейдите и выберите проект на вкладке «Новый проект». Затем вам нужно будет просто включить настройки по умолчанию, как показано ниже.

Когда все будет собрано, вам нужно будет добавить в проект vercel все переменные окружения, которые вы настроили в файле .env. Вы можете сделать это в Settings -> Enviroment Variables… Теперь просто запустите повторное развертывание вашего проекта, и все будет готово!