TwoFactorSetupForm

A two-factor authentication setup block that generates a TOTP secret, displays a QR code, and verifies the code from the user's authenticator app. Wired up to the useAccAuth composable out of the box.

Install

Run the following command to install the two-factor setup form block:

npx acc-nuxt add TwoFactorSetupForm

Preview

Setting up two-factor authentication…

Authentication

This block works automatically with the useAccAuth composable. On mount it calls setup2FA to generate a TOTP secret and QR code. After the user configures their authenticator app and enters the 6-digit code, it calls verify2FA to confirm the setup — no extra wiring required.

The QR code is rendered locally using useQRCode from VueUse. The secret is also displayed as text beneath the QR code for apps that don't support QR scanning.