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
15. Basic flash messages with Inertia
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 in this section, we're going to work on a toast notification feature.
00:04
And the first thing that we're going to work out how to do is flash a message from our back end and have that appear within Inertia. And more importantly, how we do this specifically with Fortify's functionality. Remember, we don't have our own controllers,
00:19
so we can't just easily modify these to go ahead and send a session flash message through and pick it up on the front end. So the first thing that we're going to talk about is something that we touched on earlier.
00:30
And that is the responses that we get back when we log in or register or do anything. So let's go over to our authenticated session controller in Fortify. And let's remind ourselves of this login response.
00:45
So if we go ahead and open this login response up under the Fortify package, you can see that this just returns a redirect to the intended location, which we've already looked at. And that's pretty much it.
00:57
Now, what we want to do is when we log in, we want to tell the user welcome back or greet the user and say welcome back and the user's name. That is where we would usually do this.
01:08
So we would usually do redirect to the intended location. And maybe inside of here, we would say with toast, which we're going to refer to this as a toast message. And we'd say something like welcome back.
01:21
But we can't do that within here because we don't own this login response. So the first thing we need to figure out is how do we get this login response and own it within our own project and not as part of this package.
01:32
So we are going to go ahead and create our own login response. So let's go and do this under HTTP. And let's create out a responses directory. And let's create out a login response in here.
01:48
Now, we're going to take the login response from Fortify. We're going to open up our own login response. And we're just going to paste that in. So obviously, we've got a couple of things to change around here.
02:00
So we're going to change this to our own app. And this needs to implement the login response contract still. So let's just index our workspace here. But we now need to swap this over.
02:10
So how are we going to do that? Well, just to test that this is working, I'm going to die dump on here and just say our response, just so we can see that this gets swapped over properly.
02:20
And I'm going to get rid of Fortify in here because we're not going to be doing any of this stuff. We can actually keep that in there. So let's leave that in there for now.
02:28
OK, so we want to swap this over. How do we do this? If we head over to our Fortify service provider under our register section, so let's do this just inside of here,
02:38
we can go ahead and bind in our own implementation of the login response based on the contract that we're implementing. So to do this, we're going to go ahead and say this app and Singleton. And then in here, we're going to give the login response from Fortify.
02:54
So that is login response just here under the contracts, just here. And I'm going to put this all in one line just so we can keep an eye on what we have. So let's say login response here.
03:08
And then we're going to bind that to our own login response, which we now have under app HTTP responses. So that is pretty much it. Now, when Fortify tries to resolve the login response out of the container
03:21
here using the app helper, it's going to use our own login response instead. Hopefully that makes sense. So we're just basically swapping over the concrete implementation of this based on the contract.
03:33
So now when I go ahead and sign in, that is now hopefully going to use our own response. And there we go, we get this die dumped. So we're going to be doing this for pretty much every single feature
03:43
because we're going to want to implement host messages. We might want to redirect to specific locations. We might want to do a bunch of other stuff. So over in our login response now, our own login response, what do we want to do?
03:57
Well, I'm actually going to tidy this up because we don't need to check if this requires JSON because we're using an inertia app and this is handled not like a traditional single page application where we're returning JSON. So I'm actually going to get rid of all of this and I'm just going to return
04:13
and redirect to the intended location. So that won't break anything at all. Now, inside of here, we want to flash a message. So how do we do this?
04:20
Well, we already saw how we would do this. We choose the name of the key when we say with and then we just say something. So I'm going to say welcome back and then let's go ahead and concatenate on from the request the user's name, pretty straightforward.
04:35
So that is now flashing a message. The next thing we need to work out how to do is how to pick this up with inertia. So what we're going to do is go ahead and build out a component. We're not going to fill all of this in just yet, but we're going to build out
04:48
a JavaScript component or a view component in here called toast, which is going to be responsible for showing this message. So let's go ahead and create our template just inside of here. And we'll just include an empty wrapper.
05:00
And then inside of our default layout, we'll go ahead and import this and then just put this at the top somewhere. So let's say import toast from components and toast.view. And then let's just put this, we're going to put it at the top just for now so
05:17
we can see it, but this can pretty much go anywhere because we're going to absolutely position it. Okay, so now that's in there, we can dump something out in here. So this will be the toast message that we get flashed through from the session.
05:28
So the goal of this episode is to sign in and then have this value change based on our flash message. Now, where do we globally share data within inertia? Well, we do that within the handleInertiaRequests middleware.
05:42
So we can just easily add in our toast directly into here. So we can do that by just adding in a key and then using the session helper to grab what we want to grab. So that is as simple as it gets.
05:54
We just have this value in here on the next inertia request. So now what we can do is over in our toast component, we can add an if statement in here. We are going to be changing this up.
06:05
We're going to say if page, props, and toast is available, then we're going to go ahead and say page, props, and toast. And let's just go ahead and bring in our script setup tag in here as well. And we'll leave that empty just for now.
06:23
Okay, so now we don't see that, but when we sign in now, what's going to happen is our login response is responsible for flashing that. On the next inertia request, that's going to be available in here. And then, of course, in our toast component, we should show the message.
06:40
So this is a very basic implementation of flashing a message with inertia. We just send that down as a prop to our component, and we pick it up. So let's go ahead and sign in and see what happens. And when we sign in, sure enough, with does not exist.
06:56
Okay, so let's go ahead and modify our login response first of all. So redirect. Okay, yeah, so we want to do this just after we redirect with intended. It's just the wrong order.
07:07
And let's go ahead and sign out and sign back in. Okay, let's try this again. And now, we should see, welcome back, Alex, at the top. So that's technically flashed this.
07:19
Now, because we're flashing this within Laravel, the next inertia request that happens, the next request that happens is not going to be there. But what we want to do is eventually get to the point where we build that
07:27
component up, where we show it, maybe the nice transition. And then after a while, we hide it. And then, of course, the next request is not going to come through. So that is the basics of swapping out our login response so
07:39
we can do what we want there, in our case, flashing a message. Showing that on the page. And now, our job is just really to build it up. And we're going to do that with a plugin so we can keep this nice and tidy.
40 episodes•5 hrs 21 mins•1 year 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!
Episode discussion
No comments, yet. Be the first!