3,973 रीडिंग

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 में ईमेल पुनः भेजें और Ract करें एकीकरण

की स्थापना

प्रोजेक्ट में आवश्यक निर्भरताएँ स्थापित करें। इस बार हम 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 पर चलाएगा; हम बनाए गए सभी टेम्पलेट्स के साथ निम्नलिखित जैसी एक स्क्रीन देखेंगे।

हमारे मामले में, हमारे पास केवल एक टेम्पलेट है। जैसा कि आप नीचे देख सकते हैं, हमारे पास उस ईमेल का पूर्वावलोकन है जो उपयोगकर्ता को भेजा जाएगा।

पुनः भेजने के साथ ईमेल भेजना

एक बनाने के खाता पुनः भेजें .
कोई नया बनाएं एपीआई कुंजी .
.env फ़ाइल में API KEY जोड़ें।

 ... # resend RESEND_API_KEY="re_jYiFaXXXXXXXXXXXXXXXXXXX"

4. ईमेल भेजने की कार्यक्षमता बनाने के लिए, हम api/ फ़ोल्डर के अंदर एंडपॉइंट बना सकते हैं और http अनुरोध कर सकते हैं, हालांकि, इस अवसर पर हम सर्वर एक्शन क्षमता का लाभ उठाकर ऐसा करेंगे।

actions/email-actions.ts .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) } } ...

इतना ही! 🎉

उपयोगकर्ता अपने ईमेल को सत्यापित करने और हमारे एप्लिकेशन में अपना पंजीकरण पूरा करने में सक्षम होगा।

🧑‍💻 यहाँ रेपो

निष्कर्ष

हम पहले से ही जानते हैं कि रिएक्ट ईमेल और रीसेंड का उपयोग करके ईमेल कैसे बनाएं और भेजें। यह प्रक्रिया आपको परिचित और उत्पादक वर्कफ़्लो को बनाए रखते हुए ईमेल को कुशलतापूर्वक डिज़ाइन करने के लिए रिएक्ट के अपने ज्ञान का लाभ उठाने की अनुमति देती है।

आप ऐसे ईमेल बनाने के लिए विभिन्न घटकों और गुणों के साथ प्रयोग कर सकते हैं जो आपके प्रोजेक्ट की आवश्यकताओं के लिए बिल्कुल उपयुक्त हों।

लेखक से जुड़ना चाहते हैं?

𝕏 पर दुनिया भर के दोस्तों से जुड़ना पसंद है।

यहाँ भी प्रकाशित किया गया