Components
A two-factor authentication setup card with QR code, manual secret key, backup codes, and enable/disable controls.
Loading preview...
import AuthTwoFactorSetup from "@/components/ui/auth-two-factor-setup";
export default function Default() {
return (
<div className="flex min-h-svh w-full items-center justify-center p-6">
<AuthTwoFactorSetup
isEnabled={false}
qrCodeUrl="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIAQMAAACXljzdAAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABoUlEQVRYhc2YQZLFIAhEycpjeFNibppjuNKhG5zKLGYNVuqX8WWBYrf4Rf5t97b2SnutM6TvKdIwtAoQtfjaq+29+Mk9xfo2phVI24vde/bR9jP7wgzeOgRdDGMGUoxcNiYW796IvQxhtm05V0gDUX/2QSZxlWj7Pl/9ZBJvJhFbSPWo/7RMYlFHko3PWN0Hr/lEkVhXLZzPvhqcxCpALrc6Ot+AxzBw9PMJQkbgQj+m8zHRNQjW73Hno1yuyTOtAKHJYRsKD43t5wYG84kFO6iScL5p+QccBYjrFeKAu3RzQSMPPKYCwaIiUgzHyaYxgWTiZyzqJhgzDIYh91WBQCKWbbrdKVX4ST7xokl5UAx6HrakeWEB4lWA8JOQ72QFWoCgspPTWJvsyHYBEueDdbvfJKgSrwLSSWe2j7tQvpxKAcLzf4lXT8j25msF4k2pXWHmoyIoQFwlN93loUOHmgsQlXMjnLYTo3qKfZBO/OY6fxfVza/XIcw6D9vpj2ghAncZrpi4ZBcgcq4O/HX5shDIJ0clLIpb/AF2ffWTR/5tP0hccijGp9ROAAAAAElFTkSuQmCC"
secretKey="JFVHK324HKJS"
backupCodes={["173839", "572048", "208453"]}
onEnable={() => {}}
onDisable={() => {}}
onGenerateBackupCodes={() => {}}
onRegenerateSecret={() => {}}
/>
</div>
);
}