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.

   TIP

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

   • Go to Sending->Domain Settings->SMTP credentials. Click Add new SMTP user name it [email protected] and click Create.

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. Sending 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;
       }
   }