This episode is for members only
Sign up to access "Build a Starter Kit With Inertia and Fortify" right now.
Get started
Already a member? Sign in to continue
Playing
09. Sharing the authenticated user globally
Episodes
01. Setting up
02. Authentication
03. Feature management
04. Building a toast feature
05. Profile management
06. Password confirmation
07. Two factor authentication
27. Building the two factor modal
9m 7s
0%
28. Showing a QR code
7m 44s
0%
29. Enabling two factor authentication
6m 52s
0%
30. Disabling two factor authentication
1m 35s
0%
31. Showing recovery codes
4m 37s
0%
32. Fixing password confirm redirect
9m 42s
0%
33. Fixing password confirm flow when enabling
3m 26s
0%
34. Challenging the user when signing in
5m 58s
0%
08. Email verification
09. Account recovery
10. Fixes and improvements
Transcript
00:00
So now that we can create an account, we want to be able to switch over the state in the navigation to show this user's signed in. This will have automatically signed us in.
00:09
We just need to work out how to share this data. So this starts over in our handleInertiaRequests middleware, where earlier we added our config. User is something that we want to share with all pages
00:21
all the time. So it's a good candidate to go in this share method. So let's go over and just dump this out somewhere really quickly.
00:29
So we'll go ahead and create some sort of auth wrapper in case we need anything else in here. And then let's just grab from the request, which we get through into here, the current user.
00:39
And we'll go over to our navigation component. And just down here where we are about to output the user, we'll go ahead and say page, props, auth, and user. So if we head over to the browser,
00:50
we should see that in there. So we should be signed in. I think if we head over to our kernel here, let's see where we added our middleware.
00:58
Yeah, so we added our middleware here. This should go in web. So let's pop that in web and change that over really quickly.
01:05
OK. So if we go over and give the page a refresh, there we go. So we're effectively now just dumping out the user into the navigation.
01:13
We can use this to check whether this value is null to see if the user isn't signed in to change the state over. And then, of course, we can access any of the data inside of this object
01:22
to show details about the user. Now, the problem we've got here is a lot of this is being exposed on the client side, which we probably don't want to show.
01:31
There's a couple of ways you can get around that. By default, within Laravel, over in the user model, we have these hidden properties here, which we can add to to hide stuff when
01:39
we JSON encode any objects. But a much better way to do this would be to actually output a API resource for this user. That way, we can control what data is shown.
01:52
So let's go ahead and create out a API resource for this. So we're going to go ahead and say make resource. And of course, we'll call this user resource. Now, what that allows us to do is over in that user resource,
02:03
if you've not worked with these before, basically just from this, build up this user object that we want to output in a way that we want to see. So we'll go ahead and use the ID just in case we need that.
02:14
We don't necessarily need that. We probably want to show the name at some point in the application as well, so this name. We're going to need the email because we
02:23
need to show this in forms later, like when we update our email address. So we'll grab the email. And I think for now, that's just about it.
02:31
We're going to look at avatar uploading later, so we'll add this in here when we get to it. So we've got this data. Remember, this is public for the user that's authenticated,
02:40
not for all users. So let's go over here and instead turn this into a ternary. So here, we can now say user resource make.
02:50
And we can pass that user in. Otherwise, we'll output null. So if the user is authenticated, output that nicely structured data.
03:00
Otherwise, just output null. So now when we head over and give this a refresh, you can see that we've got this in a much better structure. Now, I'm going to go ahead and get rid of this outer data
03:09
wrapper because that just makes it a little bit less convenient to access this data in our templates. So to do this, we're going to go over to our app service provider, and we're going to use under boot our JSON resource
03:21
object. And globally, we can say without wrapping. That will just get rid of that data wrapping, which we don't really need.
03:28
So we just end up with an object with that data that we want. OK, so with this done and output here, what we can do is just start to change around our navigation to show certain sections and output the data that we need.
03:42
So for our menu here, which we commented out earlier, we want this to display if the user is authenticated. So let's bring this back, and then we'll add a VIF on here, and we'll say page, props, auth, and user.
03:55
So if that user's available, show that menu. Now, if they are available, we don't want to show the create an account and sign in menu. So we can go ahead and do the opposite on here.
04:06
So if they are not signed in, we don't want to show that. So there we go. We've got our user in there. Now, we can do the same thing for our menu here as well.
04:16
So we don't want to see create an account and sign in here. So let's find the create an account here as well. And I think it's this one. So we can get rid of that if the user is signed in.
04:29
Let's just take a look. And yeah, not user. There we go. So we've got this in this state now if the user is signed in.
04:37
And of course, if they're signed out, this is now going to look a lot different. So let's actually bring up our console again. And let's go and head over to our storage section,
04:48
go over to our cookies since we don't have our sign out functionality, and just get rid of them. And there we go. We're back to that original state.
04:55
And if we pull this in, sure enough, we have them links in there, which we can click and get our model up on. Great.
05:02
OK, so now that we've done that, let's go ahead and just recreate an account since we don't have our sign in functionality. And let's look at swapping the name over.
05:11
So I'll just recreate an account out here very quickly. We're instantly signed in, obviously, without any page refresh because Inertia is just passing this new data down.
05:21
And we can see this now. And then we can just swap over the name. So that's set to Alex here at the moment. But of course, what we can now do is say page, props, auth,
05:31
user, and now access any of them properties that we've added on, like name. But that is now it. So we now have the state completely changed
05:39
over when we are signed in. OK, so now that we've done that, let's go over to look at logging in, signing out, and all that stuff so we can get authentication wrapped up.
40 episodes•5 hrs 21 mins•8 months ago
Overview
Let’s build our own Laravel starter kit with Inertia and include all the features you’d expect. We’ll implement authentication, email verification, profile photo uploads, two factor authentication, and more.
Fortify is a frontend agnostic authentication package for Laravel, meaning most of the work is done for us — we just need to build the frontend and make requests to the endpoints that Fortify registers.
Once you’re done, you’ll have a clean slate for building your next project, with the ability to control everything in your own starter kit.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.