00:00 So let's enable 2FA, and now we need to actually verify that the user can enter a valid code. We can totally do that ourselves. We can just grab this and stick it right here, and then run this script, and boom, we've got a code. But we've got to update the action here

00:17 to actually perform that verification. So here we are in our action, and right here we have this code is valid. We're gonna reuse a utility called isCodeValid from our AuthVerify route, and in here we've got to specify a couple of things. First, the code.

00:35 That's gonna come from the code that the user submits, and then the target is gonna be the user ID, and then the type is gonna be our 2FA Verify verification type, and this is unfortunate that it's saying, hey, no, you've got to add that to our available verification types.

00:55 Well, the problem is that these verification types are those that the user will go to the verify page and verify them over there. This one's more of an inline verification, and it's just a temporary thing, so I don't really want to add it right there. That doesn't quite make sense to me, and so what we're gonna do is instead

01:13 we'll say type of 2FA verification type, and that way we can still determine whether a code is valid of this type, but we don't have to add a bunch of UI handling for that specific verification type because it's not gonna be on this page. It's just gonna be somewhere else, so this is more of a util for verifying any type of code,

01:32 and so we're gonna just add that type right there. Okay, so with that, then we're gonna check if it's valid. We'll send an error, all that good stuff, and yeah, let's actually, let's test that out, so if I come in here and I enter a bogus error and submit, then we're gonna get invalid code, so perfect.

01:50 Okay, so then once we do enter the valid code, we'll be in this code, and we need to update the verification so that it switches from the verify verification type to the actual 2FA verification type, so to do that, we'll say charisma.verification.update,

02:12 and we're going to update this where the type, well, I think it's actually target type. There we go, and the type is our 2FA verify verification type, so that's what it is right now. We want to change that, and then the target is the user ID,

02:30 so with that now, we can update it with our couple of updates. Let's see where we're at, right. Okay, I'm a little bit lost. Here we go, with our data. Okay, and so we don't need to change the algorithm, create an ad, any of that. We do want to change the expires ad,

02:50 because now that they've verified that they do want to enable 2FA, and they can generate token or these codes, we want to make sure this doesn't expire, so we'll say this never expires, and they can disable it later. We'll add functionality for that later, and then we also want to update the type so that it's 2FA,

03:10 but I don't like doing 2FA as a string right there. I want to have an actual 2FA type that we import, so we're going to go over here to our two-factor, and we're going to add a two-factor authentication type, or a verification type, so I'll export that,

03:30 and it will be 2FA, and then I want to add that to my two-factor authentication types on the verify route, because we're going to go to the verify route as part of the process of logging in, right, so this is now an official part of that verify route, the types that it can verify,

03:49 and of course, like our TypeScript's not going to be jazzed because we're not handling all of those cases, so let's go right here and add a case for that. This will be 2FA, and then we can just throw a new error, not yet implemented, and TypeScript's happy now,

04:08 and then we can add this cool satisfies to our verification type, so let's see, satisfies, there we go, got to spell that correctly, our verification type's there, okay, and then, now, we don't have to use this 2FA string,

04:28 we can say 2FA verification type, and we are all set, and we can send the user over here and say, success, you've enabled 2FA, so let's test out the flow, and then we'll do a quick walkthrough, so run this, we get our verification type,

04:48 or our verification code, we hit submit, and boom, two-factor authentication has been enabled, awesome, okay, so there's a little bit of UI that we want to update, and I'll do that with you here in just a moment, but I want to review this stuff that we have done, and then we can go through and update this, because it's saying that we need to enable 2FA, it's already enabled,

05:07 so we've got a couple other places just to fix a couple small things, so what we did here is, in our two-factor verify route, we have this super-refine on our verify schema, conform stuff and Zod stuff, where we're calling is code valid, we pass the code that the user gave to us,

05:26 and the proper target and type, and this is gonna return true or false, and if it's valid, then we can continue, and then we've got our verification update, so we go and select the verification that it used to be, and update it to have the new type and to not expire,

05:45 and we also updated this is code valid, so that we could pass this type, because is code valid before was just telling us whether the verifications that the slash verify route supports are valid, but we have another type of verification that is not supported

06:04 on the slash verify route, because we just do it inline right here, and so we added a type of the 2FA verify verification type to that, so we can verify that, we also added 2FA as one of the possible types that our slash verify route will support,

06:23 and we'll add support for that in the future, and by doing that, we're able to also have it on here, where we can export this 2FA verification type that satisfies one of the verification types, so we get a little bit of type safety out of that.

06:45 Okay, so and through that, we're able to switch from a temporary verify 2FA type to a permanent two-factor authentication verification type. Okay, so now the last thing that we need to do is just go around a couple places and update some UI,

07:04 so we'll go first to the page that we're looking at, this is the two-factor index page, so two-factor index, and right here, we need to get the user's ID, user ID, and we need to just determine whether they have two-factor auth enabled, if we set this to true,

07:23 then we're gonna see the right UI here, so we just need to determine whether that is enabled, so find unique, and this is where, the target type, target should be the user ID,

07:39 and the type should be two-factor verification type, so not the temporary one, the actual one, and with that, we know whether the two-factor authentication verification code exists, we wanna also select the ID, because we don't wanna pull too much from the database,

07:58 and then we'll come down here and say Boolean verification, so if the verification exists, then it is enabled, so I save that, and we still see you have enabled two-factor authentication, this disabled 2FA doesn't work yet, we're gonna be doing that later, that one actually is a little more complicated than you might think,

08:17 it's not just a matter of deleting it, you probably wanna make sure that they've recently verified before you do a destructive operation like that, so we're gonna have an exercise for that later, okay, so the other place we want to update is on this,

08:35 or no, our profile index route, where we're showing, actually, I'll show you here on the page right here, we have enabled 2FA right there, but it's already enabled, so we just need to do, actually, it's exactly the same thing that we did right here, so just grab all this, bring it right there,

08:55 and bring in our 2FA verification type, and if that verification exists, Boolean verification, and boom, now 2FA is enabled, looks awesome, you did well on this, I am sure, and yeah, I think two-factor authentication is certainly complicated, there are things you have to think about

09:17 with this temporary verification, and then you upgrade it to a full-time thing, and all of that, there's a bit to it, but it adds a pretty good level of security for your application, and so I think it's worth adding, and now you know how it works, and that's pretty cool.