Get started – Mailtrap Sandbox x Supabase

With Mailtrap Sandbox, you can collect all test emails in a centralized sandbox instead of using personal email accounts.

This way, you can:

Catch testing emails from staging.
Validate the HTML/CSS of your emails before sending.
Preview and analyze content for spam.
Preview emails on the mobile, desktop, and tablet screens.
Forward emails to your own sandbox to preview.

And in this article, I’ll guide you through the testing workflow with a simple app I created using FlatterFlow.

Here’s how it works:

Step 1. Obtain your testing credentials

Go to Email Testing → Sandboxes.

Open the default sandbox (e.g., My Sandbox).

Under the Integration tab, select SMTP and copy the credentials, such as Host, Port, Username, and Password.

Note: These credentials are for the “fake” SMTP used only for sandbox testing. Make sure not to confuse them with Mailtrap Sending SMTP credentials for production emails.

Step 2. Update the SMTP server in Supabase

Open your Supabase project dashboard and select your project.

Click on Authentication → SMTP Settings.

Click on Emails → SMTP Settings and tick the Enable Custom SMTP box.
Update Host, Port, Username, and Password, like in the screenshot below, and hit Save changes.

Step 3. Create a new account in your app

Open your app/project and try to create an account.
- In the example below is my demo FlatterFlow app I mentioned previously.

Or, you can simulate new user registration by clicking on Add user in Supabase.

Step 4. Check your email testing sandbox

Finally, if you open your Mailtrap Email Testing sandbox, you should see the email sent to the newly-registered user in HTML:

Then, you can check it for spam:

And more!

Optional: Generate email templates with Claude

Lastly, feel free to play around with the Supabase template editor and Mailtrap’s HTML and HTML Check features.

For example, I’ve generated a new template in Claude and added it as a template in Supabase:

Then, I created another account to simulate user registration and see the new template in Mailtrap Email Testing sandbox:

However, although it looks good on paper (and the fake sandbox), Mailtrap’s HTML Check feature says there are some issues that should be fixed for certain email clients.

By being able to see these issues, you can easily fix them and ensure your emails are pitch-perfect when the time to push your project to production comes.