Nuxt 3 Authentication with Laravel Sanctum
This episode is for members only

Sign up to access "Nuxt 3 Authentication with Laravel Sanctum" right now.

Get started
Already a member? Sign in to continue
Playing
13. Protecting pages with middleware

Episodes

0%
Your progress
  • Total: 1h 1m
  • Played: 0m
  • Remaining: 1h 1m
Join or sign in to track your progress

Transcript

00:00
Right now, we're able to access the dashboard, even though we're not signed in. And of course, this could be making API requests to your backend that require the user to be authenticated. Let's go ahead and add some middleware to this, so we redirect the user over to the login page when they try and access this. Okay, so to get started, we're going to go over to the dashboard page.
00:22
And at the top, we can use the Nuxt Define Page Meta feature to go ahead and apply some middleware. Now, this middleware comes directly from the package that we have pulled in. So let's define this middleware out in here. And to define this, if we want the user to be authenticated to access this specific page, we just use sanctum colon auth.
00:44
That's all we need to do. Let's take a look at the difference here when we give the page a refresh. And you can see that we're redirected over to a slash login page. Again, that's just a config option we need to add to our redirect section. So let's have a look here. And we have on auth only.
00:59
Well, where do we want to redirect to? Well, our page is under auth and login. So we'll just provide that in there. Let's go back over to the dashboard and try this out. And as you can see, we're redirected back over to the login page. We can hit sign in. And sure enough, we're redirected back to our dashboard.
01:16
We can do a similar thing for guest middleware as well. So once we are authenticated, it's unlikely that we're going to want to be able to access the auth login or auth register pages when we build that out. Let's go ahead and apply this to them pages too. So let's go over to login and we'll just do exactly the same thing.
01:34
So define page meta and let's pull that in and get rid of this auto import. And let's do exactly the same thing. So in here, we're going to choose the middleware that we want to apply. And you guessed it, this time it's sanctum guest. So now when we try and access this page, when we are authenticated, we're redirected back over to home.
01:55
Once again, you can customize this over in the config so you can say on guest only. And maybe we just want to redirect the user over to their dashboard. They're already authenticated. So again, let's go to auth login. There we go. We land on our dashboard. Define page meta can also be used to set other things as well.
02:13
Since it's a Nuxt feature, we can also do things like set in a title here. So if we set the title to dashboard here, that's not going to do anything on its own. But what we can do is over in the main app.view file, we can grab this and set the title. So as an example, which you can apply to all of your other pages, we can use the use route composable.
02:34
And again, that auto import we can get rid of. And then in here, what we can do is use the use head feature of Nuxt to go ahead and set the title from that route. So this is a string. So let's make sure we type hint it there. And we're going to say route meta and then title.
02:52
So what that will do is it will take the title that we've defined over on any of the pages and it will set it over in our base app file. And there we go. You can see that the title has changed. I'll just leave dashboard with the title now, but hopefully that helps. If you're building this up any further, you can set titles for any of your other pages.

Episode summary

In this episode, we focus on making sure only authenticated users can view certain pages, like the dashboard, using middleware in Nuxt. Right now, anyone can go to the dashboard, even if they're not signed in, which is definitely not ideal! To fix this, we add middleware to the dashboard page so that if someone isn't authenticated, they're automatically redirected to the login page.

We also see how easy it is to use the Nuxt definePageMeta feature to apply the middleware from our authentication package. With just middleware: sanctum:auth, we enforce authentication on any page we want. If someone isn't logged in, they're sent to the login screen.

Next, we flip things around: once a user is signed in, it doesn't make sense for them to see the login or register pages. So, we apply guest middleware (sanctum:guest) to those pages. Now if an authenticated user tries to access the login page, they get redirected straight to the dashboard.

We wrap up by showing a neat trick with definePageMeta: you can use it to set page titles dynamically! By grabbing the title from the meta info and using Nuxt's useHead composable, we can automatically update the browser tab title for each page. This keeps your app looking sharp and organized as users navigate around.

Overall, you'll see how middleware and page meta make it super simple to control access and customize your Nuxt app's experience.

Episode discussion

No comments, yet. Be the first!