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
10. Using an API resource and interface for the User

Episodes

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

Transcript

00:00
We already know that when we hit sign in, we get back the data from our API, which contains probably too much data at the moment. Let's go ahead and do two things.
00:10
We're going to customize the data that gets sent back from the API by creating out a Laravel API resource. And then we'll create an interface for our user in TypeScript. So we know what data we're working with.
00:22
This will help with auto-completion when we're trying to access the user's details as well. Okay. We'll start with the API resource.
00:29
So let's come over to the API section of our project. And as you can see, this route at the moment is just returning this request user. This will be converted to JSON and just dump out all of the details of the user, unless they are specifically hidden within the model, we don't really
00:45
want to control that within the model. Instead, we want to use an API resource. So let's go ahead and make one out now. Let's make out a resource called user resource.
00:54
And then what we'll do is instead of doing this, we'll use user resource and make, and we'll pass the currently authenticated user in. If we open up the user resource, what we can now do under the two array method is customize exactly how this user is going to look.
01:10
So in our case, we're going to set the ID, let's say this ID, and we'll do the same for the name. And maybe we just also need the email address that kind of makes sense. So let's say this and email.
01:22
What we're also going to do is head over to the app service provider, and we're going to disable the data object wrapping by default and API resource will wrap all of your data in a data object, and then your object will be here. We don't really want that.
01:36
So let's say JSON resource from resources and JSON, and we'll say without wrapping. So that will just give us a plain object with them values that we've just added over here. Okay.
01:46
Now that we've done that, let's just see the difference. So once again, let's clear out manually our session, head back over to our network tab, and we'll go over to auth and login. Okay.
01:56
I'm going to hit sign in and let's just check the details we get back here. And as you can see, we're now only revealing the very basics about our user, which is what we want. Okay.
02:06
Let's go ahead and create out an interface for the user that we're returning back here. Over in our client project, let's go and create out a directory in the main directory called types. And then inside of here, let's create out a TypeScript file just called index.
02:22
Inside of here, we can globally declare any interfaces. So let's say declare global. And in here, we're going to create out an interface specifically for this user. Let's just call that user.
02:34
In here, we can provide all of the dates that we're returning from our API. For example, the ID is going to be a number. We have a name here, which we know is going to be a string. And we have an email, which is also going to be a string.
02:46
So you can just add to this as you add more data. What we'll do now is head back over to our navigation and let's look at a slightly different way that we can pluck this user out. Instead of pulling this from use sanctum auth, what we can do is we can create out
02:59
a user variable and we can use use sanctum user, that's just another composable that we get back from this package that we've pulled in, what we can then do is type in this to that interface that we've created. And that now means that whenever we access any of this data, our editor is going to
03:15
tell us exactly what exists within there. So now the difference is when I say user dot is going to give us the three values that we defined within that interface. So I already know that this user has a name, ID, and email, and I can just hit
03:29
that to grab that optional value. So a slightly different way to grab the user out, but now we can type this. So we know all of the values and these are going to nicely map up to our API resource that we created over here as well.

Episode summary

In this episode, we're tidying up how user data is handled between our backend Laravel API and the frontend TypeScript code. Right now, when we sign in, our API spits out too much information about the user—basically dumping everything unless we've hidden fields in the model. That's not ideal, so we're going to fix it.

First, on the Laravel side, we create an API resource for the user. This lets us customize exactly what pieces of user information are sent in the response (like just id, name, and email). We'll also tweak Laravel's settings so the API resource doesn't wrap our data in a data object—making the response cleaner and more direct.

Next, on the frontend, we switch over to TypeScript and add a types directory. Here, we create a global TypeScript interface for the user, making sure the expected fields match exactly what our API sends back. This adds nice autocomplete support so you'll instantly know which fields you can access on the user object—no more guessing!

Finally, we update how we grab the user in our frontend code to use this new interface, getting strong typing and editor IntelliSense. This whole process keeps our API responses neat and our frontend code well-typed, so everything is easier to maintain as our project grows.

Episode discussion

No comments, yet. Be the first!