4,398 測定値

NextAuth.js を使用して Next.js 14 で電子メール検証を送信し、電子メールを再送信し、反応する方法

に L Javier Tovar12m2024/04/02

長すぎる; 読むには

このブログの最初の部分で NextAuth.js(Auth.js) を使用して Next.js 14 に認証システムを実装する方法を説明しましたが、ユーザー情報の有効性を確認する次のステップである電子メールの検証に進むことが重要です。このプロセスは、アプリケーションのセキュリティにおける追加のステップであるだけでなく、ユーザーとプラットフォーム間の対話が正当かつ安全であることを保証するために不可欠なコンポーネントです。この 2 番目のパートでは、電子メールの送信による電子メール検証の統合、電子メール送信のための再送信の使用、および魅力的で機能的な電子メールテンプレートの作成のための React Email の統合に焦点を当てます。

featured image - NextAuth.js を使用して Next.js 14 で電子メール検証を送信し、電子メールを再送信し、反応する方法

このブログの最初の部分で NextAuth.js(Auth.js) を使用して Next.js 14 に認証システムを実装する方法を説明しましたが、ユーザー情報の有効性を確認する次のステップである電子メールの検証に進むことが重要です。

このプロセスは、アプリケーションのセキュリティにおける追加のステップであるだけでなく、ユーザーとプラットフォーム間の対話が正当かつ安全であることを保証するために不可欠なコンポーネントです。

この 2 番目のパートでは、電子メールの送信による電子メール検証の統合、電子メール送信のための再送信の使用、および魅力的で機能的な電子メールテンプレートの作成のための React Email の統合に焦点を当てます。

初期設定

ブログの最初の部分で説明した認証システムがプロジェクトにすでに実装されていることを確認してください。これには、Next.js 14 と NextAuth が正しく構成されていることも含まれます。

Next.js での再送信と Ract 電子メールの統合

セットアップ

プロジェクトに必要な依存関係をインストールします。今回は、お好みのパッケージマネージャーを使用できるpnpmを使用します。

 pnpm add resend react-email @react-email/components

再送信: メールを送信します。

メールへの反応: React と TypeScript を使用して美しいメールを作成します。

2. プロジェクトに次の構造を作成します。

 ... ├── emails/ │ └── verification-template.tsx ... ├── src/ │ ├── actions/ │ │ ├── email-actions.tsx │ │ └── auth-actions.tsx │ ├── app/ │ │ ... │ │ ├── (primary)/ │ │ │ ├── auth/ │ │ │ │ └── verify-email/ │ │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ │ ... │ ├── components/ │ │ └── auth/ │ │ ├── signin-form.tsx │ │ ├── signup-form.tsx │ │ ... │ ... │ ├── utils.ts │ ... ... ├── .env ...

React Email を使用してメールテンプレートを作成する

React Email では、JSX を使用して電子メールテンプレートを作成できます。これにより、ブランドを反映した魅力的で一貫性のある電子メールの作成が容易になります。

基本的な電子メールテンプレートを React コンポーネントとして作成しましょう。この場合、ユーザーがメールを確認するために送信されるテンプレートを作成します。

emails/verification-template.tsx :

 // Import React and necessary components from @react-email/components import * as React from 'react'; import { Body, Button, Container, Head, Hr, Html, Img, Preview, Section, Text } from '@react-email/components'; import { getBaseUrl } from '@/utils'; // Obtain the base URL using the imported function const baseUrl = getBaseUrl(); // Define the properties expected by the VerificationTemplate component interface VerificationTemplateProps { username: string; emailVerificationToken: string; } // Define the VerificationTemplate component that takes the defined properties export const VerificationTemplate = ({ username, emailVerificationToken }: VerificationTemplateProps) => ( <Html> <Head /> <Preview>Preview text that appears in the email client before opening the email.</Preview> <Body style={main}> <Container style={container}> <Img src='my-logo.png' alt='My SaaS' style={logo} /> <Text style={title}>Hi {username}!</Text> <Text style={title}>Welcome to Starter Kit for building a SaaS</Text> <Text style={paragraph}>Please verify your email, with the link below:</Text> <Section style={btnContainer}> {/* Button that takes the user to the verification link */} <Button style={button} href={`${baseUrl}/auth/verify-email?token=${emailVerificationToken}`} > Click here to verify </Button> </Section> <Hr style={hr} /> <Text style={footer}>Something in the footer.</Text> </Container> </Body> </Html> ); // Styles applied to different parts of the email for customization const main = { backgroundColor: '#020817', color: '#ffffff', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif', }; const container = { margin: '0 auto', padding: '20px 0 48px', }; ...

このコンポーネントは、スタイルと動的コンテンツを含む HTML 電子メールテンプレートを作成します。

プロパティは、 username y emailVerificationTokenを受け取るように定義されています。これらのプロパティは、ユーザーの電子メールをカスタマイズし、検証リンクを生成するために使用されます。

テンプレートを検証およびテストするために、React Email には、メールフォルダー内に作成したテンプレートを公開するサーバーをローカルで実行するコマンドが用意されています。

package.json内にサーバーを実行するスクリプトを作成します。

 { "scripts": { "dev": "email dev" } }

2. スクリプトを実行すると、サーバーがlocalhost上で実行されます。すべてのテンプレートが作成された次のような画面が表示されます。

私たちの場合、テンプレートは 1 つだけです。以下に示すように、ユーザーに送信される電子メールのプレビューが表示されます。

再送信によるメールの送信

を作成しますアカウントを再送信する。
新しいを作成しますAPIキー。
API KEYを.envファイルに追加します。

 ... # resend RESEND_API_KEY="re_jYiFaXXXXXXXXXXXXXXXXXXX"

4. 電子メール送信機能を作成するには、 api/フォルダー内にエンドポイントを作成してhttpリクエストを作成できますが、今回はサーバーアクションの可能性を利用してこれを実行します。

actions/email-actions.ts :

 'use server' import React from 'react' import { Resend } from 'resend' // Creates an instance of Resend using the API KEY const resend = new Resend(process.env.RESEND_API_KEY) // Defines the data structure for an email. interface Email { to: string[] // An array of email addresses to which to send the email. subject: string // The subject of the email. react: React.ReactElement // The body of the email as a React element. } export const sendEmail = async (payload: Email) => { const { error } = await resend.emails.send({ from: 'My SaaS <[email protected]>', // Defines the sender's address. ...payload, // Expands the contents of 'payload' to include 'to', 'subject', and 'react'. }) if (error) { console.error('Error sending email', error) return null } console.log('Email sent successfully') return true }

注: 無料の開発でテストするには、電子メール「[email protected]」を送信者として使用する必要があります。それ以外の場合は、カスタムドメインを追加する必要があります。

5. 新規ユーザー登録時にメールを送信します。

actions/auth-actions.ts :

 ... import { sendEmail } from './email-actions' import VerificationTemplate from '../../emails/verification-template' // Import a utility function to generate a secure token. import { generateSecureToken } from '@/utils' export async function registerUser(user: Partial<User>) { try { // Creates a new user in the database with the provided data. // Passwords are hashed using bcrypt for security. const createdUser = await prisma.user.create({ data: { ...user, password: await bcrypt.hash(user.password as string, 10), } as User, }) // Generates a secure token to be used for email verification. const emailVerificationToken = generateSecureToken() // Updates the newly created user with the email verification token. await prisma.user.update({ where: { id: createdUser.id, }, data: { emailVerificationToken, }, }) // Sends a verification email to the new user using the sendEmail function. await sendEmail({ to: ['your Resend registered email', createdUser.email], subject: 'Verify your email address', react: React.createElement(VerificationTemplate, { username: createdUser.username, emailVerificationToken }), }) return createdUser } catch (error) { console.log(error) if (error instanceof Prisma.PrismaClientKnownRequestError) { if (error.code === 'P2002') { // Returns a custom error message if the email already exists in the database. return { error: 'Email already exists.' } } } return { error: 'An unexpected error occurred.' } } }

ユーザーが作成され、検証トークンが生成されると、関数は新しいユーザーに電子メールを送信します。

この電子メールは、 VerificationTemplate React コンポーネントを使用して構築され、ユーザーの名前と検証トークンでパーソナライズされています。この手順は、ユーザーの電子メールアドレスが有効であり、ユーザーによって管理されているかどうかを確認するために重要です。

トークンを検証するページ

電子メールがユーザーに送信されると、サイトに戻るためのリンクが含まれます。電子メールを検証するには、ページを作成する必要があります。

(primary)/auth/verify-email/page.tsx :

 /* All imports */ // Defines the prop types for the VerifyEmailPage component. interface VerifyEmailPageProps { searchParams: { [key: string]: string | string[] | undefined } } export default async function VerifyEmailPage({ searchParams }: VerifyEmailPageProps) { let message = 'Verifying email...' let verified = false if (searchParams.token) { // Checks if a verification token is provided in the URL. // Attempts to find a user in the database with the provided email verification token. const user = await prisma.user.findUnique({ where: { emailVerificationToken: searchParams.token as string, }, }) // Conditionally updates the message and verified status based on the user lookup. if (!user) { message = 'User not found. Check your email for the verification link.' } else { // If the user is found, updates the user record to mark the email as verified. await prisma.user.update({ where: { emailVerificationToken: searchParams.token as string, }, data: { emailVerified: true, emailVerificationToken: null, // Clears the verification token. }, }) message = `Email verified! ${user.email}` verified = true // Sets the verified status to true. } } else { // Updates the message if no verification token is found. message = 'No email verification token found. Check your email.' } return ( <div className='grid place-content-center py-40'> <Card className='max-w-sm text-center'> <CardHeader> <CardTitle>Email Verification</CardTitle> </CardHeader> <CardContent> <div className='w-full grid place-content-center py-4'> {verified ? <EmailCheckIcon size={56} /> : <EmailWarningIcon size={56} />} </div> <p className='text-lg text-muted-foreground' style={{ textWrap: 'balance' }}> {message} </p> </CardContent> <CardFooter> {verified && ( // Displays a sign-in link if the email is successfully verified. <Link href={'/auth/signin'} className='bg-primary text-white text-sm font-medium hover:bg-primary/90 h-10 px-4 py-2 rounded-lg w-full text-center'> Sign in </Link> )} </CardFooter> </Card> </div> ) }

ユーザーの電子メールが正常に検証されると、次のメッセージが表示されます。

ここで、ユーザーがログインを希望しているが電子メールをまだ検証していない場合の最後の検証を実装します。

components/auth/sigin-form.tsx :

 ... async function onSubmit(values: InputType) { try { setIsLoading(true) const response = await signIn('credentials', { redirect: false, email: values.email, password: values.password, }) if (!response?.ok) { // if the email is not verified we will show a message to the user. if (response?.error === 'EmailNotVerified') { toast({ title: 'Please, verify your email first.', variant: 'warning', }) return } toast({ title: 'Something went wrong!', description: response?.error, variant: 'destructive', }) return } toast({ title: 'Welcome back! ', description: 'Redirecting you to your dashboard!', }) router.push(callbackUrl ? callbackUrl : '/') } catch (error) { console.log({ error }) toast({ title: 'Something went wrong!', description: "We couldn't create your account. Please try again later!", variant: 'destructive', }) } finally { setIsLoading(false) } } ...