Emails

Guide: Emails

There are 2 types of emails within Strafer.

  • emails that are sent when users login with Magic Links. These are sent by Auth.js which uses nodemailer. You'll need to have an SMTP service for that.
  • emails that are sent by your application: for instance after a payment failed, or if you want to create a custom login form with email and password.

Magic Links emails

Configuration for Magic Links emails is done in the auth.ts file. You'll need to update .env.local file with your SMTP credentials: SMTP_HOST, SMTP_PORT, SMTP_USER and SMTP_PASSWORD. The from field can be configured in strafer.config.ts in email.fromNoReply.

auth.ts
// ...
EmailProvider({
  server: {
    host: process.env.SMTP_HOST,
    port: Number(process.env.SMTP_PORT),
    auth: {
      user: process.env.SMTP_USER,
      pass: process.env.SMTP_PASSWORD,
    },
  },
  from: straferConfig.email?.fromNoReply,
})

Application emails

Strafer supports 3 email providers by default: nodemailer, sendgrid and postmark. You can find examples inside /app/api/examples/emails.

For Postmark and Sengrid you'll need to set the SENDGRID_API_KEY and POSTMARK_API_KEY respectively in .env.local file.

Build beautiful emails

Sending emails is great, but sending beautiful emails is even better. Just run the following command to launch the email development server:

It can take some times to start when you luanch the command for the first time so be patient.

React Email
npm run email:dev

Go to http://localhost:3001 and and you should see a template for magic-link emails. All emails templates are located in ./emails/templates.

To send an email with a custom email template use the render method of react email that will convert a React Component into an HTML string.

Send an email with a custom template
import { render } from 'react-email';
import { MagicLinkEmail } from '@/emails/templates/magic-link';
import { postmarkClient } from "@/core/connectors";
 
const html = render(<MagicLinkEmail />);
 
 try {
  // example using postmark
    const info = await postmarkClient.sendEmail({
      From: straferConfig.email?.from as string,
      To: straferConfig.email?.from,
      Subject: "Hello ✔",
      TextBody: html,
    });
    console.log(info);
  } catch(e) {
    console.log(e);
  }