@firebase-oss/ui-shadcn 0.0.1

package/dist/registry/totp-multi-factor-assertion-form.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "totp-multi-factor-assertion-form",
+  "type": "registry:block",
+  "title": "TOTP Multi-Factor Assertion Form",
+  "description": "A form allowing users to complete TOTP-based multi-factor authentication during sign-in.",
+  "dependencies": [
+    "@firebase-oss/ui-react"
+  ],
+  "registryDependencies": [
+    "form",
+    "button",
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "src/components/totp-multi-factor-assertion-form.tsx",
+      "content": "/**\n * Copyright 2025 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n\"use client\";\n\nimport { type UserCredential, type MultiFactorInfo } from \"firebase/auth\";\nimport { FirebaseUIError, getTranslation } from \"@firebase-oss/ui-core\";\nimport {\n  useMultiFactorTotpAuthVerifyFormSchema,\n  useUI,\n  useTotpMultiFactorAssertionFormAction,\n} from \"@firebase-oss/ui-react\";\nimport { useForm } from \"react-hook-form\";\nimport { standardSchemaResolver } from \"@hookform/resolvers/standard-schema\";\n\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from \"@/components/ui/form\";\nimport { Button } from \"@/components/ui/button\";\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from \"@/components/ui/input-otp\";\n\ntype TotpMultiFactorAssertionFormProps = {\n  hint: MultiFactorInfo;\n  onSuccess?: (credential: UserCredential) => void;\n};\n\nexport function TotpMultiFactorAssertionForm(props: TotpMultiFactorAssertionFormProps) {\n  const ui = useUI();\n  const schema = useMultiFactorTotpAuthVerifyFormSchema();\n  const action = useTotpMultiFactorAssertionFormAction();\n\n  const form = useForm<{ verificationCode: string }>({\n    resolver: standardSchemaResolver(schema),\n    defaultValues: {\n      verificationCode: \"\",\n    },\n  });\n\n  const onSubmit = async (values: { verificationCode: string }) => {\n    try {\n      const credential = await action({ verificationCode: values.verificationCode, hint: props.hint });\n      props.onSuccess?.(credential);\n    } catch (error) {\n      const message = error instanceof FirebaseUIError ? error.message : String(error);\n      form.setError(\"root\", { message });\n    }\n  };\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"flex flex-col gap-y-4\">\n        <FormField\n          control={form.control}\n          name=\"verificationCode\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>{getTranslation(ui, \"labels\", \"verificationCode\")}</FormLabel>\n              <FormControl>\n                <InputOTP maxLength={6} {...field}>\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\" disabled={ui.state !== \"idle\"}>\n          {getTranslation(ui, \"labels\", \"verifyCode\")}\n        </Button>\n        {form.formState.errors.root && <FormMessage>{form.formState.errors.root.message}</FormMessage>}\n      </form>\n    </Form>\n  );\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "version": "0.0.1"
+  }
+}

package/dist/registry/totp-multi-factor-enrollment-form.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "totp-multi-factor-enrollment-form",
+  "type": "registry:block",
+  "title": "TOTP Multi-Factor Enrollment Form",
+  "description": "A form allowing users to enroll TOTP-based multi-factor authentication with QR code generation.",
+  "dependencies": [
+    "@firebase-oss/ui-react"
+  ],
+  "registryDependencies": [
+    "form",
+    "input",
+    "button",
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "src/components/totp-multi-factor-enrollment-form.tsx",
+      "content": "/**\n * Copyright 2025 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n\"use client\";\n\nimport { useState } from \"react\";\nimport { TotpMultiFactorGenerator, type TotpSecret } from \"firebase/auth\";\nimport {\n  enrollWithMultiFactorAssertion,\n  FirebaseUIError,\n  generateTotpQrCode,\n  generateTotpSecret,\n  getTranslation,\n} from \"@firebase-oss/ui-core\";\nimport {\n  useMultiFactorTotpAuthNumberFormSchema,\n  useMultiFactorTotpAuthVerifyFormSchema,\n  useUI,\n} from \"@firebase-oss/ui-react\";\nimport { useForm } from \"react-hook-form\";\nimport { standardSchemaResolver } from \"@hookform/resolvers/standard-schema\";\n\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from \"@/components/ui/form\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from \"@/components/ui/input-otp\";\n\ntype TotpMultiFactorSecretGenerationFormProps = {\n  onSubmit: (secret: TotpSecret, displayName: string) => void;\n};\n\nfunction TotpMultiFactorSecretGenerationForm(props: TotpMultiFactorSecretGenerationFormProps) {\n  const ui = useUI();\n  const schema = useMultiFactorTotpAuthNumberFormSchema();\n\n  const form = useForm<{ displayName: string }>({\n    resolver: standardSchemaResolver(schema),\n    defaultValues: {\n      displayName: \"\",\n    },\n  });\n\n  const onSubmit = async (values: { displayName: string }) => {\n    try {\n      const secret = await generateTotpSecret(ui);\n      props.onSubmit(secret, values.displayName);\n    } catch (error) {\n      const message = error instanceof FirebaseUIError ? error.message : String(error);\n      form.setError(\"root\", { message });\n    }\n  };\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"flex flex-col gap-y-4\">\n        <FormField\n          control={form.control}\n          name=\"displayName\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>{getTranslation(ui, \"labels\", \"displayName\")}</FormLabel>\n              <FormControl>\n                <Input {...field} type=\"text\" />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\" disabled={ui.state !== \"idle\"}>\n          {getTranslation(ui, \"labels\", \"generateQrCode\")}\n        </Button>\n        {form.formState.errors.root && <FormMessage>{form.formState.errors.root.message}</FormMessage>}\n      </form>\n    </Form>\n  );\n}\n\ntype MultiFactorEnrollmentVerifyTotpFormProps = {\n  secret: TotpSecret;\n  displayName: string;\n  onSuccess: () => void;\n};\n\nexport function MultiFactorEnrollmentVerifyTotpForm(props: MultiFactorEnrollmentVerifyTotpFormProps) {\n  const ui = useUI();\n  const schema = useMultiFactorTotpAuthVerifyFormSchema();\n\n  const form = useForm<{ verificationCode: string }>({\n    resolver: standardSchemaResolver(schema),\n    defaultValues: {\n      verificationCode: \"\",\n    },\n  });\n\n  const onSubmit = async (values: { verificationCode: string }) => {\n    try {\n      const assertion = TotpMultiFactorGenerator.assertionForEnrollment(props.secret, values.verificationCode);\n      await enrollWithMultiFactorAssertion(ui, assertion, values.verificationCode);\n      props.onSuccess();\n    } catch (error) {\n      const message = error instanceof FirebaseUIError ? error.message : String(error);\n      form.setError(\"root\", { message });\n    }\n  };\n\n  const qrCodeDataUrl = generateTotpQrCode(ui, props.secret, props.displayName);\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-col gap-y-4 items-center justify-center\">\n        <img src={qrCodeDataUrl} alt=\"TOTP QR Code\" className=\"mx-auto\" />\n        <code className=\"text-xs text-muted-foreground text-center\">{props.secret.secretKey.toString()}</code>\n        <p className=\"text-xs text-muted-foreground text-center\">\n          {getTranslation(ui, \"prompts\", \"mfaTotpQrCodePrompt\")}\n        </p>\n      </div>\n      <Form {...form}>\n        <form onSubmit={form.handleSubmit(onSubmit)} className=\"flex flex-col gap-y-4\">\n          <FormField\n            control={form.control}\n            name=\"verificationCode\"\n            render={({ field }) => (\n              <FormItem>\n                <FormLabel>{getTranslation(ui, \"labels\", \"verificationCode\")}</FormLabel>\n                <FormControl>\n                  <InputOTP maxLength={6} {...field}>\n                    <InputOTPGroup>\n                      <InputOTPSlot index={0} />\n                      <InputOTPSlot index={1} />\n                      <InputOTPSlot index={2} />\n                      <InputOTPSlot index={3} />\n                      <InputOTPSlot index={4} />\n                      <InputOTPSlot index={5} />\n                    </InputOTPGroup>\n                  </InputOTP>\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n          <Button type=\"submit\" disabled={ui.state !== \"idle\"}>\n            {getTranslation(ui, \"labels\", \"verifyCode\")}\n          </Button>\n          {form.formState.errors.root && <FormMessage>{form.formState.errors.root.message}</FormMessage>}\n        </form>\n      </Form>\n    </div>\n  );\n}\n\nexport type TotpMultiFactorEnrollmentFormProps = {\n  onSuccess?: () => void;\n};\n\nexport function TotpMultiFactorEnrollmentForm(props: TotpMultiFactorEnrollmentFormProps) {\n  const ui = useUI();\n\n  const [enrollment, setEnrollment] = useState<{\n    secret: TotpSecret;\n    displayName: string;\n  } | null>(null);\n\n  if (!ui.auth.currentUser) {\n    throw new Error(\"User must be authenticated to enroll with multi-factor authentication\");\n  }\n\n  if (!enrollment) {\n    return (\n      <TotpMultiFactorSecretGenerationForm onSubmit={(secret, displayName) => setEnrollment({ secret, displayName })} />\n    );\n  }\n\n  return (\n    <MultiFactorEnrollmentVerifyTotpForm\n      {...enrollment}\n      onSuccess={() => {\n        props.onSuccess?.();\n      }}\n    />\n  );\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "version": "0.0.1"
+  }
+}

package/dist/registry/twitter-sign-in-button.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "twitter-sign-in-button",
+  "type": "registry:block",
+  "title": "Twitter Sign In Button",
+  "description": "A button component for Twitter OAuth authentication.",
+  "dependencies": [
+    "@firebase-oss/ui-react"
+  ],
+  "registryDependencies": [
+    "https://firebaseopensource.com/r/oauth-button.json"
+  ],
+  "files": [
+    {
+      "path": "src/components/twitter-sign-in-button.tsx",
+      "content": "/**\n * Copyright 2025 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n\"use client\";\n\nimport { TwitterAuthProvider } from \"firebase/auth\";\nimport { getTranslation } from \"@firebase-oss/ui-core\";\nimport { useUI, type TwitterSignInButtonProps, TwitterLogo } from \"@firebase-oss/ui-react\";\n\nimport { OAuthButton } from \"@/components/oauth-button\";\n\nexport type { TwitterSignInButtonProps };\n\nexport function TwitterSignInButton({ provider, ...props }: TwitterSignInButtonProps) {\n  const ui = useUI();\n\n  return (\n    <OAuthButton {...props} provider={provider || new TwitterAuthProvider()}>\n      <TwitterLogo />\n      <span>{getTranslation(ui, \"labels\", \"signInWithTwitter\")}</span>\n    </OAuthButton>\n  );\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "css": {
+    "@layer components": {
+      "button[data-provider='twitter.com'][data-themed='true']": {
+        "--twitter-primary": "#1DA1F2",
+        "--primary": "var(--twitter-primary)",
+        "--primary-foreground": "var(--color-white)"
+      }
+    }
+  },
+  "meta": {
+    "version": "0.0.1"
+  }
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@firebase-oss/ui-shadcn",
+  "version": "0.0.1",
+  "type": "module",
+  "bin": "./dist/bin/cli.js",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.14",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.3.1",
+    "@types/react": "19.1.16",
+    "@types/react-dom": "19.1.9",
+    "@types/yargs-parser": "^21.0.3",
+    "@vitejs/plugin-react": "^5.0.2",
+    "firebase": "^11.10.0",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "shadcn": "2.9.3-canary.0",
+    "tailwindcss": "^4.1.13",
+    "tsdown": "^0.16.6",
+    "tsx": "^4.20.6",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.5",
+    "vite-plugin-run": "^0.6.1",
+    "vitest": "^3.2.4",
+    "yargs-parser": "^22.0.0",
+    "@firebase-oss/ui-translations": "0.0.2"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.544.0",
+    "react-hook-form": "^7.64.0",
+    "tailwind-merge": "^3.3.1",
+    "zod": "4.1.12",
+    "@firebase-oss/ui-core": "0.0.2",
+    "@firebase-oss/ui-react": "0.0.2"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsdown && tsx build.ts --domain https://firebaseopensource.com",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "publish:npm": "../../publish.sh"
+  }
+}