3,959 পড়া

NextAuth.js এর সাথে Next.js 14-এ ইমেল যাচাইকরণ কীভাবে পাঠাবেন, ইমেল পুনরায় পাঠাবেন এবং প্রতিক্রিয়া জানাবেন

দ্বারা L Javier Tovar12m2024/04/02

অতিদীর্ঘ; পড়তে

এই ব্লগের প্রথম অংশে NextAuth.js(Auth.js) সহ Next.js 14-এ একটি প্রমাণীকরণ সিস্টেম কীভাবে প্রয়োগ করা যায় তা অন্বেষণ করার পরে, ব্যবহারকারীর তথ্যের বৈধতা নিশ্চিত করার জন্য পরবর্তী পদক্ষেপ নেওয়া অত্যন্ত গুরুত্বপূর্ণ: ইমেল যাচাইকরণ। এই প্রক্রিয়াটি শুধুমাত্র আমাদের অ্যাপ্লিকেশনের নিরাপত্তার একটি অতিরিক্ত পদক্ষেপ নয়, ব্যবহারকারী এবং প্ল্যাটফর্মের মধ্যে মিথস্ক্রিয়া বৈধ এবং নিরাপদ তা নিশ্চিত করার জন্য একটি অপরিহার্য উপাদান। এই দ্বিতীয় অংশে, আমরা ইমেল পাঠিয়ে, ইমেল পাঠানোর জন্য পুনরায় পাঠান ব্যবহার করে এবং আকর্ষণীয় এবং কার্যকরী ইমেল টেমপ্লেট তৈরি করতে ইমেল প্রতিক্রিয়ার মাধ্যমে ইমেল যাচাইকরণকে একীভূত করার উপর ফোকাস করব।

featured image - NextAuth.js এর সাথে Next.js 14-এ ইমেল যাচাইকরণ কীভাবে পাঠাবেন, ইমেল পুনরায় পাঠাবেন এবং প্রতিক্রিয়া জানাবেন

এই প্রক্রিয়াটি শুধুমাত্র আমাদের অ্যাপ্লিকেশনের নিরাপত্তার একটি অতিরিক্ত পদক্ষেপ নয়, ব্যবহারকারী এবং প্ল্যাটফর্মের মধ্যে মিথস্ক্রিয়া বৈধ এবং নিরাপদ তা নিশ্চিত করার জন্য একটি অপরিহার্য উপাদান।

এই দ্বিতীয় অংশে, আমরা ইমেল পাঠিয়ে, ইমেল পাঠানোর জন্য পুনরায় পাঠান ব্যবহার করে এবং আকর্ষণীয় এবং কার্যকরী ইমেল টেমপ্লেট তৈরি করতে ইমেল প্রতিক্রিয়ার মাধ্যমে ইমেল যাচাইকরণকে একীভূত করার উপর ফোকাস করব।

প্রাথমিক কনফিগারেশন

নিশ্চিত করুন যে আপনার প্রকল্পে ইতিমধ্যেই ব্লগের প্রথম অংশে বর্ণিত প্রমাণীকরণ সিস্টেম বাস্তবায়িত হয়েছে। এর মধ্যে রয়েছে Next.js 14 এবং NextAuth সঠিকভাবে কনফিগার করা।

Next.js-এ রিসেন্ড এবং রাক্ট ইমেল ইন্টিগ্রেশন

ঠিককরা

প্রকল্পে প্রয়োজনীয় নির্ভরতা ইনস্টল করুন। এবার আমরা pnpm ব্যবহার করব আপনি আপনার পছন্দের প্যাকেজ ম্যানেজার ব্যবহার করতে পারেন।

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

আবার পাঠান : ইমেইল পাঠাতে।

ইমেল প্রতিক্রিয়া : প্রতিক্রিয়া এবং টাইপস্ক্রিপ্ট ব্যবহার করে সুন্দর ইমেল তৈরি করতে।

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 ...

প্রতিক্রিয়া ইমেল দিয়ে ইমেল টেমপ্লেট তৈরি করা

প্রতিক্রিয়া ইমেল আপনাকে JSX ব্যবহার করে ইমেল টেমপ্লেট তৈরি করতে দেয়, যা আপনার ব্র্যান্ডের সাথে আকর্ষণীয় এবং সামঞ্জস্যপূর্ণ ইমেল তৈরি করতে সহায়তা করে।

আসুন একটি প্রতিক্রিয়া উপাদান হিসাবে একটি মৌলিক ইমেল টেমপ্লেট তৈরি করি। এই ক্ষেত্রে, আমরা একটি টেমপ্লেট তৈরি করব যা ব্যবহারকারীকে তাদের ইমেল নিশ্চিত করার জন্য পাঠানো হবে।

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 এবং emailVerificationToken গ্রহণ করার জন্য সংজ্ঞায়িত করা হয়। এই বৈশিষ্ট্যগুলি ব্যবহারকারীর জন্য ইমেল কাস্টমাইজ করতে এবং যাচাইকরণ লিঙ্ক তৈরি করতে ব্যবহৃত হয়।

টেমপ্লেটটি যাচাই এবং পরীক্ষা করার জন্য প্রতিক্রিয়া ইমেল স্থানীয়ভাবে একটি সার্ভার চালানোর জন্য একটি কমান্ড প্রদান করে যা ইমেল ফোল্ডারের ভিতরে আমরা যে টেমপ্লেটগুলি তৈরি করেছি তা প্রকাশ করবে।

সার্ভার চালানোর জন্য আমরা package.json এ স্ক্রিপ্ট তৈরি করি।

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

2. আমরা স্ক্রিপ্টটি কার্যকর করি এবং এটি localhost সার্ভার চালাবে; আমরা তৈরি করা সমস্ত টেমপ্লেটগুলির সাথে নীচের মতো একটি স্ক্রিন দেখতে পাব।

আমাদের ক্ষেত্রে, আমাদের শুধুমাত্র একটি টেমপ্লেট আছে। আপনি নীচে দেখতে পাচ্ছেন, আমাদের কাছে ইমেলের একটি পূর্বরূপ রয়েছে যা ব্যবহারকারীকে পাঠানো হবে।

রিসেন্ড দিয়ে ইমেল পাঠানো হচ্ছে

একটা তৈরি কর অ্যাকাউন্ট পুনরায় পাঠান .
নতুন একটি তৈরি কর API কী .
.env ফাইলে API KEY যোগ করুন।

 ... # 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 প্রতিক্রিয়া উপাদান ব্যবহার করে তৈরি করা হয়েছে, ব্যবহারকারীর নাম এবং যাচাইকরণ টোকেন দিয়ে ব্যক্তিগতকৃত। ব্যবহারকারীর ইমেল ঠিকানা বৈধ এবং ব্যবহারকারী দ্বারা নিয়ন্ত্রিত হিসাবে যাচাই করার জন্য এই পদক্ষেপটি অত্যন্ত গুরুত্বপূর্ণ৷

টোকেন যাচাই করতে পৃষ্ঠা

একবার ব্যবহারকারীকে ইমেল পাঠানো হলে, এটিতে একটি লিঙ্ক থাকবে যা তাকে সাইটে ফিরিয়ে নিয়ে যাবে। ইমেল যাচাই করতে, এর জন্য, আমাদের পেজ তৈরি করতে হবে।

(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) } } ...

এটাই! 🎉

ব্যবহারকারী তার ইমেল যাচাই করতে এবং আমাদের অ্যাপ্লিকেশনে তার নিবন্ধন শেষ করতে সক্ষম হবে।

🧑‍💻 এখানে রেপো

উপসংহার

আমরা ইতিমধ্যে জানি কিভাবে প্রতিক্রিয়া ইমেল এবং পুনরায় পাঠান ব্যবহার করে ইমেল তৈরি এবং পাঠাতে হয়। এই প্রক্রিয়াটি আপনাকে একটি পরিচিত এবং উত্পাদনশীল কর্মপ্রবাহ বজায় রেখে দক্ষতার সাথে ইমেলগুলি ডিজাইন করার জন্য প্রতিক্রিয়া সম্পর্কে আপনার জ্ঞান লাভ করতে দেয়।

আপনার প্রজেক্টের প্রয়োজনের সাথে পুরোপুরি ফিট করে এমন ইমেল তৈরি করতে আপনি বিভিন্ন উপাদান এবং বৈশিষ্ট্য নিয়ে পরীক্ষা করতে পারেন।

লেখকের সাথে সংযোগ করতে চান?

𝕏 এ সারা বিশ্বের বন্ধুদের সাথে সংযোগ স্থাপন করতে ভালোবাসি।

এছাড়াও এখানে প্রকাশিত