Build a Starter Kit With Inertia and Fortify
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

0%
Your progress
  • Total: 5h 21m
  • Played: 0m
  • Remaining: 5h 21m
Join or sign in to track your progress
01. Setting up
01. Introduction and demo
4m 30s
0%
02. Installing Inertia from scratch
11m 49s
0%
03. Installing Tailwind
3m 24s
0%
04. Layout and navigation
31m 15s
0%
05. Installing Fortify
6m 10s
0%
06. Exposing routes with Ziggy
6m 44s
0%
07. Global modals
23m 41s
0%
02. Authentication
08. Registering users
13m 56s
0%
09. Sharing the authenticated user globally
5m 48s
0%
10. Signing in
9m 27s
0%
11. Signing out
2m 39s
0%
12. Redirecting to the intended location
4m 58s
0%
03. Feature management
13. Adding feature management checks
3m 14s
0%
14. Client-side feature management
5m 53s
0%
04. Building a toast feature
15. Basic flash messages with Inertia
7m 51s
0%
16. Building a toast plugin
15m 38s
0%
17. Styling and transitioning the toast
4m 53s
0%
05. Profile management
18. Creating an account layout
13m 24s
0%
19. Detecting and highlighting current pages
5m 22s
0%
20. Updating profile details
9m 22s
0%
21. Profile photo output and swapping
9m 17s
0%
22. Storing a profile photo
13m
0%
23. Changing user passwords
9m 9s
0%
24. Account feature toggling
8m 19s
0%
06. Password confirmation
25. Using a modal for password confirmation
8m 16s
0%
26. Confirming user passwords
4m 23s
0%
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
35. Mail setup and forcing email verification
4m 8s
0%
36. Adding a verification notice
3m 42s
0%
37. Resending the verification email
3m 27s
0%
09. Account recovery
38. Sending a recovery email
8m 45s
0%
39. Setting a new password
8m 22s
0%
10. Fixes and improvements
40. Closing the user navigation on click
2m 12s
0%

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.

Episode overview

In this episode, we're starting work on adding a toast notification (or "flash message") feature to our Inertia app. The goal is to show a message like "Welcome back, Alex!" after logging in. Since we're using Laravel Fortify for authentication, and Fortify manages its own controllers, we can't just add the flash message in a typical way. Instead, we need to take control of the login response.

We'll walk through grabbing Fortify's LoginResponse class, copying it into our own project, and swapping it out so Laravel uses ours. This way, we can add whatever logic we want (such as flashing a message to the session) after a successful login.

On the frontend, we'll set up a very basic Vue component to display these flash messages. We then make sure that our backend's flash message is passed to the client via Inertia's share() method. The shared data gets picked up by our Vue toast component and shown on the page.

By the end of the episode, you'll see a basic version of toast notifications tied into the login process. In future episodes, we'll refine the UI, add animations, and make the toast experience a bit slicker!

Episode discussion

No comments, yet. Be the first!