Build a Fullstack Music App with Next.js Fetcher & Auth Mutation

Transcript from the "Fetcher & Auth Mutation" Lesson

[00:00:00]
>> All right, so now that we got signin working, we need to actually make the pages on the front end the forms to actually signin and signup. And then we need to restrict access to the actual music player for people who have an account. And then all the things that go with that detecting if the cookie is still or the WJT is still good.

[00:00:23] Blocking access to the pages, blocking access to the API routes. There's a lot of different moving pieces when it comes to access and an application. And you gotta make sure you try your best to defend all those different points of access. So that's what we're gonna try to do in the XJS way.

[00:00:39] And there's honestly so many different ways to do this in XJS and I remember just contemplating. How would I actually do this? And then they released a new version of Next.js, even newer way to do it, I was, okay, this is actually kinda cool. So we'll be talking about a lot of different ways to do and I'll talk about why we're approaching it this way for this scenario.

[00:01:01] And another way for different scenarios. So ask a lot of questions if you're trying to figure out what's going on. Okay, so what we'll do next, like I said, is we'll make these pages for the signin and signup. And they're mostly the same pages. And if you think about it, if you have a signin form and a signup form, they're both the same thing.

[00:01:19] There's email field, the password field and a submit button. And the only thing different about them is what route they submit to and the label on the button, right? It'll either say signin or it'll say signup that's it, maybe some text on the page. So because of that, we're just gonna create one component that is basically all of that, right?

[00:01:39] And then we have to figure out, where or how we're going to actually interact with the API. So far we've made these API routes but we haven't done anything on the client side to actually interact with them. So we should be using HTTPy or whatever, client you have to interact with API.

[00:01:58] So we actually have to start thinking about, well, how are we gonna make calls on the client side? And what does that look like? So I think what we'll do first is, we'll create some wrappers and a little lip to interact with the API. And then we'll create the pages that will use that wrapper to make the calls.

[00:02:17] So that's what we'll do and this little live that we're gonna make is actually gonna come in handy. Only get into doing some more client side fetching as far as the playlist and things like that. All right, so what we'll do is we'll head over to this lib folder.

[00:02:33] And then inside of this lib folder, I'm gonna create a file called fetcher, fetcher.ts. And the purpose of the fetcher is just abstracted away our HCTP fetching mechanism. Because we're gonna be using some hook later on that needs this. And it needs to be abstracted away otherwise we're gonna do a lot of manual work.

[00:02:59] So, we're just gonna go ahead and create this right now, and we're just gonna export a function here. And I'm just gonna call it fetcher, and basically all this function is gonna do is just do a fetch call for us, but super abstracted away. So the first argument is gonna be a URL, that's gonna be a string.

[00:03:19] The second argument is gonna be data and that could be undefined if you don't pass it, you don't need it. And the reason I'm putting undefined here is just to help me out later on if you JSON stringify undefined. It just doesn't get set whereas if it was null, it tries to do something else, so I'm setting it equal to undefined.

[00:03:40] So now we're just gonna return fetch if you're not familiar with fetch this is, its window.fetch. It's the new mechanism to interact with APIs. It's kinda like Ajax, it is a different mechanism to interact with HTTP calls. It's built into the browser. I was actually looking at other day, and I didn't even notice this but they now if you go into the network tab.

[00:04:02] They now include fetch here on XHR, they didn't have that before. You had to figure out the fetch somewhere. You have to filter it out yourself because it only included XHR, you had to click on all and then type in a route to figure it out. It was really annoying, but now they're, all right, okay, it's the same thing.

[00:04:20] So I don't know when they did that, but that's super helpful. Okay, so now we're back in fetch, we need to basically just make this super generic. So when you deploy your next JS app, your API it's mounted on the same domain as your front end app. So we can get that by just using the Window object, right, so we can just say window.location.origin.

[00:04:49] So basically wherever the domain is that you're on cuz when you deploy this to some platform. You don't buy a custom domain who knows what the URL is gonna be you could go set that environment variable and then set it here. And instead of local host on your local, that totally works too, but we could just use window.location.origin and get the URL/API.

[00:05:09] And then whatever URL that you pass us, so that'd be the URL there. And then just a bunch of options here. So the first option is the method. So if you pass us some data, that means you're probably trying to do a post request. Otherwise, you're just doing a get request and we'll just do get and post for now.

[00:05:27] So that would be the method and then from here, we're gonna do credentials include. This ensures that we send the cookies up for the JSON Web Token and things like that. So we got that. And then last thing is just the headers and fetch is not JSON first.

[00:05:46] So you have to instruct fetch to, hey, we're gonna be doing some JSON things. I don't know why they just didn't make it. Always just assume that you're doing JSON because that's what we're doing these days, but they're not. So you have to be very explicit about that sorta it's a content type application.

[00:06:01] JSON like that. And then the last thing is the body. We're just gonna JSON dot stringify data. And that's why I've made data undefined because if you do that if it won't break if it's undefined. But if it's something else that would totally break. So we have our fetcher.

[00:06:20] And then the next thing we wanna do is we wanna create a function that will make a API call to either signin or signup using the fetcher. So what I'll do now is inside the look folder get I gonna make a new file, I'm just gonna call this, I don't know let's call this mutations.

[00:06:36] So I'll put another file here called mutations and basically I'm gonna import the fetcher. And then what I'm gonna do is make a auth function, so I'm gonna say, const_authl this is gonna be a function like this. And all this is gonna do is it's gonna take in two things it's gonna take in.

[00:06:59] I'm gonna call it a mode, so the modal either be signin or it'll be signup. So one of those because they're literally the same payload and then it'll take a body. And then a body is of type object and email which is a string and then oops, I'll need to put string and string.

[00:07:21] And then password, which is also a string. So look at that. So that's some type script stuff for you. If you wanna type check that. You don't have to put this TypeScript in here. You could just put a comma, like you would normally do in JavaScript. I'm just doing that because it seems there's an appetite for some TypeScript stuff there.

[00:07:38] So I did that. So we got those two things are strongly typed. And then because this fetcher is so cool, all we have to do is just say. To return the fetcher the URL that we want will just be slash whatever the mode is. And then we just pass in the body, that's it, very simple because again the fetcher already knows the prefix for the URL.

[00:08:00] It's already doing slash API, whatever and then it'll be the slash signin, signup. And then we just pass the body which will be an email and a password, which we do know if you look at our API signatures. That we're looking for email and password on this body for signup.

[00:08:16] We're also looking for an email password on this body for signin. So that satisfies those requirements. We should be good to use this mutation inside of our forums. Any questions on the fetcher and in this auth mutation that I just made? Yes.
>> So is the plan going forward that more functions might land in this mutations file or is this only for fetcher?

[00:08:39]
>> Yeah, a plan going forward is yeah, every time I have to mutate the database, I probably put a function in here. That way I'm not creating it in components somewhere right I'll prefer to put them all here. Yeah, so I can see them in one place.