Sharing the authenticated user globally: Build a Starter Kit With Inertia and Fortify

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.

Sign up to access "Build a Starter Kit With Inertia and Fortify" right now.

Episodes

Transcript

Episode summary

Episode discussion