Custom Sign-in Emails in NextAuth Using Resend

in this video we're going to look at the email provider in next auth and specifically customizing the email that's sent out to the users when they want to create an account or sign in to our site so let's get into it we're going to build on top of a project we have done previously on the channel where we implemented next auth inside of our next js13 application I'm going to include a link in the cart so you can watch that video to understand how we got here and then in this video we're going to just add an email provider and specifically we want to customize the email that's sent out now the email provider uses email to send magic links that can be used to sign in so using the email provider allows your users to sign in to your site without having to come up with a password so it's not the credentials provider whereby the user has to have a credential such as an email and password they just need an email and they can sign in create an account and sign in to your site now having the email provider in addition to your oauth services for example in this project you have the Google social login it allows the users to use the same email on their Google account to also sign in to your site using this magic link so next author is going to link the two accounts that are using the same email whether they were using the Google oauth or the magic link it's going to link the accounts together so they can also access their account using their email if for whatever reason they lost access to their oauth account to their Google account now how it was behind the scene is that on initial sign in a verification token is sent to the user's email this token is only valid for 24 hours and once it is used or they click on that link within the 24 hours an account is going to be created for the user for the first time and they're going to be signed in now if they provide an email that is an existing account that magic link is going to sign them in to that account now to store the verification token that's the important part in the email provided flow we need a database we're going to store that verification token in a database until the user actually clicks on that link so that we can verify and create an account or sign them in so regardless of the session strategy that you're using whether you're using a Json web token strategy or a database session strategy you need to have a database adapter so the email provider flow can store this verification token now next auth lets you send emails either via HTTP or SMTP now the HTTP which is a more modern way of sending emails it's using an API client sometimes an SDK like a JavaScript client to send post requests to your endpoint of your cloud provider and the SMTP is the more traditional way of sending emails so let's start by SMTP let's go to the next auth documentation where you can access different providers from this list of providers I've selected the email here it talks about how it works just as what we covered already and then as a configuration we're going to dive into the HTTP in a second but let's start from the traditional SMTP you would need to install the node mailer package because now it doesn't come out of the box inside the next auth package before it used to be a part of next auth now you need to install it as an extra dependency and then once you have done that you have to to create a connection string it is typically in two forms it's either the first that you can see here there is an email server inside of this connection string you can see there is the host the username and also the password and then you have an email from this is typically your verified domain or verified sender email and there is a second way that you can set this environment variables or the details of your SMTP server and that's through a configuration object whereby you have all of the compartments of this string in different variables so you have the username separate the password the host the port and the email from and then you would pass this into the email Provider from next auth to your next config if you're going to see this in a second but to that email provider you would provide a server key where you just pass in an object that has the whole most important the auth now for this you might use services such as send grid you can create an email API client it is going to give you these information about the SMTP connection that you can use to actually send the emails so the node mailer package it it is what actually creates this connection or creates the transport and it uses this information for your specific smtv SMTP provider to send this required email now before we go to the HTTP client for sending our emails let's actually look at how we can customize this email that's sent from next auth when a user tries to log in so if you scroll down inside the documentation you would see this customizing email and you can actually pass in a function called send verification request this is the function that gets invoked when we want to send that email under the hood it is using the node mailer package we just installed together with the information that we provided for our SMTP service and then sends the verification email now this function requires or receives some parameters such as the identifier which is the email the user just put it inside of our form the URL this is the link that they're going to actually click on inside of their email and we also have the information from the provider this is the same information that we passed on to this email provider config okay so if you wanted to customize this email this is the email that's actually this is the default verification request function you can see from next auth and down here you see they have defined two functions the HTML and text the HTML is responsible to getting these parameters and returning an HTML email and then the text is just responsible which is a function down here at the bottom which is responsible to just return a text version of your email if your email provider or the email client doesn't actually support HTML so if you wanted to customize this HTML or this email that's going out from next auth you could just tailor this HTML to your liking and this is what is going to be sent to your emails okay let's now look at sending emails using the HTTP client if you scroll up top of this same document where we talked about different ways you can send emails via the HTTP Wars MTP you can see there's this HTTP and a guide that you can click on it takes you to next auth it takes you to auth JS which is a more modern version of the next auth which is framework framework agnostic meaning that you can use auth.js with other front-end Frameworks like swelt for example it's not specific to next and the currently the documentation is going through the transformative transformation some of the guides are still index auth JS some are here nonetheless I'm going to include the link in the description so you can find this guide it tells you how you can send an email using the email provider via HTTP based clients I'm going to go back to my own note because I have summarized the steps you need to take you're more than welcome to read this now inside of our config where we talked about different ways let's just dive into the http as we just saw together there is a built-in email provider index auth that allows you to connect an SMTP server of your choice to send magic link emails but it also allows you to use HTTP based clients or services like Amazon SES or SAS postmark send Grid or resend now last week in a previous video we also talked about sending emails in your nextges app using the resend service we also looked at making those emails nicer using the react email which is from the creators of recent we're going to actually use both of them today to actually send our verification request email or magic Link email now similar to using SMTP you still need a database adapter you would need this to store your verification tokens you can then generate an API key from your cloud email provider I'm using present so if I go to my recent account there's this API key section where you can create a new API key to include inside of your project inside of your environment variables so you shouldn't expose that to your client side this is something that you would use server-side to send emails and once you've done that you can just add this config to your next auth config we're going to see this in action in a second but the idea is we're going to create a custom provider if you're going to give it an ID in this case it's recent it's type of email and then we're going to pass in a custom send verification request function that actually uses recent to send an email instead of the track additional way of using node mailer that's built in or by default used by next auth now all that's left to do is inside of this verification function we just have to call our HTTP endpoint of our own client provider or cloud provider or email provider in this case we are using recent recent comms with an SDK that you could use to send this request instead of having to use fetch to hit endpoints you can just use the JavaScript client we're going to again see that in a second uh just a little note I've already mentioned this but the identifier and the URL are sent as parameters to this verification request so you can use that to know where to send the email and also include that URL that the user needs to click on inside the body of that email now once you create a custom provider like this when you wanted to use this custom provider you can call in the sign in method and then refer to this custom Provider by the ID that you've specified here in this case recent and provide the email of the user so let's jump back inside out of our application and see this in action so inside of our app API and auth next auth catch all route this is where we have defined all of our config to initialize next auth so if you have this auth options and we're exporting this next auth Handler as a get and post this is again the tradition in the API or in route handlers inside the app router now again I've talked about this in different videos if you don't know how route handlers work in Nexus 13. I'm going to include a link for you to learn about them but basically you have to export named functions from your route handlers that's why we're exporting this Handler as get in post which is going to respond to get and post requests to this endpoint so inside of our auth options in the prior video we have the Google provider here but now I have added this custom provider with the ID of recent and a type of email I've also included this send verification request which is a specific function we're going to Define together and the rest is exactly the same as what we have done in the previous video again you can watch that if you have if you want to understand what all this is doing so let's jump inside this send verification request function that I have defined inside of my utils folder so I'm receiving these parameters by next auth specifically the identifier and the URL I'm creating a host out of that URL and I'm going to use the resend library that we have downloaded or the recent function to send an email now to use recent again you have watched the video that we had last week on the channel I'm going to also include the card include a link in the cart but it's pretty easy to use it if you go to the documentation literally you have to install the package you can then create a template or use react email as your template and all you need to do is to create a new instance of your recent by calling this recent class and passing in your API key and then you can use this object to send emails you have to specify from two subjects and what exactly you're trying to send to this function and that's what we're doing here so inside of our lib just to show you I've created this resend where I am getting an instance of this recent and providing my API key and I'm just bringing that whole thing back inside of our send verification request function where I can just use that object to send an email now inside of our email you have to pass in your verified domain again from your dashboard on recent you can go to domains and you can verify your own specific domain so you can send emails from that domain if you don't have a verified domain what you can do is to use this onboarding at recent.dev email but this only allows you to send an email to yourself this is going to be your verified email address but if you just want to test it out you can use this onboarding email but if you want to use this service it's better to verify your domain so going back to our function we are passing this identifier which is the email of the user we're going to include a subject a text version of our email in case the email client on the user side didn't actually support HTML and the text is this function down here that includes that link inside of a text for the user now for the HTML version of our email we are using this react key inside of recent that allows us to pass in a react component you can pass in your own custom react component but the problem with emails is that not all CSS Properties or all HTML elements are supported inside of different email clients so therefore it's better to use a service like react email that makes sure your emails are actually rendered correctly regardless of the email provided your users are using now for that I have created this magic Link email template so let's just Dive Right into this from a high level I've included this emails folder inside of my project where I have this magic Link email and I have got the inspiration for this magic link from the react email so if you go to react email inside of the examples or inside of the docs you can also see these examples where they provide some examples here that you can use as an inspiration I've used this notion magic link it gets you the source code for it and then you can copy this in your project and install the packages necessary for react email to work which is one this react email components because you're importing different components that comes from react email let me just go back to the docs as you can see here they have different components that you can use to render your emails so that this is the first package and the second package is react email itself that is required for you to be able to send or template your emails using react email now to this template I'm using or I'm passing the URL on host I'm just passing a link for users to click on some titles that we're going to see in action inside of our email in a second so I'm passing in this component or this email template it's a react component you can call this component as a function and pass in the props that it's expecting these two are coming in from the data that's passed to us from next auth if it's successful we're going to return Success Through otherwise we're going to throw an error so this was adding the email provider and this custom verification email from the next auth point of view now let's go back inside of our application where we're actually rendering that sign-in page so we can hook that form up with the sign-in method to actually call this specific custom provider we added so inside of our app we have this sign in page let me just close this off so we have more room we open up this sign-in page inside of it we are rendering this Google sign in button let me just go back to the application if you click on the sign in this is the page that we're trying to actually update we have this Google sign in button that we hooked up in the previous video this top part of it wasn't working I've extracted it into its own email sign-in form where we actually have a simple little form with a text field and a button to submit and I've just added a handle submit function now there's more that you need to do with this form for example you can add data validation uh using zot or implement this form using react hook forms again there's a video on the channel where we walk through actually creating a contact form using react hook forms we would verify it with Zod and we would send or submit that form using server actions so you can combine what you've learned there or watch that and then Implement that here too in this example I kept everything I kept it simple I didn't add validation to it but you have to do this to make sure that the data that you're sending to your own servers is verified and validated now let's look at this handle submit for a second we are preventing the default behavior of our form submission we're getting the form data by calling the new form data on the event Target and we're reading this email field from our form data now the magic is here that we call this sign in method from next auth react this is how you can sign users in or start a sign-in flow inside of next auth by specifying or passing game the specific ID of the provider you want to use now this recent is the ID that we already initialized inside of our next config so inside API and Route this is the custom provider I created this ID so I'm trying to call that same from our page let me just go back so we're calling that specific provider it needs an email because our providers of type email and I'm passing in the email I'm also including the Callback URL because a the default behavior of next auth is to bring the users back into the page that they were on when they tried to start designing flow so it's a good user experience so if they were on the home page they would be returned back to the home page once they sign in but if they were on a different page we capture that page and then redirect them back to that page now to capture this callback URL or the page that they were on when they were submitting this form or if we have any callback URL set inside of our URL I'm using the use search prompts Hook from next navigation this is a new function in Nexus 13 you can use it inside the app router it's going to only give you the search parameters of your url It's actually an instance of URL search parameter so you can call methods such as get on it to get the Callback URL if there is any or just default to the home page so once you click this sign in it's going to pass that email and all the necessary links and verification tokens to that send verification request function we just created inside of that send verification request function we're going to use the recent package to send an email and then the user is going to have that link to click on and to come back to our page so let's test this whole thing out and see if it works so hello at home dot IO let's just say continue with email this is going to send us to verify request page this is a built-in page that comes out of the box with next auth if you haven't created any it which says check your email a link has been sent to you if you want to customize these Pages going back to our API where we're initializing next auth you can pass in different pages to your next auth for example here I've specified that for the sign-in page I want to use my own signing page and that's the page that we were on you can also pass in a custom page for your verification for your errors for your sign out and whatnot or use the built-in one that comes out of the box in next auth so let's go back to our email we should have an email right now that's coming from our site which says login to localhost there is a link if you can see here and if I click on this I'll be redirected back to the application and this time I'm signed in now going back to our email I just want to note that as you can see this is not the default style of next auth now if you're customizing this style this is something that I changed from this notion template from react email so let's recap using the email provider index auth you can send magic links for users to just log in using their email without any passwords we need a database adapter to also store the verification token until the users are actually clicking on that link to log in now there's primarily two ways that you can send emails the traditional way is the SMTP service which we looked at and the more modern way is to actually use HTTP based clients now we also looked at creating a custom provider inside next auth by passing in an ID and a type and also specifying a custom send verification request function where we're actually calling resend instead of using the node mailer package with an SMTP service if you're using recent and react email to customize our email and to also send our email if you have any questions hit me up in the comments like always and I'll see you in the next one bye

Channel: Hamed Bahram

Views: 11,070

Keywords:

Id: 1AkboeedMz8

Length: 23min 56sec (1436 seconds)

Published: Sat Sep 23 2023