Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
28. Dealing with expired Inertia requests

Episodes

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

Transcript

00:00
In any Laravel application, whether you are working with inertia or not,
00:04
there's a chance that the pages that you are on can expire when you submit a form through and your cross-site request forgery token expires. Now, if you're not familiar with cross-site request forgery tokens, they're basically a token that's added to a form or in our case an inertia request
00:21
to make sure that the person submitting the form is the person that's just landed on the page. So all of this happens within inertia automatically for us, so it just works really nicely. But there is an opportunity for the cross-site request forgery token to expire. Let's take a look at manually triggering this.
00:40
So if we go over to our application here and we come under where our cookies live, we can actually get rid of this cross-site request forgery token. And then when we go ahead and try and submit this form through, if we just pull this down, you'll notice that we will get an expiry error.
00:56
So we get a 419 page expired. Now, of course, what you can do is add this to your error handler that we built in the last episode. But we might want to handle this very slightly differently. We might want to redirect the user back and show them a much friendlier message.
01:13
So let's go ahead and see how we can handle doing that now. OK, so we're going to come over to our handler. I've obviously commented out a board here so we can actually post stuff through. Let's come over to our handler.
01:23
And just after we handle our potential error messages here, we're going to create another if statement to check if the page has expired and do something slightly different. So we're going to create our if statement here.
01:36
And we're going to specifically check the response status and see if it's 419. So has the page expired? What we're then going to do is just do a standard return back. So this is how we would normally handle it.
01:50
But we're actually going to go ahead and utilize the flash message that we saw here or the toast message that we saw up here. And of course, you can flash this in any way you want, depending on how you're building out your application.
02:02
So what do we call that message? And we can just go ahead and add in some data here. So we're going to say body session expired. Please try again, for example.
02:14
And for the type, let's go ahead and set that to an error or a warning. OK, so let's see how this works now that we've sort of pulled everything together. We're going to get rid of our cross site request forgery token. Go ahead and type a message.
02:27
And there we go. We get session expired. Please try again. So it's highly unlikely that a user is ever going to come across this error
02:34
unless they have the page open in their browser. And they've had it open in the browser for a long time past the session expiry. But that is just one way that you can handle expired pages within inertia. Or, of course, you can add this to your standard error pages if you want to.

Episode summary

In this episode, we dive into a common situation you'll eventually come across when building Inertia apps with Laravel—expired requests due to CSRF (Cross-Site Request Forgery) token expiration. We start by explaining what CSRF tokens are and why they matter: they keep your forms secure by making sure the person who loads the form is also the one submitting it.

You'll see how this can cause issues if the user leaves a page open for a very long time—when they submit the form, they'll get a 419 Page Expired error. Together, we'll simulate this error by manually removing the CSRF token and trying to submit a form.

Next, we'll look at upgrading our error handler from the previous episode to catch this specific 419 error. Instead of showing a generic error page, we'll display a friendlier flash (toast) message, letting the user know their session has expired and they need to try again. You'll see how to customize the error message and style it as an error or warning toast.

By the end, you'll know how to gracefully handle these rare but inevitable expired Inertia requests, giving your users a better experience!

Episode discussion

No comments, yet. Be the first!