-
-
-
-
-
Modal Example
-
- Click the Sign In or Get Started button in the header to see the modal.
-
-
-
- {showModal && (
- <>
-
setShowModal(false)}
- />
-
-
e.stopPropagation()}
- >
-
-
-
- {isRegister ? (
-
-
-
Create Account
-
Join us to get started with your journey
-
-
setIsRegister(false)} />
-
- ) : (
-
-
-
Welcome Back
-
Sign in to your account to continue
-
-
{}} onRegisterClick={() => setIsRegister(true)} />
-
- )}
-
-
-
-
- )}
-
- );
-}
diff --git a/examples/react/src/index.css b/examples/react/src/index.css
index afabc2e09..494c9e58a 100644
--- a/examples/react/src/index.css
+++ b/examples/react/src/index.css
@@ -15,7 +15,16 @@
*/
@import "tailwindcss";
-@import "@firebase-oss/ui-styles/tailwind";
+@custom-variant dark (&:where(.dark, .dark *));
+@import "@invertase/firebaseui-styles/tailwind";
+
+.fui-provider__button[data-provider="oidc.line"][data-themed="true"] {
+ --line-primary: #07b53b;
+ --color-primary: var(--line-primary);
+ --color-primary-hover: --alpha(var(--line-primary) / 85%);
+ --color-primary-surface: #ffffff;
+ --color-border: var(--line-primary);
+}
/* @import "@firebase-oss/ui-styles/src/themes/dark.css"; */
-/* @import "@firebase-oss/ui-styles/src/themes/brutalist.css"; */
\ No newline at end of file
+/* @import "@firebase-oss/ui-styles/src/themes/brutalist.css"; */
diff --git a/examples/react/src/main.tsx b/examples/react/src/main.tsx
index c7e4c6605..5343fbfa0 100644
--- a/examples/react/src/main.tsx
+++ b/examples/react/src/main.tsx
@@ -14,15 +14,15 @@
* limitations under the License.
*/
-import { BrowserRouter, Routes, Route, Outlet, NavLink } from "react-router";
+import { BrowserRouter, NavLink, Outlet, Route, Routes } from "react-router";
+import { FirebaseUIProvider, useUI } from "@firebase-oss/ui-react";
+import { enUs } from "@firebase-oss/ui-translations";
import ReactDOM from "react-dom/client";
-import { FirebaseUIProvider } from "@firebase-oss/ui-react";
-import { ui, auth } from "./firebase/firebase";
import App from "./App";
-import { hiddenRoutes, routes } from "./routes";
-import { enUs } from "@firebase-oss/ui-translations";
+import { auth, ui } from "./firebase/firebase";
import { pirate } from "./pirate";
+import { hiddenRoutes, routes } from "./routes";
const root = document.getElementById("root")!;
diff --git a/examples/react/src/screens/oauth-screen.tsx b/examples/react/src/screens/oauth-screen.tsx
index ff9cf8699..d71cd2721 100644
--- a/examples/react/src/screens/oauth-screen.tsx
+++ b/examples/react/src/screens/oauth-screen.tsx
@@ -14,18 +14,19 @@
* limitations under the License.
*/
-import { useState } from "react";
-import { OAuthProvider } from "firebase/auth";
import {
- OAuthButton,
- FacebookSignInButton,
AppleSignInButton,
+ FacebookSignInButton,
GitHubSignInButton,
GoogleSignInButton,
MicrosoftSignInButton,
+ OAuthButton,
OAuthScreen,
TwitterSignInButton,
} from "@firebase-oss/ui-react";
+import { OAuthProvider } from "firebase/auth";
+import { useState } from "react";
+import { useNavigate } from "react-router";
export default function OAuthScreenPage() {
const [themed, setThemed] = useState(false);
diff --git a/examples/shadcn/package.json b/examples/shadcn/package.json
index bd600e50d..162e1791d 100644
--- a/examples/shadcn/package.json
+++ b/examples/shadcn/package.json
@@ -12,9 +12,6 @@
"shadcn:add-all": "tsx add-all.ts"
},
"dependencies": {
- "@firebase-oss/ui-core": "workspace:*",
- "@firebase-oss/ui-react": "workspace:*",
- "@firebase-oss/ui-styles": "workspace:*",
"@hookform/resolvers": "^5.2.2",
"@firebase-oss/ui-core": "workspace:*",
"@firebase-oss/ui-react": "workspace:*",
diff --git a/examples/shadcn/src/components/multi-factor-auth-assertion-form.tsx b/examples/shadcn/src/components/multi-factor-auth-assertion-form.tsx
index 5dde0560a..ede0031f5 100644
--- a/examples/shadcn/src/components/multi-factor-auth-assertion-form.tsx
+++ b/examples/shadcn/src/components/multi-factor-auth-assertion-form.tsx
@@ -1,13 +1,19 @@
"use client";
-import { PhoneMultiFactorGenerator, TotpMultiFactorGenerator, type MultiFactorInfo } from "firebase/auth";
-import { type ComponentProps, useState } from "react";
import { getTranslation } from "@firebase-oss/ui-core";
import { useUI } from "@firebase-oss/ui-react";
+import {
+ PhoneMultiFactorGenerator,
+ TotpMultiFactorGenerator,
+ type MultiFactorInfo,
+ type UserCredential,
+} from "firebase/auth";
+import { useState, type ComponentProps } from "react";
import { SmsMultiFactorAssertionForm } from "@/components/sms-multi-factor-assertion-form";
import { TotpMultiFactorAssertionForm } from "@/components/totp-multi-factor-assertion-form";
import { Button } from "@/components/ui/button";
+import { useMultiFactorAssertionCleanup } from "@firebase-oss/ui-react";
export type MultiFactorAuthAssertionFormProps = {
onSuccess?: (credential: UserCredential) => void;
diff --git a/examples/shadcn/src/components/multi-factor-auth-enrollment-screen.tsx b/examples/shadcn/src/components/multi-factor-auth-enrollment-screen.tsx
index d535f1369..318777a37 100644
--- a/examples/shadcn/src/components/multi-factor-auth-enrollment-screen.tsx
+++ b/examples/shadcn/src/components/multi-factor-auth-enrollment-screen.tsx
@@ -1,11 +1,10 @@
"use client";
-import React, { type PropsWithChildren } from "react";
import { getTranslation } from "@firebase-oss/ui-core";
import { useUI, type MultiFactorAuthEnrollmentFormProps } from "@firebase-oss/ui-react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { MultiFactorAuthEnrollmentForm } from "@/components/multi-factor-auth-enrollment-form";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
export type MultiFactorAuthEnrollmentScreenProps = MultiFactorAuthEnrollmentFormProps;
diff --git a/examples/shadcn/src/components/phone-auth-form.tsx b/examples/shadcn/src/components/phone-auth-form.tsx
index 9c5f2ced8..d4c588210 100644
--- a/examples/shadcn/src/components/phone-auth-form.tsx
+++ b/examples/shadcn/src/components/phone-auth-form.tsx
@@ -1,7 +1,12 @@
"use client";
-import type { PhoneAuthNumberFormSchema } from "@firebase-oss/ui-core";
-import { FirebaseUIError, getTranslation } from "@firebase-oss/ui-core";
+import {
+ FirebaseUIError,
+ formatPhoneNumber,
+ getTranslation,
+ type PhoneAuthNumberFormSchema,
+ type PhoneAuthVerifyFormSchema,
+} from "@firebase-oss/ui-core";
import {
type PhoneAuthFormProps,
usePhoneAuthNumberFormSchema,
@@ -9,23 +14,18 @@ import {
usePhoneNumberFormAction,
useRecaptchaVerifier,
useUI,
+ useVerifyPhoneNumberFormAction,
} from "@firebase-oss/ui-react";
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import type { UserCredential } from "firebase/auth";
+import { useRef, useState } from "react";
import { useForm } from "react-hook-form";
-import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
-import {
- FirebaseUIError,
- formatPhoneNumber,
- getTranslation,
- type PhoneAuthNumberFormSchema,
- type PhoneAuthVerifyFormSchema,
-} from "@firebase-oss/ui-core";
+import { CountrySelector, type CountrySelectorRef } from "@/components/country-selector";
+import { Policies } from "@/components/policies";
+import { Button } from "@/components/ui/button";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Policies } from "@/components/policies";
-import { CountrySelector, type CountrySelectorRef } from "@/components/country-selector";
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
type VerifyPhoneNumberFormProps = {
From 18e1824493cab5c87c7af346c623aff411606bdf Mon Sep 17 00:00:00 2001
From: Darren Ackers
Date: Wed, 19 Nov 2025 09:23:49 +0000
Subject: [PATCH 6/9] chore(*): ran formatting and linting
---
.../screens/email-link-auth-screen/page.tsx | 57 ++++++++++++++++++-
.../screens/password-reset-screen/page.tsx | 2 +-
.../phone-auth-screen-w-oauth/page.tsx | 20 ++-----
examples/nextjs/lib/firebase/ui.tsx | 2 +-
examples/shadcn/src/firebase/firebase.ts | 4 +-
5 files changed, 62 insertions(+), 23 deletions(-)
diff --git a/examples/nextjs-ssr/app/screens/email-link-auth-screen/page.tsx b/examples/nextjs-ssr/app/screens/email-link-auth-screen/page.tsx
index 9aa283c0e..76855f684 100644
--- a/examples/nextjs-ssr/app/screens/email-link-auth-screen/page.tsx
+++ b/examples/nextjs-ssr/app/screens/email-link-auth-screen/page.tsx
@@ -16,8 +16,59 @@
"use client";
-import { SignInAuthScreen } from "@firebase-oss/ui-react";
+import {
+ AppleSignInButton,
+ EmailLinkAuthScreen,
+ FacebookSignInButton,
+ GitHubSignInButton,
+ GoogleSignInButton,
+ MicrosoftSignInButton,
+ OAuthButton,
+ TwitterSignInButton,
+} from "@firebase-oss/ui-react";
+import { OAuthProvider } from "firebase/auth";
+import { useRouter } from "next/navigation";
-export default function EmailLinkAuthScreenPage() {
- return ;
+export default function EmailLinkAuthScreenWithOAuthPage() {
+ const router = useRouter();
+
+ return (
+ {
+ alert("Email has been sent - please check your email");
+ }}
+ onSignIn={(credential) => {
+ console.log(credential);
+ router.push("/");
+ }}
+ >
+
+
+
+
+
+
+
+
+ );
+}
+
+function LineSignInButton() {
+ const provider = new OAuthProvider("oidc.line");
+
+ return (
+
+
+ Sign in with Line
+
+ );
}
diff --git a/examples/nextjs/app/screens/password-reset-screen/page.tsx b/examples/nextjs/app/screens/password-reset-screen/page.tsx
index 6bb89b8e2..8b63cd9a6 100644
--- a/examples/nextjs/app/screens/password-reset-screen/page.tsx
+++ b/examples/nextjs/app/screens/password-reset-screen/page.tsx
@@ -16,7 +16,7 @@
"use client";
-import { PasswordResetScreen } from "@firebase-oss/ui-react";
+import { ForgotPasswordAuthScreen } from "@firebase-oss/ui-react";
export default function PasswordResetScreenPage() {
return {}} />;
diff --git a/examples/nextjs/app/screens/phone-auth-screen-w-oauth/page.tsx b/examples/nextjs/app/screens/phone-auth-screen-w-oauth/page.tsx
index d7dd34766..255e32194 100644
--- a/examples/nextjs/app/screens/phone-auth-screen-w-oauth/page.tsx
+++ b/examples/nextjs/app/screens/phone-auth-screen-w-oauth/page.tsx
@@ -17,14 +17,14 @@
"use client";
import {
+ AppleSignInButton,
FacebookSignInButton,
GitHubSignInButton,
- AppleSignInButton,
GoogleSignInButton,
- PhoneAuthScreen,
- TwitterSignInButton,
MicrosoftSignInButton,
OAuthButton,
+ PhoneAuthScreen,
+ TwitterSignInButton,
} from "@firebase-oss/ui-react";
import { OAuthProvider } from "firebase/auth";
import { useRouter } from "next/navigation";
@@ -67,17 +67,5 @@ function LineSignInButton() {
Sign in with Line
+ );
}
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/nextjs/lib/firebase/ui.tsx b/examples/nextjs/lib/firebase/ui.tsx
index 05945d902..b7ed1e597 100644
--- a/examples/nextjs/lib/firebase/ui.tsx
+++ b/examples/nextjs/lib/firebase/ui.tsx
@@ -17,7 +17,7 @@
"use client";
import { ui } from "@/lib/firebase/clientApp";
-import { ConfigProvider } from "@firebase-oss/ui-react";
+import { FirebaseUIProvider } from "@firebase-oss/ui-react";
export function FirebaseUIProviderHoc({ children }: { children: React.ReactNode }) {
return (
diff --git a/examples/shadcn/src/firebase/firebase.ts b/examples/shadcn/src/firebase/firebase.ts
index 2f5a13f12..ddfc3b2cf 100644
--- a/examples/shadcn/src/firebase/firebase.ts
+++ b/examples/shadcn/src/firebase/firebase.ts
@@ -16,10 +16,10 @@
"use client";
-import { countryCodes, initializeUI, oneTapSignIn } from "@firebase-oss/ui-core";
+import { countryCodes, initializeUI, oneTapSignIn } from "@invertase/firebaseui-core";
import { getApps, initializeApp } from "firebase/app";
import { connectAuthEmulator, getAuth } from "firebase/auth";
-import { autoAnonymousLogin, initializeUI, oneTapSignIn, countryCodes } from "@firebase-oss/ui-core";
+import { firebaseConfig } from "./config";
export const firebaseApp = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
From 0e81f29f91e12dfdf02dcf37e0494d3b02280931 Mon Sep 17 00:00:00 2001
From: Darren Ackers
Date: Wed, 19 Nov 2025 09:36:39 +0000
Subject: [PATCH 7/9] fix(*): add missing test imports
---
.../src/auth/oauth/facebook-sign-in-button.test.tsx | 10 ++++++----
.../src/auth/oauth/github-sign-in-button.test.tsx | 10 ++++++----
.../src/auth/oauth/google-sign-in-button.test.tsx | 10 ++++++----
.../src/auth/oauth/twitter-sign-in-button.test.tsx | 10 ++++++----
.../src/components/email-link-auth-form.test.tsx | 2 +-
.../shadcn/src/components/phone-auth-form.test.tsx | 2 +-
6 files changed, 26 insertions(+), 18 deletions(-)
diff --git a/packages/react/src/auth/oauth/facebook-sign-in-button.test.tsx b/packages/react/src/auth/oauth/facebook-sign-in-button.test.tsx
index 03cd6fbd2..be0cc3416 100644
--- a/packages/react/src/auth/oauth/facebook-sign-in-button.test.tsx
+++ b/packages/react/src/auth/oauth/facebook-sign-in-button.test.tsx
@@ -13,11 +13,13 @@
* limitations under the License.
*/
-import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
-import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
-import { FacebookLogo, FacebookSignInButton } from "./facebook-sign-in-button";
-import { CreateFirebaseUIProvider, createMockUI } from "~/tests/utils";
+import { signInWithProvider } from "@firebase-oss/ui-core";
import { registerLocale } from "@firebase-oss/ui-translations";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { UserCredential } from "firebase/auth";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CreateFirebaseUIProvider, createMockUI } from "~/tests/utils";
+import { FacebookLogo, FacebookSignInButton } from "./facebook-sign-in-button";
vi.mock("firebase/auth", async () => {
const actual = await vi.importActual("firebase/auth");
diff --git a/packages/react/src/auth/oauth/github-sign-in-button.test.tsx b/packages/react/src/auth/oauth/github-sign-in-button.test.tsx
index b38d1934f..06b4d56ec 100644
--- a/packages/react/src/auth/oauth/github-sign-in-button.test.tsx
+++ b/packages/react/src/auth/oauth/github-sign-in-button.test.tsx
@@ -13,11 +13,13 @@
* limitations under the License.
*/
-import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
-import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
-import { GitHubLogo, GitHubSignInButton } from "./github-sign-in-button";
-import { CreateFirebaseUIProvider, createMockUI } from "~/tests/utils";
+import { signInWithProvider } from "@firebase-oss/ui-core";
import { registerLocale } from "@firebase-oss/ui-translations";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { UserCredential } from "firebase/auth";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CreateFirebaseUIProvider, createMockUI } from "~/tests/utils";
+import { GitHubLogo, GitHubSignInButton } from "./github-sign-in-button";
vi.mock("firebase/auth", async () => {
const actual = await vi.importActual("firebase/auth");
diff --git a/packages/react/src/auth/oauth/google-sign-in-button.test.tsx b/packages/react/src/auth/oauth/google-sign-in-button.test.tsx
index afd933607..1a11a3044 100644
--- a/packages/react/src/auth/oauth/google-sign-in-button.test.tsx
+++ b/packages/react/src/auth/oauth/google-sign-in-button.test.tsx
@@ -13,11 +13,13 @@
* limitations under the License.
*/
-import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
-import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
-import { GoogleLogo, GoogleSignInButton } from "./google-sign-in-button";
-import { CreateFirebaseUIProvider, createMockUI } from "~/tests/utils";
+import { signInWithProvider } from "@firebase-oss/ui-core";
import { registerLocale } from "@firebase-oss/ui-translations";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { UserCredential } from "firebase/auth";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CreateFirebaseUIProvider, createMockUI } from "~/tests/utils";
+import { GoogleLogo, GoogleSignInButton } from "./google-sign-in-button";
vi.mock("firebase/auth", async () => {
const actual = await vi.importActual("firebase/auth");
diff --git a/packages/react/src/auth/oauth/twitter-sign-in-button.test.tsx b/packages/react/src/auth/oauth/twitter-sign-in-button.test.tsx
index 95f72b6e9..27ed1915b 100644
--- a/packages/react/src/auth/oauth/twitter-sign-in-button.test.tsx
+++ b/packages/react/src/auth/oauth/twitter-sign-in-button.test.tsx
@@ -13,11 +13,13 @@
* limitations under the License.
*/
-import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
-import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
-import { TwitterLogo, TwitterSignInButton } from "./twitter-sign-in-button";
-import { CreateFirebaseUIProvider, createMockUI } from "~/tests/utils";
+import { signInWithProvider } from "@firebase-oss/ui-core";
import { registerLocale } from "@firebase-oss/ui-translations";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { UserCredential } from "firebase/auth";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CreateFirebaseUIProvider, createMockUI } from "~/tests/utils";
+import { TwitterLogo, TwitterSignInButton } from "./twitter-sign-in-button";
vi.mock("firebase/auth", async () => {
const actual = await vi.importActual("firebase/auth");
diff --git a/packages/shadcn/src/components/email-link-auth-form.test.tsx b/packages/shadcn/src/components/email-link-auth-form.test.tsx
index 32110c633..233cc6f94 100644
--- a/packages/shadcn/src/components/email-link-auth-form.test.tsx
+++ b/packages/shadcn/src/components/email-link-auth-form.test.tsx
@@ -22,7 +22,7 @@ import { useEmailLinkAuthFormAction } from "@firebase-oss/ui-react";
import { createMockUI } from "../../tests/utils";
import { registerLocale } from "@firebase-oss/ui-translations";
import { FirebaseUIProvider } from "@firebase-oss/ui-react";
-import { UserCredential } from "firebase/auth";
+import type { UserCredential } from "firebase/auth";
import { completeEmailLinkSignIn } from "@firebase-oss/ui-core";
vi.mock("@firebase-oss/ui-core", async (importOriginal) => {
diff --git a/packages/shadcn/src/components/phone-auth-form.test.tsx b/packages/shadcn/src/components/phone-auth-form.test.tsx
index 1c2734234..2bb7624f8 100644
--- a/packages/shadcn/src/components/phone-auth-form.test.tsx
+++ b/packages/shadcn/src/components/phone-auth-form.test.tsx
@@ -22,7 +22,7 @@ import { usePhoneNumberFormAction, useVerifyPhoneNumberFormAction, useUI } from
import { createMockUI } from "../../tests/utils";
import { registerLocale } from "@firebase-oss/ui-translations";
import { FirebaseUIProvider } from "@firebase-oss/ui-react";
-import { User, UserCredential } from "firebase/auth";
+import type { User, UserCredential } from "firebase/auth";
import { FirebaseUI, FirebaseUIError } from "@firebase-oss/ui-core";
import { FirebaseError } from "firebase/app";
import { ERROR_CODE_MAP } from "@firebase-oss/ui-translations";
From 730db6824903bca7fc94344fa8f875785c4354ea Mon Sep 17 00:00:00 2001
From: Darren Ackers
Date: Wed, 19 Nov 2025 10:00:41 +0000
Subject: [PATCH 8/9] fix(react): further test updates
---
.../forms/multi-factor-auth-assertion-form.test.tsx | 13 ++++++++-----
1 file changed, 8 insertions(+), 5 deletions(-)
diff --git a/packages/react/src/auth/forms/multi-factor-auth-assertion-form.test.tsx b/packages/react/src/auth/forms/multi-factor-auth-assertion-form.test.tsx
index 9a4fd81ea..aa92a0d89 100644
--- a/packages/react/src/auth/forms/multi-factor-auth-assertion-form.test.tsx
+++ b/packages/react/src/auth/forms/multi-factor-auth-assertion-form.test.tsx
@@ -13,12 +13,15 @@
* limitations under the License.
*/
-import { describe, it, expect, vi, afterEach } from "vitest";
-import { render, screen, fireEvent, cleanup } from "@testing-library/react";
-import { MultiFactorAuthAssertionForm } from "~/auth/forms/multi-factor-auth-assertion-form";
-import { CreateFirebaseUIProvider, createMockUI } from "~/tests/utils";
import { registerLocale } from "@firebase-oss/ui-translations";
-import { FactorId, MultiFactorResolver, PhoneMultiFactorGenerator, TotpMultiFactorGenerator } from "firebase/auth";
+import { cleanup, fireEvent, render, renderHook, screen } from "@testing-library/react";
+import { MultiFactorResolver, PhoneMultiFactorGenerator, TotpMultiFactorGenerator } from "firebase/auth";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+ MultiFactorAuthAssertionForm,
+ useMultiFactorAssertionCleanup,
+} from "~/auth/forms/multi-factor-auth-assertion-form";
+import { CreateFirebaseUIProvider, createFirebaseUIProvider, createMockUI } from "~/tests/utils";
vi.mock("~/auth/forms/mfa/sms-multi-factor-assertion-form", () => ({
SmsMultiFactorAssertionForm: ({ onSuccess }: { onSuccess?: (credential: any) => void }) => (
From 1e03e5c54ebfec67b1ca2c4935f7ae3b0e68d2dd Mon Sep 17 00:00:00 2001
From: Darren Ackers
Date: Wed, 19 Nov 2025 10:55:26 +0000
Subject: [PATCH 9/9] fix(shadcn): fixed merge updates in shadcn registry
---
.../registry/email-link-auth-screen.test.tsx | 147 ------------------
.../src/registry/email-link-auth-screen.tsx | 37 -----
.../registry/forgot-password-auth-screen.tsx | 30 ----
.../src/registry/google-sign-in-button.tsx | 20 ---
packages/shadcn/src/registry/oauth-button.tsx | 27 ----
packages/shadcn/src/registry/oauth-screen.tsx | 43 -----
.../shadcn/src/registry/phone-auth-screen.tsx | 49 ------
.../shadcn/src/registry/redirect-error.tsx | 13 --
.../src/registry/sign-in-auth-screen.tsx | 46 ------
.../src/registry/sign-up-auth-screen.test.tsx | 147 ------------------
.../src/registry/sign-up-auth-screen.tsx | 37 -----
11 files changed, 596 deletions(-)
delete mode 100644 packages/shadcn/src/registry/email-link-auth-screen.test.tsx
delete mode 100644 packages/shadcn/src/registry/email-link-auth-screen.tsx
delete mode 100644 packages/shadcn/src/registry/forgot-password-auth-screen.tsx
delete mode 100644 packages/shadcn/src/registry/google-sign-in-button.tsx
delete mode 100644 packages/shadcn/src/registry/oauth-button.tsx
delete mode 100644 packages/shadcn/src/registry/oauth-screen.tsx
delete mode 100644 packages/shadcn/src/registry/phone-auth-screen.tsx
delete mode 100644 packages/shadcn/src/registry/redirect-error.tsx
delete mode 100644 packages/shadcn/src/registry/sign-in-auth-screen.tsx
delete mode 100644 packages/shadcn/src/registry/sign-up-auth-screen.test.tsx
delete mode 100644 packages/shadcn/src/registry/sign-up-auth-screen.tsx
diff --git a/packages/shadcn/src/registry/email-link-auth-screen.test.tsx b/packages/shadcn/src/registry/email-link-auth-screen.test.tsx
deleted file mode 100644
index 439009a82..000000000
--- a/packages/shadcn/src/registry/email-link-auth-screen.test.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * Copyright 2025 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, screen, cleanup } from "@testing-library/react";
-import { EmailLinkAuthScreen } from "./email-link-auth-screen";
-import { createMockUI } from "../../tests/utils";
-import { registerLocale } from "@firebase-oss/ui-translations";
-import { FirebaseUIProvider } from "@firebase-oss/ui-react";
-
-vi.mock("./email-link-auth-form", () => ({
- EmailLinkAuthForm: ({ onEmailSent, onSignIn }: any) => (
-
-
EmailLinkAuthForm
- {onEmailSent &&
onEmailSent provided
}
- {onSignIn &&
onSignIn provided
}
-
Child Component
-
-
- );
-
- expect(screen.getByText("Sign In")).toBeInTheDocument();
- expect(screen.getByText("Sign in to your account")).toBeInTheDocument();
- expect(screen.getByTestId("email-link-auth-form")).toBeInTheDocument();
- expect(screen.getByText("or")).toBeInTheDocument();
- expect(screen.getByTestId("child-component")).toBeInTheDocument();
- });
-
- it("should pass props to EmailLinkAuthForm", () => {
- const mockUI = createMockUI({
- locale: registerLocale("test", {
- labels: {
- signIn: "Sign In",
- },
- prompts: {
- signInToAccount: "Sign in to your account",
- },
- }),
- });
-
- const onEmailSentMock = vi.fn();
- const onSignInMock = vi.fn();
-
- render(
-
-
-
- );
-
- expect(screen.getByTestId("onEmailSent-prop")).toBeInTheDocument();
- expect(screen.getByTestId("onSignIn-prop")).toBeInTheDocument();
- });
-
- it("should not render separator when no children", () => {
- const mockUI = createMockUI({
- locale: registerLocale("test", {
- labels: {
- signIn: "Sign In",
- },
- prompts: {
- signInToAccount: "Sign in to your account",
- },
- messages: {
- dividerOr: "or",
- },
- }),
- });
-
- render(
-
-
-
- );
-
- expect(screen.getByText("Sign In")).toBeInTheDocument();
- expect(screen.getByText("Sign in to your account")).toBeInTheDocument();
- expect(screen.getByTestId("email-link-auth-form")).toBeInTheDocument();
- expect(screen.queryByText("or")).not.toBeInTheDocument();
- });
-});
diff --git a/packages/shadcn/src/registry/email-link-auth-screen.tsx b/packages/shadcn/src/registry/email-link-auth-screen.tsx
deleted file mode 100644
index 1ba16af6e..000000000
--- a/packages/shadcn/src/registry/email-link-auth-screen.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-
-import { getTranslation } from "@firebase-oss/ui-core";
-import { useUI, type EmailLinkAuthScreenProps } from "@firebase-oss/ui-react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { EmailLinkAuthForm } from "@/registry/email-link-auth-form";
-
-export type { EmailLinkAuthScreenProps };
-
-export function EmailLinkAuthScreen({ children, ...props }: EmailLinkAuthScreenProps) {
- const ui = useUI();
-
- const titleText = getTranslation(ui, "labels", "signIn");
- const subtitleText = getTranslation(ui, "prompts", "signInToAccount");
-
- return (
-
-
-
- {titleText}
- {subtitleText}
-
-
-
- {children ? (
- <>
- {getTranslation(ui, "messages", "dividerOr")}
- {children}
-
- ) : null}
-
-
-
-
-
- {titleText}
- {subtitleText}
-
-
-
-
-
-
- );
-}
diff --git a/packages/shadcn/src/registry/google-sign-in-button.tsx b/packages/shadcn/src/registry/google-sign-in-button.tsx
deleted file mode 100644
index 354cc6821..000000000
--- a/packages/shadcn/src/registry/google-sign-in-button.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-"use client";
-
-import { GoogleAuthProvider } from "firebase/auth";
-import { getTranslation } from "@firebase-oss/ui-core";
-import { useUI, type GoogleSignInButtonProps, GoogleLogo } from "@firebase-oss/ui-react";
-
-import { OAuthButton } from "@/registry/oauth-button";
-
-export type { GoogleSignInButtonProps };
-
-export function GoogleSignInButton({ provider, themed }: GoogleSignInButtonProps) {
- const ui = useUI();
-
- return (
-
-
- {getTranslation(ui, "labels", "signInWithGoogle")}
-
- );
-}
diff --git a/packages/shadcn/src/registry/oauth-button.tsx b/packages/shadcn/src/registry/oauth-button.tsx
deleted file mode 100644
index 8c0d1f0ab..000000000
--- a/packages/shadcn/src/registry/oauth-button.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client";
-
-import { useUI, type OAuthButtonProps, useSignInWithProvider } from "@firebase-oss/ui-react";
-import { Button } from "@/components/ui/button";
-
-export type { OAuthButtonProps };
-
-export function OAuthButton({ provider, children, themed }: OAuthButtonProps) {
- const ui = useUI();
-
- const { error, callback } = useSignInWithProvider(provider);
-
- return (
-
-
- {error &&
{error}
}
-
-
-
- {titleText}
- {subtitleText}
-
-
- {mfaResolver ? (
-
- ) : (
- <>
-
-
- )}
-
-
-
-
-
- {titleText}
- {subtitleText}
-
-
- {mfaResolver ? (
-
- ) : (
- <>
-
- {children ? (
- <>
- {getTranslation(ui, "messages", "dividerOr")}
-
- {children}
-
-
-
- ) : null}
-
- )}
-
-
-
{error}
;
-}
diff --git a/packages/shadcn/src/registry/sign-in-auth-screen.tsx b/packages/shadcn/src/registry/sign-in-auth-screen.tsx
deleted file mode 100644
index 3eba44c34..000000000
--- a/packages/shadcn/src/registry/sign-in-auth-screen.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client";
-
-import { getTranslation } from "@firebase-oss/ui-core";
-import { useUI, type SignInAuthScreenProps } from "@firebase-oss/ui-react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { SignInAuthForm } from "@/registry/sign-in-auth-form";
-import { MultiFactorAuthAssertionForm } from "@/registry/multi-factor-auth-assertion-form";
-
-export type { SignInAuthScreenProps };
-
-export function SignInAuthScreen({ children, ...props }: SignInAuthScreenProps) {
- const ui = useUI();
-
- const titleText = getTranslation(ui, "labels", "signIn");
- const subtitleText = getTranslation(ui, "prompts", "signInToAccount");
-
- const mfaResolver = ui.multiFactorResolver;
-
- return (
-
-
-
- {titleText}
- {subtitleText}
-
-
- {mfaResolver ? (
-
- ) : (
- <>
-
- {children ? (
- <>
- {getTranslation(ui, "messages", "dividerOr")}
- {children}
-
- ) : null}
-
- )}
-
-
-
-
SignUpAuthForm
- {onSignUp &&
onSignUp provided
}
- {onBackToSignInClick &&
onBackToSignInClick provided
}
-
Child Component
-
-
- );
-
- expect(screen.getByText("Register")).toBeInTheDocument();
- expect(screen.getByText("Enter your details to create an account")).toBeInTheDocument();
- expect(screen.getByTestId("sign-up-auth-form")).toBeInTheDocument();
- expect(screen.getByText("or")).toBeInTheDocument();
- expect(screen.getByTestId("child-component")).toBeInTheDocument();
- });
-
- it("should pass props to SignUpAuthForm", () => {
- const mockUI = createMockUI({
- locale: registerLocale("test", {
- labels: {
- signUp: "Register",
- },
- prompts: {
- enterDetailsToCreate: "Enter your details to create an account",
- },
- }),
- });
-
- const onSignUpMock = vi.fn();
- const onBackToSignInClickMock = vi.fn();
-
- render(
-
-
-
- );
-
- expect(screen.getByTestId("onSignUp-prop")).toBeInTheDocument();
- expect(screen.getByTestId("onBackToSignInClick-prop")).toBeInTheDocument();
- });
-
- it("should not render separator when no children", () => {
- const mockUI = createMockUI({
- locale: registerLocale("test", {
- labels: {
- signUp: "Register",
- },
- prompts: {
- enterDetailsToCreate: "Enter your details to create an account",
- },
- messages: {
- dividerOr: "or",
- },
- }),
- });
-
- render(
-
-
-
- );
-
- expect(screen.getByText("Register")).toBeInTheDocument();
- expect(screen.getByText("Enter your details to create an account")).toBeInTheDocument();
- expect(screen.getByTestId("sign-up-auth-form")).toBeInTheDocument();
- expect(screen.queryByText("or")).not.toBeInTheDocument();
- });
-});
diff --git a/packages/shadcn/src/registry/sign-up-auth-screen.tsx b/packages/shadcn/src/registry/sign-up-auth-screen.tsx
deleted file mode 100644
index bd8769a6d..000000000
--- a/packages/shadcn/src/registry/sign-up-auth-screen.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-
-import { getTranslation } from "@firebase-oss/ui-core";
-import { useUI, type SignUpAuthScreenProps } from "@firebase-oss/ui-react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { SignUpAuthForm } from "@/registry/sign-up-auth-form";
-
-export type { SignUpAuthScreenProps };
-
-export function SignUpAuthScreen({ children, ...props }: SignUpAuthScreenProps) {
- const ui = useUI();
-
- const titleText = getTranslation(ui, "labels", "signUp");
- const subtitleText = getTranslation(ui, "prompts", "enterDetailsToCreate");
-
- return (
-
-
-
- {titleText}
- {subtitleText}
-
-
-
- {children ? (
- <>
- {getTranslation(ui, "messages", "dividerOr")}
- {children}
-
- ) : null}
-
-
-