Send Emails in Edge Functions

today we'll be sending emails both with Super Bass auth and from within our Super Bass Edge functions now you might have heard of this awesome new integration that recent has built um directly integrating into Super Bass auth and allowing you to send basically custom SMTP settings set them up for your Super Bass auth account and send emails very easily from your custom domain so let's do this part first sending our auth emails so here in our recent backend we can go to settings Integrations and then we can say connect to Super Bass we will use my Thor webdov organization here and authorize this and then we get back to resend and now we can select our one of our many many projects so here we are at GH functions we're selecting this project and then we need to add an API key and we need to select our domain now I don't have any domain set up yet but I really want to show you this is so so so convenient so um my website is thor.bio so let's just say email dot thor.bio will use that and we'll just say um Us East here close to our users in the US at least um and then what we need to do is just we need to configure our domain settings okay so I've just updated my DNS settings to include the settings listed here literally just copy and pasting it in and now we can say verify the settings now we're all done all verified and we're ready to start sending emails with this domain so now we can go back to our Integrations we go to the integration again we have our edgy Edge functions project selected so now we can select our domain we can add an API key for this so now the API key from our domain is associated and then we can configure the SMTP settings so we'll just say um Super Thor is the sender name and we'll just do here team email.thor.bio and all these settings are set and then we just say configure um and so in the background it's using the management API to set all this up on our supervised account and now we can uh just go to the Super Bass dashboard and check that the auth SMTP settings so here it's enabled and we can see that all of this is set up properly so now what we can do is when we go to Authentication what we can do is we can add a new user let's send an invitation and we want to send it to Thor at superbass.io let's fire this off and so this is now sending the email the invite email to Thor that's myself so now resend.com we can check the emails that were sent so we can see here Thor and superbase.io you've been invited uh and we can actually even preview the email here we can go to my email Super Thor we see your team at email author.bio um I have been invited and now I can copy this link um go back here to accept the invite and I mean I don't have any uh site running or anything so it won't work but we can see that the email is being sent um via resend via our custom uh team at email uh thor.bio domain so this is how easy it is to use resend to set up your custom domain to start sending emails with Super Bass auth um on your custom email domain but now let's also look at how we can send emails with recent from the Super Bass Edge functions so luckily there are docs for this uh here Super Bass Edge functions so we need to create an API key we have already verified our domain that's great uh and so yeah we need to create a new function so let's start with that uh let's head over to our NG Edge functions project so I have my project running here I've already run super based start uh copy this Super Bass functions new resend so we want to create a new function here and we're actually going to combine a couple things here um a specifically database web hooks with recent because we actually want to send an email to our user when they delete their account so we can use kind of the triggers within Super Bass to fire off a database webhook and um yeah send an email like oh sorry to see you go you know should you want to sign up again something like that so let's actually copy over um you can watch the database webhook video in detail if you want and and kind of learn how that works but we'll just step through that quickly so we will have a webhook payload here that will be sent from our database web hook to our edgy Edge function and we do need to generate our types now in our case we won't have this animal record we will have a user record from the Super Bass auth users table so what we can do is Super Bass gen types so we want to generate types for typescript we want to specify a schema and we want specifically the auth schema and we want to write this to Super Bass functions resent and then types dot TS and yes we want we can use the local schema I forgot about that so we need um you know the auth schema will be the same locally as the linked project we could do the link project or a database URL we'll just say local here and so now if we look at the types we can see we have our auth tables uh and we have our auth users somewhere of identities uh instances yeah so we we have users there as well so what we will want to do is um so instead of public uh here we will have um the you can see that here auth table uh within that we want the tables sorry the auth schema within there we want to access the tables we want to access the tables users and then specifically the row types um and I think that should already be it and so this gives us um our user record so we'll just call Dash user record and then update this here so actually record could also be null or that user record and then old record could also be null or that user record okay and so now we're ready to start working with that so the payload will then um be our webhook payload uh and then what we can do is um const user so our um we could say for example we'll have a new user so that would be the payload um Dodge uh record if we have that um Josh yeah payload.record uh and then we could have the deleted user so in that case it will be on the payload dot uh old record here and then what we can do is basically we send an email to the user let's just focus on the deleted user for now and so this is how we can do this so we will need our recent API key We'll add that to the the secrets in a second but then we just need the Handler so let's actually just copy maybe this out here so um we'll make a simple fetch request to the recent API to send an email um we'll say from again this will be super Thor Super Thor and this will be sent from um we can copy this again from from here so this is the email we will be sending from um and then we want to send it to the deleted user uh dot um email um or what we could do is basically uh we could handle the case you know in the case where we don't have a deleted user then it would be a new user uh Josh email in that case uh and then you know we could say if it's deleted user we say um I mean obviously there's a better sorry to see you go and in the other case Welcome to the Super Thor Club um yeah and then uh basically you know similar to this um I can say uh we'll actually say hey and then we'll we can pull out the email as well from the deleted user Josh email hey we're very sad to see you go please come visit again soon uh and in the new case we can say hey uh new user talk to email in here we're glad to have you okay um let's just do this for now a response um yes we will need the um recent key so we'll set that as um a Super Bass secret so we can actually say Super Bass uh secrets set uh recent API key and now we need to create that so we go to API Keys we say create API key uh we will call this uh Super Bass etch functions and then we will give it maybe just sending x's and we'll just use this domain here as well and then you can only see this key once so we need to store it safely okay copy it don't worry I'll delete the key later as well um okay so we're setting it as a secret now so we have it set as a secret so now what we can do is we can access it with um Dino Dot and Dot get and the recent API key value uh and yeah that should be pretty much it we have our user record we get the weapon payload um we get the relevant user and then yeah the data what we can do is we can just maybe console Dot Lock data and then we can we can see that in the Super Bass logs Okay cool so let's deploy this to our project so we can say Super Bass functions deploy resend fire this off and we're deployed so we can look at it in our project here so we're enforcing JW JWT verification as well so we're secured there and then what we can do is we can go to database we can go to webhooks and create a new webhook we'll call it resend off trigger email and then we want the auth dot users table and we want to a new users inserted and when a user is deleted we want the super base Edge function we want the recent Edge function and then specifically also we want to add the auth header with the service role key so that that is validated correctly and we have successfully created our webhook so now now what we can do is we can go to Authentication and we have our Thor at superbase.io user here and we can just delete that user so now um we're triggering the function we can actually look at the edge function here resend we can see there was an invocation and we can see the data has an ID and this is our recent email ID and so now if we go back to look for Super Thor and refresh this we say ah sorry to see go hey Thor it's supervised or very sad to see you go and again we're centers from our custom domain okay and just because it's so much fun uh let's add the user again uh let's send an invitation again to Thor at Super Bass dot IO uh invite the user and again we can look at our Edge function logs and we refresh a new log a new email coming in and so in this case actually we have um two emails so first of all the you have been invited to you know confirm your email so this is what's being sent by Super Bass auth But then also we have our trigger email here welcome to the Super Thor Club um we're glad to have you so there you have it this is how easy you can hook up emails into your supervised stack both for Super Bass auth and using super face Edge functions and really really happy to see maybe one day I will receive an email from your service thanks for tuning in and see you soon foreign

Channel: Supabase

Views: 9,428

Keywords:

Id: Qf7XvL1fjvo

Length: 17min 51sec (1071 seconds)

Published: Thu Sep 14 2023