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
25. Using a modal for password confirmation
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
So we're now moving on to something that requires a slightly different approach to how we customize Fortify's functionality and that is password confirmation. Now the reason that we need to implement password confirmation is that a little bit later on when we get to adding two-factor authentication we actually need to confirm our password before
00:20
we start to enable this, it's a built-in password confirmation for any of the two-factor stuff. But what we're going to do for now is just add a password confirmation to our dashboard so when we click over to our dashboard it makes us confirm our password before we get onto that dashboard page. How do we do this? Well this is a built-in thing within Laravel,
00:40
so if we head over to our kernel where all of our middleware lives you can see that we've got this password confirm middleware and this lives within the Laravel framework. We're going to open that up in a second because we're going to need to figure out how this is working so we can disable this or set a very short time span so we can continue testing. So I'm just going to add this
01:01
password confirm middleware over onto our dashboard route and let's just see what happens. I can tell you now it's going to break. So let's go over to our dashboard and add this middleware just directly inside of here we could add it of course within the controller but let's go and hit over onto our dashboard and there we go. So this is a really confusing error message when we're working
01:24
with Fortify and we're trying to actually see something on this page. Now we've got the get method is not supported for the root user confirm password. What does that mean? It essentially means that because we've disabled the views within this application because we don't need views because we're working with a view client what we need to do is create our own view for this to show
01:48
a password confirmation. Laravel or Fortify specifically does come with this but because we've disabled views the get method is not supported it can't find a view there that we can just send a get request to and show something. So how are we going to get around this? Well we want to really do this as a modal so it doesn't transfer us over to a different page. You can create a new
02:09
page for this but we need to figure out how to customize this so we can render a view in place of what is expected here. Now of course what we could do is create a route out but there's a much easier way to customize this behavior within Fortify and we're going to go over to our Fortify service provider and just underneath our boot section we're going to go ahead and add this
02:30
in here. So what Fortify allows you to do is using the Fortify class here set the views that you want to use so you can just do anything in here. So you can see that we've got this confirm password view specify which view should be used as the password confirmation prompt. So that's great but if we just create the callback here we're not using standard views usually what you would do is
02:56
return a view in here and then point this to a view that you've created within your application but we're not doing that we are using inertia so we have inertia responses. So if you wanted to customize this and have a completely separate page and not use a modal in here all you need to do is just say inertia render and then choose the page that you want to render to show this password
03:17
confirmation. Now in our case we want this to show as a modal so what would we do inside of here? Well we know how to render a modal with that momentum modal package we just use the modal functionality. Now if we just go ahead and die dump in here with abc I've got a feeling that what's going to happen is when we click on this we're going to get the same issue. Now the reason that this happens is
03:38
because the root isn't defined in itself so it's not using this functionality. If we just go over to our fortify roots so let's fix this up first of all under our root so fortify roots let's open this up and look for password confirmation we'll just search for confirmation and there it is. Okay so this is the issue that we have where if views are not enabled we're not even getting the root
04:05
to show the view at all so we can't even customize the view because we've just said we want to disable views altogether. The easy option is just to enable views but I don't really want these roots hanging around our application because we're not implementing them so it doesn't really make too much sense. So the way to get around this is a little bit messy but it's just to copy this controller
04:25
over to our web root so at least the confirmable password controller can render out that modal which we're going to customize over here. So let's copy this over then we'll take a look inside of the confirmable password controller so I'm going to go ahead and grab this we just put that over either in our web roots or for this kind of thing what I tend to do is just create out a new root
04:48
file in here just to keep these completely separate so I'm going to go ahead and pull this in let's pull in our root path our root from routing and let's put in the confirmable password controller just so everything works and then over in our web roots just at the bottom here we can go ahead and require this in so we'll go ahead and just do a require from the current directory and we'll just
05:10
go into fortify.php and that's it so we shouldn't now get this error in here and I've pulled in the wrong thing here so let's make sure we pull the facade in great and we should now see that died and dumped so the whole thing here is that when we disable views within fortify it will disable all of the get routes which is not really what we want we want views but we want to customize the
05:36
views on the front end customize them for our own use so it's kind of just getting around how fortify gets configured so let's just go over to our confirmable password controller and you can see that we've got for showing this the view itself we have this response just returned here now this response is an interface and the way that this is working is if we go over to our fortify service
06:00
provider we are setting the view here that should be bound to that interface so again if we head over to our fortify class and look at the confirm password using or view you can see that that is now binding the response that we get from that controller to whatever we provide this by default it's just a view so in this case what we're doing is we're basically just enabling this to be
06:24
attached to the container so here enable this to be attached to the container this controller requires that response to be given and then show our modal so let's go and just move on now when we head over to dashboard we get our modal functionality all we need to do now is just build out a modal and then just return it that's pretty much all that's left to do
06:44
so over in our modal section let's go and create our should this be under auth let's yeah we'll put this under auth so we'll say confirm password dot view and i'm just going to steal this from say the login one paste this in and we'll just completely tidy this up so we'll set the title to confirm password we will let's just get rid of the entire form for now and we'll
07:09
just copy everything over and we'll just set this to confirm password and let's go and just get rid of this form here and that should be everything that we need to show that great so now over in our fortify service provider we can go ahead and return using that auth confirm password modal we're still going to need a base root so let's go ahead and add that base
07:35
root in there and we'll just add that as the home page so let's go over and click dashboard and okay model does not exist of course it's modal and let's hit dashboard there we go we get our confirmation modal up so that's gone through to the controller found that response the container that we've provided in our fortify service provider and all that response is doing
07:56
is just rendering out our modal like we normally would on a page so we've now got our password confirmation modal now that we've done that we've done a little bit of source diving let's head over to the next episode where we're going to build this form to actually enter the password submit it through and then we're good to go we can go ahead and continue on to our dashboard
40 episodes•5 hrs 21 mins•1 year 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!
Episode discussion
No comments, yet. Be the first!