00:00 Let's get the environment variable set up first. We're going to go to our .env. We'll add a resend API key. This is what you would get from logging into resend and setting up your account, then you'll find the API key in there. So it's going to be some super secret value of some kind.

00:17 And then we'll go to our env server and we'll add that to our configuration here. So we get that runtime validation, make sure that at the start of our app, we have the resend API key. And if we don't, then we'll get a warning that says, hey, you forgot your resend API key. Then of course you'd set this in your production environment

00:36 so that you have access to that API key. Okay, so with those things set up, we also have a new utility file called email.server in our utils that exports a send email function. So pretty straightforward idea here. You're going to take a to, a subject, an HTML and a text.

00:55 We're not accepting a from because everything for us is going to be from our like team email or whatever email we're going to be sending the signup email to. So we're going to say from, and that's going to be a team at epicweb.dev

01:13 or it could be a hello at epicstack.dev. However, you know, whatever your company wants that to be, that's what you will set it to. And of course you'll need to set that email up to be able to send as part of the resend docs and everything, look that up. Okay, great.

01:33 So now we're going to do a fetch call to the resend API. Resend actually does support a library that you can install. I prefer to use the fetch API as much as possible just because I feel like it's more obvious what's going on. There's less that's hidden from me.

01:51 And it's really actually not that complicated what we're trying to do here with the fetch API. So that's why I'm going to just try to stick with the REST API using fetch. So we're going to get our response, response from await fetch to that URL. And we're going to have a couple

02:11 of configuration options on fetch. So the method is post, the body is the stringified version of the email that we're going to be sending. And then the, we're going to have some headers here for our content type and our authorization. So authorization is going to be a bearer token.

02:28 So we set that header and then our content type will be application JSON because that is the type of the body. And with that, then we can get rid of all that. We're going to get our data from await response.json.

02:46 And you know what, just for fun, let's console log the data and we'll see where that gets us. Let's, we'll just return, return a status of success as const so that it literally is success, not just a string in general. Okay, so with that so far, let's go to our signup

03:07 where we have a little bit of code that we can just experiment with this on. So of course this is not when we're going to really be sending emails, but we'll just test it out to make sure that it is working. So just by going to the signup page, we'll trigger that email to be sent. So with that saved, we should get some logs right here.

03:27 So let's go to log out of Kodi. Then we'll go log in and click on create an account and that will send an email. So right here, we've got a status code of 400, API key is invalid, which of course it is. That is not a valid API key, but we know that we are making the request

03:45 and the status success is not entirely accurate. So let's actually handle that case. So if the response is not okay, or let's say if it is okay, then we return the status of success. Otherwise, we're going to return an error status and we'll use the get error message utility

04:04 that we'll just take whatever object we get it and try to extract some sort of useful error message out of that. And with that, now if I come over here and hit refresh, then we're going to get this, which again, the API key is invalid, status is error and error is API key is invalid.

04:24 So exactly what we're hoping for, for this first part of the exercise. Like I said, we don't want to actually be hitting any services if we can help it during local development. So in the next step, we're going to add some mocks so that when we do this fetch call, it doesn't actually talk to the real recent API

04:43 and instead it talks to our mock that we're going to be building here in just a little bit. So in review, we have our ENV set up here for local development and our ENV server set up to ensure that that environment variable is available. And then we updated our email server utility

05:03 to actually send an email or talk to the recent API to send an email. And then we just have this little bit of testing code to make sure that that's going to work. And that is the first part of sending emails.