Build a Fullstack Music App with Next.js Auth Error Handling
A second version of this course released using Next 13+, but this course is great if you want to see another example fullstack project. We now recommend you take the Build a Fullstack App with Next.js, v2 course.
Transcript from the "Auth Error Handling" Lesson
[00:00:00]
>> So for this next part, we're gonna actually build the main feature of this app, which is going to be the part that plays music. So I'm just at this point, we got the playlist going, we got the songs populated, we got the user profile, we got the authentication.
[00:00:13] We got all those things using these amazing tools working together at different runtimes, and now we're finally going to get some music playing. So first, let's look over the scope of what we're gonna be covering, when it comes to what we'll be doing and what we won't be doing.
[00:00:27] If you look at the design here, at the music play bar, we will be adding most of this stuff. Some of the things we won't be adding obviously won't be like this album art, because we just don't have album art right now. But we'll be adding the artists name and song that's currently playing, we won't be doing the favorite icon or this one here.
[00:00:47] We will do this entire feature set here with the playing, the previous next skip and shuffle. With the seek bar where you can drag and click and get the scrubbing, and then we won't opt into any of these like sharing things. I think there's also a volume slider on here.
[00:01:03] Although the way that we build it adding these features, like the volume slider is actually not that hard to do. So it's, again, something else that you could do if you want to, but that's just the scope of what we're going to do. And before we hop into that, we need to go in and fix some things because you might have issues around when the jadibooti expires.
[00:01:23] I think we put an expiration time of 8 hours, so it's been 8 hours since you did that. You're probably gonna run to an issue where you can't [LAUGH] do anything. So we need to actually handle our errors or increase your data for tea time, something greater than 8 hours, but you'll just run into it eventually.
[00:01:37] So the way we'll get around that issue actually is to head into the lib auth file, and then inside of our validate token function. We just need to, basically, we can handle an error here or we can handle the error wherever we are using this validate token function.
[00:01:56] So basically JWT verify expects a token to be here, but if you don't have one for whatever reason, you cleared your browser out or whatever. And there's this thing is undefined, it's gonna freak out and it's gonna break and that's gonna cause some issues. So that's the cause of some issues you might be having, if you're trying to load up a page.
[00:02:13] So what we're gonna do is we're gonna go to wherever we're using this, which I believe is inside of the playlist page inside of GIT server side props. This is where we're using it, so what we wanna do here is we just want to just handle this error and redirect the user back to a sign in page if nothing comes back.
[00:02:33] So the best way to do that is we'll make a variable here, we'll say, user, then we'll do a try catch, whatever that was. We'll do a try catch, get this error here, and we'll move up this validate token inside of this try catch. And I'll just set it to user equals that validate token like that.
[00:02:57] And then inside the catch, I believe you can return a redirect here. Inside of next AS, we can see redirects, I don't know if it has to say, permanent, I can look it up real quick. But we're gonna do a redirect and then we're gonna say, path, and that's going to be to slash sign in like that.
[00:03:17] And actually we'll just get rid of the redirect right now, we'll look at the the live data, and this right here will fix the issue. So now we have the user, all we have to do now is go down to where we're using the ID for the user ID inside of the playlist.find mini where query.
[00:03:32] And change that to user.id instead of just ID, so this will handle that error if valid token error is out. You don't have a token, you should even see this page redirects you back to sign in. So we're going to return an object that looks like this, so it has a redirect property on it, which is an object.
[00:03:56] Permanent false because we don't want this to be permanent, and then destination will be slash sign. So now if you don't have a cookie or if it's not signed in, you try to go to this page and validate token, you'll just get redirected.