Build a Fullstack Music App with Next.js Signup API Route Recap & Test

Transcript from the "Signup API Route Recap & Test" Lesson

[00:00:00]
>> So that's our sign up, so let's run through it one more time just to walk through this process. First, a user makes a request to /api/signup. And remember, this will be any verb. So the way that Next.js works, I don't know if you've ever used Express, you can do app.post, app., you can describe the verb and the route combination.

[00:00:22] With just vanilla Next.js, you don't get that ability. You would have to do it yourself with some other mechanism. You can actually use an Express-like routing package that actually works with this handler, and you can do that. For me, I feel like you don't really need to do that.

[00:00:40] If you really wanted to do it, and we will on some other things, just use a switch statement in my opinion. You just switch on req.method, and is a GET, is it a POST, is it a whatever, and then run a different function for one of those. That's typically how I do it.

[00:00:53] But in this case, I'm not even gonna do it with signup because one, you can't POST anything on GET. And I don't really care if you do a DELETE request, just send me the things. I don't really care what the method is. I'm kind of like in the GraphQL boat, POST request for everything.

[00:01:08] I don't even really care about status codes and verbs anymore. I only care about JSON, just send me the JSON, that's it. So I'm in that boat. But if you want to, you could do an, if req.method equals post, then run all this code, everything else 404, it's totally fine.

[00:01:28] You could totally do that. There's nothing wrong with that. That'll make sure this only runs on a POST request to /api/signup. So yeah, we got that. We then attempt to make a user with Prisma with the email and a hashed password. If that fails, we send back a 401 and a error message, and we stop.

[00:01:45] If that succeeds, we create a JSON web token with the email, the user ID, the time that we created it, with this secret, and it expires in eight hours. We then take that token and we serialize it in a cookie called TRAX_ACCESS_TOKEN. And we give it these properties.

[00:01:59] It's only accessible at HTTP. It also expires in eight hours. It works on this website, the root of it, sameSite, I don't know. And then it's secure only in production, as it'll be HTTPS. And then we send back that user object that we got from the database and we should be good to go.

[00:02:19] So let's attempt to sign up. So what I'll do now is I'll go to HTTPie. I'm gonna say, http, I'm gonna say I wanna do a POST request to 3000/api/signup. I'm going to give it a email of h@h.com, and a password of abcabc. So we run that, boom, we created a user.

[00:02:51] You can see right here on the cookie, the cookie got set, there's the cookie value. And then there's the JSON web token. It's this long thing right here. You see the Max-Age was set, HttpOnly all these things. And then here's a JSON object that got some back, it was created at this time.

[00:03:05] Here's the user's email, user ID of 2, cuz we already have a user in there that we seeded, user@test.com. Here's the hashed password. Maybe we should exclude that. And then updatedAt. So we got everything there. And then we can verify this by running npx prisma studio. And we should have two users in the database.

[00:03:31] And we do, there's h@h.com. And then there's user@test.com. So if I try to sign up again with the same email, I should get an error. So let's try that. As you can see, user already exists. I tried to sign up with that email, so that's a no. The other email that we had, which was user@test.com, that should also give us an error.

[00:03:51] Like that, so we can try that. And that also gives us an error.