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.
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.