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

24. Account feature toggling

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

OK, so before we move on, we're going to go back and take a look at our feature toggling within our Fortify config, because at the moment for our account stuff, we haven't added any checks when we enable and disable these features.

00:13

So the first thing that we're going to do is go ahead and disable update passwords. That's just what we've implemented in the last episode. If for some reason you wanted to disable this functionality, then you'd want to go ahead and comment that out.

00:27

So if we head over to our security section under our account, at the moment we see the ability to change our password. If we try and send a request through to this, let's just enter some details. Well, actually, nothing is working.

00:40

So if we just go over here, you can see. That when we send a request through, we get user password update is not in the root list, so we don't even want to show this form if that is not enabled. So let's head over to our security section.

00:55

We're going to have an issue with this in a moment where if we don't have any any security features enabled, we're going to need to get rid of the menu item in its entirety. So we'll check that out in a second.

01:06

But for this change password form, we could just add an if statement to this pretty straightforward. So we know where this comes from. We have this in our page prop.

01:13

So we're just going to use our page object directly. And then we're going to say features. Now, this has a hyphen in it, which we can't use dot notation in for JavaScript. So we're just going to say features and then update passwords.

01:25

Now, if we head over, sure enough, that disappears. Now, if we disable two factor authentication, which we can do now, even if we haven't enabled it, let's go ahead and get rid of that, we don't want this to show either.

01:36

So what we're going to do is later extract this out into a component. But what we could at least do for now is add this in here so it doesn't show. So this is two factor authentication. And let's go over and that disappears as well.

01:51

Now, the issue that we've got at the moment is that because we've disabled both passwords and two factor authentication, we still get this security menu item just here. Now, of course, what we could do is check both of these in one go.

02:05

But if we actually look at the features object within Fortify, we have this has security features check, which does this for us. This is why it's really a good idea to dive into the source of this. So this will basically check if update

02:19

passwords and two factor authentication are both enabled, which means we could just use this single method to determine whether overall security features are enabled. So where are we going to add this?

02:29

Because this isn't a feature that we can just toggle. And if we head over to our handle inertia request middleware, we haven't got that in here. Well, in this case, what I'm just going to do is go ahead and merge in

02:41

the security features, so I'm just going to call this security as a general thing. And then we can just go ahead and use this directly. So we can say features has security features and that's going to be true or false.

02:52

So kind of not like what we've done where we mapped through these and only showed the ones that are available. This will always be in there and it will always be a true or false value. And we can tidy this up later, but I think for now it's pretty fine.

03:04

OK, so now that we've got that security feature in there, what we can do is head over to our account layout and where we have that security button. We can add an if statement on here to do a similar thing.

03:14

So page props and features and we can just say dot security here. So if all of our security features are enabled, show that otherwise don't. Now we could even go ahead and disable the entire route here. So let's go over to account slash security.

03:31

We could disable this entire route because there's no need to even land on this. So that's as easy as over in our web routes going ahead and setting this up down here with an if statement, much like we find in the Fortify source code. So, again, it's just about going through

03:45

and just making sure both your back end and your front end are both disabled. So we're going to say has security features. And if they either of them are enabled, we will allow this route. So there we go.

03:55

We now get a 404 not found and we can't access that page. Now we can also get rid of this from our user menu as well. So if we just head over to here, which isn't working at the moment, let's just see why and we've got.

04:10

Yeah, again, the error with this is that we don't have that security route available, so this menu now isn't even working, so that's a really good. Reminder that we need to update this, so if we go and look for security here, we're going to go ahead and get rid of this menu item if no security features

04:28

are enabled, so page props, features and security. And that should get rid of that error with that dropdown. We only see account now, which is fine. We can go through to here and we need to think about, well,

04:40

we don't think about our mobile menu because we're using the same navigation here. So that shouldn't affect it. Great. OK, so that is pretty much our features for our security stuff wrapped up.

04:52

Let's take a look at some of the others just to make sure we didn't miss anything. So we've disabled these to update profile information. I don't think we've looked at. So if we give this a refresh, sure enough,

05:01

we can still update our profile information. So let's go back and do this as well. So we'll start the back end here. That's this entire account section just here.

05:11

And technically we should be allowed access to this because if security features are enabled, we should be able to get onto this. But that, I guess, is just responsible for showing the account sort of profile stuff. So, again, you're probably going to tweak

05:27

this around depending on what you're building. But let's go ahead and add this in here. So features and let's see what we've got in here. Update profile information.

05:37

And of course, that's now not going to work if we just give this a refresh. Have we disabled that? And I think we're doing that. Yeah, sorry. Features enabled.

05:48

So let's just go and grab this line. We'll just wrap this. So features enabled. We're just checking the actual flag itself, not whether it's enabled or not. And there we go. We get 404.

05:59

Again, we're going to have the same issue with the navigation because now that route doesn't exist. So we're going to want to go over and change that over in our navigation. So let's grab the if statement just here

06:09

and we will apply that to this and obviously change this. And this should be update profile information. Just get rid of that dot there and let's check this out. There we go. Let's enable these now just to see that that's working.

06:25

So we'll enable profile information updating. We see that in there. We can access it. We can send this request through to actually update it now. That doesn't look like it's working.

06:34

I think we found a bug here. And I think it's probably because if we just head over to our network tab, we yeah, the photo field must be a file. So this needs to be nullable.

06:42

So let's just fix that really quickly while we're here. Good thing that we're going through this. So over in our update profile information, fortify action. Let's go and add in this.

06:55

So it's nullable. So I'm going to go ahead and make this an array. And we're going to go and set this to nullable and then the file type just inside of there.

07:07

So that should now allow us to update that without having anything in there. Now, the issue we do have now is that if we do have a profile photo, if we don't have a profile photo, it's going to go ahead and make a request to this anyway. So let's go ahead and just grab this

07:22

and wrap that in an if statement and we should be good. So we should now be able to update that profile photo and we should be able to choose any of these to go ahead and work. So let's choose someone, hit update.

07:32

And sure enough, that's been updated. Great. So let's change it back to me and we're good. OK, so let's carry on with the rest of our feature enabling. Good thing we caught that.

07:41

So let's go to our config and fortify and let's re enable our password updating that enables that because we now have one security feature enabled and that should enable our menu and then let's go down and do our two factor authentication stuff as well. And there we go. We see our two factor.

07:58

We can always tidy this up later. But since we're doing this, it's important that we actually allow the fortify functionality to work as intended. So if we do disable it, we don't get any nasty surprises,

08:08

allowing people to actually use these features or causing any errors. OK, so that's pretty much that tidied up. So I think we're good. And of course, we'll continue to add these as we go.

Episode overview

In this episode, we do a deep dive into properly handling feature toggling for account-related features in our app. You’ll see how we need to update both the backend and the frontend so features like password updates, two-factor authentication, and profile info management behave correctly when enabled or disabled.

We start by disabling the password update feature and notice that, while the backend blocks requests, the frontend still shows the form—oops! We then add checks in our components so those forms and navigation items only show up if the corresponding features are enabled. The same goes for two-factor authentication: when it’s off, its UI elements disappear.

Then we tackle the bigger picture: if all security features are disabled, the entire Security menu and routes should vanish, too. We hook into a helper in Fortify to only show the security menu (and route!) if at least one feature is enabled. We also make sure the user navigation and mobile nav update to reflect these changes, so there are no broken links or buttons leading nowhere.

Next up, we realize the update-profile-info feature hasn’t been updated yet, so we repeat the process for it, adding toggles and updating navigations. Along the way, we squash a quick bug with the profile photo upload by making the file field nullable, ensuring you can update your info even if you don’t choose a new image.

Every step of the way, we test disabling and re-enabling these features to make sure the UI lines up with backend capabilities, and the app no longer has sneaky dead-ends or errors when a feature is toggled off. By the end, we’ve set up a much more robust and seamless experience for toggling account features—just how it should be!

Episode discussion

No comments, yet. Be the first!