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

31. Showing recovery codes

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, 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.

Episode overview

In this episode, we work on adding the feature to reveal recovery codes for two-factor authentication. We start by tidying up the section in our account area, making sure the layout is clean and consistent with the rest of the page. The goal is to have a dedicated space for managing recovery codes, separate from the other two-factor authentication controls.

Next, we create a button that allows users to fetch and display their recovery codes. When clicked, this button makes an API call (using Axios) to our server to retrieve the recovery codes, which are then displayed as a simple list on the page. For a nice touch, we use Vue's ref to handle the state, and hide the button once the codes are visible—so it works like a toggle.

We also check out the API response, noting that the data comes back as a JSON array, and handle potential errors that can arise if a password confirmation is required. For now, that part gets a generic error, but we'll address proper handling of password confirmation in the next episode.

By the end of this episode, you'll have a working "Show Recovery Codes" feature, with a little UI polish, and a heads-up about a fun redirect issue we'll be fixing soon!

Episode discussion

No comments, yet. Be the first!