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
39. Setting a new password
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 let's just take a look at this email that has been sent to us with the reset password link. If I click on this that you can see that we get a token sent through in here as well as the email
00:11
address. So what we need to do inside of here is accept in that token go ahead and pass it down to our modal which we haven't looked at yet and then send this across with the request for the user to reset their password. So first of all we're just going to build out the modal just so we've got something that we can see on the page. So let's go and build this out now. So
00:32
we'll head over to our web routes just remind ourselves we've got this reset index controller let's go and return an inertia response here with that modal functionality and that's just going to be an auth and we'll call that reset and again we'll just set the base route here to the home page it doesn't really matter too much. Okay so let's build out our reset email or modal and you
00:57
can see here that we've got let's find one that's pretty similar I think let's go for login so let's go and create out a reset modal paste this in and we'll just change the title over to reset password and up here we already kind of know what we're going to get we're going to get a password and a password confirmation because the user is going to have to enter a new password
01:22
and they're going to have to enter a confirmation for that new password so let's say reset your password we know that's going to post through to somewhere we don't require an email but we get that in so it would probably be useful to show that to the user at this point and we'll keep all the error stuff in there as well even though we're not going to be able to modify this so let's go
01:46
down to the password section and let's get rid of this remember stuff and let's just say continue on the button now for the password we want to grab this and change this to the password confirmation so we can actually grab that from the register page so password confirmation let's grab this entire container for this and put that just underneath here okay I think that should be
02:12
enough for now let's go ahead and just check that this page gets rendered properly and sure enough it does so once we click that link in here we'll be forwarded over to this modal we'll see our email address we won't be able to modify it but we can enter a password confirm our password and continue to sign in okay so let's look at passing this data down into our modal because
02:33
at the moment we've not done that so if we come to the reset index controller what we can actually do in here is use a width method when we use any modals with this package so we can pass down any data we want into here so if we bring in our request object directly into here we can go ahead and pass down the token let's just double check what that's called yep token and let's say
02:58
request token and we can pass down the email address as well so let's start with the email address we'll put that into the form so let's add that in here as an empty value in fact we could grab that from our props now so let's say define props and because then values that we've passed down with width will get sent down as props much like we do in inertia and we send data down
03:25
so that email is going to be a string we also have the token in here so we may as well just grab that now and what we can actually do is define this as a variable so then down here within our form we can just access that prop that we're passing down directly so props.email okay so if we come over you can see that that value is now in there at the moment it's modifiable so if we just come down to
03:48
where our email address is we could say vbind value form email although it's in our form and we're going to send it down we don't want this to be modified so we're going to go ahead and just bind that in instead so we don't need the errors in here because it shouldn't ever error and we can also set this to disabled and we could set this to read only as well so if we give that a refresh
04:10
now we can't modify this value okay so for the password that's hooked up and the password confirmation that's all hooked up now once again we just need to figure out where to post this down to so again over in our root list let's go ahead and look at what we have got so we have our forgot password there and we should have one like reset password there it is so password.update let's go
04:35
and define that out in here and let's just try and send this down so i'm going to go ahead and just pull up the console once again just so we can keep an eye on our network and let's enter a new password and just see what happens when we send this down okay so that looks like it is erroring so we've got the token field is required so we need to send the token down with this form
04:58
just here we know that we can do that because we can just access props.token there we go and let's just give this a refresh and retry this again so let's enter our password hit continue and there we go that looks like it was successful we've been redirected back now it doesn't look like anything's happened at the moment so we should probably flash a message when we can even
05:20
redirect to the sign-in page once this has happened that would be a much better flow so let's try and sign in with that new password and it looks good we have two-factor authentication enabled but i'm going to kind of ignore that for now okay so we kind of want to go from the start again let's go and just get rid of this page here and i'm going to go ahead and try and sign in with
05:40
the mable account or recover the mable account that we created earlier so let's hit continue we'll get the email through that's pretty clear and we'll click reset password and we can enter our password now when we choose a new password here this does redirect us but we kind of want to redirect over to the sign-in page but also flash a message at the same time so once again
06:03
if we head over to our fortify root we have this password update controller new password controller and when we store this we just want to go ahead and grab this complete password reset in fact no password reset response is what we want so once that's been successfully reset we can change this response to redirect us over to the login page and flash a message so again we're just going to
06:32
go ahead and create another response in here so let's go up to our responses section we'll create this password reset response out and we'll grab the password reset response here which at the moment redirects us back to the page that we specify in here or the login page which we don't have so we could tidy this up so let's go over to our password reset response paste this in change
06:59
over the namespace once again and let's go down and tidy this up so we don't need the json stuff in here we could probably just go and do this ourselves so let's go ahead and return redirect to a specific root that's going to be auth login let's just check we've got the root name correct as well yep and then we want to flash a message with our toast and say your password has been
07:28
reset you can now sign in or whatever you want to say sure you can think of something better so let's swap this response over and see what happens so over in our fortify service provider let's again bind in the password reset response to our password reset response and see what happens so let's go and enter a new password hit continue we should be redirected over
07:58
to the login modal and see a flash message at the same time and there we go your password has been reset you can now sign in a little bit quick but you can adjust the timeout for that so now i can go ahead and of course enter my password and we should be signed in so there we go we've got a successful password reset flow now to recover user accounts
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.