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