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
16. Updating profile details

Episodes

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

Transcript

00:00
Let's go through the entire flow of creating a new page where we make a request down to a
00:04
Laravel Fortify root. This is going to be slightly different because we're going to need to fetch information about the current user to show them on a profile page that they can then go ahead and update. Okay, let's get started. So we'll go over to our navigation and add a new item under here. So let's just grab one of these Nuxt links and let's just call this account and we'll go over
00:28
to slash account. Let's go ahead and create that page out under our pages directory and let's go ahead and copy over the register page. We can pretty much use the majority of what we've done here. So let's paste this into here and let's just tidy some stuff up. Okay, so we're going to have a name, we're going to have an email address which is updatable, but obviously password is a completely
00:52
different thing. Once we're done with this you'll be able to go ahead and implement the password change functionality yourself by just sending another request down to Fortify. Okay, so let's go ahead and pull out this form. We'll get rid of everything in Submit and our form is now going to be a completely different form. So let's come over to our types again and let's go and create
01:15
our new form called profile form and just get rid of the password. Okay, so let's come over and change this to profile form and we'll get rid of the password from here. We're going to leave these values empty because we're going to need to fetch these from the current user and we'll leave these in here because we're going to pretty much reuse this. And again with this it needs to be auth,
01:39
so we need to be protected against people not being authenticated. Okay, let's go ahead and just take a look at the page that we've got and yeah we get a 404 not found. Let's just refresh that and here we go. So the first goal is to grab the current user's name and their email address and populate them directly in here. We already know how to grab these details because we did it
02:00
over in our navigation. So we can just use the use sanctum user composable and do exactly the same thing in here. So let's pull that in so we've got access to the user. What we can now do is say user value and name and we can do the same thing here, user value and email. Okay, if we head back over, there we go. We've populated that data in here, we just need to figure out how to send this
02:23
down. Okay, we've done all this already so let's go over to our use auth composable and again we can pretty much just copy and paste this down. So we're going to say update profile, we're going to call this update profile, reference our profile form that's going to be sent down and this is user slash profile information. Again if you need any details on any of the routes that Fortify have
02:45
registered, just go ahead and run php artisan route list and if we search in here for profile information, we should see that just there and we need to send a put request down to this. Okay, let's go and change this to put, we're passing our form down, we're returning this so we can catch any errors which we'll be looking at later and I think we're pretty much done here. Okay, so let's
03:08
just not forget to expose this, so update profile and we should now be able to use this over on our account page. Okay, so we want to pull in update profile from here, we do want to refresh the identity as well so let's go ahead and just start by saying update profile, passing in the form, then we'll wait on the identity update. So refresh identity and let's have a look at what happens.
03:37
Okay, so once again we'll pull up our network tab just in case we have any issues here, but let's try this out. So let's hit update and yeah we get a cause error. So once again let's come over to our cause section and add this into here, profile information and we should be good. Okay, let's hit update and that looks like it was successful. So we sent a request to profile
04:01
information that got updated, we refetched the user details and we should be good. So now what's going to happen because we're refreshing, we can change our name and you'll see this update everywhere where we're referencing that data in our state. You can see that changes up in the navigation as well.

Episode summary

In this episode, we walk through how to let users update their profile details in our app. We start by creating a new 'Account' page, adding it to our navigation, and setting up the form that will show the user's current name and email. To get this info, we fetch the authenticated user's details and pre-populate the form.

We adjust our form so users can change their name or email (but not password here—that's set up separately and you can handle it in a similar way if you want). Next, we set up a handy updateProfile function that talks to Laravel Fortify's backend route for updating user info, making sure to send everything in the correct format.

Don't forget, after updating, we re-fetch the user's identity so all the latest info shows up right away—like in the navigation bar! We also cover a quick fix for any CORS issues you might run into.

By the end of the lesson, users will be able to view and update their profile details smoothly, with all the changes syncing up throughout the app.

Episode discussion

No comments, yet. Be the first!