Merge branch '@invertase/v7-development' of https://github.com/firebase/firebaseui-web into @invertase/v7-development

Author: dackers86

examples/angular/src/styles.css

@@ -16,4 +16,4 @@
 
 /* You can add global styles to this file, and also import other style files */
 @import "tailwindcss";
-@import "@firebase-ui/styles/tailwind";
+@import "@invertase/firebaseui-styles/tailwind";

examples/react/package.json

@@ -11,10 +11,10 @@
     "deploy": "pnpm run build && firebase deploy --only hosting:fir-ui-2025-react"
   },
   "dependencies": {
-    "@invertase/firebaseui-react": "0.0.4",
-    "@invertase/firebaseui-core": "0.0.4",
-    "@invertase/firebaseui-styles": "0.0.9",
-    "@invertase/firebaseui-translations": "0.0.4",
+    "@invertase/firebaseui-react": "workspace:*",
+    "@invertase/firebaseui-core": "workspace:*",
+    "@invertase/firebaseui-styles": "workspace:*",
+    "@invertase/firebaseui-translations": "workspace:*",
     "firebase": "^11.6.0",
     "react": "catalog:",
     "react-dom": "catalog:",

examples/react/src/App.tsx

@@ -19,7 +19,7 @@ import { routes } from "./routes";
 import { useUser } from "./firebase/hooks";
 import { auth } from "./firebase/firebase";
 import { multiFactor, sendEmailVerification, signOut } from "firebase/auth";
-import { MultiFactorAuthAssertionScreen, useUI } from "@firebase-ui/react";
+import { useUI } from "@invertase/firebaseui-react";
 
 function App() {
   const user = useUser();
@@ -35,9 +35,9 @@ function UnauthenticatedApp() {
   const ui = useUI();
 
   // This can trigger if the user is not on a screen already, and gets an MFA challenge - e.g. on One-Tap sign in.
-  if (ui.multiFactorResolver) {
-    return <MultiFactorAuthAssertionScreen />;
-  }
+  // if (ui.multiFactorResolver) {
+  //   return <MultiFactorAuthAssertionScreen />;
+  // }
 
   return (
     <div className="max-w-sm mx-auto pt-36 space-y-6 pb-36">

examples/react/src/firebase/firebase.ts

@@ -19,7 +19,7 @@
 import { initializeApp, getApps } from "firebase/app";
 import { firebaseConfig } from "./config";
 import { connectAuthEmulator, getAuth } from "firebase/auth";
-import { initializeUI, oneTapSignIn, countryCodes } from "@firebase-ui/core";
+import { initializeUI, oneTapSignIn, countryCodes } from "@invertase/firebaseui-core";
 
 export const firebaseApp = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
 

examples/react/src/index.css

@@ -18,5 +18,5 @@
 @custom-variant dark (&:where(.dark, .dark *));
 @import "@invertase/firebaseui-styles/tailwind";
 
-/* @import "@firebase-ui/styles/src/themes/dark.css"; */
-/* @import "@firebase-ui/styles/src/themes/brutalist.css"; */
+/* @import "@invertase/firebaseui-styles/src/themes/dark.css"; */
+/* @import "@invertase/firebaseui-styles/src/themes/brutalist.css"; */

package.json

@@ -10,7 +10,7 @@
     "build:styles": "pnpm --filter=@invertase/firebaseui-styles run build",
     "build:react": "pnpm --filter=@invertase/firebaseui-react run build",
     "build:angular": "pnpm --filter=@invertase/firebaseui-angular run build",
-    "build:shadcn": "pnpm --filter=@firebase-ui/shadcn run build",
+    "build:shadcn": "pnpm --filter=@invertase/firebaseui-shadcn run build",
     "build:examples": "pnpm run build && pnpm --filter react run build && pnpm --filter nextjs run build && pnpm --filter angular-example run build",
     "build:all": "pnpm run build && pnpm run build:angular && pnpm run build:examples",
     "build:packages": "pnpm run build && pnpm run build:angular",

packages/react/src/context.tsx

@@ -19,7 +19,7 @@ import { useStore } from "@nanostores/react";
 import { type PolicyProps, PolicyProvider } from "~/components/policies";
 import { createContext } from "react";
 
-export const FirebaseUIContext = createContext<FirebaseUI>({} as FirebaseUI);
+export const FirebaseUIContext = createContext<FirebaseUI>(null as unknown as FirebaseUI);
 
 export type FirebaseUIProviderProps = {
   children: React.ReactNode;

packages/react/src/hooks.test.tsx

@@ -63,11 +63,10 @@ describe("useUI", () => {
     expect(result.current).toEqual(mockUI.get());
   });
 
-  // TODO(ehesp): This test is not working as expected.
-  it.skip("throws an error if no context is found", () => {
+  it("throws an error if no context is found", () => {
     expect(() => {
       renderHook(() => useUI());
-    }).toThrow("No FirebaseUI context found. Your application must be wrapped in a <FirebaseUIProvider> component.");
+    }).toThrow();
   });
 
   it("returns updated values when nanostore state changes via setState", () => {

packages/react/src/hooks.ts

@@ -40,7 +40,14 @@ export function useUI() {
 
   if (!ui) {
     throw new Error(
-      "No FirebaseUI context found. Your application must be wrapped in a <FirebaseUIProvider> component."
+      `No FirebaseUI context found. Your application must be wrapped in a FirebaseUIProvider:
+
+const ui = initializeUI(...);
+
+<FirebaseUIProvider ui={ui}>
+  <App />
+</FirebaseUIProvider>
+`
     );
   }
 

packages/shadcn/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@firebase-ui/shadcn",
+  "name": "@invertase/firebaseui-shadcn",
   "private": true,
   "version": "0.0.0",
   "type": "module",