Integrate

# Email

Setting up emails with Mailgun

1. Setup Mailgun
   • Create a Mailgun account
   • Follow instructions to verify your account and get setup.

2. Get on the Flex Plan
   • Mailgun has a flex plan which allows you to use custom domains but it is hidden away. You must sign up for the Foundation Plan's 30 day free trial then Unsubscribe from the trial. Flex plan charges $1 for every 1,000 emails sent, with no subscription fee.

3. Configure DNS and SMTP
   • Go to Sending->Domains and click Add new domain. Type in mail.yourdomain.com (i.e mail.svelteship.com is mine). Then Click Add Domain
   • Follow these steps to verify your domain with Cloudflare.
   • Go to Sending->Domain Settings->SMTP credentials. Click Add new SMTP user name it [email protected] and click Create.

   TIP

   Go to the Deploy section to see how to setup Cloudflare if you do not have a cloudflare account yet.

4. Add Mailgun SMTP server to Supabase

   Supabase rate limits emails on their development server so we will use our newly created one from mailgun. Go to Project Settings ->Authentication. In the SMTP settings, section enter your newly created SMTP user in the Sender email field. For Sender name put the name of your project/app. In the SMTP provider settings, For Host enter smtp.mailgun.org , Port number 465.

   TIP

   You can customize the email templates in the Supabase Auth console to include your product name and branding.

5. Set Api Keys
   • Go to your account and navigate to API Security Click on [Add new key] and give it a short description. Save the value in your .env for key PRIVATE_MAILGUN_API_KEY.
   • Go to Send->Domains and either use the sandbox domain for testing, or put in your custom domain i.e mail.yourdomain.com

   Use your mailgun custom domain for sending emails to yourself or others.

   You should NOT use the mailgun sandbox domain in production as it only sends emails to authorized recipients.

6. Replying to users using your mailgun domain
   • You will want to reply to users using your domain name and not from a personal email.To do so you will need to add a new SMTP user in Mailgun i.e [email protected].
   • To set this up in gmail, you will go to the gear icon and then select see all settings. Go to the Accounts and Imports tab.
   • Under Send mail as category, click Add another email address.For Name field, Enter name of your website and then set the alias as [email protected].(no need to include the @mail if you are using a mailgun subdomain)
   • Next for smtp server, enter smtp.mailgun.org and for port number enter 587. Provide the full email address for the username i.e [email protected]. Provide the password from the account you created in mailgun.
   • Finally click next and then gmail will send you a verification email. Click on the link in the email to verify the new email address.

7. Sending automated emails

   edit /src/lib/server/mailgun/subscribe.ts , and modify from:, to: and subject address to the email you want mailgun to send to when people subscribe.

   subscribe.ts

           import { PRIVATE_MAILGUN_API_KEY } from "$env/static/private";
   import { PRIVATE_MAILGUN_DOMAIN } from "$env/static/private";
   
   
   export async function sendEmail(email:string) {
       try {
           const response = await fetch(`https://api.mailgun.net/v3/${PRIVATE_MAILGUN_DOMAIN}/messages`, {
               method: "POST",
               headers: {
                   "Content-Type": "application/x-www-form-urlencoded",
                   "Authorization": `Basic ${btoa(`api:${PRIVATE_MAILGUN_API_KEY}`)}`
               },
               body: new URLSearchParams({
                   from: 
                   //replace with your custom domain
                   "[email protected]",
                   //replace to send to your email
                   to: "[email protected]",
                   subject: email + " is interested in subbscribing",
                   text: "got subscriber"
               })
           });
          // console.log("response",response)
           return response.ok;
       } catch (error) {
           // console.log("mailgun error",error)
           return error;
       }
   }