このブログの最初の部分で NextAuth.js(Auth.js) を使用して Next.js 14 に認証システムを実装する方法を説明しましたが、ユーザー情報の有効性を確認する次のステップである電子メールの検証に進むことが重要です。 このプロセスは、アプリケーションのセキュリティにおける追加のステップであるだけでなく、ユーザーとプラットフォーム間の対話が正当かつ安全であることを保証するために不可欠なコンポーネントです。 この 2 番目のパートでは、電子メールの送信による電子メール検証の統合、電子メール送信のための再送信の使用、および魅力的で機能的な電子メール テンプレートの作成のための React Email の統合に焦点を当てます。 初期設定 ブログの最初の部分で説明した認証システムがプロジェクトにすでに実装されていることを確認してください。これには、Next.js 14 と NextAuth が正しく構成されていることも含まれます。 https://hackernoon.com/how-to-implement-authentication-in-nextjs-14-with-nextauthjs-shadcnui-react-hook-form-and-zod?embedable=true 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 電子メール テンプレートを作成します。 プロパティは、 y を受け取るように定義されています。これらのプロパティは、ユーザーの電子メールをカスタマイズし、検証リンクを生成するために使用されます。 username 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 <onboarding@resend.dev>', // 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 } 注: 無料の開発でテストするには、電子メール「onboarding@resend.dev」を送信者として使用する必要があります。それ以外の場合は、カスタム ドメインを追加する必要があります。 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.' } } } ユーザーが作成され、検証トークンが生成されると、関数は新しいユーザーに電子メールを送信します。 この電子メールは、 React コンポーネントを使用して構築され、ユーザーの名前と検証トークンでパーソナライズされています。この手順は、ユーザーの電子メール アドレスが有効であり、ユーザーによって管理されているかどうかを確認するために重要です。 VerificationTemplate トークンを検証するページ 電子メールがユーザーに送信されると、サイトに戻るためのリンクが含まれます。電子メールを検証するには、ページを作成する必要があります。 : (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) } } ... それでおしまい！ 🎉 ユーザーは自分の電子メールを検証し、アプリケーションへの登録を完了することができます。 🧑💻 レポはこちら 結論 React Email と Resend を使用してメールを作成および送信する方法はすでに知っています。このプロセスにより、React の知識を活用して、使い慣れた生産的なワークフローを維持しながら効率的にメールをデザインできます。 さまざまなコンポーネントやプロパティを試して、プロジェクトのニーズに完全に適合する電子メールを作成できます。 著者とつながりたいですか? で世界中の友達とつながるのが大好きです。 𝕏 公開されています ここでも
