Getting Email API Key/Credentials

Resend

Go to Resend and log in or create and account if you haven't. Once you log in, you will be redirected to the email page.

Click on the three dots on the bottom left where your email is showing, and go to onboarding.

Click on Add an API Key. Copy the key and paste it in your .env file.

Add resend api key

RESEND_API_KEY=re_YQ7taxkc_BSpRg3UCD3wT5KvMGTLQt77M

After adding the api key, open your local server and install resend.

Install resend

npm install resend

Go to mail.ts file. Delete the nodemailer related stuff and add the following code.

Change mail.ts for resend

import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

To send emails you have to change only one thing. I'll explain by changing sendVerificationEmail from nodemailer to resend.

Nodemailer

Note: I have change the backticks to '' due to an issue here.

Sending email using nodemailer

export const sendVerificationEmail = async (email: string, token: string) => {
   // this is the confirm link that will verify the user on the frontend (Change it to whatever your path is in production)
   const confirmLink = 'http://localhost:3000/auth/new-verification?token=token';

   await transporter.sendMail({
      from: process.env.EMAIL,
      to: email,
      subject: "Confirm your email to get started! 🚀",
      html: "
         <div style="font-family: Arial, sans-serif; color: #333;">
            <h2 style="color: #7e22ce;">Confirm Your Email</h2>
            <br></br>
            <p>Hi there!</p>
            <p>We're excited to have you join us. To get started, please confirm your email by clicking the button below:</p>
            <br></br>
            <p>
               <a href="confirmLink" style="background-color: #7e22ce; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">Confirm Email</a>
            </p>
            <br></br>
            <p>If you didn't sign up, you can safely ignore this email.</p>
            <p>Thank you!<br/>[Your Brand Name] team</p>
         </div>
      ",
   });
};

Resend

Note: I have change the backticks to '' due to an issue here.

Sending email using resend

await resend.emails.send({
   from: "onboarding@resend.dev",
   to: email,
   subject: "Confirm your email",
   html: '<p>Click <a href="confirmLink">Here</a> to confirm your email.</p>'
});

You just have to change the starting code e.g., await resend.emails.send and the from email. You can add your email once you add a .com domain in resend dashboard. Also the email will only be sent to you. To make it work for others as well, you have to add a .com domain.

OAuth Providers Project Structure