{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multi-factor-auth-assertion-form",
  "type": "registry:block",
  "title": "Multi-Factor Auth Assertion Form",
  "description": "A form allowing users to complete multi-factor authentication during sign-in with TOTP or SMS options.",
  "dependencies": [
    "@invertase/firebaseui-react"
  ],
  "registryDependencies": [
    "button",
    "https://fir-ui-shadcn-registry.web.app/r/sms-multi-factor-assertion-form.json",
    "https://fir-ui-shadcn-registry.web.app/r/totp-multi-factor-assertion-form.json"
  ],
  "files": [
    {
      "path": "src/components/multi-factor-auth-assertion-form.tsx",
      "content": "\"use client\";\n\nimport { getTranslation } from \"@invertase/firebaseui-core\";\nimport { useUI } from \"@invertase/firebaseui-react\";\nimport {\n  PhoneMultiFactorGenerator,\n  TotpMultiFactorGenerator,\n  type MultiFactorInfo,\n  type UserCredential,\n} from \"firebase/auth\";\nimport { useState, type ComponentProps } from \"react\";\nimport { useMultiFactorAssertionCleanup } from \"@invertase/firebaseui-react\";\n\nimport { SmsMultiFactorAssertionForm } from \"@/components/sms-multi-factor-assertion-form\";\nimport { TotpMultiFactorAssertionForm } from \"@/components/totp-multi-factor-assertion-form\";\nimport { Button } from \"@/components/ui/button\";\n\nexport type MultiFactorAuthAssertionFormProps = {\n  onSuccess?: (credential: UserCredential) => void;\n};\n\nexport function MultiFactorAuthAssertionForm({ onSuccess }: MultiFactorAuthAssertionFormProps) {\n  const ui = useUI();\n  const resolver = ui.multiFactorResolver;\n  const mfaAssertionFactorPrompt = getTranslation(ui, \"prompts\", \"mfaAssertionFactorPrompt\");\n\n  useMultiFactorAssertionCleanup();\n\n  if (!resolver) {\n    throw new Error(\"MultiFactorAuthAssertionForm requires a multi-factor resolver\");\n  }\n\n  // If only a single hint is provided, select it by default to improve UX.\n  const [hint, setHint] = useState<MultiFactorInfo | undefined>(\n    resolver.hints.length === 1 ? resolver.hints[0] : undefined\n  );\n\n  if (hint) {\n    if (hint.factorId === PhoneMultiFactorGenerator.FACTOR_ID) {\n      return <SmsMultiFactorAssertionForm hint={hint} onSuccess={onSuccess} />;\n    }\n\n    if (hint.factorId === TotpMultiFactorGenerator.FACTOR_ID) {\n      return <TotpMultiFactorAssertionForm hint={hint} onSuccess={onSuccess} />;\n    }\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <p className=\"text-sm text-muted-foreground\">{mfaAssertionFactorPrompt}</p>\n      {resolver.hints.map((hint) => {\n        if (hint.factorId === TotpMultiFactorGenerator.FACTOR_ID) {\n          return <TotpButton key={hint.factorId} onClick={() => setHint(hint)} />;\n        }\n\n        if (hint.factorId === PhoneMultiFactorGenerator.FACTOR_ID) {\n          return <SmsButton key={hint.factorId} onClick={() => setHint(hint)} />;\n        }\n\n        return null;\n      })}\n    </div>\n  );\n}\n\nfunction TotpButton(props: ComponentProps<typeof Button>) {\n  const ui = useUI();\n  const labelText = getTranslation(ui, \"labels\", \"mfaTotpVerification\");\n  return <Button {...props}>{labelText}</Button>;\n}\n\nfunction SmsButton(props: ComponentProps<typeof Button>) {\n  const ui = useUI();\n  const labelText = getTranslation(ui, \"labels\", \"mfaSmsVerification\");\n  return <Button {...props}>{labelText}</Button>;\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "version": "0.0.2"
  }
}