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
31. Showing recovery codes
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, let's go ahead and implement the ability to reveal our recovery codes. So we're going to first of all, just change around some of the structure
00:08
of what we have down here just to make it look like its own section. So let's head over to our account section and let's grab the header for this so we can keep the same style. And I'm just going to pop this up the top here.
00:21
And we kind of want two sections to this one when it's enabled, one when it's disabled, when it is enabled. We show the disable button, but we also want to show the recovery codes in that section.
00:32
So I'm going to get rid of the if statement from here and kind of create our own section out for when it is enabled. So let's pop that in there. And then down here will be our recovery code section
00:44
with the recovery code trigger just down here. So let's change over some of this here. So this is two factor authentication. And these will be our recovery code section.
00:58
So let's add some space into this outer container here. Doesn't really matter too much how this looks, but we want it at least spaced out to space Y of six here. And we should be good.
01:08
So now we've got the ability to disable this. But then we've got a separate section when it is enabled to click and trigger and toggle these recovery codes. So we're going to come across an issue here, particularly
01:20
if we are asked to confirm our password. We're going to fix that in the next episode just so we can focus on the issue. But let's go ahead and just make a request to grab our recovery codes and see what happens.
01:32
So I'm going to go ahead and create our button here. And let's just say show recovery codes. And we'll start this up like the other buttons we've got as well, just to keep some consistency.
01:44
And when we click on this, we want to go ahead and fetch our recovery codes. So we'll create out a simple function to make a request to fortify to get them recovery codes back. So let's create this out in here.
01:57
Now, once again, what we're going to get back from this endpoint is similar to what we got back from our QR code endpoint. We got back an SVG, but this was just represented as a JSON property with a value.
02:11
Now, we can't do something like router get and then make a request to grab these. Let's find out where this route lives, first of all. So if we look here, we've got get two factor recovery codes. So we can pretty much grab that.
02:25
If we were to do that in here with inertia, as you would expect, because it's just going to be a JSON string and not an inertia response, this isn't going to work. So this might ask us to confirm our password.
02:37
It hasn't, which is fine. But you can see we've got our standard inertia error here, and you can actually see the JSON that we get back. So we're going to need to use Axios for this again.
02:45
So we're going to say Axios get. And then once we get that response back, what we can do is store this in a property here. So let's say recovery codes
02:56
and we'll create our ref with an empty array by default. Make sure we pull ref in at the top as well with view. OK, so now that we've done that, once we get the response back, we can set the recovery codes value to the response data,
03:10
which is just that array that we need. OK, so now that we've got our recovery codes, we can start to change this over. So for our button, we don't want this to show if we do have our recovery codes because it's kind of a toggle.
03:22
So we're going to say if not recovery codes length. And then down here, we can create an unordered list and show this if we do have recovery codes. And then inside of here, we'll have a list item for each of them recovery codes.
03:35
So we can just do a V4 recovery code in recovery codes. We can key this by the recovery code itself because each of them are going to be unique. And we'll just start this up with some small text.
03:48
And then in here, of course, we're just going to output the recovery code. OK, let's go over and just try this out. So let's click show recovery codes. And there we go. Sure enough, they get revealed.
03:59
So let's just add a little bit of spacing on here just so they're a little bit easier to grab. And that is pretty much what we need to do. Now, there's an issue with this in that if we need to confirm our password,
04:12
we're going to see an error. Now, there's actually a kind of issue with the overall flow of confirming our password, which we can look at in the next episode, because that's pretty important.
04:22
We're going to have a slight redirect issue, which we're going to fix up. So now that we've got our recovery code sorted, let's go over to the next episode. Try and trigger a password confirmation when we click on our recovery code reveal and see how we can fix this up.
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!