vibecodng.com

Free MCP betaIndex and tools live

Measured entry

hextaui-auth-two-factor-setup

auth-formminimal-flat

A client-side two-factor authentication settings card covering setup, enabled status, backup codes, and password-confirmed disabling. It ships as a shadcn registry TSX file and depends on React, Next Image, Lucide icons, the cn utility, and shadcn button, card, field, input-group, separator, and switch primitives.

Specimen
Harness screenshot of hextaui-auth-two-factor-setup at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of hextaui-auth-two-factor-setup at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of hextaui-auth-two-factor-setup at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for hextaui-auth-two-factor-setup
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical1
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal49.7 KB (115.1 KB build, 65.4 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 2m 8s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/blocks/auth/auth-two-factor-setup.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A thorough settings surface with useful enabled and disabled states, but it is integration work rather than finished two-factor authentication. It needs a shadcn-style setup, carries a critical ARIA defect, and adds meaningful client weight. Adopt it only if its broad UI coverage offsets that cleanup.

Use it if

  • You already have server-side two-factor enrollment and disable endpoints and need a UI to connect to them.
  • Your app uses Next.js and the same shadcn component conventions and theme tokens.
  • You need one responsive card for both initial setup and the already-enabled state.

Skip it if

  • You need a complete security flow with QR generation, code verification, persistence, and recovery logic included.
  • Your project is framework-neutral or cannot accommodate Next Image and shadcn aliases.
  • You require an accessibility-clean component without first correcting the unsupported ARIA attribute.
  • You want a lean auth form and cannot justify its substantial added client bundle.

Install

Installation record for hextaui-auth-two-factor-setup
Declared dependenciesnext, @radix-ui/react-slot, @radix-ui/react-label, @radix-ui/react-separator, @radix-ui/react-switch
Missing on installnext
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, add React, Lucide, the required Radix primitives, Tailwind theme tokens, the cn class-merging helper, and local equivalents for every imported UI primitive. Add Next.js for Next Image or replace that image component, then rewrite the path aliases to match your source tree. Supply the authentication APIs, QR and secret generation, verification, backup-code storage, and error handling yourself.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/preetsuthar17/HextaUI
License
MIT
Record published
2026-08-14

Alternatives

Other published entries for the auth-form pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.