Integrating Resend with Auth0 for Email Delivery

Why This Matters Now: With the increasing emphasis on user experience and security in digital platforms, integrating Resend with Auth0 provides a seamless and secure way to handle email delivery. The recent surge in email-related vulnerabilities underscores the importance of robust email infrastructure. As of March 2024, Resend has been integrated into Auth0, offering developers a powerful tool to enhance their email workflows.

Prerequisites

Before diving into the integration process, ensure you have the following set up in your Resend account:

Domain Verification

1. Add Your Sending Domain: Go to the Resend dashboard and add your sending domain.
2. Configure DNS Records: Follow the instructions provided by Resend to set up SPF, DKIM, and DMARC records. This ensures your emails are authenticated and less likely to be marked as spam.

API Key

1. Generate an API Key: Navigate to the Resend dashboard, go to the API Keys section, and generate a new API key. This key will serve as both your SMTP password and a secret for Auth0 Actions.

Configuring Resend as an Email Provider

Option 1: Basic Configuration

For a quick setup, follow these steps to integrate Resend as your email provider in Auth0.

Dashboard Configuration

1. Navigate to Email Provider Settings:

   • Go to your Auth0 Dashboard.
   • Head to Branding > Email Provider.

2. Enable Custom Email Provider:

   • Toggle on Use my own email provider.
   • Select Resend.

3. Enter Resend Credentials:

   • Fill in the API Key field with your Resend API key.
   • Set the From address to match the domain you verified in Resend.

4. Test the Configuration:

   • Click Send Test Email to verify the setup.
   • Check your inbox and the Resend dashboard for the test email.

Troubleshooting Common Issues

• SMTP Errors: Check Auth0 Logs for SMTP errors. Common issues include port blocking (avoid port 25) and DNS propagation delays on newly verified domains.

Option 2: Using Auth0 Actions with the Resend SDK

For more control and customization, use Auth0 Actions with the Resend SDK.

Writing the Action

1. Create a New Action:

   • Go to Actions > Library.
   • Click Create Action and choose Custom.
   • Enter a name and select a trigger (e.g., Post Login).

2. Add Dependencies:

   • In the left icons panel, click Dependencies.
   • Click Add Dependency and type resend, then click Add.

3. Add Secrets:

   • Click Secrets and add your Resend API key as RESEND_API_KEY.

4. Write the Code:

   • Use the following example code to send an email on user login:

const { Resend } = require('resend');

exports.onExecutePostLogin = async (event, api) => {
    const resend = new Resend(event.secrets.RESEND_API_KEY);

    if (event.stats.logins_count === 1) {
        try {
            await resend.emails.send({
                from: 'Security <security@your_domain.com>',
                to: event.user.email,
                subject: 'New login detected',
                html: `
                    <div style="font-family: sans-serif; padding: 20px;">
                        <h2>Security Alert</h2>
                        <p>Hi ${event.user.name || 'there'},</p>
                        <p>New login from IP: ${event.request.ip}</p>
                        <p>Not you? Reset your password.</p>
                    </div>
                `,
                tags: [{ name: 'category', value: 'security_alert' }],
            });
        } catch (error) {
            console.error('Resend failed:', error);
        }
    }
};

5. Deploy the Action:
   • Go to Actions > Triggers.
   • Select the Post Login trigger.
   • Drag your custom action into the flow and click Deploy.

Customizing Email Templates with Liquid and Resend’s React Email

Auth0 uses Liquid syntax for dynamic variables in email templates. You can edit these templates directly in the Auth0 Dashboard under Branding > Email Templates.

1. Edit Templates:

   • Open the template you want to modify.
   • Use Liquid syntax for dynamic content (e.g., {{ user.email }}, {{ url }}).

2. Using React Email:

   • Resend supports React Email components for building modern email templates.
   • Integrate React Email components into your Auth0 templates for enhanced design and functionality.

Conclusion

Integrating Resend with Auth0 offers a robust solution for email delivery, combining ease of use with advanced customization options. By following the steps outlined above, you can ensure your emails are delivered efficiently and securely, enhancing both user experience and security.