Build a Starter Kit With Inertia and Fortify
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
28. Showing a QR code

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
4m 30s
0%
02. Installing Inertia from scratch
11m 49s
0%
03. Installing Tailwind
3m 24s
0%
04. Layout and navigation
31m 15s
0%
05. Installing Fortify
6m 10s
0%
06. Exposing routes with Ziggy
6m 44s
0%
07. Global modals
23m 41s
0%
02. Authentication
08. Registering users
13m 56s
0%
09. Sharing the authenticated user globally
5m 48s
0%
10. Signing in
9m 27s
0%
11. Signing out
2m 39s
0%
12. Redirecting to the intended location
4m 58s
0%
03. Feature management
13. Adding feature management checks
3m 14s
0%
14. Client-side feature management
5m 53s
0%
04. Building a toast feature
15. Basic flash messages with Inertia
7m 51s
0%
16. Building a toast plugin
15m 38s
0%
17. Styling and transitioning the toast
4m 53s
0%
05. Profile management
18. Creating an account layout
13m 24s
0%
19. Detecting and highlighting current pages
5m 22s
0%
20. Updating profile details
9m 22s
0%
21. Profile photo output and swapping
9m 17s
0%
22. Storing a profile photo
13m
0%
23. Changing user passwords
9m 9s
0%
24. Account feature toggling
8m 19s
0%
06. Password confirmation
25. Using a modal for password confirmation
8m 16s
0%
26. Confirming user passwords
4m 23s
0%
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
35. Mail setup and forcing email verification
4m 8s
0%
36. Adding a verification notice
3m 42s
0%
37. Resending the verification email
3m 27s
0%
09. Account recovery
38. Sending a recovery email
8m 45s
0%
39. Setting a new password
8m 22s
0%
10. Fixes and improvements
40. Closing the user navigation on click
2m 12s
0%

Transcript

00:00
OK, let's go ahead and tidy up the modal that we've got here ready to show this QR code when it appears. So I'm going to change over the copy here to set up two factor authentication.
00:09
That kind of makes sense. And then we'll have a form just down here. Of course, we're going to eventually need to have our input for our code in there. And let's go ahead and just set out a paragraph in here with some text.
00:20
And I already have some prewritten text for this. That is just to set up two factor authentication. Scan the QR code with your authenticator application and enter the code below. So let's go ahead and just set the text to small here.
00:34
We'll have a look at this. It doesn't look great at the moment, but we can figure this out. So let's set a margin on the top here of six. And we'll set the space Y to six like we've done with all of our other forms.
00:48
OK, so inside of the form and down here, this is where we want to show out the QR code. So we need to fetch that somehow and then render it as an image. So once again, let's go over to our root list to see what we've got here. So you can see that we've got a get request that we can make to two factor QR code.
01:11
So that's the name of it just there. Let's go ahead and just implement this at the top with some sort of request when this component mounts. And then we'll just dump it out and then figure out how we can get this out on the page as an image. Now, we will see a problem with this because with password confirmation, sometimes this needs to appear before we enable it.
01:30
We've not tested that with the enabling of the two factor authentication yet, but we're going to need to catch this and be really careful about what we do. So we need to make sure we do that. OK, so I'm going to go ahead and say, well, when this two factor enable component mounts on the page, we are going to go ahead and fetch that. So we'll pull in unmounted from view and then let's bring in unmounted just here.
01:55
Now, again, we can use our router to send a request through to this page, but we need to get back an inertia response for our router. Otherwise, it's not going to work. So actually here is probably a good candidate to use Axios. Let me just show you what I mean.
02:14
If we went and said router get and then route two factor QR code, let's just say, well, already you can see this components mounted because it's been refreshed and we've got an error here with inertia. All inertia requests must receive a valid inertia response. However, a plain JSON response was received and you can see that by sending a request to that endpoint, we get an SVG back. So this is a really good candidate to kind of not use inertia and instead just use a standard Axios request.
02:44
Nothing wrong with doing that. So let's go ahead and pull in Axios here from Axios. This is already installed with a fresh Laravel installation. And we're going to go ahead and now say Axios get.
02:54
We can still use our route helper for this and paste in the page that we want to get. Now, once that finishes, so it's not as elegant as inertia, but it will do, we get back a response here, which we are just going to go ahead and console log out just to see what we get back. So let's go over here and give this page a refresh. Open up our console.
03:15
When this mounts, it should have sent a request through. And sure enough, we get this object back with the data in here with this SVG property. That SVG property obviously just contains an SVG image of the QR code. So we can just add that into some HTML directly within this component, and we should be good.
03:33
So where are we going to store this? Well, let's go ahead and bring in a ref in here with view. And we'll go ahead and create out a QR code ref, which by default would just be an empty string. And then in here, we can just go ahead and set the QR code value to the response data, which is wrapped.
03:50
And we will say SVG. So that should be it. Let's go ahead and just dump this QR code out on the page, and then we'll figure out how we can actually render it out properly. So now when this component mounts, we have this SVG image in there.
04:05
Great. Now, how are we going to get this into this div? Well, we can just use the VHTML directive. We kind of trust this source because it's directly from the Laravel framework, and it's highly unlikely that it's going to contain anything that could inject anything on the page or do anything bad.
04:21
It's just generated QR code. So we'll just use VHTML. And there we go. There is our QR code on the page ready to go.
04:28
So let's go ahead and just style this out really quickly. I'm going to set a width of this to half and MX auto. That's just going to set that to a 50% width and put that in the center. Now, we need to go through the entire float again here because we need to talk about password confirmations.
04:44
Now, what I'm going to do just to get this working, rather than modify any kind of source code, I'm going to head over to the storage section. I'm going to head over to cookies and just delete everything. That will, of course, log us out, but it will also go ahead and get rid of the timeout for our password confirmation. So let's go ahead and just sign in here really quickly.
05:05
And for some reason, we have an additional password in there. That's not right. Let's go over to our login page. We probably pasted that earlier in the wrong place.
05:15
Let's get rid of that. And there we go. Okay, so let's go ahead and sign in and try and go through the whole flow again. So I'm going to sign in.
05:23
I'm going to come over to the security section. I'm actually going to get rid of the two-factor secret and the two-factor recovery code from the database. And then let's click on enable two-factor authentication. So you can see we kind of got like a flicker of confirming our password there.
05:38
So what's actually happening here is when we are making the request to get the two-factor code. So let's go over to our two-factor enable. This is actually erroring out, and it wants us to confirm our password. So what we want to do in here is catch an error from this.
05:54
And then instead of doing this and showing the QR code, we want to confirm the password first. So we'll go ahead and in here catch that error. And if we look inside of our console, let's just see what's happening here in the requests that are being made. So we've got a ton of requests here that are being made that are all erroring in 423.
06:16
So if we take a look in our network tab, you can see password confirmation required. So that's just a standard response that we're getting back. Now, normally this would redirect us over properly to the correct view. But because we're using modals, we're going to need to trigger that manually inside of here.
06:32
So we're just going to go ahead and check the response that we get back from the error. And that gives us the status code. We can compare that to 423. And if that is the case, what we can do is use our router to go ahead and trigger our password confirmation modal.
06:48
So we can go ahead and say route password confirm. And that should go ahead and bring that up instead. So let's give this page an entire refresh, get rid of our console, and just go over to our security section and try this out from scratch. So I'm going to click enable two-factor authentication.
07:06
We get a little bit of flicker, which we can sort out later. But I'm going to go ahead and confirm my password successfully. And once I've done that, I should be able to now reclick on that. And then now that we've confirmed our password, you can see that we've got our QR code.
07:20
So we'll fix the flicker up later. But at least this is now working. And we can click to enable it. And we can see the QR code, which is great.
07:27
OK, so I think that's just about it. We've got our QR code out on the page. The next step in the next episode is to go ahead and scan this, get a code, and build out a form so we can enter the code and actually set that two-factor confirmed value over in the database.

Episode overview

In this episode, we focus on adding the QR code display to our 2FA (Two-Factor Authentication) modal. We start by cleaning up the UI text and layout to properly guide users through setting up two-factor authentication. Then, we add a placeholder for the QR code and discuss how we'll eventually need a form for entering the code from their authenticator app.

Next, we talk through the process of actually fetching the QR code image from the backend. Since the endpoint gives us back just an SVG rather than a full Inertia response, we choose to use Axios for this request, which is totally fine for situations like this. We console log out the response to make sure we're getting the data we expect, and then wire up the component to store the SVG's content in a ref.

With the SVG properly stored, we use Vue's v-html directive to insert the SVG into the DOM safely (since it's coming directly from Laravel, we can trust it). We also add a bit of styling to make the QR code look decent within our modal.

Along the way, we run into an issue: if the user's password hasn't been recently confirmed, the backend wants to verify that before giving us the QR code. We handle this by catching the error and triggering the password confirmation modal as needed, checking for the right HTTP status, and rerunning the flow afterward.

By the end, we have our QR code showing up nicely and ready for the next step: scanning it with an authenticator app and building out the code entry form. In the next episode, we'll handle that part and make sure the user's two-factor authentication is fully set up!

Episode discussion

No comments, yet. Be the first!