00:00 So, let's go to the two-factor verify route here, and in our loader, that's where we're loading the data. We're going to load the user ID from require user ID, and then we're going to need to get the verification for the user if it exists at all. So, we're going to not find first,

00:15 but find unique, and because they should only have one of these, where the target type matches the target of user ID, and then the type of 2FA verify verification type. So, on this page, we're verifying

00:32 their two-factor auth capabilities here. Okay, and then we want to select the ID and the algorithm secret period and digits. Those are the pieces of config that are necessary for generating the one-time password and as a result, also the auth URI.

00:50 So, with that, if there's no verification, then that's fine. We'll just send them back to their profile page, so they can get the latest. You know what? It would actually be appropriate here to also factor in the expires at time.

01:07 So, if they took too long or something like that to get to this page or whatever, then they should be rerouted to create a new one as well. So, it needs to be greater than the current date. Okay, great. So then, we'll create the OTP URI.

01:27 So, const OTP URI is going to come from the getTOTP auth URI from Epic Web TOTP. Here, we're going to pass all of our verification config that we selected. In addition, we need to specify an account name.

01:43 This helps users identify which account, like if they had multiple accounts on our site, for example. This will help them identify which account the one-time password is associated to. So, to be able to do that, we actually need to get the user's e-mail. That's how we're going to determine that,

02:01 is whatever their e-mail address is. So, let's get the user from await Prisma user find, find unique ortho because we absolutely are going to have this user at this point, and we want to select their e-mail.

02:19 So, that can be our account name is the user e-mail. Then, the issuer can be basically just our host name. So, epicweb.dev or epicnotes.dev or whatever. So, we're going to use that get domain URL to get the domain of the URL that is on this request.

02:39 So, this will also help the two-factor auth app show the user which site this is for. So, that's what the issuer is all about. Okay, great. So, then we can create the QR code. So, QR code is await QR code. Now, this QR code is going to come from

02:58 a library called aptly QR code. So, import star as QR code from the module QR code, and that allows us to generate the QR code that we'll be able to display for the user. So, I'll pass that along right here, and the OTP URI, pass that along right there,

03:18 and then those will be used in our UI down here. So, we have an image with that QR code that'll just be a string that is displayed to the user, and then the OTP will be displayed here. So, as soon as I save this,

03:32 then we should get the updated UI for that. So, we get the QR code, we get the long string that includes the secret, that's probably the most important part here. Our issuer for us is localhost 4000.

03:50 Algorithm is SHA-1, that's the default, and that's actually important to keep that default for this particular verification because lots of verification apps or one-time password apps don't support other algorithms. So, you want to keep that default. Digits is six, that's pretty standard, and the period is 30.

04:10 So, every 30 seconds, if you ask it for another one-time password, it will get you a new one. So, that is that. What we did here was we grabbed the user ID from our require user ID. We grabbed the user's verification, and if that doesn't exist, then we send them back over to

04:27 two-factor so they can make a new one. We also limit it to as long as it's not expired yet. So, they can go make a new one if it has. Then, our one-time password URI is generated by the getTOTP auth URI with

04:45 our verification config and our account name set to the user's e-mail and the issuer set to the host name of our domain. Then, we generate the QR code using the handy-dandy QR code library and send that back to our UI so we can display it in all of its glory. That is generating the QR code and

05:04 the auth URI for two-factor authentication.