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.
17 episodes•1 hr 1 min

Overview

Learn how to build a full authentication boilerplate with Nuxt, Sanctum and Fortify.

This course covers everything you need to get started with authentication with Nuxt and Laravel. We’ll start by setting up a Nuxt project and configuring Laravel Sanctum, then add the ability to register, sign in and sign out.

We’ll also cover some TypeScript tips, protecting pages with middleware, and using Vue composables to keep our code tidy.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.