;\n\nexport function PhoneAuthScreen({ children, ...props }: PhoneAuthScreenProps) {\n const ui = useUI();\n\n const titleText = getTranslation(ui, \"labels\", \"signIn\");\n const subtitleText = getTranslation(ui, \"prompts\", \"signInToAccount\");\n const mfaResolver = ui.multiFactorResolver;\n\n return (\n \n
\n \n {titleText}\n {subtitleText}\n \n \n {mfaResolver ? (\n \n ) : (\n <>\n \n {children ? (\n <>\n {getTranslation(ui, \"messages\", \"dividerOr\")}\n \n {children}\n \n
\n \n ) : null}\n \n )}\n \n \n
\n {parts.map((part: string, index: number) => {\n if (part === \"{tos}\") {\n return cloneElement(Handler, {\n key: index,\n onClick: onNavigate ? () => onNavigate(termsOfServiceUrl) : undefined,\n href: onNavigate ? undefined : termsOfServiceUrl,\n children: getTranslation(ui, \"labels\", \"termsOfService\"),\n });\n }\n\n if (part === \"{privacy}\") {\n return cloneElement(Handler, {\n key: index,\n onClick: onNavigate ? () => onNavigate(privacyPolicyUrl) : undefined,\n href: onNavigate ? undefined : privacyPolicyUrl,\n children: getTranslation(ui, \"labels\", \"privacyPolicy\"),\n });\n }\n\n return {part};\n })}\n
\n );\n}\n",
+ "content": "import { cn } from \"@/lib/utils\";\nimport { getTranslation } from \"@firebase-oss/ui-core\";\nimport { useUI, PolicyContext } from \"@firebase-oss/ui-react\";\nimport { cloneElement, useContext } from \"react\";\n\nexport function Policies() {\n const ui = useUI();\n const policies = useContext(PolicyContext);\n\n if (!policies) {\n return null;\n }\n\n const { termsOfServiceUrl, privacyPolicyUrl, onNavigate } = policies;\n const termsAndPrivacyText = getTranslation(ui, \"messages\", \"termsAndPrivacy\");\n const parts = termsAndPrivacyText.split(/(\\{tos\\}|\\{privacy\\})/);\n\n const className = cn(\"hover:underline font-semibold\");\n const Handler = onNavigate ? (\n \n ) : (\n \n );\n\n return (\n \n {parts.map((part: string, index: number) => {\n if (part === \"{tos}\") {\n return cloneElement(Handler, {\n key: index,\n onClick: onNavigate ? () => onNavigate(termsOfServiceUrl) : undefined,\n href: onNavigate ? undefined : termsOfServiceUrl,\n children: getTranslation(ui, \"labels\", \"termsOfService\"),\n });\n }\n\n if (part === \"{privacy}\") {\n return cloneElement(Handler, {\n key: index,\n onClick: onNavigate ? () => onNavigate(privacyPolicyUrl) : undefined,\n href: onNavigate ? undefined : privacyPolicyUrl,\n children: getTranslation(ui, \"labels\", \"privacyPolicy\"),\n });\n }\n\n return {part};\n })}\n
\n );\n}\n",
"type": "registry:component"
}
]
diff --git a/packages/shadcn/public/redirect-error.json b/packages/shadcn/public/redirect-error.json
index c0b7f2cf7..66d7bf698 100644
--- a/packages/shadcn/public/redirect-error.json
+++ b/packages/shadcn/public/redirect-error.json
@@ -5,12 +5,12 @@
"title": "Redirect Error",
"description": "A component that displays redirect errors from Firebase UI authentication flow.",
"dependencies": [
- "@firebase-ui/react"
+ "@firebase-oss/ui-react"
],
"files": [
{
"path": "src/registry/redirect-error.tsx",
- "content": "\"use client\";\n\nimport { useRedirectError } from \"@firebase-ui/react\";\n\nexport function RedirectError() {\n const error = useRedirectError();\n\n if (!error) {\n return null;\n }\n\n return {error}
;\n}\n",
+ "content": "\"use client\";\n\nimport { useRedirectError } from \"@firebase-oss/ui-react\";\n\nexport function RedirectError() {\n const error = useRedirectError();\n\n if (!error) {\n return null;\n }\n\n return {error}
;\n}\n",
"type": "registry:component"
}
]
diff --git a/packages/shadcn/public/sign-in-auth-form.json b/packages/shadcn/public/sign-in-auth-form.json
index 94c3713e0..ebcd14fcf 100644
--- a/packages/shadcn/public/sign-in-auth-form.json
+++ b/packages/shadcn/public/sign-in-auth-form.json
@@ -5,7 +5,7 @@
"title": "Sign In Auth Form",
"description": "A form allowing users to sign in with email and password.",
"dependencies": [
- "@firebase-ui/react"
+ "@firebase-oss/ui-react"
],
"registryDependencies": [
"input",
@@ -16,7 +16,7 @@
"files": [
{
"path": "src/registry/sign-in-auth-form.tsx",
- "content": "\"use client\";\n\nimport type { SignInAuthFormSchema } from \"@firebase-ui/core\";\nimport { useSignInAuthFormAction, useSignInAuthFormSchema, useUI, type SignInAuthFormProps } from \"@firebase-ui/react\";\nimport { useForm } from \"react-hook-form\";\nimport { standardSchemaResolver } from \"@hookform/resolvers/standard-schema\";\nimport { FirebaseUIError, getTranslation } from \"@firebase-ui/core\";\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 { Policies } from \"./policies\";\n\nexport type { SignInAuthFormProps };\n\nexport function SignInAuthForm(props: SignInAuthFormProps) {\n const ui = useUI();\n const schema = useSignInAuthFormSchema();\n const action = useSignInAuthFormAction();\n\n const form = useForm({\n resolver: standardSchemaResolver(schema),\n defaultValues: {\n email: \"\",\n password: \"\",\n },\n });\n\n async function onSubmit(values: SignInAuthFormSchema) {\n try {\n const credential = await action(values);\n props.onSignIn?.(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 \n \n );\n}\n",
+ "content": "\"use client\";\n\nimport type { SignInAuthFormSchema } from \"@firebase-oss/ui-core\";\nimport { useSignInAuthFormAction, useSignInAuthFormSchema, useUI, type SignInAuthFormProps } from \"@firebase-oss/ui-react\";\nimport { useForm } from \"react-hook-form\";\nimport { standardSchemaResolver } from \"@hookform/resolvers/standard-schema\";\nimport { FirebaseUIError, getTranslation } from \"@firebase-oss/ui-core\";\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 { Policies } from \"./policies\";\n\nexport type { SignInAuthFormProps };\n\nexport function SignInAuthForm(props: SignInAuthFormProps) {\n const ui = useUI();\n const schema = useSignInAuthFormSchema();\n const action = useSignInAuthFormAction();\n\n const form = useForm({\n resolver: standardSchemaResolver(schema),\n defaultValues: {\n email: \"\",\n password: \"\",\n },\n });\n\n async function onSubmit(values: SignInAuthFormSchema) {\n try {\n const credential = await action(values);\n props.onSignIn?.(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 \n \n );\n}\n",
"type": "registry:component"
}
]
diff --git a/packages/shadcn/public/sign-in-auth-screen.json b/packages/shadcn/public/sign-in-auth-screen.json
index 4fabd25ef..a9a96daae 100644
--- a/packages/shadcn/public/sign-in-auth-screen.json
+++ b/packages/shadcn/public/sign-in-auth-screen.json
@@ -5,7 +5,7 @@
"title": "Sign In Auth Screen",
"description": "A screen allowing users to sign in with email and password.",
"dependencies": [
- "@firebase-ui/react"
+ "@firebase-oss/ui-react"
],
"registryDependencies": [
"separator",
@@ -15,7 +15,7 @@
"files": [
{
"path": "src/registry/sign-in-auth-screen.tsx",
- "content": "\"use client\";\n\nimport { getTranslation } from \"@firebase-ui/core\";\nimport { useUI, type SignInAuthScreenProps } from \"@firebase-ui/react\";\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { SignInAuthForm } from \"@/registry/sign-in-auth-form\";\nimport { MultiFactorAuthAssertionForm } from \"@/registry/multi-factor-auth-assertion-form\";\n\nexport type { SignInAuthScreenProps };\n\nexport function SignInAuthScreen({ children, ...props }: SignInAuthScreenProps) {\n const ui = useUI();\n\n const titleText = getTranslation(ui, \"labels\", \"signIn\");\n const subtitleText = getTranslation(ui, \"prompts\", \"signInToAccount\");\n\n const mfaResolver = ui.multiFactorResolver;\n\n return (\n \n
\n \n {titleText}\n {subtitleText}\n \n \n {mfaResolver ? (\n \n ) : (\n <>\n \n {children ? (\n <>\n {getTranslation(ui, \"messages\", \"dividerOr\")}\n {children}
\n \n ) : null}\n \n )}\n \n \n
\n
\n \n {titleText}\n {subtitleText}\n \n \n {mfaResolver ? (\n \n ) : (\n <>\n \n {children ? (\n <>\n {getTranslation(ui, \"messages\", \"dividerOr\")}\n {children}
\n \n ) : null}\n \n )}\n \n \n
\n
\n \n {titleText}\n {subtitleText}\n \n \n \n {children ? (\n <>\n {getTranslation(ui, \"messages\", \"dividerOr\")}\n {children}
\n \n ) : null}\n \n \n
\n
\n \n {titleText}\n {subtitleText}\n \n \n \n {children ? (\n <>\n {getTranslation(ui, \"messages\", \"dividerOr\")}\n {children}
\n \n ) : null}\n \n \n
\n
\n
\n
\n {(props.hint as PhoneMultiFactorInfo).phoneNumber || \"No phone number available\"}\n
\n
\n
\n
\n {error &&
{error}
}\n
\n
\n
\n
\n {(props.hint as PhoneMultiFactorInfo).phoneNumber || \"No phone number available\"}\n
\n
\n
\n
\n {error &&
{error}
}\n
\n
\n
\n
\n
\n Scan this QR code with your authenticator app\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n Scan this QR code with your authenticator app\n
\n
\n
\n
\n \n
React
-```json
-{
- "dependencies": {
- "@firebase-oss/ui-react": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-react-0.0.1.tgz",
- "@firebase-oss/ui-core": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-core-0.0.1.tgz",
- "@firebase-oss/ui-styles": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-styles-0.0.1.tgz",
- "@firebase-oss/ui-translations": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-translations-0.0.1.tgz"
- }
-}
+```bash
+npm install @firebase-oss/ui-react @firebase-oss/ui-core @firebase-oss/ui-styles @firebase-oss/ui-translations
```
@@ -37,16 +28,8 @@ Packages have been created for both `React` and `Angular`. For now, they're only
FirebaseUI for Angular depends on the [AngularFire](https://github.com/angular/angularfire) package:
-```json
-{
- "dependencies": {
- "@angular/fire": "^19.1.0",
- "@firebase-oss/ui-angular": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-angular-0.0.1.tgz",
- "@firebase-oss/ui-core": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-core-0.0.1.tgz",
- "@firebase-oss/ui-styles": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-styles-0.0.1.tgz",
- "@firebase-oss/ui-translations": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-translations-0.0.1.tgz"
- }
-}
+```bash
+npm install @angular/fire @firebase-oss/ui-angular @firebase-oss/ui-core @firebase-oss/ui-styles @firebase-oss/ui-translations
```
diff --git a/packages/angular/README.md b/packages/angular/README.md
index 2359a0db8..63958a267 100644
--- a/packages/angular/README.md
+++ b/packages/angular/README.md
@@ -1,4 +1,16 @@
-# FirebaseuiAngular
+# @firebase-oss/ui-angular
+
+This package contains the Angular components for FirebaseUI.
+
+## Installation
+
+Install the package from NPM:
+
+```bash
+npm install @angular/fire @firebase-oss/ui-angular @firebase-oss/ui-core @firebase-oss/ui-styles @firebase-oss/ui-translations
+```
+
+## Development
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.
diff --git a/packages/react/README.md b/packages/react/README.md
index 3e789a4fe..017053015 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -20,7 +20,7 @@ If using Tailwind CSS, you can import the styles directly into your project.
```css
@import "tailwindcss";
-@import "@firebase-oss/ui-styles/src/base.css";
+@import "@firebase-oss/ui-styles/tailwind";
```
Alternatively, you can import the fully compiled CSS file into your project.
diff --git a/packages/shadcn/README.md b/packages/shadcn/README.md
index 71828c686..b67864835 100644
--- a/packages/shadcn/README.md
+++ b/packages/shadcn/README.md
@@ -27,11 +27,11 @@ npx shadcn@latest add @firebase/sign-up-auth-screen
Before consuming a component, ensure you have initalized your Firebase UI application:
```tsx
-import { initalizeUI } from '@firebase-oss/ui-core';
+import { initializeUI } from '@firebase-oss/ui-core';
import { FirebaseUIProvider } from '@firebase-oss/ui-react';
import { SignInAuthScreen } from '@/components/sign-in-auth-screen';
-const ui = initalizeUI(...);
+const ui = initializeUI(...);
function App() {
return (
From 49ca92382fa5e39443aa07bbb956bdb8a8e6f737 Mon Sep 17 00:00:00 2001
From: Jeff Huleatt <3759507+jhuleatt@users.noreply.github.com>
Date: Fri, 31 Oct 2025 11:06:20 -0400
Subject: [PATCH 3/4] prettier
---
examples/shadcn/src/components/sign-in-auth-form.tsx | 7 ++++++-
.../angular/src/lib/auth/forms/phone-auth-form.spec.ts | 7 ++++++-
.../src/auth/forms/mfa/sms-multi-factor-assertion-form.tsx | 7 ++++++-
packages/shadcn/src/registry/sign-in-auth-form.tsx | 7 ++++++-
4 files changed, 24 insertions(+), 4 deletions(-)
diff --git a/examples/shadcn/src/components/sign-in-auth-form.tsx b/examples/shadcn/src/components/sign-in-auth-form.tsx
index 8df4ca109..31adb3bd0 100644
--- a/examples/shadcn/src/components/sign-in-auth-form.tsx
+++ b/examples/shadcn/src/components/sign-in-auth-form.tsx
@@ -1,7 +1,12 @@
"use client";
import type { SignInAuthFormSchema } from "@firebase-oss/ui-core";
-import { useSignInAuthFormAction, useSignInAuthFormSchema, useUI, type SignInAuthFormProps } from "@firebase-oss/ui-react";
+import {
+ useSignInAuthFormAction,
+ useSignInAuthFormSchema,
+ useUI,
+ type SignInAuthFormProps,
+} from "@firebase-oss/ui-react";
import { useForm } from "react-hook-form";
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
import { FirebaseUIError, getTranslation } from "@firebase-oss/ui-core";
diff --git a/packages/angular/src/lib/auth/forms/phone-auth-form.spec.ts b/packages/angular/src/lib/auth/forms/phone-auth-form.spec.ts
index 2f8679438..2671de6af 100644
--- a/packages/angular/src/lib/auth/forms/phone-auth-form.spec.ts
+++ b/packages/angular/src/lib/auth/forms/phone-auth-form.spec.ts
@@ -49,7 +49,12 @@ describe("", () => {
let mockFirebaseUIError: any;
beforeEach(() => {
- const { verifyPhoneNumber, confirmPhoneNumber, formatPhoneNumber, FirebaseUIError } = require("@firebase-oss/ui-core");
+ const {
+ verifyPhoneNumber,
+ confirmPhoneNumber,
+ formatPhoneNumber,
+ FirebaseUIError,
+ } = require("@firebase-oss/ui-core");
const { injectRecaptchaVerifier } = require("../../tests/test-helpers");
mockVerifyPhoneNumber = verifyPhoneNumber;
mockConfirmPhoneNumber = confirmPhoneNumber;
diff --git a/packages/react/src/auth/forms/mfa/sms-multi-factor-assertion-form.tsx b/packages/react/src/auth/forms/mfa/sms-multi-factor-assertion-form.tsx
index 53501a6ef..283a7095c 100644
--- a/packages/react/src/auth/forms/mfa/sms-multi-factor-assertion-form.tsx
+++ b/packages/react/src/auth/forms/mfa/sms-multi-factor-assertion-form.tsx
@@ -6,7 +6,12 @@ import {
type RecaptchaVerifier,
} from "firebase/auth";
-import { signInWithMultiFactorAssertion, FirebaseUIError, getTranslation, verifyPhoneNumber } from "@firebase-oss/ui-core";
+import {
+ signInWithMultiFactorAssertion,
+ FirebaseUIError,
+ getTranslation,
+ verifyPhoneNumber,
+} from "@firebase-oss/ui-core";
import { form } from "~/components/form";
import {
useMultiFactorPhoneAuthNumberFormSchema,
diff --git a/packages/shadcn/src/registry/sign-in-auth-form.tsx b/packages/shadcn/src/registry/sign-in-auth-form.tsx
index a2bea703a..61d0d4c9f 100644
--- a/packages/shadcn/src/registry/sign-in-auth-form.tsx
+++ b/packages/shadcn/src/registry/sign-in-auth-form.tsx
@@ -1,7 +1,12 @@
"use client";
import type { SignInAuthFormSchema } from "@firebase-oss/ui-core";
-import { useSignInAuthFormAction, useSignInAuthFormSchema, useUI, type SignInAuthFormProps } from "@firebase-oss/ui-react";
+import {
+ useSignInAuthFormAction,
+ useSignInAuthFormSchema,
+ useUI,
+ type SignInAuthFormProps,
+} from "@firebase-oss/ui-react";
import { useForm } from "react-hook-form";
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
import { FirebaseUIError, getTranslation } from "@firebase-oss/ui-core";
From ecfce260bb5aac5c365e0d70494beb3ff74edb13 Mon Sep 17 00:00:00 2001
From: Jeff Huleatt <3759507+jhuleatt@users.noreply.github.com>
Date: Fri, 31 Oct 2025 11:08:31 -0400
Subject: [PATCH 4/4] lint
---
packages/core/vite.config.ts | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/packages/core/vite.config.ts b/packages/core/vite.config.ts
index 6b617e5ac..3189ee4bf 100644
--- a/packages/core/vite.config.ts
+++ b/packages/core/vite.config.ts
@@ -7,7 +7,10 @@ export default defineConfig({
resolve: {
alias: {
"@firebase-oss/ui-styles": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../styles/src"),
- "@firebase-oss/ui-translations": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../translations/src"),
+ "@firebase-oss/ui-translations": path.resolve(
+ path.dirname(fileURLToPath(import.meta.url)),
+ "../translations/src"
+ ),
"~/tests": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "./tests"),
"~": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "./src"),
},