Build a Starter Kit With Inertia and Fortify

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

11. Signing out

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

02. Installing Inertia from scratch

03. Installing Tailwind

04. Layout and navigation

05. Installing Fortify

06. Exposing routes with Ziggy

07. Global modals

02. Authentication

08. Registering users

09. Sharing the authenticated user globally

11. Signing out

12. Redirecting to the intended location

03. Feature management

13. Adding feature management checks

14. Client-side feature management

04. Building a toast feature

15. Basic flash messages with Inertia

16. Building a toast plugin

17. Styling and transitioning the toast

05. Profile management

18. Creating an account layout

19. Detecting and highlighting current pages

20. Updating profile details

21. Profile photo output and swapping

22. Storing a profile photo

23. Changing user passwords

24. Account feature toggling

06. Password confirmation

25. Using a modal for password confirmation

26. Confirming user passwords

07. Two factor authentication

27. Building the two factor modal

28. Showing a QR code

29. Enabling two factor authentication

30. Disabling two factor authentication

31. Showing recovery codes

32. Fixing password confirm redirect

33. Fixing password confirm flow when enabling

34. Challenging the user when signing in

08. Email verification

35. Mail setup and forcing email verification

36. Adding a verification notice

37. Resending the verification email

09. Account recovery

38. Sending a recovery email

39. Setting a new password

10. Fixes and improvements

40. Closing the user navigation on click

Transcript

00:00

Okay, so pretty annoying that we can't sign out at the moment, let's go ahead and add this in.

00:04

This is actually very straightforward. Okay, first of all, let's go over to our root list again and see which root we need to call here. And if we scroll up, sure enough, we've got logout. Now, this actually does have a name, so we can reference this by name, which is really good.

00:19

So how are we going to do this? Well, obviously, this needs to happen from our navigation, and that needs to happen from this sign out link just here. So if we go over to that sign out link, at the moment, this is a link.

00:32

Now, we don't want to link through to this because if we look at this, this is a post route. So we want to post through to this. Now, I'm going to change this over to a button. So when we click on it, we can perform some sort of action.

00:46

So let's swap that over to a button, get rid of the href. And then we'll just do a V on click. And then we'll have some sort of function within our navigation, which we can call. And then using inertia's router, send a post request through to logout.

01:01

So let's just call this logout. That kind of makes sense. And then at the top here, we'll go ahead and add this function in. So let's create this out here.

01:10

And that's pretty much it. In here, we can send that request through. Now, because we've changed this over to a button, it's going to look a little bit weird. You can see that it's not quite full width.

01:19

So let's go back to that button really quickly. And let's go ahead and set this to have a width of full. That's not going to really help us, because by default, button text is centered. So we can just add a text left here.

01:31

And that's going to make it look like a standard link. So when we click on that, that is now invoking that function. So the question is, because we're not going through to a link, how do we send a request with inertia without using a form

01:43

or clicking on a link to actually send a request through? Well, in this case, we can just bring in inertia's router. And then say something like router, post, get, patch, whatever we need to do. And then just go through to a specific URL.

01:57

Now, in our case, that's logout. So we've already seen that just here. And it's named, which means that we can just pass through our route helper directly in here and reference the name logout.

02:08

Now, that is all we need to do. When we post this through, of course, we're going to be unauthenticated. And then it's going to redirect us over to our page that we specified in our route service provider.

02:20

So let's try this out. I'm going to go ahead and click on this. And there we go. We're redirected the home page.

02:25

We are now signed out. Let's go ahead and sign in again just for fun. And we'll see that works. And we can now sign in and sign out, which is really useful.

Episode summary

In this episode, we're fixing the annoying issue that we can't sign out of our app! We'll add a proper logout feature to the navigation.

Here's what we do: First, we look at our app's routes and confirm there's a logout route already set up — nice! Next, we work on the sign out link in the navigation; since logout needs to be a POST request, we can't just use a simple link. So, we swap the link for a button and set up a click handler for it.

Inside the handler, we use Inertia's router to send a POST request to the logout route by its name. We also tweak the button's styling, so it still looks like a link and fits into the nav cleanly.

Finally, we test everything out. Click the button, and boom — we're signed out and redirected as expected! We also double-check that signing back in works smoothly. Now, the app has an actual log out function, making things way easier for users.

Episode discussion

No comments, yet. Be the first!