← All blocks

Two-factor code

auth · card-with-recovery · two-factor-code

npx shadcn@latest add @plus-ui/two-factor-code

Default content

{
  "brand": "rivetlane",
  "brandHref": "#",
  "eyebrow": "[email protected]",
  "title": "Enter your verification code",
  "description": "Open your authenticator app and enter the 6-digit code for Rivetlane.",
  "fields": [],
  "code": {
    "label": "Authentication code",
    "length": 6,
    "hint": "Codes refresh every 30 seconds."
  },
  "remember": {
    "label": "Trust this device for 30 days"
  },
  "submitLabel": "Verify and continue",
  "alternatives": {
    "title": "Other ways to verify",
    "items": [
      {
        "icon": "key",
        "label": "Use a recovery code",
        "description": "One of the 10 codes you saved when you turned on 2FA.",
        "href": "#"
      },
      {
        "icon": "shield",
        "label": "Use a security key",
        "description": "Touch the passkey or hardware key registered to this account.",
        "href": "#"
      },
      {
        "icon": "users",
        "label": "Ask a workspace owner",
        "description": "Owners at Quillon can reset two-factor for your account.",
        "href": "#"
      }
    ]
  },
  "back": {
    "label": "Sign in as someone else",
    "href": "#"
  },
  "footer": [
    {
      "label": "Help center",
      "href": "#"
    },
    {
      "label": "Status",
      "href": "#"
    },
    {
      "label": "Privacy",
      "href": "#"
    }
  ]
}