Setting up Mailgun

Before we can setup user logins, we need to have a way for our application to send emails to our users.

This is separate from our main email address we use for our account. We want a sending service in the event that we have a lot of signups. Most regular email accounts (like Gmail) will throttle how many emails you can send per hour and per day.

Since our regular email account isn’t meant to be used for sending lots of login emails to users, we’ll use a service.

ShipFast uses a login system called NextAuth. By default one of the authentication providers is called “Magic Links” using the Email Provider.

Instead of using an email/password combination, our authentication system uses “magic links” sent to the user’s email account. This is more secure because our application isn’t storing passwords that could possibly leak.

Also many users don’t like managing passwords. When the user enters their email address to sign in/sign up they will be sent an email with a special link to use.

There are many email providers to pick from, but by default ShipFast uses Mailgun. Mailgun has a free tier for sending a few emails a month, but it’s a little tricky to access. You won’t see this option on their homepage.

You will need a credit card to sign up with Mailgun although it won’t be charged. If you don’t want to do that, feel free to continue reading for background material and then have a look at my Resend guide.

Mailgun Setup

We’ll start by creating a free trial account at Mailgun.

You’ll fill out the usual details for your name, email and password. You will also need to enter a credit card. This won’t be charged unless you go over the limits.

The plan option we want is the “Foundation 50k Trial”.

This plan is $35/month but is free for trial.

After you complete the sign up, you’ll need to find the welcome email and confirm your email address. You’ll also need to enter a phone number for security.

Assuming you got past all the sign up details you should be on the dashboard page.

Mailgun Flex Plan

We’ll now cancel our free trial and downgrade to the “Flex Plan”. This plan has no monthly fee and should have enough of a monthly send limit for small apps.

Start by navigating to the billing page.

You should find yourself on the Foundation 50k Trial. Click the cog in the upper right to bring up the following option.

Clicking the Unsubscribe button will bring you to the following page.

You can see that this is the plan we want with no monthly charge. Hit the Unsubscribe button once more and you’ll come to the checkout page.

Pick the Downgrade button and the process should complete. You’ll get a quick popup in the lower right indicating that you’ll be downgraded at the next billing cycle.

Domain Setup

Next we’ll setup our domain for sending emails. We won’t be setting up receiving and redirecting emails here, that will be in a later guide.

We’ll start on the Domains page from the main Dashboard. Click the Add New Domain button in the top right.

Note: make sure you put a subdomain of “mg” in front of your domain name. This protects your domain names from abuse.

Note: make sure you pick the correct region.

The other defaults are fine and we can hit Add Domain.

We’ll now need to enter 5 entries in our DNS at our registrar. 2 are TXT entries, 2 are MX entries and 1 is a CNAME entry.

Just be careful to copy and paste the entries from Mailgun to your registrar. My registrar automatically includes the domain name in the entry so I had to remove that from what I copied from Mailgun.

For instance, when I see:

k1._domainkey.mg.shipfasttutorial.com

I actually type in:

k1._domainkey.mg

This is for the host name. For the other information from Mailgun I copy and paste it without changing it. So my DNS entry looks like this.

Do this for all 5 entries and then hit the Verify DNS Settings button in the top right. This can take some time to verify so be patient.

Sending Email Keys

We’ll need 2 keys from Mailgun to add to our environment variables: an SMTP server and an API key.

For the SMTP server we need to reset the password and copy it.

From the left hand dashboard menu, select Sending → Domain Settings. Make sure your new domain is selected in the upper right drop down for “Domain”. Then move to the SMTP credentials tab.

You’ll need to click the reset password button, leave the defaults, and hit Reset Password.

You’ll see a popup in the lower right where you can hit the copy button.

Then paste that someplace for temporary keeping. I usually paste it into my .env.local file.

Now we’ll move to our project in VS Code and put the SMTP server in our .env.local file. The ShipFast documentation says to update our EMAIL_SERVER entry to this.

EMAIL_SERVER=smtp://postmaster@[mail.yourdomain.com]:[copied_password]@smtp.mailgun.org:587

In my case it ends up looking like this (don’t leave the [] in by mistake and make sure you have the mg in front of your domain name).

EMAIL_SERVER=smtp://[email protected]:9045a6abeae608d2e0ada8ab0994892a-a2dd40a3-339579c0@smtp.mailgun.org:587

Back in the Mailgun site, change to the Sending API Keys tab and hit Add Sending Key in the upper right. Add a descriptive name and hit Create Sending Key.

You’ll get a popup with the new key that you need to copy. Paste this key into your .env.local for MAILGUN_API_KEY.

MAILGUN_API_KEY=88b82b6a59fb0691ea7fe58d9c9c6369-a2dd40a3-333ff6c4

Config Update

We’ll need to make a few changes to our config.js file to point to our email addresses.

Open up the config.js file and look for the “mailgun” section. There’s instructions for each entry. Change each of the 4 email addresses to use your name and domain name.

Note: fromNoReply and fromAdmin both need the “mg” part in front of the domain. supportEmail and forwardRepliesTo do not.

Production Deployment

The only thing we need to do for production is copy the same .env.local keys into our Vercel environment variables. Since we changed our config.js file we’ll need to save those changes and push the changes to GitHub.

There isn’t much to see on the website at this point, but you could actually login by going to this url.

https://yourdomain.com/api/auth/signin

Conclusion

We now have a way for our application to send emails to users. This is mainly used for sending magic logins to users, but we can also use it to send welcome mails, support emails, or notifications.

We could also use it to send emails to those who signed up using the Lead button, but that’s a bit of work to do.

Next Steps

Next newsletter we’ll cover setting up user logins.

That’s it for our setup in level 6.

If you have questions or suggestions, please contact me by email, X, Discord, etc.

PS don’t worry, I already changed all the keys you see in this post. 😂