Build a Fullstack App with Next.js, v2

Build a Fullstack App with Next.js, v2 Testing Authentication Routes

Topics:
Scott Moss
Scott Moss
Netflix
Check out a free preview of the full Build a Fullstack App with Next.js, v2 course:
The "Testing Authentication Routes" Lesson is part of the full, Build a Fullstack App with Next.js, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Scott tests the authentication routes. The home route is now protected and redirects to the login screen. Edge functions are also discussed in this lesson.

Get Unlimited Access Now

Transcript from the "Testing Authentication Routes" Lesson

[00:00:00]
>> So I think we got all the things, let's spin this up try to hit the auth form try to sign in see if it redirects us and stuff like that and let's see what happens. So NPM run dev. Get this thing going. And you can see right off the bat, earlier in the course when I tried to go to home, it was just 404, now it's redirecting the sign in.

[00:00:28] So I can tell you right now the middleware is working cuz otherwise we'd be looking at 404 right now. So that works. You can also do a console log in the middleware if you want and it will log out here in the terminal. Okay, so I'm gonna click on don't have an account, and I'm gonna try to sign up.

[00:00:45] So let's see what happens. So I'm gonna say and this is me, that's my email. I wanna say it's just scott@gmail.com or whatever that somebody's real email. And I'm just gonna try to register here. Let's see what happens. This is gonna wait. So we have an error, let's see what that is.

[00:01:06] And what was, let's look at the network tab. Wait, did we even hook these up yet? I thought we did. Let's see. I'm gonna run that again in network tab. Here we go. So we got a 500. And it says. Yeah, it's just a random 500, so here we go.

[00:01:35] There we go. That's what it's looking for. I see where it is. It's in API. It's in fetcher. It's in here. This thing's messed up. So let's see. It might be. The thing I told you guys was super cool maybe, [LAUGH] it's probably not that cool. Is probably breaking it.

[00:01:57] So let's check it out. I think it was actually breaking here when it was trying to do res dot JSON because we might not be sending anything back on the API. So yeah, that's what it is. So I mean, a quick way to do this is just to like, just do this.

[00:02:20] I think that's what the issue is. Let's do that. You can also just fix this on the front end too, but I think it's easier just to do it here. Just trying to parse JSON when there isn't any JSON parse. So let's try that again. Now I'm actually gonna sign up with my cat's name, Darryl, [LAUGH] he's a big boy.

[00:02:56] So I wanna make an account here, and yeah, it looks like it did it but then it went to sign in. So that tells me that the redirects, either our middleware is blocking a page somewhere, cuz it redirected the sign. But I imagine if I went to home.

[00:03:24] It's still redirecting. So that means the middleware's probably not getting the right cookie. So let's see. Cuz it's redirected me now. So let's log that JSON web token on that try, to go home. Yeah, so cookies and objects. So we got to do a dot value. So we need to do verify JSON Web Token dot value So once we do that we should have a cookie already.

[00:04:00] I should be able to go home which we don't have a page for it so it's gonna show up 404. So it doesn't always work the first time, but you gotta dig in there. Okay, any questions on middleware?
>> You bringing together a lot of different dependencies and obviously you have a world of experience in this.

[00:04:24] But wherever we go if we were looking for some other dependency to solve some niche problem? Say we build on to this data management, filtering or performing functions over on the server, you're just digging into that? Where do you recommend going in first for some of those dependencies?

[00:04:44]
>> That's a good question. So when I'm looking for a new package or a new dependency, my first thing to do is I always just go on NPM first, and I'll try to get lucky, right? So if you're thinking of like, you said data management, right? So I'll look up next data.

[00:05:07] Cuz most people try to get the cool names, right? So I'm like, somebody's trying to get this name. So I'll try to get lucky and find the exact name of the thing that I'm looking for. Sometimes it doesn't work, but if I do find something on here, let's say, next data, I don't know what that does.

[00:05:24] It's probably not what I'm looking for. Then I'll go check to see when it was published last. I'll look at their GitHub. This person doesn't even have a GitHub for it so I probably will never use it. So then I'll do that to see if I can find something.

[00:05:40] If I can't find that the next thing I'll do is I'll just literally just get on Google and try to find some example code. Like whether it's in a blog post, whether it's in a repo somewhere of someone doing the exact thing that I'm looking for. So for instance you might be talking about, like, how do you do a nested query in Prisma?

[00:06:05] Obviously Prisma has documentation for it, but I figured that it's better in my opinion to find sometimes an example code cuz that person who wrote the example code will have all those different packages and modules whereas like a documentation wouldn't. They're not gonna show you other modules that they didn't write in their documentation.

[00:06:25] It was like, this is how you do it manually. So I try to find that example code. The last thing I'll do is I'll just go to GitHub and I'll go to the source code of the thing that I'm using and click on issues and then type in the thing that I'm looking for to see if someone reported an issue on it and then see if someone helped them, they resolve them.

[00:06:41] Usually those three things typically yield more than one result and it's usually just about which one of those I wanna take. So that's kind of how I stay up to date. Passively, I usually just log on to GitHub and see like top trending projects in like JavaScript or top trending projects that mention the word Next.js or whatever thing that I'm tracking.

[00:07:02] And I usually find a lot of interesting stuff that I don't need at the time, but I'll remember it and I'll come back to it later. And I'm like, yeah, that was a thing I read a month ago that I did not need, but I kinda need it now.

[00:07:14] So it usually does that. And then once you do that, you'll have your favorite packages that you just love and you'll probably continue to use it until the person stops supporting it, or they forget to update it to the next version. And that's usually how it goes..
>> How do we know the middleware we just built is working on the edge?

[00:07:32]
>> Well, right now the edge is a computer, so is got trusted. [LAUGH] But that's a great question. When you deploy this you have to deploy it to a platform that supports this runtime. And at the top of my head, the only that ones are aware of a middleware file in a Next JS app and somehow converting that to an edge runtime function or Versailles the creators of Next JS and Netlifly, their competitors.

[00:08:00] Those are the only two that I'm aware of personally that know what those functions do. But you could set this up yourself on AWS or something like that. So you just have to trust that creatives of those platforms are running it there. But if you really wanted to test it, I mean, there's nothing stopping you from looking at the latency of which, how something came back.

[00:08:22] I mean, you can set up a VPN and go to a different location and see what node it hits. Check out the IP address to see what CDN it came from. You can try to throw some JavaScript in there just to see that you'll get an error. Like B crypt, there'll be crypto in there and see that you'll get an error if you try to run it.

[00:08:37] So there's a lot of ways to verify but locally, there is no edge, it's just a simulated edge environment so that's just running on your computer.