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
24. Account feature toggling
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
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.
40 episodes•5 hrs 21 mins•8 months 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!
Comments
No comments, yet. Be the first to leave a comment.