Next.jsでメール認証機能を実装する　その１：メール送信機能

+ model VerificationToken {
+   id String @id @default(cuid())
+   email String
+   token String @unique
+   expires DateTime
+   @@unique([email, token])
+ }

model User {
  id       String @id @default(cuid())
  name     String
  email    String @unique
+   emailVerified DateTime?
  password String
}

$ npx prisma generate

$ npx prisma db push

$ npx prisma studio

npm i uuid
npm i --save-dev @types/uuid

import { v4 as uuidv4 } from 'uuid'
import db from '@/lib/db'

export const generateVerificationToken = async (email: string) => {
  const token = uuidv4()
  const expires = new Date(new Date().getTime() + 60 * 60 * 1000)

  //TDOO: 既にトークンが存在していた場合は削除する

  const verificationToken = await db.verificationToken.create({
    data: {
      email,
      token,
      expires,
    },
  })

  return verificationToken
}

60(秒) * 60(分) * 1000(ミリ秒)

import db from '@/lib/db'

export const getVerificationTokenByToken = async (token: string) => {
  try {
    const verificationToken = await db.verificationToken.findUnique({
      where: { token },
    })

    return verificationToken
  } catch {
    return null
  }
}

export const getVerificationTokenByEmail = async (email: string) => {
  try {
    const verificationToken = await db.verificationToken.findFirst({
      where: { email },
    })

    return verificationToken
  } catch {
    return null
  }
}

import { v4 as uuidv4 } from 'uuid'
+ import { getVerificationTokenByEmail } from '@/data/verification-token'
import db from '@/lib/db'

export const generateVerificationToken = async (email: string) => {
  const token = uuidv4()
  const expires = new Date(new Date().getTime() + 60 * 60 * 1000)

+   const existingToken = await getVerificationTokenByEmail(email)

+   if (existingToken) {
+     await db.verificationToken.delete({
+       where: {
+         id: existingToken.id,
+       },
+     })
+   }

  const verificationToken = await db.verificationToken.create({
    data: {
      email,
      token,
      expires,
    },
  })

  return verificationToken
}

SENDGRID_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

npm i @sendgrid/mail

import sendgrid from '@sendgrid/mail'

sendgrid.setApiKey(process.env.SENDGRID_API_KEY as string)

const domain = process.env.NEXT_PUBLIC_APP_URL

export const sendVerificationEmail = async (email: string, token: string) => {
  const confirmLink = `${domain}/auth/new-verification?token=${token}`

  try {
    await sendgrid.send({
      from: 'test-taro@shinagawa-web.com',
      to: email,
      subject: 'メールアドレスの確認',
      html: `<p>以下のリンクをクリックして、メールアドレスの確認を行ってください。<br><a href="${confirmLink}">ここをクリック</a></p>`,
    })

    return { success: true }
  } catch (err) {
    return { success: false }
  }
}

const domain = process.env.NEXT_PUBLIC_APP_URL

(※一部省略)

export const sendVerificationEmail = async (email: string, token: string) => {

  const confirmLink = `${domain}/auth/new-verification?token=${token}`

NEXT_PUBLIC_APP_URL="http://localhost:3000"

    await sendgrid.send({
      from: 'test-taro@shinagawa-web.com',
      to: email,
      subject: 'メールアドレスの確認',
      html: `<p>以下のリンクをクリックして、メールアドレスの確認を行ってください。<br><a href="${confirmLink}">ここをクリック</a></p>`,
    })

+ import { generateVerificationToken } from '@/lib/tokens'
+ import { sendVerificationEmail } from '@/lib/mail'

(※一部省略)


  try {
    await db.user.create({
      data: {
        name,
        email,
        password: hashedPassword,
      },
    })

+     const verificationToken = await generateVerificationToken(email)
+     const sendResult = await sendVerificationEmail(
+       verificationToken.email,
+       verificationToken.token,
+     )
+     if (sendResult.success) {
+       return {
+         success:
+           '確認メールを送信しました。メール内のリンクをクリックしてアカウントを有効化してください。',
+       }
+     } else {
+       return { error: '確認メールの送信に失敗しました' }
+     }

-     return { success: 'アカウントを登録しました' }
  } catch (e) {

  return (
    <div className="flex items-center gap-x-2 rounded-md bg-emerald-500/15 p-3 text-sm text-emerald-500">
-       <CheckCircledIcon className="size-4" />
+       <CheckCircledIcon className="size-4 shrink-0" />
      <p>{message}</p>
    </div>
  )

+ import { getUserByEmail } from '@/data/user'
+ import { sendVerificationEmail } from '@/lib/mail'
+ import { generateVerificationToken } from '@/lib/tokens'

(※一部省略)

  if (!validatedFields.success) {
    return { error: '入力内容を修正してください' }
  }

  const { email, password } = validatedFields.data

+   const existingUser = await getUserByEmail(email)
+   if (!existingUser || !existingUser.email || !existingUser.password) {
+     return { error: 'メールアドレスもしくはパスワードが間違っています。' }
+   }
+   if (!existingUser.emailVerified) {
+     const verificationToken = await generateVerificationToken(
+       existingUser.email,
+     )
+     const sendResult = await sendVerificationEmail(
+       verificationToken.email,
+       verificationToken.token,
+     )
+     if (sendResult.success) {
+       return {
+         success:
+           'メールアドレスが未認証です。認証リンクをメールで再送しました。',
+       }
+     } else {
+       return { error: '確認メールの送信に失敗しました' }
+     }
+   }

  try {
    await signIn('credentials', {

  if (!existingUser.emailVerified) {
    const verificationToken = await generateVerificationToken(
      existingUser.email,
    )
    const sendResult = await sendVerificationEmail(
      verificationToken.email,
      verificationToken.token,
    )
    if (sendResult.success) {
      return {
        success:
          'メールアドレスが未認証です。認証リンクをメールで再送しました。',
      }
    } else {
      return { error: '確認メールの送信に失敗しました' }
    }
  }

+ import { FormSuccess } from '../form-success'

  const [error, setError] = useState<string | undefined>('')
+   const [success, setSuccess] = useState<string | undefined>('')
  const [isPending, setTransition] = useTransition()

(※一部省略)

  const onSubmit = async (values: z.infer<typeof LoginSchema>) => {
    setError('')
+     setSuccess('')
    setTransition(async () => {
      try {
        const response = await login(values)
-         if (response && response.error) {
-           setError(response.error)
-         }
+         setError(response?.error)
+         setSuccess(response?.success)
      } catch (e) {
        setError('エラーが発生しました')
      }
   })
  }

(※一部省略)

      <FormError message={error} />
+       <FormSuccess message={success} />
      <Button type="submit" className="w-full" disabled={isPending}>
        ログイン
      </Button>

localhost:3000/auth/new-verification?token=xxxxxxxxxx

export const authRoutes: string[] = [
  '/auth/login',
  '/auth/register',
+   '/auth/new-verification',
]