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
09. Fetching the authenticated user

Episodes

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

Transcript

00:00
From any component in our application, we can continue to use the useSanctumAuth composable that we saw earlier to log in to actually fetch user details and also check if the user is authenticated. A good place to start would be our app navigation.
00:14
So let's go ahead and pull this in first of all. Let's import isAuthenticated from that useSanctumAuth composable that we saw earlier. Let's get rid of that import once again. So this is now going to contain Boolean of whether we are authenticated or not.
00:33
Let's just dump this out on the page and have a look. And you can see that we get true. Back over to our application. Let's get rid of both of these just to make sure that this is working.
00:43
And when we refresh, we get false gray. Okay. So we'll go back over to auth and login. In fact, let's go ahead and add in a sign in link just in here, just
00:52
to make this a little bit easier. And let's go ahead and hit that. Okay. So when I sign in now, this will immediately change to true.
01:01
So this will react to whether the user is authenticated or not. We can use this to adjust our template. So for example, we could say that if the user is not authenticated, then we want to show the sign in and register links.
01:14
Otherwise we want to show an entirely different thing. So let's switch this over to show a different set of data if we are authenticated. For now, let's go ahead and create out a font of semi bold in here and let's output the user information.
01:29
Where do we get that? Well, we get it directly from the use sanctum auth composable. So in here, I can just now output user dot and then choose any of the data that we send down from our API.
01:42
A little bit later, we're going to create an interface for this to make it a little bit easier in terms of TypeScript, but let's just go ahead and output the user's name. Okay. If we come over, sure enough, you can see Alex is authenticated.

Episode summary

In this episode, we look at how to fetch details about the authenticated user from any component in our application using the useSanctumAuth composable. We start by showing how to import and use the isAuthenticated property to determine if the user is logged in, and demonstrate how it switches between true and false as we sign in and out.

We also update the app navigation to dynamically display different links based on the user's authentication status—for example, showing "Sign In" and "Register" links when not logged in, and personalized user info when authenticated. We wrap up by briefly showing how to output the authenticated user's name, using the data returned by useSanctumAuth, and tease improvements with TypeScript interfaces for later.

You’ll see how reactive this makes your navigation, and how easy it is to pull user information from anywhere in your app once you've set up this composable.

Episode discussion

No comments, yet. Be the first!