From 16e13e31d6205d356f736a63f301d921a4322d36 Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Mon, 10 Nov 2025 13:15:11 +0000 Subject: [PATCH 1/8] wip readme docs --- README.md | 669 ++++++++++++++---------------------------------------- 1 file changed, 176 insertions(+), 493 deletions(-) diff --git a/README.md b/README.md index edcea6ed7..d515d639a 100644 --- a/README.md +++ b/README.md @@ -1,570 +1,253 @@ +Banner + # FirebaseUI for Web -This repository contains the source code for the FirebaseUI for Web project rewrite, focused on providing Authentication components for popular JavaScript frameworks. +Firebase UI for Web brings out-of-the-box components for Firebase for your favourite frameworks: + +- Support for [React](https://react.dev/), [Shadcn](https://ui.shadcn.com/) and [Angular](https://angular.dev/). +- Composable authentication components; Email/Password Sign Up/In, Forgot Password, Email Link, Phone Auth, OAuth, Multi-Factor and more. +- Configure the behavior of internal logic and UI via behaviors. +- Framework agnostic core package; bring your own UI. +- Built-in localaization via translations. + +## Table of contents -## Installation +- [Getting Started](#getting-started) +- [Styling](#styling) +- [Behaviors](#behaviors) +- [Translations](#translations) +- [Reference API](#reference) +- [Bring your own UI](#bring-your-own-ui) -FirebaseUI requires the `firebase` package to be installed: +## Getting Started + +To get started, make sure that the [`firebase`](https://www.npmjs.com/package/firebase) package is installed in your project: ```bash npm install firebase ``` -**Note**: Since the packages are not yet published to npm, you must manually install them from GitHub releases. Once published, these steps will be simplified. - -### Β Framework-specific Installation +Once installed, setup Firebase in your project ensuring you have configured your Firebase instance via `initializeApp`. -Packages have been created for both `React` and `Angular`. For now, they're only available as direct downloads from this repository. Add the following to your `package.json` file: +Next, follow the framework specific installation steps, for either React, Shadcn or Angular:
React -```json -{ - "dependencies": { - "@invertase/firebaseui-react": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-react-0.0.1.tgz", - "@invertase/firebaseui-core": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-core-0.0.1.tgz", - "@invertase/firebaseui-styles": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-styles-0.0.1.tgz", - "@invertase/firebaseui-translations": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-translations-0.0.1.tgz" - } -} -``` + Install the `@invertase/firebaseui-react` package: -
+ ```bash + npm install @invertase/firebaseui-react + ``` -
- Angular + Alongside your Firebase configuration, import the `initalizeUI` function and pass your configured Firebase App instance: -FirebaseUI for Angular depends on the [AngularFire](https://github.com/angular/angularfire) package: + ```ts + import { initializeApp } from 'firebase/app'; + import { initializeUI } from '@invertase/firebaseui-core'; -```json -{ - "dependencies": { - "@angular/fire": "^19.1.0", - "@invertase/firebaseui-angular": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-angular-0.0.1.tgz", - "@invertase/firebaseui-core": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-core-0.0.1.tgz", - "@invertase/firebaseui-styles": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-styles-0.0.1.tgz", - "@invertase/firebaseui-translations": "https://github.com/firebase/firebaseui-web/raw/refs/heads/v7-alpha/releases/firebase-ui-translations-0.0.1.tgz" - } -} -``` - -
- -## Getting Started - -FirebaseUI requires that your Firebase app is setup following the [Getting Started with Firebase](https://firebase.google.com/docs/web/setup) flow for Web: - -### Initialization + const app = initializeApp({ ... }); -```ts -import { initializeApp } from 'firebase/app'; - -const app = initializeApp({ ... }); -``` + const ui = initializeUI({ + app, + }); + ``` -Next, setup and configure FirebaseUI, import the `initializeUI` function from `@invertase/firebaseui-core`: + Once configured, provide the `ui` instance to your application by wrapping it within the `FirebaseUIProvider` component: -```ts -import { initializeUI } from "@invertase/firebaseui-core"; + ```tsx + import { FirebaseUIProvider } from '@invertase/firebaseui-react'; -const ui = initializeUI(); -``` - -> To learn more about configuring FirebaseUI, view the [configuration](#configuration) section. - -### Framework Setup + function App() { + return ( + + ... + + ); + } + ``` -
- React + Ensure your application includes the bundled styles for Firebase UI (see [stying](#stying) for additional info). -FirebaseUI for React requires that your application be wrapped in the `ConfigProvider`, providing the initialized UI configuration. React expects the `FirebaseApp` instance be provided to the `initializeUI` configuration: + ```css + @import "@invertase/firebaseui-styles/dist.min.css"; + /* Or for tailwind users */ + @import "@invertase/firebaseui-styles/tailwind"; + ``` -```tsx -import { initializeApp } from 'firebase/app'; -import { initializeUI } from "@invertase/firebaseui-core"; -import { ConfigProvider } from '@invertase/firebaseui-react'; + Thats it πŸŽ‰ You can now import components and start building: -const app = initializeApp({ .. }); -const ui = initializeUI({ app }); + ```tsx + import { SignInAuthScreen } from '@invertase/firebaseui-react'; -createRoot(document.getElementById("root")!).render( - - - - - -); -``` + export function MySignInPage() { + return ( + <> +
Welcome
+ + + ) + } + ``` + View the [reference API](#reference) for a full list of components.
- Angular - -FirebaseUI depends on [AngularFire](https://github.com/angular/angularfire) being configured to inject Firebase Auth into your Angular application. Additionally, the `provideFirebaseUI` function is required to inject FirebaseUI into your application: - -```tsx -import { provideFirebaseApp, initializeApp } from '@angular/fire/app'; -import { provideAuth, getAuth } from '@angular/fire/auth'; -import { provideFirebaseUI } from '@invertase/firebaseui-angular'; -import { initializeUI } from '@invertase/firebaseui-core'; - -export const appConfig: ApplicationConfig = { - providers: [ - provideFirebaseApp(() => initializeApp({ .. })), - provideAuth(() => getAuth()), - provideFirebaseUI(() => initializeUI({})) - .. - ], - .. -} -``` - -
- -### Styling - -Next, import the CSS styles for the FirebaseUI project. + Shadcn -If you are using [TailwindCSS](https://tailwindcss.com/), import the base CSS from the `@invertase/firebaseui-styles` package after your Tailwind import: + Firstly, ensure you have [installed and setup](https://ui.shadcn.com/docs/installation) Shadcn in your project. -```css -@import "tailwindcss"; -@import "@invertase/firebaseui-styles/tailwind"; -``` + Once configured, add the `@firebase` registry to your `components.json` file: -If you are not using Tailwind, import the distributable CSS in your project: + ```json + { + ... + "registries": { + "@firebase": "https://fir-ui-shadcn-registry.web.app/r/{name}.json" + } + } + ``` -```css -@import "@invertase/firebaseui-styles"; -``` + Next, add a Firebase UI component from the registry, e.g. -To learn more about theming, view the [theming](#theming) section. + ```bash + npx shadcn@latest add @firebase/sign-in-auth-screen + ``` -### Authentication Components + This will automatically install any required dependencies. -FirebaseUI provides a number of opinionated components designed to drop into your application which handle common user flows, such as signing in or registration. + Alongside your Firebase configuration, import the `initalizeUI` function and pass your configured Firebase App instance: -### Sign-in + ```ts + import { initializeApp } from 'firebase/app'; + import { initializeUI } from '@invertase/firebaseui-core'; -Allows users to sign in with an email and password: + const app = initializeApp({ ... }); -
- React + const ui = initializeUI({ + app, + }); + ``` -```tsx -import { SignInAuthScreen } from "@invertase/firebaseui-react"; + Once configured, provide the `ui` instance to your application by wrapping it within the `FirebaseUIProvider` component: -function App() { - return ; -} -``` + ```tsx + import { FirebaseUIProvider } from '@invertase/firebaseui-react'; -Props: `onForgotPasswordClick` / `onRegisterClick` + function App() { + return ( + + ... + + ); + } + ``` -Additionally, allow the user to sign in with an OAuth provider by providing children: + Thats it πŸŽ‰ You can now import components and start building: -```tsx -import { SignInAuthScreen, GoogleSignInButton } from "@invertase/firebaseui-react"; + ```tsx + import { SignInAuthScreen } from '@/components/sign-in-auth-screen'; -function App() { - return ( - - - - ); -} -``` + export function MySignInPage() { + return ( + <> +
Welcome
+ + + ) + } + ``` + View the [reference API](#reference) for a full list of components.
Angular -```tsx -import { SignUpAuthScreenComponent } from "@invertase/firebaseui-angular"; - -@Component({ - selector: "app-root", - imports: [SignUpAuthScreenComponent], - template: ``, -}) -export class AppComponent {} -``` - -
- -## Configuration - -The initializeUI function accepts an options object that allows you to customize FirebaseUI’s behavior. - -### Type Definition - -```js -type FirebaseUIOptions = { - app: FirebaseApp; - auth?: Auth; - locale?: Locale; - behaviors?: Behavior[]; -}; -``` - -**App**: The initialized Firebase app instance. This is required. - -**Locale**: Optional locale string to override the default language (e.g., 'en', 'fr', 'es'). - -**Translations**: Add or override translation strings for labels, prompts, and errors. - -**Behaviors**: Customize UI behavior such as automatic sign-in or error handling. - -**RecaptchaMode**:Set the reCAPTCHA mode for phone auth (default is 'normal'). - -## Theming - -FirebaseUI provides a basic default theme out of the box, however the theme can be customized to match your application's design. - -The package uses CSS Variables, which can be overridden in your application's CSS. Below is a list of all available variables: - -```css -:root { - /* The primary color is used for the button and link colors */ - --fui-primary: var(--color-black); - /* The primary hover color is used for the button and link colors when hovered */ - --fui-primary-hover: --alpha(var(--fui-primary) / 85%); - /* The primary surface color is used for the button text color */ - --fui-primary-surface: var(--color-white); - /* The text color used for body text */ - --fui-text: var(--color-black); - /* The muted text color used for body text, such as subtitles */ - --fui-text-muted: var(--color-gray-800); - /* The background color of the cards */ - --fui-background: var(--color-white); - /* The border color used for none input fields */ - --fui-border: var(--color-gray-200); - /* The input color used for input fields */ - --fui-input: var(--color-gray-300); - /* The error color used for error messages */ - --fui-error: var(--color-red-500); - /* The radius used for the input fields */ - --fui-radius: var(--radius-sm); - /* The radius used for the cards */ - --fui-radius-card: var(--radius-xl); -} -``` - -The default values are based on the [TailwindCSS](https://tailwindcss.com/docs/theme) theme variables. You can override these values with other TailwindCSS theme variables, or custom CSS values. - -## FirebaseUI Core Integration - -`@invertase/firebaseui-core` is a framework-agnostic layer that manages the complete lifecycle of Firebase Authentication flows. It exposes a reactive store via nanostores that can be wrapped and adapted into any JavaScript framework such as React, Angular, Vue, Svelte, or SolidJS to name a few. - -### What FirebaseUI Core Provides - -- Manages Firebase Authentication flows (sign-in, sign-out, linking, etc.) - -- Reactive UI state via [nanostores](https://github.com/nanostores/nanostores) - -- Form schemas using [Zod](https://zod.dev/) - -- Pluggable behaviors (e.g. autoAnonymousLogin) - -- i18n and translations - -- Error parsing and localization - -#### Initialize the Core - -Call initializeUI() with your Firebase app and configuration options: - -```js -import { initializeUI } from '@invertase/firebaseui-core'; + The Angular project requires that [AngularFire](https://github.com/angular/angularfire) is setup and configured before using Firebase UI. -const ui = initializeUI({ - app: firebaseApp, - .. -}); -``` - -Configuration Type: - -```js -type FirebaseUIOptions = { - app: FirebaseApp; - locale?: Locale | undefined; - translations?: RegisteredTranslations[] | undefined; - behaviors?: Partial>[] | undefined; - recaptchaMode?: 'normal' | 'invisible' | undefined; -}; -``` - -#### Firebase Authentication Flows - -**signInWithEmailAndPassword**: Signs in the user based on an email/password credential. - -- _ui_: FirebaseUI -- _email_: string -- _password_: string - -**createUserWithEmailAndPassword**: Creates a user account based on an email/password credential. - -- _ui_: FirebaseUI -- _email_: string -- _password_: string - -**signInWithPhoneNumber**: Signs in the user based on a provided phone number, using ReCaptcha to verify the sign-in. - -- _ui_: FirebaseUI -- _phoneNumber_: string -- _recaptchaVerifier_: string - -**confirmPhoneNumber**: Verifies the phonenumber credential and signs in the user. - -- _ui_: FirebaseUI -- _confirmationResult_: [ConfirmationResult](https://firebase.google.com/docs/reference/node/firebase.auth.ConfirmationResult) -- _verificationCode_: string - -**sendPasswordResetEmail**: Sends password reset instructions to an email account. - -- _ui_: FirebaseUI -- _email_: string - -**sendSignInLinkToEmail**: Send an sign-in links to an email account. - -- _ui_: FirebaseUI -- _email_: string - -**signInWithEmailLink**: Signs in with the user with the email link. If `autoUpgradeAnonymousCredential` then a pending credential will be handled. - -- _ui_: FirebaseUI -- _email_: string -- _link_: string - -**signInAnonymously**: Signs in as an anonymous user. - -- _ui_: FirebaseUI + Once you have provided the Firebase App instance to your application using `provideFirebaseApp`, install the Firebase UI for Angular package: -**signInWithOAuth**: Signs in with a provider such as Google via a redirect link. If `autoUpgradeAnonymousCredential` then the account will upgraded. + ```bash + npm install @invertase/firebaseui-angular + ``` -- _ui_: FirebaseUI -- _provider_: [AuthProvider](https://firebase.google.com/docs/reference/node/firebase.auth.AuthProvider) + Alongside your existing providers, add the `provideFirebaseUI` provider, returning a new Firebase UI instance via `initializeUI`: -**completeEmailLinkSignIn**: Completes the signing process based on a user signing in with an email link. + ```ts + import { provideFirebaseApp, initializeApp } from '@angular/fire/app'; + import { initializeUI } from '@invertase/firebaseui-core'; -- _ui_: FirebaseUI -- _currentUrl_: string - -#### Provide a Store via Context - -Using the returned `FirebaseUI`, it is reccomended to use local context/providers/dependency-injection to expose the FirebaseUI to the application. Here is an example context wrapper which accepts the configuration as a `ui` parameter: - -```js -/** Creates a framework-agnostic context for Firebase UI configuration **/ -export function createFirebaseUIContext(initialConfig) { - let config = initialConfig; - const subscribers = new Set(); - - return { - /** Retrieve current config **/ - getConfig() { - return config; - }, - - /** Update config and notify subscribers **/ - setConfig(newConfig) { - config = newConfig; - subscribers.forEach((callback) => callback(config)); - }, - - /** Subscribe to config changes (for use in any framework) **/ - subscribe(callback) { - subscribers.add(callback); - /** Optionally call immediately with current config**/ - callback(config); - return () => subscribers.delete(callback); - }, + export const appConfig: ApplicationConfig = { + providers: [ + provideFirebaseApp(() => initializeApp({ ... })), + provideFirebaseUI((apps) => initializeUI({ app: apps[0] })), + ] }; -} -``` - -FirebaseUI Configuration Type: - -```js -export type FirebaseUI = { - app: FirebaseApp, - getAuth: () => Auth, - setLocale: (locale: Locale) => void, - state: FirebaseUIState, - setState: (state: FirebaseUIState) => void, - locale: Locale, - translations: TranslationsConfig, - behaviors: Partial>, - recaptchaMode: "normal" | "invisible", -}; -``` - -Through this approach, you can now achieve global access to the FirebaseUI methods and state. - -#### State Management - -FirebaseUI Core provides built-in state management to track the current step in the authentication flow. This can be used to drive UI transitions, control rendering, or show progress indicators. - -##### Available States - -```js -type FirebaseUIState = - | "loading" - | "idle" - | "signing-in" - | "signing-out" - | "linking" - | "creating-user" - | "sending-password-reset-email" - | "sending-sign-in-link-to-email"; -``` - -These represent the current phase of the user experience β€” such as waiting for input, submitting credentials, or linking accounts. - -##### Updating State Manually - -The core module automatically updates state based on auth activity, but you can also override it manually if needed: - -```js -/** Set the UI state to "idle" **/ -ui.setState("idle"); -``` - -##### Reading State in Your App - -In a component, you can access the current state through the FirebaseUI configuration: - -```js -/** Sample: Framework-agnostic UI state management **/ - -/** Create a simple UI state store with an initial state **/ -const uiStore = createUIStateStore({ state: "idle" }); - -uiStore.subscribe((ui) => { - /** Replace `showSpinner` and `showMainApp` with your actual rendering logic **/ - if (ui.state === "signing-in") { - showSpinner(); - } else { - showMainApp(); - } -}); -``` - -### Translations (i18n) - -You can pass one or more translations to support localized strings. - -```js -import { english } from "@invertase/firebaseui-translations"; - -initializeUI({ - app, - locale: "en", - translations: [english], -}); -``` - -To override or add your own strings: - -```js -const customFr = { - locale: "fr", - translations: { - errors: { - invalidEmail: "Adresse e-mail invalide", - }, - }, -}; -``` - -To use a string at runtime (e.g., in an error message): - -```js -import { getTranslation } from "@invertase/firebaseui-core"; - -const message = getTranslation(config, "errors", "unknownError"); -``` - -**When multiple translation sets are passed, FirebaseUI merges them in order β€” allowing you to layer overrides on top of built-in language packs.** - -### Form Schemas - -FirebaseUI uses Zod to validate authentication forms. This ensures consistent, strongly typed, and localized error handling across form components. - -Each schema can be used standalone or integrated into your custom forms. You can pass in a TranslationsConfig object to localize error messages. - -#### Available Schemas - -**createEmailFormSchema(translations?)** -Validates a sign-in or sign-up form using email and password. - -- _email_: Must be a valid email address. - -- _password_: Must be at least 8 characters. + ``` + + Ensure your application includes the bundled styles for Firebase UI (see [stying](#stying) for additional info). + + ```css + @import "@invertase/firebaseui-styles/dist.min.css"; + /* Or for tailwind users */ + @import "@invertase/firebaseui-styles/tailwind"; + ``` + + Thats it πŸŽ‰ You can now import components and start building: + + ```tsx + import { Component } from "@angular/core"; + import { SignInAuthScreenComponent } from "@invertase/firebaseui-angular"; + + @Component({ + selector: "sign-in-route", + standalone: true, + imports: [CommonModule, SignInAuthScreenComponent], + template: ` +
Sign In
+ `, + }) + export class SignInRoute {} + ``` + + View the [reference API](#reference) for a full list of components. + -```js -import { createEmailFormSchema } from "@invertase/firebaseui-core"; +## Styling -const schema = createEmailFormSchema(translations); -``` +Firebase UI provides out-of-the box styling via CSS, and provides means to customize the UI to align with your existing application or guide lines. -**createForgotPasswordFormSchema(translations?)** -Validates the forgot password form. +> Note, if you are using Shadcn this section does not apply. All styles are inherited for your Shadcn configuration. -- _email_: Must be a valid email address. +Ensure your application imports the Firebase UI CSS file. This can be handled a number of ways depending on your setup: -```js -const schema = createForgotPasswordFormSchema(translations); -``` +### CSS Bundling -**createEmailLinkFormSchema(translations?)** -Validates the email link authentication form. +If your bundler supports importing CSS files from node_modules: -- _email_: Must be a valid email address. - -```js -const schema = createEmailLinkFormSchema(translations); +```css +@import "@invertase/firebaseui-styles/dist.min.css"; ``` -**createPhoneFormSchema(translations?)** -Validates the phone number authentication form using reCAPTCHA. +### Tailwind -- _phoneNumber_: Must be a valid phone number with at least 10 digits. +If you are using [Tailwind CSS](https://tailwindcss.com/), add the Tailwind specific CSS file: -- _verificationCode_: Optional, must be at least 6 digits if provided. - -- _recaptchaVerifier_: Must be an instance of RecaptchaVerifier. - -```js -const schema = createPhoneFormSchema(translations); +```css +@import "tailwindcss"; +@import "@invertase/firebaseui-styles/tailwind"; ``` -#### Handling Form Errors +### Via CDN -Handling errors can be managed using [Zods parsing functions](http://zod.dev/basics?ref=ossgallery&id=handling-errors) such as `safeParse` +If none of these options apply, include the CSS file via a CDN: -### Error Handling - -The core library provides a function for handling errors. - -#### handleFirebaseError() - -```js -export function handleFirebaseError( - ui: FirebaseUI, - error: any, - opts?: { - enableHandleExistingCredential?: boolean; - } -) +```html + + + ``` -This function will run through a series of checks to catch known Firebase errors: - -1. `auth/account-exists-with-different-credential`: Checking the error code to see if an account already exists for the user. If `enableHandleExistingCredential` is enabled the library will update the local storage automtaically before throwing the error. -2. `FirebaseUIError`: Alternatively, a FirebaseUIError will be thrown with the appropriate code. From 8da58e6b5fd27d8c7c3e2ec20534c88e741055d8 Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Mon, 10 Nov 2025 14:20:18 +0000 Subject: [PATCH 2/8] - --- README.md | 350 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 335 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index d515d639a..a0fddaddf 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Firebase UI for Web brings out-of-the-box components for Firebase for your favou - Composable authentication components; Email/Password Sign Up/In, Forgot Password, Email Link, Phone Auth, OAuth, Multi-Factor and more. - Configure the behavior of internal logic and UI via behaviors. - Framework agnostic core package; bring your own UI. -- Built-in localaization via translations. +- Built-in localization via translations. ## Table of contents @@ -27,7 +27,13 @@ To get started, make sure that the [`firebase`](https://www.npmjs.com/package/fi npm install firebase ``` -Once installed, setup Firebase in your project ensuring you have configured your Firebase instance via `initializeApp`. +Once installed, setup Firebase in your project ensuring you have configured your Firebase instance via `initializeApp`: + +```ts +import { initializeApp } from 'firebase/app'; + +const app = initializeApp({ ... }); +``` Next, follow the framework specific installation steps, for either React, Shadcn or Angular: @@ -40,7 +46,7 @@ Next, follow the framework specific installation steps, for either React, Shadcn npm install @invertase/firebaseui-react ``` - Alongside your Firebase configuration, import the `initalizeUI` function and pass your configured Firebase App instance: + Alongside your Firebase configuration, import the `initializeUI` function and pass your configured Firebase App instance: ```ts import { initializeApp } from 'firebase/app'; @@ -67,7 +73,7 @@ Next, follow the framework specific installation steps, for either React, Shadcn } ``` - Ensure your application includes the bundled styles for Firebase UI (see [stying](#stying) for additional info). + Ensure your application includes the bundled styles for Firebase UI (see [styling](#styling) for additional info). ```css @import "@invertase/firebaseui-styles/dist.min.css"; @@ -75,7 +81,7 @@ Next, follow the framework specific installation steps, for either React, Shadcn @import "@invertase/firebaseui-styles/tailwind"; ``` - Thats it πŸŽ‰ You can now import components and start building: + That's it πŸŽ‰ You can now import components and start building: ```tsx import { SignInAuthScreen } from '@invertase/firebaseui-react'; @@ -84,7 +90,7 @@ Next, follow the framework specific installation steps, for either React, Shadcn return ( <>
Welcome
- + { ... }} /> ) } @@ -117,7 +123,7 @@ Next, follow the framework specific installation steps, for either React, Shadcn This will automatically install any required dependencies. - Alongside your Firebase configuration, import the `initalizeUI` function and pass your configured Firebase App instance: + Alongside your Firebase configuration, import the `initializeUI` function and pass your configured Firebase App instance: ```ts import { initializeApp } from 'firebase/app'; @@ -144,7 +150,7 @@ Next, follow the framework specific installation steps, for either React, Shadcn } ``` - Thats it πŸŽ‰ You can now import components and start building: + That's it πŸŽ‰ You can now import components and start building: ```tsx import { SignInAuthScreen } from '@/components/sign-in-auth-screen'; @@ -153,7 +159,7 @@ Next, follow the framework specific installation steps, for either React, Shadcn return ( <>
Welcome
- + { ... }} /> ) } @@ -187,7 +193,7 @@ Next, follow the framework specific installation steps, for either React, Shadcn }; ``` - Ensure your application includes the bundled styles for Firebase UI (see [stying](#stying) for additional info). + Ensure your application includes the bundled styles for Firebase UI (see [styling](#styling) for additional info). ```css @import "@invertase/firebaseui-styles/dist.min.css"; @@ -195,7 +201,7 @@ Next, follow the framework specific installation steps, for either React, Shadcn @import "@invertase/firebaseui-styles/tailwind"; ``` - Thats it πŸŽ‰ You can now import components and start building: + That's it πŸŽ‰ You can now import components and start building: ```tsx import { Component } from "@angular/core"; @@ -207,9 +213,14 @@ Next, follow the framework specific installation steps, for either React, Shadcn imports: [CommonModule, SignInAuthScreenComponent], template: `
Sign In
- `, + + `, }) - export class SignInRoute {} + export class SignInRoute { + onSignIn(credential: UserCredential) { + // ... + } + } ``` View the [reference API](#reference) for a full list of components. @@ -217,9 +228,9 @@ Next, follow the framework specific installation steps, for either React, Shadcn ## Styling -Firebase UI provides out-of-the box styling via CSS, and provides means to customize the UI to align with your existing application or guide lines. +Firebase UI provides out-of-the-box styling via CSS, and provides means to customize the UI to align with your existing application or guidelines. -> Note, if you are using Shadcn this section does not apply. All styles are inherited for your Shadcn configuration. +> Note: if you are using Shadcn this section does not apply. All styles are inherited from your Shadcn configuration. Ensure your application imports the Firebase UI CSS file. This can be handled a number of ways depending on your setup: @@ -250,4 +261,313 @@ If none of these options apply, include the CSS file via a CDN: ``` +## Theming + +Out of the box, Firebase UI provides a neutral light and dark theme with some opinionated styling (colors, border radii etc). These are all controlled via CSS variables, allowing you to update these at will to match any existing UI design guidelines. To modify the variables, override the following CSS variables: + +```css +:root { + /* The primary color is used for the button and link colors */ + --fui-primary: ...; + /* The primary hover color is used for the button and link colors when hovered */ + --fui-primary-hover: ...; + /* The primary surface color is used for the button text color */ + --fui-primary-surface: ...; + /* The text color used for body text */ + --fui-text: ...; + /* The muted text color used for body text, such as subtitles */ + --fui-text-muted: ...; + /* The background color of the cards */ + --fui-background: ...; + /* The border color used for none input fields */ + --fui-border: ...; + /* The input color used for input fields */ + --fui-input: ...; + /* The error color used for error messages */ + --fui-error: ...; + /* The radius used for the input fields */ + --fui-radius: ...; + /* The radius used for the cards */ + --fui-radius-card: ...; +} +``` + +## Behaviors + +Out of the box, Firebase UI applies sensible default behaviors for how the UI should handle specific scenarios which may occur during user flows. You can however customize this behavior by modifying your `initializeUI` to provide an array of "behaviors", for example: + +```ts +import { requireDisplayName } from '@invertase/firebaseui-core'; + +const ui = initializeUI({ + app, + behaviors: [ + requireDisplayName(), + ], +}); +``` + +#### `autoAnonymousLogin` + +The `autoAnonymousLogin` behavior will automatically sign users in via [anonymous authentication](https://firebase.google.com/docs/auth/web/anonymous-auth) when initialized. Whilst authenticating, the Firebase UI state will be set to "loading", allowing you to block the loading of the application if you wish. + +```ts +import { autoAnonymousLogin } from '@invertase/firebaseui-core'; + +const ui = initializeUI({ + app, + behaviors: [autoAnonymousLogin()], +}); +``` + +#### `autoUpgradeAnonymousUsers` + +The `autoUpgradeAnonymousUsers` behavior will automatically upgrade a user who is anonymously authenticated with your application upon a successful sign in (including OAuth). You can optionally provide a callback to handle an upgrade (such as merging account data). During the async callback, the UI will stay in a pending state. + +```ts +import { autoUpgradeAnonymousUsers } from '@invertase/firebaseui-core'; + +const ui = initializeUI({ + app, + behaviors: [autoUpgradeAnonymousUsers({ + async onUpgrade(ui, oldUserId, credential) { + // Some account upgrade logic. + } + })], +}); +``` + +#### `recaptchaVerification` + +The `recaptchaVerification` behavior allows you to customize how the [reCAPTCHA provider](https://firebase.google.com/docs/app-check/web/recaptcha-provider) is rendered during some UI flows (such as Phone Authentication). + +By default, the reCAPTCHA UI will be rendered in "invisible" mode. To override this: + +```ts +import { recaptchaVerification } from '@invertase/firebaseui-core'; + +const ui = initializeUI({ + app, + behaviors: [recaptchaVerification({ + size: "compact", // "normal" | "invisible" | "compact" + theme: "dark", // "light" | "dark" + })], +}); +``` + +#### `providerRedirectStrategy` + +The `providerRedirectStrategy` behavior redirects any external provider authentication (e.g. OAuth) via a redirect flow. This is the default strategy. + +```ts +import { providerRedirectStrategy } from '@invertase/firebaseui-core'; + +const ui = initializeUI({ + app, + behaviors: [providerRedirectStrategy()], +}); +``` + +#### `providerPopupStrategy` + +The `providerPopupStrategy` behavior causes any external provider authentication (e.g. OAuth) to be handled via a popup window. + +```ts +import { providerPopupStrategy } from '@invertase/firebaseui-core'; + +const ui = initializeUI({ + app, + behaviors: [providerPopupStrategy()], +}); +``` + +#### `oneTapSignIn` + +The `oneTapSignIn` behavior triggers the [Google One Tap](https://developers.google.com/identity/gsi/web/guides/features) experience to render. + +Note: This behavior requires that Google Sign In is enabled as an authentication method on the Firebase Console. Once enabled, you can obtain the required `clientId` via the "Web SDK configuration" settings on the Console. + +The One Tap popup can be additionally configured via this behavior: + +```ts +import { oneTapSignIn } from '@invertase/firebaseui-core'; + +const ui = initializeUI({ + app, + behaviors: [oneTapSignIn({ + clientId: "...", // required - from Firebase Console under Google provider + autoSelect: false, // optional + cancelOnTapOutside: false, // optional + })], +}); +``` + +See https://developers.google.com/identity/gsi/web/reference/js-reference for a full list of configuration options. + +#### `requireDisplayName` + +The `requireDisplayName` behavior configures Firebase UI to display a required "Display Name" input box in the UI, which is applied to the users account during sign up flows. + +If you are not using pre-built components, the `createUserWithEmailAndPassword` function from Firebase UI will throw if a display name is not provided. + +```ts +import { requireDisplayName } from '@invertase/firebaseui-core'; + +const ui = initializeUI({ + app, + behaviors: [requireDisplayName()], +}); +``` + +#### `countryCodes` + +The `countryCodes` behavior controls how country codes are consumed throughout your application, for example during Phone Authentication flows when selecting a phone numbers country code. + +```ts +import { countryCodes } from '@invertase/firebaseui-core'; + +const ui = initializeUI({ + app, + behaviors: [countryCodes({ + allowedCountries: ['GB', 'US', 'FR'], // only allow Great Britain, USA and France + defaultCountry: 'GB', // GB is default + })], +}); +``` + +## Translations + +> Note: Firebase UI currently only provides English (en-US) translations out of the box. + +Firebase UI provides a mechanism for overriding any localized strings in the UI components. To define your own custom locale, use the `registerLocale` function from the `@invertase/firebaseui-translations` package: + +```ts +import { registerLocale } from '@invertase/firebaseui-translations'; + +const frFr = registerLocale('fr-FR', { + labels: { + signIn: "Sign In, Matey", + }, +}); +``` + +To use this locale, provide it to the `initializeUI` configuration: + +```ts +const ui = initializeUI({ + app, + locale: frFr, +}); +``` + +### Dynamic translations + +To dynamically change your locale during the applications lifecycle (e.g. a language drop down), you can call the `setLocale` method on the UI instance: + +```ts +const ui = initializeUI({ + app, + locale: frFr, +}); + +... + + +``` + +### Fallback + +By default, any missing translations will fallback to English if not specified. You can pass a 3rd "fallback" argument locale to the `registerLocale` function. + +## Reference + + + +## Bring your own UI + +The Firebase UI library is designed in a way which enables you to easily bring your own UI, or even framework, and still gain the benefits of what Firebase UI offers. + +### Screens vs Forms + +In Firebase UI, a "Screen" is an opinionated UI view which provides specific styling and layout, for example Screens provide a maximum width, are centered, within a card containing padding, a title and description. + +If you are building an application quickly or want an opinionated view, Screens work great. However, if you have constrained requirements (perhaps an existing login page), you can instead use Forms. + +Forms are less opinionated, and only contain the relevant logic required to function. For example, for a sign-in page, the "Sign in form" only includes the email, password and submit button form fields. A Form will fill its parent's width, allowing you to add a Form to any existing UI screens. Typically, Firebase UI screens are simply composed of surrounding UI logic and the form itself. + +Every supported platform follows this principle, thus you can easily swap out a Screen for a Form if required. For example with React: + +```diff +- import { SignInAuthScreen } from '@invertase/firebaseui-react'; ++ import { SignInAuthForm } from '@invertase/firebaseui-react'; +``` + +## Building your own UI + +Whether you're using a (currently) unsupported framework such as Svelte, SolidJS or Vue, you can still use Firebase UI to build your own UI. + +### `FirebaseUIStore` + +The `initializeUI` function returns a `FirebaseUIStore` - a framework agnostic [reactive store](https://github.com/nanostores/nanostores) which allows you to subscribe to changes to the UI instance, such as state or locale updates: + +```ts +const ui = initializeUI({ + app, +}); + +// Subscribe to UI changes +ui.listen((ui) => { + console.log('State changed', ui.state); // loading | pending | idle + console.log('Current locale', ui.locale); + console.log('MFA Assertion', ui.multiFactorResolver); +}); + +// Update the store +store.setKey('state', 'loading'); +``` + +The reactive store allows you to easily add states to your application, such as disabling buttons, checking for MFA assertions and more. + +### Core package + +The `@invertase/firebaseui-core` exports functionality which is directly tied to Firebase UI. Some of these functions mimic the Firebase JS SDK (with added benefits), whereas others are specifically for Firebase UI. + +For example, let's use the `signInWithEmailAndPassword` function: + +```ts +import { signInWithEmailAndPassword } from '@invertase/firebaseui-core'; + +await signInWithEmailAndPassword(ui.get(), 'test@test.com', '123456'); +``` + +This API is almost the same as the [Firebase JS SDK](https://firebase.google.com/docs/reference/js/auth?_gl=1*rb4770*_up*MQ..*_ga*MTE2NzQ1NDU4MC4xNzYyNzgzNTA0*_ga_CW55HF8NVT*czE3NjI3ODM1MDMkbzEkZzAkdDE3NjI3ODM1MDMkajYwJGwwJGgw#signinwithemailandpassword_21ad33b) functionality, however instead provides a stable `FirebaseUI` instance from our `FirebaseUIStore`. + +However internally, Firebase UI will additionally handle the following: + +1. Setting the UI state to `pending` (allowing you to modify any UI (e.g. disabled states)). +2. Automatically triggering any [behaviors](#behaviors), for example automatically upgrading an anonymous user to account. +3. Automatically link any pending credentials (in the event an [account exists with a different credential](https://firebase.google.com/docs/auth/web/google-signin#handling-account-exists-with-different-credential-errors)). +4. Automatically catch any errors thrown from Firebase, handling `account-exists-with-different-credential` errors and any multi-factor assertions which are triggered (see below). +5. Automatically provide a `FirebaseUIError`, which returns a translated error message based on the configured locale. +6. Sets the UI state back to `idle` once the flow has completed. + +All of the functionality within Firebase UI flows a similar logic flow. See the [Reference API](#reference) for more details on all of the available functionality. + +### Multi-factor assertions + +As mentioned above, Firebase UI will automatically capture MFA errors, and provide you with the [`MultiFactorResolver`](https://firebase.google.com/docs/reference/js/auth.multifactorresolver?_gl=1*163rwe5*_up*MQ..*_ga*NDEwODIyMDY5LjE3NjI3ODM2OTQ.*_ga_CW55HF8NVT*czE3NjI3ODM2OTQkbzEkZzAkdDE3NjI3ODM2OTQkajYwJGwwJGgw) to handle the assertion: + +```ts +ui.listen((ui) => { + if (ui.multiFactorResolver) { + // Show a MFA assertion flow + } +}); +``` + +The core package additionally exposes a `signInWithMultiFactorAssertion` function for signing the user in with one of their enrolled factors. + + From cd1c84814e0511be5e71f563dd01e0c734a6d808 Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Mon, 10 Nov 2025 14:25:29 +0000 Subject: [PATCH 3/8] add shadcn reference --- README.md | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/README.md b/README.md index a0fddaddf..1f23086fc 100644 --- a/README.md +++ b/README.md @@ -483,7 +483,59 @@ By default, any missing translations will fallback to English if not specified. ## Reference +
+ @invertase/firebaseui-core + +
+ +
+ @invertase/firebaseui-react + +
+ +
+ Shadcn + + The shadcn registry is available at: https://fir-ui-shadcn-registry.web.app/r/{name}.json + + | Name | Path | Description | + |----------|:----------------:|-------------| + | apple-sign-in-button | /r/apple-sign-in-button.json | A button component for Apple OAuth authentication. | + | country-selector | /r/country-selector.json | A country selector component for phone number input with country codes and flags. | + | email-link-auth-form | /r/email-link-auth-form.json | A form allowing users to sign in via email link. | + | email-link-auth-screen | /r/email-link-auth-screen.json | A screen allowing users to sign in via email link. | + | facebook-sign-in-button | /r/facebook-sign-in-button.json | A button component for Facebook OAuth authentication. | + | forgot-password-auth-form | /r/forgot-password-auth-form.json | A form allowing users to reset their password via email. | + | forgot-password-auth-screen | /r/forgot-password-auth-screen.json | A screen allowing users to reset their password via email. | + | github-sign-in-button | /r/github-sign-in-button.json | A button component for GitHub OAuth authentication. | + | google-sign-in-button | /r/google-sign-in-button.json | A button component for Google OAuth authentication. | + | microsoft-sign-in-button | /r/microsoft-sign-in-button.json | A button component for Microsoft OAuth authentication. | + | multi-factor-auth-assertion-form | /r/multi-factor-auth-assertion-form.json | A form allowing users to complete multi-factor authentication during sign-in with TOTP or SMS options. | + | multi-factor-auth-assertion-screen | /r/multi-factor-auth-assertion-screen.json | A screen allowing users to complete multi-factor authentication during sign-in with TOTP or SMS options. | + | multi-factor-auth-enrollment-form | /r/multi-factor-auth-enrollment-form.json | A form allowing users to select and configure multi-factor authentication methods. | + | multi-factor-auth-enrollment-screen | /r/multi-factor-auth-enrollment-screen.json | A screen allowing users to set up multi-factor authentication with TOTP or SMS options. | + | oauth-button | /r/oauth-button.json | A button component for OAuth authentication providers. | + | oauth-screen | /r/oauth-screen.json | A screen allowing users to sign in with OAuth providers. | + | phone-auth-form | /r/phone-auth-form.json | A form allowing users to authenticate using their phone number with SMS verification. | + | phone-auth-screen | /r/phone-auth-screen.json | A screen allowing users to authenticate using their phone number with SMS verification. | + | policies | /r/policies.json | A component allowing users to navigate to the terms of service and privacy policy. | + | redirect-error | /r/redirect-error.json | A component that displays redirect errors from Firebase UI authentication flow. | + | sign-in-auth-form | /r/sign-in-auth-form.json | A form allowing users to sign in with email and password. | + | sign-in-auth-screen | /r/sign-in-auth-screen.json | A screen allowing users to sign in with email and password. | + | sign-up-auth-form | /r/sign-up-auth-form.json | A form allowing users to sign up with email and password. | + | sign-up-auth-screen | /r/sign-up-auth-screen.json | A screen allowing users to sign up with email and password. | + | sms-multi-factor-assertion-form | /r/sms-multi-factor-assertion-form.json | A form allowing users to complete SMS-based multi-factor authentication during sign-in. | + | sms-multi-factor-enrollment-form | /r/sms-multi-factor-enrollment-form.json | A form allowing users to enroll SMS-based multi-factor authentication. | + | totp-multi-factor-assertion-form | /r/totp-multi-factor-assertion-form.json | A form allowing users to complete TOTP-based multi-factor authentication during sign-in. | + | totp-multi-factor-enrollment-form | /r/totp-multi-factor-enrollment-form.json | A form allowing users to enroll TOTP-based multi-factor authentication with QR code generation. | + | twitter-sign-in-button | /r/twitter-sign-in-button.json | A button component for Twitter OAuth authentication. | + +
+ +
+ @invertase/firebaseui-angular +
## Bring your own UI From 1e651c2a4c9acb0b79a2058b53be68efbd30da14 Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Mon, 10 Nov 2025 14:26:59 +0000 Subject: [PATCH 4/8] - --- README.md | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 1f23086fc..c49241aa1 100644 --- a/README.md +++ b/README.md @@ -267,28 +267,28 @@ Out of the box, Firebase UI provides a neutral light and dark theme with some op ```css :root { - /* The primary color is used for the button and link colors */ - --fui-primary: ...; - /* The primary hover color is used for the button and link colors when hovered */ - --fui-primary-hover: ...; - /* The primary surface color is used for the button text color */ - --fui-primary-surface: ...; - /* The text color used for body text */ - --fui-text: ...; - /* The muted text color used for body text, such as subtitles */ - --fui-text-muted: ...; - /* The background color of the cards */ - --fui-background: ...; - /* The border color used for none input fields */ - --fui-border: ...; - /* The input color used for input fields */ - --fui-input: ...; - /* The error color used for error messages */ - --fui-error: ...; - /* The radius used for the input fields */ - --fui-radius: ...; - /* The radius used for the cards */ - --fui-radius-card: ...; + /* The primary color is used for the button and link colors */ + --fui-primary: ...; + /* The primary hover color is used for the button and link colors when hovered */ + --fui-primary-hover: ...; + /* The primary surface color is used for the button text color */ + --fui-primary-surface: ...; + /* The text color used for body text */ + --fui-text: ...; + /* The muted text color used for body text, such as subtitles */ + --fui-text-muted: ...; + /* The background color of the cards */ + --fui-background: ...; + /* The border color used for none input fields */ + --fui-border: ...; + /* The input color used for input fields */ + --fui-input: ...; + /* The error color used for error messages */ + --fui-error: ...; + /* The radius used for the input fields */ + --fui-radius: ...; + /* The radius used for the cards */ + --fui-radius-card: ...; } ``` From f3982aa31ea13ae112bb869165751acd03593b41 Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Mon, 10 Nov 2025 14:35:39 +0000 Subject: [PATCH 5/8] add core docs --- README.md | 540 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 539 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c49241aa1..e2b242844 100644 --- a/README.md +++ b/README.md @@ -261,7 +261,7 @@ If none of these options apply, include the CSS file via a CDN: ``` -## Theming +### Theming Out of the box, Firebase UI provides a neutral light and dark theme with some opinionated styling (colors, border radii etc). These are all controlled via CSS variables, allowing you to update these at will to match any existing UI design guidelines. To modify the variables, override the following CSS variables: @@ -486,6 +486,544 @@ By default, any missing translations will fallback to English if not specified.
@invertase/firebaseui-core +

initializeUI

+ + Initalizes a new `FirebaseUIStore` instance. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | config | FirebaseUIOptions | The configuration for Firebase UI | + | name | string? | An optional name for the instance. | + + Returns `FirebaseUIStore`. + +

signInWithEmailAndPassword

+ + Signs the user in with an email and password. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | email | string | The users email address. | + | password | string | The users password. | + + Returns `Promise`. + +

createUserWithEmailAndPassword

+ + Creates a new user account with an email and password. + + | Argument | Type | Description | + |------------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | email | string | The users email address. | + | password | string | The users password. | + | displayName| string? | Optional display name for the user. | + + Returns `Promise`. + +

verifyPhoneNumber

+ + Verifies a phone number and sends a verification code. + + | Argument | Type | Description | + |---------------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | phoneNumber | string | The phone number to verify. | + | appVerifier | ApplicationVerifier | The reCAPTCHA verifier. | + | mfaUser | MultiFactorUser? | Optional MFA user for enrollment flow. | + | mfaHint | MultiFactorInfo? | Optional MFA hint for assertion flow. | + + Returns `Promise` (verification ID). + +

confirmPhoneNumber

+ + Confirms a phone number verification with the verification code. + + | Argument | Type | Description | + |----------------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | verificationId | string | The verification ID from verifyPhoneNumber. | + | verificationCode | string | The verification code sent to the phone. | + + Returns `Promise`. + +

sendPasswordResetEmail

+ + Sends a password reset email to the user. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | email | string | The users email address. | + + Returns `Promise`. + +

sendSignInLinkToEmail

+ + Sends a sign-in link to the user's email address. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | email | string | The users email address. | + + Returns `Promise`. + +

signInWithEmailLink

+ + Signs in a user with an email link. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | email | string | The users email address. | + | link | string | The email link from the sign-in email. | + + Returns `Promise`. + +

signInWithCredential

+ + Signs in a user with an authentication credential. + + | Argument | Type | Description | + |-----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | credential| AuthCredential | The authentication credential. | + + Returns `Promise`. + +

signInWithCustomToken

+ + Signs in a user with a custom token. + + | Argument | Type | Description | + |------------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | customToken| string | The custom token. | + + Returns `Promise`. + +

signInAnonymously

+ + Signs in a user anonymously. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + + Returns `Promise`. + +

signInWithProvider

+ + Signs in a user with an OAuth provider (e.g., Google, Facebook, etc.). + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | provider | AuthProvider | The OAuth provider. | + + Returns `Promise`. + +

completeEmailLinkSignIn

+ + Completes the email link sign-in flow by checking if the current URL is a valid email link. + + | Argument | Type | Description | + |-----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | currentUrl| string | The current URL to check. | + + Returns `Promise`. + +

generateTotpQrCode

+ + Generates a QR code data URL for TOTP (Time-based One-Time Password) enrollment. + + | Argument | Type | Description | + |------------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | secret | TotpSecret | The TOTP secret. | + | accountName| string? | Optional account name for the QR code. | + | issuer | string? | Optional issuer name for the QR code. | + + Returns `string` (data URL of the QR code). + +

signInWithMultiFactorAssertion

+ + Signs in a user with a multi-factor authentication assertion. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | assertion| MultiFactorAssertion | The MFA assertion. | + + Returns `Promise`. + +

enrollWithMultiFactorAssertion

+ + Enrolls a multi-factor authentication method for the current user. + + | Argument | Type | Description | + |------------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | assertion | MultiFactorAssertion | The MFA assertion. | + | displayName| string? | Optional display name for the MFA method. Throws if not provided and the `requireDisplayName` behavior is enabled. | + + Returns `Promise`. + +

generateTotpSecret

+ + Generates a TOTP secret for multi-factor authentication enrollment. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + + Returns `Promise`. + +

Types

+ +

FirebaseUI

+ + The main Firebase UI instance type that provides access to authentication state, behaviors, and configuration. + +

FirebaseUIOptions

+ + Configuration options for initializing a Firebase UI instance. + + | Property | Type | Description | + |----------|:-----------------:|------------------------------------| + | app | FirebaseApp | The Firebase app instance. | + | auth | Auth? | Optional Firebase Auth instance. If not provided, will use `getAuth(app)`. | + | locale | RegisteredLocale? | Optional locale for translations. Defaults to English. | + | behaviors| Behavior[]? | Optional array of behaviors to configure. | + +

FirebaseUIStore

+ + A reactive store (nanostores DeepMapStore) that contains the Firebase UI instance state. + +

$config

+ + A global reactive store (nanostores map) that contains all Firebase UI instances keyed by their names. + + Type: `MapStore>>`. + +

FirebaseUIState

+ + The current state of the Firebase UI instance. Can be `"idle"`, `"pending"`, or `"loading"`. + +

Behaviors

+ + Behaviors are modular pieces of functionality that can be added to a Firebase UI instance. + +

Behavior

+ + Type representing a behavior configuration object. Can be used to specify which behaviors are included. + +

Behaviors

+ + Type representing a partial collection of behaviors (all behaviors are optional). + +

autoAnonymousLogin

+ + Automatically signs in users anonymously when the UI initializes. + + Returns `Behavior<"autoAnonymousLogin">`. + +

autoUpgradeAnonymousUsers

+ + Automatically upgrades anonymous users to permanent accounts when they sign in with a credential or provider. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | options | AutoUpgradeAnonymousUsersOptions? | Optional configuration. | + | options.onUpgrade | function? | Optional callback when upgrade occurs. | + + Returns `Behavior<"autoUpgradeAnonymousCredential" | "autoUpgradeAnonymousProvider" | "autoUpgradeAnonymousUserRedirectHandler">`. + +

recaptchaVerification

+ + Configures reCAPTCHA verification for phone authentication. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | options | RecaptchaVerificationOptions? | Optional reCAPTCHA configuration. | + + Returns `Behavior<"recaptchaVerification">`. + +

providerRedirectStrategy

+ + Configures OAuth providers to use redirect flow (full page redirect). + + Returns `Behavior<"providerSignInStrategy" | "providerLinkStrategy">`. + +

providerPopupStrategy

+ + Configures OAuth providers to use popup flow (popup window). + + Returns `Behavior<"providerSignInStrategy" | "providerLinkStrategy">`. + +

oneTapSignIn

+ + Enables Google One Tap sign-in. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | options | OneTapSignInOptions | Configuration for One Tap sign-in. | + + Returns `Behavior<"oneTapSignIn">`. + +

requireDisplayName

+ + Requires users to provide a display name during registration. + + Returns `Behavior<"requireDisplayName">`. + +

countryCodes

+ + Configures country code handling for phone number input. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | options | CountryCodesOptions? | Optional country codes configuration. | + + Returns `Behavior<"countryCodes">`. + +

hasBehavior

+ + Checks if a behavior is enabled on a Firebase UI instance. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | key | string | The behavior key to check. | + + Returns `boolean`. + +

getBehavior

+ + Gets a behavior handler from a Firebase UI instance. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | key | string | The behavior key to retrieve. | + + Returns the behavior handler function. + +

defaultBehaviors

+ + The default behaviors that are automatically included in a Firebase UI instance. Includes `recaptchaVerification`, `providerRedirectStrategy`, and `countryCodes`. + + Type: `Behavior<"recaptchaVerification">`. + +

Country Data

+ +

countryData

+ + An array of country data objects containing name, dial code, country code, and emoji for all supported countries. + + Type: `readonly CountryData[]`. + +

formatPhoneNumber

+ + Formats a phone number according to the specified country data. + + | Argument | Type | Description | + |------------|:-----------------:|------------------------------------| + | phoneNumber| string | The phone number to format. | + | countryData| CountryData | The country data to use for formatting. | + + Returns `string` (formatted phone number in E164 format). + +

CountryData

+ + Type representing country information. + + | Property | Type | Description | + |----------|:-----------------:|------------------------------------| + | name | string | The country name. | + | dialCode | string | The international dial code (e.g., "+1"). | + | code | CountryCode | The ISO country code. | + | emoji | string | The country flag emoji. | + +

CountryCode

+ + Type representing an ISO country code (from libphonenumber-js). + +

Errors

+ +

FirebaseUIError

+ + A custom error class that extends FirebaseError with localized error messages. + +

handleFirebaseError

+ + Handles Firebase errors and converts them to FirebaseUIError with localized messages. Also handles special cases like account linking and multi-factor authentication. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | error | unknown | The error to handle. | + + Throws `FirebaseUIError`. + +

Translations

+ +

getTranslation

+ + Gets a translated string for a given category and key. + + | Argument | Type | Description | + |--------------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + | category | TranslationCategory | The translation category. | + | key | TranslationKey | The translation key. | + | replacements | Record? | Optional replacements for placeholders. | + + Returns `string`. + +

Schemas

+ + Zod schema creation functions for form validation. + +

createSignInAuthFormSchema

+ + Creates a Zod schema for email/password sign-in form validation. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + + Returns `ZodObject` with `email` and `password` fields. + +

createSignUpAuthFormSchema

+ + Creates a Zod schema for email/password sign-up form validation. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + + Returns `ZodObject` with `email`, `password`, and optionally `displayName` fields. + +

createForgotPasswordAuthFormSchema

+ + Creates a Zod schema for forgot password form validation. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + + Returns `ZodObject` with `email` field. + +

createEmailLinkAuthFormSchema

+ + Creates a Zod schema for email link authentication form validation. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + + Returns `ZodObject` with `email` field. + +

createPhoneAuthNumberFormSchema

+ + Creates a Zod schema for phone number input form validation. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + + Returns `ZodObject` with `phoneNumber` field. + +

createPhoneAuthVerifyFormSchema

+ + Creates a Zod schema for phone verification code form validation. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + + Returns `ZodObject` with `verificationId` and `verificationCode` fields. + +

createMultiFactorPhoneAuthNumberFormSchema

+ + Creates a Zod schema for multi-factor phone authentication number form validation. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + + Returns `ZodObject` with `phoneNumber` and `displayName` fields. + +

createMultiFactorPhoneAuthAssertionFormSchema

+ + Creates a Zod schema for multi-factor phone authentication assertion form validation. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + + Returns `ZodObject` with `phoneNumber` field. + +

createMultiFactorPhoneAuthVerifyFormSchema

+ + Creates a Zod schema for multi-factor phone authentication verification form validation. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + + Returns `ZodObject` with `verificationId` and `verificationCode` fields. + +

createMultiFactorTotpAuthNumberFormSchema

+ + Creates a Zod schema for multi-factor TOTP authentication form validation. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + + Returns `ZodObject` with `displayName` field. + +

createMultiFactorTotpAuthVerifyFormSchema

+ + Creates a Zod schema for multi-factor TOTP verification code form validation. + + | Argument | Type | Description | + |----------|:-----------------:|------------------------------------| + | ui | FirebaseUI | The Firebase UI instance. | + + Returns `ZodObject` with `verificationCode` field. + +

Schema Types

+ + Type exports for inferred schema types: + + - `SignInAuthFormSchema` + - `SignUpAuthFormSchema` + - `ForgotPasswordAuthFormSchema` + - `EmailLinkAuthFormSchema` + - `PhoneAuthNumberFormSchema` + - `PhoneAuthVerifyFormSchema` + - `MultiFactorPhoneAuthNumberFormSchema` + - `MultiFactorTotpAuthNumberFormSchema` + - `MultiFactorTotpAuthVerifyFormSchema` + +

LoginTypes

+ + A constant array of supported login types: `["email", "phone", "anonymous", "emailLink", "google"]`. + +

LoginType

+ + Type representing supported login types: `"email" | "phone" | "anonymous" | "emailLink" | "google"`. + +

AuthMode

+ + Type representing authentication mode: `"signIn" | "signUp"`. +
From fd929ff3dc6dcf6cae7ec37cfbcc886b8404aa15 Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Mon, 10 Nov 2025 14:51:06 +0000 Subject: [PATCH 6/8] add reference api --- README.md | 1133 +++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 1018 insertions(+), 115 deletions(-) diff --git a/README.md b/README.md index e2b242844..41e39765d 100644 --- a/README.md +++ b/README.md @@ -682,56 +682,13 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

Types

- -

FirebaseUI

- - The main Firebase UI instance type that provides access to authentication state, behaviors, and configuration. - -

FirebaseUIOptions

- - Configuration options for initializing a Firebase UI instance. - - | Property | Type | Description | - |----------|:-----------------:|------------------------------------| - | app | FirebaseApp | The Firebase app instance. | - | auth | Auth? | Optional Firebase Auth instance. If not provided, will use `getAuth(app)`. | - | locale | RegisteredLocale? | Optional locale for translations. Defaults to English. | - | behaviors| Behavior[]? | Optional array of behaviors to configure. | - -

FirebaseUIStore

- - A reactive store (nanostores DeepMapStore) that contains the Firebase UI instance state. - -

$config

- - A global reactive store (nanostores map) that contains all Firebase UI instances keyed by their names. - - Type: `MapStore>>`. - -

FirebaseUIState

- - The current state of the Firebase UI instance. Can be `"idle"`, `"pending"`, or `"loading"`. - -

Behaviors

- - Behaviors are modular pieces of functionality that can be added to a Firebase UI instance. - -

Behavior

- - Type representing a behavior configuration object. Can be used to specify which behaviors are included. - -

Behaviors

- - Type representing a partial collection of behaviors (all behaviors are optional). - -

autoAnonymousLogin

+

autoAnonymousLogin

Automatically signs in users anonymously when the UI initializes. Returns `Behavior<"autoAnonymousLogin">`. -

autoUpgradeAnonymousUsers

+

autoUpgradeAnonymousUsers

Automatically upgrades anonymous users to permanent accounts when they sign in with a credential or provider. @@ -742,7 +699,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Behavior<"autoUpgradeAnonymousCredential" | "autoUpgradeAnonymousProvider" | "autoUpgradeAnonymousUserRedirectHandler">`. -

recaptchaVerification

+

recaptchaVerification

Configures reCAPTCHA verification for phone authentication. @@ -752,19 +709,19 @@ By default, any missing translations will fallback to English if not specified. Returns `Behavior<"recaptchaVerification">`. -

providerRedirectStrategy

+

providerRedirectStrategy

Configures OAuth providers to use redirect flow (full page redirect). Returns `Behavior<"providerSignInStrategy" | "providerLinkStrategy">`. -

providerPopupStrategy

+

providerPopupStrategy

Configures OAuth providers to use popup flow (popup window). Returns `Behavior<"providerSignInStrategy" | "providerLinkStrategy">`. -

oneTapSignIn

+

oneTapSignIn

Enables Google One Tap sign-in. @@ -774,13 +731,13 @@ By default, any missing translations will fallback to English if not specified. Returns `Behavior<"oneTapSignIn">`. -

requireDisplayName

+

requireDisplayName

Requires users to provide a display name during registration. Returns `Behavior<"requireDisplayName">`. -

countryCodes

+

countryCodes

Configures country code handling for phone number input. @@ -790,7 +747,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Behavior<"countryCodes">`. -

hasBehavior

+

hasBehavior

Checks if a behavior is enabled on a Firebase UI instance. @@ -801,7 +758,7 @@ By default, any missing translations will fallback to English if not specified. Returns `boolean`. -

getBehavior

+

getBehavior

Gets a behavior handler from a Firebase UI instance. @@ -812,21 +769,19 @@ By default, any missing translations will fallback to English if not specified. Returns the behavior handler function. -

defaultBehaviors

+

defaultBehaviors

The default behaviors that are automatically included in a Firebase UI instance. Includes `recaptchaVerification`, `providerRedirectStrategy`, and `countryCodes`. Type: `Behavior<"recaptchaVerification">`. -

Country Data

- -

countryData

+

countryData

An array of country data objects containing name, dial code, country code, and emoji for all supported countries. Type: `readonly CountryData[]`. -

formatPhoneNumber

+

formatPhoneNumber

Formats a phone number according to the specified country data. @@ -837,28 +792,11 @@ By default, any missing translations will fallback to English if not specified. Returns `string` (formatted phone number in E164 format). -

CountryData

- - Type representing country information. - - | Property | Type | Description | - |----------|:-----------------:|------------------------------------| - | name | string | The country name. | - | dialCode | string | The international dial code (e.g., "+1"). | - | code | CountryCode | The ISO country code. | - | emoji | string | The country flag emoji. | - -

CountryCode

- - Type representing an ISO country code (from libphonenumber-js). - -

Errors

- -

FirebaseUIError

+

FirebaseUIError

A custom error class that extends FirebaseError with localized error messages. -

handleFirebaseError

+

handleFirebaseError

Handles Firebase errors and converts them to FirebaseUIError with localized messages. Also handles special cases like account linking and multi-factor authentication. @@ -869,9 +807,7 @@ By default, any missing translations will fallback to English if not specified. Throws `FirebaseUIError`. -

Translations

- -

getTranslation

+

getTranslation

Gets a translated string for a given category and key. @@ -884,11 +820,7 @@ By default, any missing translations will fallback to English if not specified. Returns `string`. -

Schemas

- - Zod schema creation functions for form validation. - -

createSignInAuthFormSchema

+

createSignInAuthFormSchema

Creates a Zod schema for email/password sign-in form validation. @@ -898,7 +830,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `email` and `password` fields. -

createSignUpAuthFormSchema

+

createSignUpAuthFormSchema

Creates a Zod schema for email/password sign-up form validation. @@ -908,7 +840,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `email`, `password`, and optionally `displayName` fields. -

createForgotPasswordAuthFormSchema

+

createForgotPasswordAuthFormSchema

Creates a Zod schema for forgot password form validation. @@ -918,7 +850,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `email` field. -

createEmailLinkAuthFormSchema

+

createEmailLinkAuthFormSchema

Creates a Zod schema for email link authentication form validation. @@ -928,7 +860,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `email` field. -

createPhoneAuthNumberFormSchema

+

createPhoneAuthNumberFormSchema

Creates a Zod schema for phone number input form validation. @@ -938,7 +870,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `phoneNumber` field. -

createPhoneAuthVerifyFormSchema

+

createPhoneAuthVerifyFormSchema

Creates a Zod schema for phone verification code form validation. @@ -948,7 +880,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `verificationId` and `verificationCode` fields. -

createMultiFactorPhoneAuthNumberFormSchema

+

createMultiFactorPhoneAuthNumberFormSchema

Creates a Zod schema for multi-factor phone authentication number form validation. @@ -958,7 +890,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `phoneNumber` and `displayName` fields. -

createMultiFactorPhoneAuthAssertionFormSchema

+

createMultiFactorPhoneAuthAssertionFormSchema

Creates a Zod schema for multi-factor phone authentication assertion form validation. @@ -968,7 +900,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `phoneNumber` field. -

createMultiFactorPhoneAuthVerifyFormSchema

+

createMultiFactorPhoneAuthVerifyFormSchema

Creates a Zod schema for multi-factor phone authentication verification form validation. @@ -978,7 +910,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `verificationId` and `verificationCode` fields. -

createMultiFactorTotpAuthNumberFormSchema

+

createMultiFactorTotpAuthNumberFormSchema

Creates a Zod schema for multi-factor TOTP authentication form validation. @@ -988,7 +920,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `displayName` field. -

createMultiFactorTotpAuthVerifyFormSchema

+

createMultiFactorTotpAuthVerifyFormSchema

Creates a Zod schema for multi-factor TOTP verification code form validation. @@ -998,36 +930,567 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `verificationCode` field. -

Schema Types

+
- Type exports for inferred schema types: +
+ @invertase/firebaseui-react - - `SignInAuthFormSchema` - - `SignUpAuthFormSchema` - - `ForgotPasswordAuthFormSchema` - - `EmailLinkAuthFormSchema` - - `PhoneAuthNumberFormSchema` - - `PhoneAuthVerifyFormSchema` - - `MultiFactorPhoneAuthNumberFormSchema` - - `MultiFactorTotpAuthNumberFormSchema` - - `MultiFactorTotpAuthVerifyFormSchema` + **FirebaseUIProvider** -

LoginTypes

+ Provider component that wraps your application and provides Firebase UI context. - A constant array of supported login types: `["email", "phone", "anonymous", "emailLink", "google"]`. + | Prop | Type | Description | + |----------|:----:|-------------| + | ui | `FirebaseUIStore` | The UI store (from `initializeUI`) | + | policies | `{ termsOfServiceUrl: PolicyURL; privacyPolicyUrl: PolicyURL; onNavigate?: (url: PolicyURL) => void; }?` | Optional policies configuration. If provided, UI components will automatically render the policies. | + | children | `React.ReactNode` | Child components | -

LoginType

+ **SignInAuthForm** - Type representing supported login types: `"email" | "phone" | "anonymous" | "emailLink" | "google"`. + Form component for email/password sign-in. -

AuthMode

+ | Prop | Type | Description | + |------|:----:|-------------| + | onSignIn | `(credential: UserCredential) => void?` | Callback when sign-in succeeds | + | onForgotPasswordClick | `() => void?` | Callback when forgot password link is clicked | + | onSignUpClick | `() => void?` | Callback when sign-up link is clicked | - Type representing authentication mode: `"signIn" | "signUp"`. +

SignUpAuthForm

-
+ Form component for email/password sign-up. -
- @invertase/firebaseui-react + | Prop | Type | Description | + |------|:----:|-------------| + | onSignUp | `(credential: UserCredential) => void?` | Callback when sign-up succeeds | + | onSignInClick | `() => void?` | Callback when sign-in link is clicked | + +

ForgotPasswordAuthForm

+ + Form component for password reset. + + | Prop | Type | Description | + |------|:----:|-------------| + | onSendPasswordResetEmail | `() => void?` | Callback when password reset email is sent | + | onBackClick | `() => void?` | Callback when back button is clicked | + +

EmailLinkAuthForm

+ + Form component for email link authentication. + + | Prop | Type | Description | + |------|:----:|-------------| + | onSendSignInLinkToEmail | `() => void?` | Callback when sign-in link email is sent | + +

PhoneAuthForm

+ + Form component for phone number authentication. + + | Prop | Type | Description | + |------|:----:|-------------| + | onVerifyPhoneNumber | `() => void?` | Callback when phone number verification is initiated | + | onVerifyCode | `(credential: UserCredential) => void?` | Callback when verification code is verified | + +

MultiFactorAuthAssertionForm

+ + Form component for multi-factor authentication assertion during sign-in. + + | Prop | Type | Description | + |------|:----:|-------------| + | onAssert | `(credential: UserCredential) => void?` | Callback when MFA assertion succeeds | + +

MultiFactorAuthEnrollmentForm

+ + Form component for multi-factor authentication enrollment. + + | Prop | Type | Description | + |------|:----:|-------------| + | onEnroll | `() => void?` | Callback when MFA enrollment succeeds | + +

SmsMultiFactorAssertionForm

+ + Form component for SMS-based multi-factor authentication assertion. + + | Prop | Type | Description | + |------|:----:|-------------| + | onAssert | `(credential: UserCredential) => void?` | Callback when SMS MFA assertion succeeds | + +

SmsMultiFactorEnrollmentForm

+ + Form component for SMS-based multi-factor authentication enrollment. + + | Prop | Type | Description | + |------|:----:|-------------| + | onEnroll | `() => void?` | Callback when SMS MFA enrollment succeeds | + +

TotpMultiFactorAssertionForm

+ + Form component for TOTP-based multi-factor authentication assertion. + + | Prop | Type | Description | + |------|:----:|-------------| + | onAssert | `(credential: UserCredential) => void?` | Callback when TOTP MFA assertion succeeds | + +

TotpMultiFactorEnrollmentForm

+ + Form component for TOTP-based multi-factor authentication enrollment. + + | Prop | Type | Description | + |------|:----:|-------------| + | onEnroll | `() => void?` | Callback when TOTP MFA enrollment succeeds | + +

Screen Components

+ +

SignInAuthScreen

+ + Screen component for email/password sign-in. Extends `SignInAuthFormProps` and accepts `children`. + +

SignUpAuthScreen

+ + Screen component for email/password sign-up. Extends `SignUpAuthFormProps` and accepts `children`. + +

ForgotPasswordAuthScreen

+ + Screen component for password reset. Extends `ForgotPasswordAuthFormProps`. + +

EmailLinkAuthScreen

+ + Screen component for email link authentication. Extends `EmailLinkAuthFormProps` and accepts `children`. + +

PhoneAuthScreen

+ + Screen component for phone number authentication. Extends `PhoneAuthFormProps` and accepts `children`. + +

MultiFactorAuthAssertionScreen

+ + Screen component for multi-factor authentication assertion. Extends `MultiFactorAuthAssertionFormProps`. + +

MultiFactorAuthEnrollmentScreen

+ + Screen component for multi-factor authentication enrollment. Extends `MultiFactorAuthEnrollmentFormProps`. + +

OAuthScreen

+ + Screen component for OAuth provider sign-in. + + | Prop | Type | Description | + |------|:----:|-------------| + | children | `React.ReactNode?` | Child components | + +

OAuth Components

+ +

OAuthButton

+ + Generic OAuth button component. + + | Prop | Type | Description | + |------|:----:|-------------| + | provider | `AuthProvider` | Firebase Auth provider instance | + | themed | `boolean \| string?` | Whether to apply themed styling | + | children | `React.ReactNode?` | Button content | + +

GoogleSignInButton

+ + Google OAuth sign-in button component. + + | Prop | Type | Description | + |------|:----:|-------------| + | themed | `boolean \| string?` | Whether to apply themed styling | + +

AppleSignInButton

+ + Apple OAuth sign-in button component. + + | Prop | Type | Description | + |------|:----:|-------------| + | themed | `boolean \| string?` | Whether to apply themed styling | + +

FacebookSignInButton

+ + Facebook OAuth sign-in button component. + + | Prop | Type | Description | + |------|:----:|-------------| + | themed | `boolean \| string?` | Whether to apply themed styling | + +

GitHubSignInButton

+ + GitHub OAuth sign-in button component. + + | Prop | Type | Description | + |------|:----:|-------------| + | themed | `boolean \| string?` | Whether to apply themed styling | + +

MicrosoftSignInButton

+ + Microsoft OAuth sign-in button component. + + | Prop | Type | Description | + |------|:----:|-------------| + | themed | `boolean \| string?` | Whether to apply themed styling | + +

TwitterSignInButton

+ + Twitter OAuth sign-in button component. + + | Prop | Type | Description | + |------|:----:|-------------| + | themed | `boolean \| string?` | Whether to apply themed styling | + +

UI Components

+ +

Button

+ + Button component with variant support. + + | Prop | Type | Description | + |------|:----:|-------------| + | variant | `"primary" \| "secondary" \| "outline"?` | Button style variant | + | asChild | `boolean?` | Render as child component using Slot | + | ...props | `ComponentProps<"button">` | Standard button HTML attributes | + +

Card

+ + Card container component. + + | Prop | Type | Description | + |------|:----:|-------------| + | children | `React.ReactNode?` | Card content | + | ...props | `ComponentProps<"div">` | Standard div HTML attributes | + +

CardHeader

+ + Card header component. Accepts `children` and standard div props. + +

CardTitle

+ + Card title component. Accepts `children` and standard h2 props. + +

CardSubtitle

+ + Card subtitle component. Accepts `children` and standard p props. + +

CardContent

+ + Card content component. Accepts `children` and standard div props. + +

CountrySelector

+ + Country selector component for phone number input. + + | Prop | Type | Description | + |------|:----:|-------------| + | ...props | `ComponentProps<"div">` | Standard div HTML attributes | + +

Divider

+ + Divider component. + + | Prop | Type | Description | + |------|:----:|-------------| + | children | `React.ReactNode?` | Divider content | + | ...props | `ComponentProps<"div">` | Standard div HTML attributes | + +

Policies

+ + Component that renders terms of service and privacy policy links. Automatically rendered when policies are provided to `FirebaseUIProvider`. + +

RedirectError

+ + Component that displays redirect errors from Firebase UI authentication flow. + +

Hooks

+ +

useUI

+ + Gets the Firebase UI configuration from context. + + Returns `FirebaseUI`. + +

useRedirectError

+ + Gets the redirect error from the UI store. + + Returns `string | undefined`. + +

useSignInAuthFormSchema

+ + Creates a Zod schema for sign-in form validation. + + Returns `ZodObject` with `email` and `password` fields. + +

useSignUpAuthFormSchema

+ + Creates a Zod schema for sign-up form validation. + + Returns `ZodObject` with `email`, `password`, and optionally `displayName` fields. + +

useForgotPasswordAuthFormSchema

+ + Creates a Zod schema for forgot password form validation. + + Returns `ZodObject` with `email` field. + +

useEmailLinkAuthFormSchema

+ + Creates a Zod schema for email link authentication form validation. + + Returns `ZodObject` with `email` field. + +

usePhoneAuthNumberFormSchema

+ + Creates a Zod schema for phone number input form validation. + + Returns `ZodObject` with `phoneNumber` field. + +

usePhoneAuthVerifyFormSchema

+ + Creates a Zod schema for phone verification code form validation. + + Returns `ZodObject` with `verificationId` and `verificationCode` fields. + +

useMultiFactorPhoneAuthNumberFormSchema

+ + Creates a Zod schema for multi-factor phone authentication number form validation. + + Returns `ZodObject` with `phoneNumber` and `displayName` fields. + +

useMultiFactorPhoneAuthVerifyFormSchema

+ + Creates a Zod schema for multi-factor phone authentication verification form validation. + + Returns `ZodObject` with `verificationId` and `verificationCode` fields. + +

useMultiFactorTotpAuthNumberFormSchema

+ + Creates a Zod schema for multi-factor TOTP authentication form validation. + + Returns `ZodObject` with `displayName` field. + +

useMultiFactorTotpAuthVerifyFormSchema

+ + Creates a Zod schema for multi-factor TOTP verification code form validation. + + Returns `ZodObject` with `verificationCode` field. + +

useRecaptchaVerifier

+ + Creates and manages a reCAPTCHA verifier instance. + + | Argument | Type | Description | + |----------|:----:|-------------| + | ref | `React.RefObject` | Reference to the DOM element where reCAPTCHA should be rendered | + + Returns `RecaptchaVerifier \| null`. + +

Form Hooks

+ +

useSignInAuthForm

+ + Hook for managing sign-in form state and validation. + + Returns form state and handlers. + +

useSignInAuthFormAction

+ + Hook for sign-in form submission action. + + Returns async action handler. + +

useSignUpAuthForm

+ + Hook for managing sign-up form state and validation. + + Returns form state and handlers. + +

useSignUpAuthFormAction

+ + Hook for sign-up form submission action. + + Returns async action handler. + +

useRequireDisplayName

+ + Hook to check if display name is required for sign-up. + + Returns `boolean`. + +

useForgotPasswordAuthForm

+ + Hook for managing forgot password form state and validation. + + Returns form state and handlers. + +

useForgotPasswordAuthFormAction

+ + Hook for forgot password form submission action. + + Returns async action handler. + +

useEmailLinkAuthForm

+ + Hook for managing email link auth form state and validation. + + Returns form state and handlers. + +

useEmailLinkAuthFormAction

+ + Hook for email link auth form submission action. + + Returns async action handler. + +

useEmailLinkAuthFormCompleteSignIn

+ + Hook to complete email link authentication. + + Returns async action handler. + +

usePhoneNumberForm

+ + Hook for managing phone number form state and validation. + + Returns form state and handlers. + +

usePhoneNumberFormAction

+ + Hook for phone number form submission action. + + Returns async action handler. + +

useVerifyPhoneNumberForm

+ + Hook for managing phone verification form state and validation. + + Returns form state and handlers. + +

useVerifyPhoneNumberFormAction

+ + Hook for phone verification form submission action. + + Returns async action handler. + +

useMultiFactorAssertionCleanup

+ + Hook for cleaning up multi-factor assertion state. + +

useSmsMultiFactorAssertionPhoneFormAction

+ + Hook for SMS MFA assertion phone form submission action. + + Returns async action handler. + +

useSmsMultiFactorAssertionVerifyFormAction

+ + Hook for SMS MFA assertion verification form submission action. + + Returns async action handler. + +

useSmsMultiFactorEnrollmentPhoneNumberForm

+ + Hook for managing SMS MFA enrollment phone number form state. + + Returns form state and handlers. + +

useSmsMultiFactorEnrollmentPhoneAuthFormAction

+ + Hook for SMS MFA enrollment phone auth form submission action. + + Returns async action handler. + +

useMultiFactorEnrollmentVerifyPhoneNumberForm

+ + Hook for managing MFA enrollment phone verification form state. + + Returns form state and handlers. + +

useMultiFactorEnrollmentVerifyPhoneNumberFormAction

+ + Hook for MFA enrollment phone verification form submission action. + + Returns async action handler. + +

useTotpMultiFactorAssertionForm

+ + Hook for managing TOTP MFA assertion form state. + + Returns form state and handlers. + +

useTotpMultiFactorAssertionFormAction

+ + Hook for TOTP MFA assertion form submission action. + + Returns async action handler. + +

useTotpMultiFactorSecretGenerationForm

+ + Hook for managing TOTP secret generation form state. + + Returns form state and handlers. + +

useTotpMultiFactorSecretGenerationFormAction

+ + Hook for TOTP secret generation form submission action. + + Returns async action handler. + +

useMultiFactorEnrollmentVerifyTotpForm

+ + Hook for managing MFA enrollment TOTP verification form state. + + Returns form state and handlers. + +

useMultiFactorEnrollmentVerifyTotpFormAction

+ + Hook for MFA enrollment TOTP verification form submission action. + + Returns async action handler. + +

useSignInWithProvider

+ + Hook for OAuth provider sign-in. + + | Argument | Type | Description | + |----------|:----:|-------------| + | provider | `AuthProvider` | Firebase Auth provider instance | + + Returns async action handler. + +

Utility Hooks

+ +

useCountries

+ + Hook to get list of countries for country selector. + + Returns array of country data. + +

useDefaultCountry

+ + Hook to get default country for country selector. + + Returns country data or `undefined`. + +

Context & Types

+ +

PolicyContext

+ + React context for policy configuration. + +

PolicyProps

+ + Type for policy configuration. + + | Property | Type | Description | + |----------|:----:|-------------| + | termsOfServiceUrl | `PolicyURL` | URL to terms of service | + | privacyPolicyUrl | `PolicyURL` | URL to privacy policy | + | onNavigate | `(url: PolicyURL) => void?` | Optional navigation handler | + +

PolicyURL

+ + Type alias: `string \| URL` + +

FirebaseUIProviderProps

+ + Type for `FirebaseUIProvider` component props.
@@ -1073,6 +1536,446 @@ By default, any missing translations will fallback to English if not specified.
@invertase/firebaseui-angular +

provideFirebaseUI

+ + Provider function that configures Firebase UI for your Angular application. + + | Argument | Type | Description | + |----------|:----:|-------------| + | uiFactory | `(apps: FirebaseApps) => FirebaseUIStore` | Factory function that creates the UI store from Firebase apps | + + Returns `EnvironmentProviders`. + +

provideFirebaseUIPolicies

+ + Provider function that configures policies (terms of service and privacy policy) for Firebase UI. + + | Argument | Type | Description | + |----------|:----:|-------------| + | factory | `() => PolicyConfig` | Factory function that returns policy configuration | + + Returns `EnvironmentProviders`. + +

Form Components

+ +

SignInAuthFormComponent

+ + Selector: `fui-sign-in-auth-form` + + Form component for email/password sign-in. + + | Output | Type | Description | + |--------|:----:|-------------| + | signIn | `EventEmitter` | Emitted when sign-in succeeds | + | forgotPassword | `EventEmitter` | Emitted when forgot password link is clicked | + | signUp | `EventEmitter` | Emitted when sign-up link is clicked | + +

SignUpAuthFormComponent

+ + Selector: `fui-sign-up-auth-form` + + Form component for email/password sign-up. + + | Output | Type | Description | + |--------|:----:|-------------| + | signUp | `EventEmitter` | Emitted when sign-up succeeds | + | signIn | `EventEmitter` | Emitted when sign-in link is clicked | + +

ForgotPasswordAuthFormComponent

+ + Selector: `fui-forgot-password-auth-form` + + Form component for password reset. + + | Output | Type | Description | + |--------|:----:|-------------| + | passwordSent | `EventEmitter` | Emitted when password reset email is sent | + | backToSignIn | `EventEmitter` | Emitted when back button is clicked | + +

EmailLinkAuthFormComponent

+ + Selector: `fui-email-link-auth-form` + + Form component for email link authentication. + + | Output | Type | Description | + |--------|:----:|-------------| + | emailSent | `EventEmitter` | Emitted when sign-in link email is sent | + | signIn | `EventEmitter` | Emitted when sign-in succeeds (via link or MFA) | + +

PhoneAuthFormComponent

+ + Selector: `fui-phone-auth-form` + + Form component for phone number authentication. + + | Output | Type | Description | + |--------|:----:|-------------| + | signIn | `EventEmitter` | Emitted when phone verification succeeds | + +

MultiFactorAuthAssertionFormComponent

+ + Selector: `fui-multi-factor-auth-assertion-form` + + Form component for multi-factor authentication assertion during sign-in. + + | Output | Type | Description | + |--------|:----:|-------------| + | onSuccess | `EventEmitter` | Emitted when MFA assertion succeeds | + +

SmsMultiFactorAssertionFormComponent

+ + Selector: `fui-sms-multi-factor-assertion-form` + + Form component for SMS-based multi-factor authentication assertion. + + | Input | Type | Description | + |-------|:----:|-------------| + | hint | `MultiFactorInfo` | The MFA hint for SMS verification | + + | Output | Type | Description | + |--------|:----:|-------------| + | onSuccess | `EventEmitter` | Emitted when SMS MFA assertion succeeds | + +

SmsMultiFactorAssertionPhoneFormComponent

+ + Selector: `fui-sms-multi-factor-assertion-phone-form` + + Phone number form component for SMS MFA assertion. + +

SmsMultiFactorAssertionVerifyFormComponent

+ + Selector: `fui-sms-multi-factor-assertion-verify-form` + + Verification code form component for SMS MFA assertion. + +

TotpMultiFactorAssertionFormComponent

+ + Selector: `fui-totp-multi-factor-assertion-form` + + Form component for TOTP-based multi-factor authentication assertion. + + | Input | Type | Description | + |-------|:----:|-------------| + | hint | `MultiFactorInfo` | The MFA hint for TOTP verification | + + | Output | Type | Description | + |--------|:----:|-------------| + | onSuccess | `EventEmitter` | Emitted when TOTP MFA assertion succeeds | + +

Screen Components

+ +

SignInAuthScreenComponent

+ + Selector: `fui-sign-in-auth-screen` + + Screen component for email/password sign-in. + + | Output | Type | Description | + |--------|:----:|-------------| + | signIn | `EventEmitter` | Emitted when sign-in succeeds | + | signUp | `EventEmitter` | Emitted when sign-up link is clicked | + +

SignUpAuthScreenComponent

+ + Selector: `fui-sign-up-auth-screen` + + Screen component for email/password sign-up. + + | Output | Type | Description | + |--------|:----:|-------------| + | signUp | `EventEmitter` | Emitted when sign-up succeeds | + | signIn | `EventEmitter` | Emitted when sign-in link is clicked | + +

ForgotPasswordAuthScreenComponent

+ + Selector: `fui-forgot-password-auth-screen` + + Screen component for password reset. + + | Output | Type | Description | + |--------|:----:|-------------| + | passwordSent | `EventEmitter` | Emitted when password reset email is sent | + | backToSignIn | `EventEmitter` | Emitted when back button is clicked | + +

EmailLinkAuthScreenComponent

+ + Selector: `fui-email-link-auth-screen` + + Screen component for email link authentication. + + | Output | Type | Description | + |--------|:----:|-------------| + | emailSent | `EventEmitter` | Emitted when sign-in link email is sent | + | signIn | `EventEmitter` | Emitted when sign-in succeeds | + +

PhoneAuthScreenComponent

+ + Selector: `fui-phone-auth-screen` + + Screen component for phone number authentication. + + | Output | Type | Description | + |--------|:----:|-------------| + | signIn | `EventEmitter` | Emitted when phone verification succeeds | + +

OAuthScreenComponent

+ + Selector: `fui-oauth-screen` + + Screen component for OAuth provider sign-in. + + | Output | Type | Description | + |--------|:----:|-------------| + | onSignIn | `EventEmitter` | Emitted when OAuth sign-in succeeds | + +

OAuth Components

+ +

OAuthButtonComponent

+ + Selector: `fui-oauth-button` + + Generic OAuth button component. + + | Input | Type | Description | + |-------|:----:|-------------| + | provider | `AuthProvider` | Firebase Auth provider instance | + +

GoogleSignInButtonComponent

+ + Selector: `fui-google-sign-in-button` + + Google OAuth sign-in button component. + +

AppleSignInButtonComponent

+ + Selector: `fui-apple-sign-in-button` + + Apple OAuth sign-in button component. + +

FacebookSignInButtonComponent

+ + Selector: `fui-facebook-sign-in-button` + + Facebook OAuth sign-in button component. + +

GithubSignInButtonComponent

+ + Selector: `fui-github-sign-in-button` + + GitHub OAuth sign-in button component. + +

MicrosoftSignInButtonComponent

+ + Selector: `fui-microsoft-sign-in-button` + + Microsoft OAuth sign-in button component. + +

TwitterSignInButtonComponent

+ + Selector: `fui-twitter-sign-in-button` + + Twitter OAuth sign-in button component. + +

UI Components

+ +

ButtonComponent

+ + Selector: `button[fui-button]` + + Button component with variant support. + + | Input | Type | Description | + |-------|:----:|-------------| + | variant | `"primary" \| "secondary" \| "outline"?` | Button style variant | + +

CardComponent

+ + Selector: `fui-card` + + Card container component. + +

CardHeaderComponent

+ + Selector: `fui-card-header` + + Card header component. + +

CardTitleComponent

+ + Selector: `fui-card-title` + + Card title component. + +

CardSubtitleComponent

+ + Selector: `fui-card-subtitle` + + Card subtitle component. + +

CardContentComponent

+ + Selector: `fui-card-content` + + Card content component. + +

CountrySelectorComponent

+ + Selector: `fui-country-selector` + + Country selector component for phone number input. + + | Input | Type | Description | + |-------|:----:|-------------| + | value | `CountryCode` | Selected country code | + + | Output | Type | Description | + |--------|:----:|-------------| + | valueChange | `EventEmitter` | Emitted when country selection changes | + +

DividerComponent

+ + Selector: `fui-divider` + + Divider component. + +

PoliciesComponent

+ + Selector: `fui-policies` + + Component that renders terms of service and privacy policy links. Automatically rendered when policies are provided via `provideFirebaseUIPolicies`. + +

RedirectErrorComponent

+ + Selector: `fui-redirect-error` + + Component that displays redirect errors from Firebase UI authentication flow. + +

ContentComponent

+ + Selector: `fui-content` + + Content wrapper component. + +

Injection Functions

+ +

injectUI

+ + Injects the Firebase UI configuration as a read-only signal. + + Returns `ReadonlySignal`. + +

injectRedirectError

+ + Injects the redirect error from the UI store as a signal. + + Returns `Signal`. + +

injectTranslation

+ + Injects a translated string for a given category and key. + + | Argument | Type | Description | + |----------|:----:|-------------| + | category | `string` | The translation category | + | key | `string` | The translation key | + + Returns `Signal`. + +

injectSignInAuthFormSchema

+ + Injects a Zod schema for sign-in form validation. + + Returns `Signal` with `email` and `password` fields. + +

injectSignUpAuthFormSchema

+ + Injects a Zod schema for sign-up form validation. + + Returns `Signal` with `email`, `password`, and optionally `displayName` fields. + +

injectForgotPasswordAuthFormSchema

+ + Injects a Zod schema for forgot password form validation. + + Returns `Signal` with `email` field. + +

injectEmailLinkAuthFormSchema

+ + Injects a Zod schema for email link authentication form validation. + + Returns `Signal` with `email` field. + +

injectPhoneAuthFormSchema

+ + Injects a Zod schema for phone number input form validation. + + Returns `Signal` with `phoneNumber` field. + +

injectPhoneAuthVerifyFormSchema

+ + Injects a Zod schema for phone verification code form validation. + + Returns `Signal` with `verificationId` and `verificationCode` fields. + +

injectMultiFactorPhoneAuthNumberFormSchema

+ + Injects a Zod schema for multi-factor phone authentication number form validation. + + Returns `Signal` with `phoneNumber` and `displayName` fields. + +

injectMultiFactorPhoneAuthAssertionFormSchema

+ + Injects a Zod schema for multi-factor phone authentication assertion form validation. + + Returns `Signal` with `phoneNumber` field. + +

injectMultiFactorPhoneAuthVerifyFormSchema

+ + Injects a Zod schema for multi-factor phone authentication verification form validation. + + Returns `Signal` with `verificationId` and `verificationCode` fields. + +

injectMultiFactorTotpAuthNumberFormSchema

+ + Injects a Zod schema for multi-factor TOTP authentication form validation. + + Returns `Signal` with `displayName` field. + +

injectMultiFactorTotpAuthVerifyFormSchema

+ + Injects a Zod schema for multi-factor TOTP verification code form validation. + + Returns `Signal` with `verificationCode` field. + +

injectRecaptchaVerifier

+ + Injects a reCAPTCHA verifier instance. + + | Argument | Type | Description | + |----------|:----:|-------------| + | element | `() => ElementRef` | Function that returns the element reference where reCAPTCHA should be rendered | + + Returns `Signal`. + +

injectPolicies

+ + Injects the policy configuration. + + Returns `PolicyConfig \| null`. + +

injectCountries

+ + Injects the list of countries for country selector. + + Returns `Signal`. + +

injectDefaultCountry

+ + Injects the default country for country selector. + + Returns `Signal`. +
## Bring your own UI From 2286610bcde3a316401dd0d3304c1078d3b32bcb Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Mon, 10 Nov 2025 14:54:20 +0000 Subject: [PATCH 7/8] - --- README.md | 296 +++++++++++++++++++++++++----------------------------- 1 file changed, 136 insertions(+), 160 deletions(-) diff --git a/README.md b/README.md index 41e39765d..52909f47a 100644 --- a/README.md +++ b/README.md @@ -955,7 +955,7 @@ By default, any missing translations will fallback to English if not specified. | onForgotPasswordClick | `() => void?` | Callback when forgot password link is clicked | | onSignUpClick | `() => void?` | Callback when sign-up link is clicked | -

SignUpAuthForm

+ **SignUpAuthForm** Form component for email/password sign-up. @@ -964,7 +964,7 @@ By default, any missing translations will fallback to English if not specified. | onSignUp | `(credential: UserCredential) => void?` | Callback when sign-up succeeds | | onSignInClick | `() => void?` | Callback when sign-in link is clicked | -

ForgotPasswordAuthForm

+ **ForgotPasswordAuthForm** Form component for password reset. @@ -973,7 +973,7 @@ By default, any missing translations will fallback to English if not specified. | onSendPasswordResetEmail | `() => void?` | Callback when password reset email is sent | | onBackClick | `() => void?` | Callback when back button is clicked | -

EmailLinkAuthForm

+ **EmailLinkAuthForm** Form component for email link authentication. @@ -981,7 +981,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onSendSignInLinkToEmail | `() => void?` | Callback when sign-in link email is sent | -

PhoneAuthForm

+ **PhoneAuthForm** Form component for phone number authentication. @@ -990,7 +990,7 @@ By default, any missing translations will fallback to English if not specified. | onVerifyPhoneNumber | `() => void?` | Callback when phone number verification is initiated | | onVerifyCode | `(credential: UserCredential) => void?` | Callback when verification code is verified | -

MultiFactorAuthAssertionForm

+ **MultiFactorAuthAssertionForm** Form component for multi-factor authentication assertion during sign-in. @@ -998,7 +998,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onAssert | `(credential: UserCredential) => void?` | Callback when MFA assertion succeeds | -

MultiFactorAuthEnrollmentForm

+ **MultiFactorAuthEnrollmentForm** Form component for multi-factor authentication enrollment. @@ -1006,7 +1006,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onEnroll | `() => void?` | Callback when MFA enrollment succeeds | -

SmsMultiFactorAssertionForm

+ **SmsMultiFactorAssertionForm** Form component for SMS-based multi-factor authentication assertion. @@ -1014,7 +1014,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onAssert | `(credential: UserCredential) => void?` | Callback when SMS MFA assertion succeeds | -

SmsMultiFactorEnrollmentForm

+ **SmsMultiFactorEnrollmentForm** Form component for SMS-based multi-factor authentication enrollment. @@ -1022,7 +1022,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onEnroll | `() => void?` | Callback when SMS MFA enrollment succeeds | -

TotpMultiFactorAssertionForm

+ **TotpMultiFactorAssertionForm** Form component for TOTP-based multi-factor authentication assertion. @@ -1030,7 +1030,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onAssert | `(credential: UserCredential) => void?` | Callback when TOTP MFA assertion succeeds | -

TotpMultiFactorEnrollmentForm

+ **TotpMultiFactorEnrollmentForm** Form component for TOTP-based multi-factor authentication enrollment. @@ -1038,37 +1038,35 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onEnroll | `() => void?` | Callback when TOTP MFA enrollment succeeds | -

Screen Components

- -

SignInAuthScreen

+ **SignInAuthScreen** Screen component for email/password sign-in. Extends `SignInAuthFormProps` and accepts `children`. -

SignUpAuthScreen

+ **SignUpAuthScreen** Screen component for email/password sign-up. Extends `SignUpAuthFormProps` and accepts `children`. -

ForgotPasswordAuthScreen

+ **ForgotPasswordAuthScreen** Screen component for password reset. Extends `ForgotPasswordAuthFormProps`. -

EmailLinkAuthScreen

+ **EmailLinkAuthScreen** Screen component for email link authentication. Extends `EmailLinkAuthFormProps` and accepts `children`. -

PhoneAuthScreen

+ **PhoneAuthScreen** Screen component for phone number authentication. Extends `PhoneAuthFormProps` and accepts `children`. -

MultiFactorAuthAssertionScreen

+ **MultiFactorAuthAssertionScreen** Screen component for multi-factor authentication assertion. Extends `MultiFactorAuthAssertionFormProps`. -

MultiFactorAuthEnrollmentScreen

+ **MultiFactorAuthEnrollmentScreen** Screen component for multi-factor authentication enrollment. Extends `MultiFactorAuthEnrollmentFormProps`. -

OAuthScreen

+ **OAuthScreen** Screen component for OAuth provider sign-in. @@ -1076,9 +1074,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | children | `React.ReactNode?` | Child components | -

OAuth Components

- -

OAuthButton

+ **OAuthButton** Generic OAuth button component. @@ -1088,7 +1084,7 @@ By default, any missing translations will fallback to English if not specified. | themed | `boolean \| string?` | Whether to apply themed styling | | children | `React.ReactNode?` | Button content | -

GoogleSignInButton

+ **GoogleSignInButton** Google OAuth sign-in button component. @@ -1096,7 +1092,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | themed | `boolean \| string?` | Whether to apply themed styling | -

AppleSignInButton

+ **AppleSignInButton** Apple OAuth sign-in button component. @@ -1104,7 +1100,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | themed | `boolean \| string?` | Whether to apply themed styling | -

FacebookSignInButton

+ **FacebookSignInButton** Facebook OAuth sign-in button component. @@ -1112,7 +1108,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | themed | `boolean \| string?` | Whether to apply themed styling | -

GitHubSignInButton

+ **GitHubSignInButton** GitHub OAuth sign-in button component. @@ -1120,7 +1116,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | themed | `boolean \| string?` | Whether to apply themed styling | -

MicrosoftSignInButton

+ **MicrosoftSignInButton** Microsoft OAuth sign-in button component. @@ -1128,7 +1124,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | themed | `boolean \| string?` | Whether to apply themed styling | -

TwitterSignInButton

+ **TwitterSignInButton** Twitter OAuth sign-in button component. @@ -1136,9 +1132,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | themed | `boolean \| string?` | Whether to apply themed styling | -

UI Components

- -

Button

+ **Button** Button component with variant support. @@ -1148,7 +1142,7 @@ By default, any missing translations will fallback to English if not specified. | asChild | `boolean?` | Render as child component using Slot | | ...props | `ComponentProps<"button">` | Standard button HTML attributes | -

Card

+ **Card** Card container component. @@ -1157,23 +1151,23 @@ By default, any missing translations will fallback to English if not specified. | children | `React.ReactNode?` | Card content | | ...props | `ComponentProps<"div">` | Standard div HTML attributes | -

CardHeader

+ **CardHeader** Card header component. Accepts `children` and standard div props. -

CardTitle

+ **CardTitle** Card title component. Accepts `children` and standard h2 props. -

CardSubtitle

+ **CardSubtitle** Card subtitle component. Accepts `children` and standard p props. -

CardContent

+ **CardContent** Card content component. Accepts `children` and standard div props. -

CountrySelector

+ **CountrySelector** Country selector component for phone number input. @@ -1181,7 +1175,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | ...props | `ComponentProps<"div">` | Standard div HTML attributes | -

Divider

+ **Divider** Divider component. @@ -1190,89 +1184,87 @@ By default, any missing translations will fallback to English if not specified. | children | `React.ReactNode?` | Divider content | | ...props | `ComponentProps<"div">` | Standard div HTML attributes | -

Policies

+ **Policies** Component that renders terms of service and privacy policy links. Automatically rendered when policies are provided to `FirebaseUIProvider`. -

RedirectError

+ **RedirectError** Component that displays redirect errors from Firebase UI authentication flow. -

Hooks

- -

useUI

+ **useUI** Gets the Firebase UI configuration from context. Returns `FirebaseUI`. -

useRedirectError

+ **useRedirectError** Gets the redirect error from the UI store. Returns `string | undefined`. -

useSignInAuthFormSchema

+ **useSignInAuthFormSchema** Creates a Zod schema for sign-in form validation. Returns `ZodObject` with `email` and `password` fields. -

useSignUpAuthFormSchema

+ **useSignUpAuthFormSchema** Creates a Zod schema for sign-up form validation. Returns `ZodObject` with `email`, `password`, and optionally `displayName` fields. -

useForgotPasswordAuthFormSchema

+ **useForgotPasswordAuthFormSchema** Creates a Zod schema for forgot password form validation. Returns `ZodObject` with `email` field. -

useEmailLinkAuthFormSchema

+ **useEmailLinkAuthFormSchema** Creates a Zod schema for email link authentication form validation. Returns `ZodObject` with `email` field. -

usePhoneAuthNumberFormSchema

+ **usePhoneAuthNumberFormSchema** Creates a Zod schema for phone number input form validation. Returns `ZodObject` with `phoneNumber` field. -

usePhoneAuthVerifyFormSchema

+ **usePhoneAuthVerifyFormSchema** Creates a Zod schema for phone verification code form validation. Returns `ZodObject` with `verificationId` and `verificationCode` fields. -

useMultiFactorPhoneAuthNumberFormSchema

+ **useMultiFactorPhoneAuthNumberFormSchema** Creates a Zod schema for multi-factor phone authentication number form validation. Returns `ZodObject` with `phoneNumber` and `displayName` fields. -

useMultiFactorPhoneAuthVerifyFormSchema

+ **useMultiFactorPhoneAuthVerifyFormSchema** Creates a Zod schema for multi-factor phone authentication verification form validation. Returns `ZodObject` with `verificationId` and `verificationCode` fields. -

useMultiFactorTotpAuthNumberFormSchema

+ **useMultiFactorTotpAuthNumberFormSchema** Creates a Zod schema for multi-factor TOTP authentication form validation. Returns `ZodObject` with `displayName` field. -

useMultiFactorTotpAuthVerifyFormSchema

+ **useMultiFactorTotpAuthVerifyFormSchema** Creates a Zod schema for multi-factor TOTP verification code form validation. Returns `ZodObject` with `verificationCode` field. -

useRecaptchaVerifier

+ **useRecaptchaVerifier** Creates and manages a reCAPTCHA verifier instance. @@ -1282,169 +1274,167 @@ By default, any missing translations will fallback to English if not specified. Returns `RecaptchaVerifier \| null`. -

Form Hooks

- -

useSignInAuthForm

+ **useSignInAuthForm** Hook for managing sign-in form state and validation. Returns form state and handlers. -

useSignInAuthFormAction

+ **useSignInAuthFormAction** Hook for sign-in form submission action. Returns async action handler. -

useSignUpAuthForm

+ **useSignUpAuthForm** Hook for managing sign-up form state and validation. Returns form state and handlers. -

useSignUpAuthFormAction

+ **useSignUpAuthFormAction** Hook for sign-up form submission action. Returns async action handler. -

useRequireDisplayName

+ **useRequireDisplayName** Hook to check if display name is required for sign-up. Returns `boolean`. -

useForgotPasswordAuthForm

+ **useForgotPasswordAuthForm** Hook for managing forgot password form state and validation. Returns form state and handlers. -

useForgotPasswordAuthFormAction

+ **useForgotPasswordAuthFormAction** Hook for forgot password form submission action. Returns async action handler. -

useEmailLinkAuthForm

+ **useEmailLinkAuthForm** Hook for managing email link auth form state and validation. Returns form state and handlers. -

useEmailLinkAuthFormAction

+ **useEmailLinkAuthFormAction** Hook for email link auth form submission action. Returns async action handler. -

useEmailLinkAuthFormCompleteSignIn

+ **useEmailLinkAuthFormCompleteSignIn** Hook to complete email link authentication. Returns async action handler. -

usePhoneNumberForm

+ **usePhoneNumberForm** Hook for managing phone number form state and validation. Returns form state and handlers. -

usePhoneNumberFormAction

+ **usePhoneNumberFormAction** Hook for phone number form submission action. Returns async action handler. -

useVerifyPhoneNumberForm

+ **useVerifyPhoneNumberForm** Hook for managing phone verification form state and validation. Returns form state and handlers. -

useVerifyPhoneNumberFormAction

+ **useVerifyPhoneNumberFormAction** Hook for phone verification form submission action. Returns async action handler. -

useMultiFactorAssertionCleanup

+ **useMultiFactorAssertionCleanup** Hook for cleaning up multi-factor assertion state. -

useSmsMultiFactorAssertionPhoneFormAction

+ **useSmsMultiFactorAssertionPhoneFormAction** Hook for SMS MFA assertion phone form submission action. Returns async action handler. -

useSmsMultiFactorAssertionVerifyFormAction

+ **useSmsMultiFactorAssertionVerifyFormAction** Hook for SMS MFA assertion verification form submission action. Returns async action handler. -

useSmsMultiFactorEnrollmentPhoneNumberForm

+ **useSmsMultiFactorEnrollmentPhoneNumberForm** Hook for managing SMS MFA enrollment phone number form state. Returns form state and handlers. -

useSmsMultiFactorEnrollmentPhoneAuthFormAction

+ **useSmsMultiFactorEnrollmentPhoneAuthFormAction** Hook for SMS MFA enrollment phone auth form submission action. Returns async action handler. -

useMultiFactorEnrollmentVerifyPhoneNumberForm

+ **useMultiFactorEnrollmentVerifyPhoneNumberForm** Hook for managing MFA enrollment phone verification form state. Returns form state and handlers. -

useMultiFactorEnrollmentVerifyPhoneNumberFormAction

+ **useMultiFactorEnrollmentVerifyPhoneNumberFormAction** Hook for MFA enrollment phone verification form submission action. Returns async action handler. -

useTotpMultiFactorAssertionForm

+ **useTotpMultiFactorAssertionForm** Hook for managing TOTP MFA assertion form state. Returns form state and handlers. -

useTotpMultiFactorAssertionFormAction

+ **useTotpMultiFactorAssertionFormAction** Hook for TOTP MFA assertion form submission action. Returns async action handler. -

useTotpMultiFactorSecretGenerationForm

+ **useTotpMultiFactorSecretGenerationForm** Hook for managing TOTP secret generation form state. Returns form state and handlers. -

useTotpMultiFactorSecretGenerationFormAction

+ **useTotpMultiFactorSecretGenerationFormAction** Hook for TOTP secret generation form submission action. Returns async action handler. -

useMultiFactorEnrollmentVerifyTotpForm

+ **useMultiFactorEnrollmentVerifyTotpForm** Hook for managing MFA enrollment TOTP verification form state. Returns form state and handlers. -

useMultiFactorEnrollmentVerifyTotpFormAction

+ **useMultiFactorEnrollmentVerifyTotpFormAction** Hook for MFA enrollment TOTP verification form submission action. Returns async action handler. -

useSignInWithProvider

+ **useSignInWithProvider** Hook for OAuth provider sign-in. @@ -1454,27 +1444,23 @@ By default, any missing translations will fallback to English if not specified. Returns async action handler. -

Utility Hooks

- -

useCountries

+ **useCountries** Hook to get list of countries for country selector. Returns array of country data. -

useDefaultCountry

+ **useDefaultCountry** Hook to get default country for country selector. Returns country data or `undefined`. -

Context & Types

- -

PolicyContext

+ **PolicyContext** React context for policy configuration. -

PolicyProps

+ **PolicyProps** Type for policy configuration. @@ -1484,11 +1470,11 @@ By default, any missing translations will fallback to English if not specified. | privacyPolicyUrl | `PolicyURL` | URL to privacy policy | | onNavigate | `(url: PolicyURL) => void?` | Optional navigation handler | -

PolicyURL

+ **PolicyURL** Type alias: `string \| URL` -

FirebaseUIProviderProps

+ **FirebaseUIProviderProps** Type for `FirebaseUIProvider` component props. @@ -1536,7 +1522,7 @@ By default, any missing translations will fallback to English if not specified.
@invertase/firebaseui-angular -

provideFirebaseUI

+ **provideFirebaseUI** Provider function that configures Firebase UI for your Angular application. @@ -1546,7 +1532,7 @@ By default, any missing translations will fallback to English if not specified. Returns `EnvironmentProviders`. -

provideFirebaseUIPolicies

+ **provideFirebaseUIPolicies** Provider function that configures policies (terms of service and privacy policy) for Firebase UI. @@ -1556,9 +1542,7 @@ By default, any missing translations will fallback to English if not specified. Returns `EnvironmentProviders`. -

Form Components

- -

SignInAuthFormComponent

+ **SignInAuthFormComponent** Selector: `fui-sign-in-auth-form` @@ -1570,7 +1554,7 @@ By default, any missing translations will fallback to English if not specified. | forgotPassword | `EventEmitter` | Emitted when forgot password link is clicked | | signUp | `EventEmitter` | Emitted when sign-up link is clicked | -

SignUpAuthFormComponent

+ **SignUpAuthFormComponent** Selector: `fui-sign-up-auth-form` @@ -1581,7 +1565,7 @@ By default, any missing translations will fallback to English if not specified. | signUp | `EventEmitter` | Emitted when sign-up succeeds | | signIn | `EventEmitter` | Emitted when sign-in link is clicked | -

ForgotPasswordAuthFormComponent

+ **ForgotPasswordAuthFormComponent** Selector: `fui-forgot-password-auth-form` @@ -1592,7 +1576,7 @@ By default, any missing translations will fallback to English if not specified. | passwordSent | `EventEmitter` | Emitted when password reset email is sent | | backToSignIn | `EventEmitter` | Emitted when back button is clicked | -

EmailLinkAuthFormComponent

+ **EmailLinkAuthFormComponent** Selector: `fui-email-link-auth-form` @@ -1603,7 +1587,7 @@ By default, any missing translations will fallback to English if not specified. | emailSent | `EventEmitter` | Emitted when sign-in link email is sent | | signIn | `EventEmitter` | Emitted when sign-in succeeds (via link or MFA) | -

PhoneAuthFormComponent

+ **PhoneAuthFormComponent** Selector: `fui-phone-auth-form` @@ -1613,7 +1597,7 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | signIn | `EventEmitter` | Emitted when phone verification succeeds | -

MultiFactorAuthAssertionFormComponent

+ **MultiFactorAuthAssertionFormComponent** Selector: `fui-multi-factor-auth-assertion-form` @@ -1623,7 +1607,7 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | onSuccess | `EventEmitter` | Emitted when MFA assertion succeeds | -

SmsMultiFactorAssertionFormComponent

+ **SmsMultiFactorAssertionFormComponent** Selector: `fui-sms-multi-factor-assertion-form` @@ -1637,19 +1621,19 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | onSuccess | `EventEmitter` | Emitted when SMS MFA assertion succeeds | -

SmsMultiFactorAssertionPhoneFormComponent

+ **SmsMultiFactorAssertionPhoneFormComponent** Selector: `fui-sms-multi-factor-assertion-phone-form` Phone number form component for SMS MFA assertion. -

SmsMultiFactorAssertionVerifyFormComponent

+ **SmsMultiFactorAssertionVerifyFormComponent** Selector: `fui-sms-multi-factor-assertion-verify-form` Verification code form component for SMS MFA assertion. -

TotpMultiFactorAssertionFormComponent

+ **TotpMultiFactorAssertionFormComponent** Selector: `fui-totp-multi-factor-assertion-form` @@ -1663,9 +1647,7 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | onSuccess | `EventEmitter` | Emitted when TOTP MFA assertion succeeds | -

Screen Components

- -

SignInAuthScreenComponent

+ **SignInAuthScreenComponent** Selector: `fui-sign-in-auth-screen` @@ -1676,7 +1658,7 @@ By default, any missing translations will fallback to English if not specified. | signIn | `EventEmitter` | Emitted when sign-in succeeds | | signUp | `EventEmitter` | Emitted when sign-up link is clicked | -

SignUpAuthScreenComponent

+ **SignUpAuthScreenComponent** Selector: `fui-sign-up-auth-screen` @@ -1687,7 +1669,7 @@ By default, any missing translations will fallback to English if not specified. | signUp | `EventEmitter` | Emitted when sign-up succeeds | | signIn | `EventEmitter` | Emitted when sign-in link is clicked | -

ForgotPasswordAuthScreenComponent

+ **ForgotPasswordAuthScreenComponent** Selector: `fui-forgot-password-auth-screen` @@ -1698,7 +1680,7 @@ By default, any missing translations will fallback to English if not specified. | passwordSent | `EventEmitter` | Emitted when password reset email is sent | | backToSignIn | `EventEmitter` | Emitted when back button is clicked | -

EmailLinkAuthScreenComponent

+ **EmailLinkAuthScreenComponent** Selector: `fui-email-link-auth-screen` @@ -1709,7 +1691,7 @@ By default, any missing translations will fallback to English if not specified. | emailSent | `EventEmitter` | Emitted when sign-in link email is sent | | signIn | `EventEmitter` | Emitted when sign-in succeeds | -

PhoneAuthScreenComponent

+ **PhoneAuthScreenComponent** Selector: `fui-phone-auth-screen` @@ -1719,7 +1701,7 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | signIn | `EventEmitter` | Emitted when phone verification succeeds | -

OAuthScreenComponent

+ **OAuthScreenComponent** Selector: `fui-oauth-screen` @@ -1729,9 +1711,7 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | onSignIn | `EventEmitter` | Emitted when OAuth sign-in succeeds | -

OAuth Components

- -

OAuthButtonComponent

+ **OAuthButtonComponent** Selector: `fui-oauth-button` @@ -1741,45 +1721,43 @@ By default, any missing translations will fallback to English if not specified. |-------|:----:|-------------| | provider | `AuthProvider` | Firebase Auth provider instance | -

GoogleSignInButtonComponent

+ **GoogleSignInButtonComponent** Selector: `fui-google-sign-in-button` Google OAuth sign-in button component. -

AppleSignInButtonComponent

+ **AppleSignInButtonComponent** Selector: `fui-apple-sign-in-button` Apple OAuth sign-in button component. -

FacebookSignInButtonComponent

+ **FacebookSignInButtonComponent** Selector: `fui-facebook-sign-in-button` Facebook OAuth sign-in button component. -

GithubSignInButtonComponent

+ **GithubSignInButtonComponent** Selector: `fui-github-sign-in-button` GitHub OAuth sign-in button component. -

MicrosoftSignInButtonComponent

+ **MicrosoftSignInButtonComponent** Selector: `fui-microsoft-sign-in-button` Microsoft OAuth sign-in button component. -

TwitterSignInButtonComponent

+ **TwitterSignInButtonComponent** Selector: `fui-twitter-sign-in-button` Twitter OAuth sign-in button component. -

UI Components

- -

ButtonComponent

+ **ButtonComponent** Selector: `button[fui-button]` @@ -1789,37 +1767,37 @@ By default, any missing translations will fallback to English if not specified. |-------|:----:|-------------| | variant | `"primary" \| "secondary" \| "outline"?` | Button style variant | -

CardComponent

+ **CardComponent** Selector: `fui-card` Card container component. -

CardHeaderComponent

+ **CardHeaderComponent** Selector: `fui-card-header` Card header component. -

CardTitleComponent

+ **CardTitleComponent** Selector: `fui-card-title` Card title component. -

CardSubtitleComponent

+ **CardSubtitleComponent** Selector: `fui-card-subtitle` Card subtitle component. -

CardContentComponent

+ **CardContentComponent** Selector: `fui-card-content` Card content component. -

CountrySelectorComponent

+ **CountrySelectorComponent** Selector: `fui-country-selector` @@ -1833,45 +1811,43 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | valueChange | `EventEmitter` | Emitted when country selection changes | -

DividerComponent

+ **DividerComponent** Selector: `fui-divider` Divider component. -

PoliciesComponent

+ **PoliciesComponent** Selector: `fui-policies` Component that renders terms of service and privacy policy links. Automatically rendered when policies are provided via `provideFirebaseUIPolicies`. -

RedirectErrorComponent

+ **RedirectErrorComponent** Selector: `fui-redirect-error` Component that displays redirect errors from Firebase UI authentication flow. -

ContentComponent

+ **ContentComponent** Selector: `fui-content` Content wrapper component. -

Injection Functions

- -

injectUI

+ **injectUI** Injects the Firebase UI configuration as a read-only signal. Returns `ReadonlySignal`. -

injectRedirectError

+ **injectRedirectError** Injects the redirect error from the UI store as a signal. Returns `Signal`. -

injectTranslation

+ **injectTranslation** Injects a translated string for a given category and key. @@ -1882,73 +1858,73 @@ By default, any missing translations will fallback to English if not specified. Returns `Signal`. -

injectSignInAuthFormSchema

+ **injectSignInAuthFormSchema** Injects a Zod schema for sign-in form validation. Returns `Signal` with `email` and `password` fields. -

injectSignUpAuthFormSchema

+ **injectSignUpAuthFormSchema** Injects a Zod schema for sign-up form validation. Returns `Signal` with `email`, `password`, and optionally `displayName` fields. -

injectForgotPasswordAuthFormSchema

+ **injectForgotPasswordAuthFormSchema** Injects a Zod schema for forgot password form validation. Returns `Signal` with `email` field. -

injectEmailLinkAuthFormSchema

+ **injectEmailLinkAuthFormSchema** Injects a Zod schema for email link authentication form validation. Returns `Signal` with `email` field. -

injectPhoneAuthFormSchema

+ **injectPhoneAuthFormSchema** Injects a Zod schema for phone number input form validation. Returns `Signal` with `phoneNumber` field. -

injectPhoneAuthVerifyFormSchema

+ **injectPhoneAuthVerifyFormSchema** Injects a Zod schema for phone verification code form validation. Returns `Signal` with `verificationId` and `verificationCode` fields. -

injectMultiFactorPhoneAuthNumberFormSchema

+ **injectMultiFactorPhoneAuthNumberFormSchema** Injects a Zod schema for multi-factor phone authentication number form validation. Returns `Signal` with `phoneNumber` and `displayName` fields. -

injectMultiFactorPhoneAuthAssertionFormSchema

+ **injectMultiFactorPhoneAuthAssertionFormSchema** Injects a Zod schema for multi-factor phone authentication assertion form validation. Returns `Signal` with `phoneNumber` field. -

injectMultiFactorPhoneAuthVerifyFormSchema

+ **injectMultiFactorPhoneAuthVerifyFormSchema** Injects a Zod schema for multi-factor phone authentication verification form validation. Returns `Signal` with `verificationId` and `verificationCode` fields. -

injectMultiFactorTotpAuthNumberFormSchema

+ **injectMultiFactorTotpAuthNumberFormSchema** Injects a Zod schema for multi-factor TOTP authentication form validation. Returns `Signal` with `displayName` field. -

injectMultiFactorTotpAuthVerifyFormSchema

+ **injectMultiFactorTotpAuthVerifyFormSchema** Injects a Zod schema for multi-factor TOTP verification code form validation. Returns `Signal` with `verificationCode` field. -

injectRecaptchaVerifier

+ **injectRecaptchaVerifier** Injects a reCAPTCHA verifier instance. @@ -1958,19 +1934,19 @@ By default, any missing translations will fallback to English if not specified. Returns `Signal`. -

injectPolicies

+ **injectPolicies** Injects the policy configuration. Returns `PolicyConfig \| null`. -

injectCountries

+ **injectCountries** Injects the list of countries for country selector. Returns `Signal`. -

injectDefaultCountry

+ **injectDefaultCountry** Injects the default country for country selector. From d12122010767a3ef3e51d3870aad50b87becaced Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Mon, 10 Nov 2025 14:56:48 +0000 Subject: [PATCH 8/8] - --- README.md | 364 +++++++++++++++++++++++++++--------------------------- 1 file changed, 182 insertions(+), 182 deletions(-) diff --git a/README.md b/README.md index 52909f47a..f36dce302 100644 --- a/README.md +++ b/README.md @@ -486,7 +486,7 @@ By default, any missing translations will fallback to English if not specified.
@invertase/firebaseui-core -

initializeUI

+ **`initializeUI`** Initalizes a new `FirebaseUIStore` instance. @@ -497,7 +497,7 @@ By default, any missing translations will fallback to English if not specified. Returns `FirebaseUIStore`. -

signInWithEmailAndPassword

+ **`signInWithEmailAndPassword`** Signs the user in with an email and password. @@ -509,7 +509,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

createUserWithEmailAndPassword

+ **`createUserWithEmailAndPassword`** Creates a new user account with an email and password. @@ -522,7 +522,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

verifyPhoneNumber

+ **`verifyPhoneNumber`** Verifies a phone number and sends a verification code. @@ -536,7 +536,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise` (verification ID). -

confirmPhoneNumber

+ **`confirmPhoneNumber`** Confirms a phone number verification with the verification code. @@ -548,7 +548,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

sendPasswordResetEmail

+ **`sendPasswordResetEmail`** Sends a password reset email to the user. @@ -559,7 +559,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

sendSignInLinkToEmail

+ **`sendSignInLinkToEmail`** Sends a sign-in link to the user's email address. @@ -570,7 +570,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

signInWithEmailLink

+ **`signInWithEmailLink`** Signs in a user with an email link. @@ -582,7 +582,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

signInWithCredential

+ **`signInWithCredential`** Signs in a user with an authentication credential. @@ -593,7 +593,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

signInWithCustomToken

+ **`signInWithCustomToken`** Signs in a user with a custom token. @@ -604,7 +604,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

signInAnonymously

+ **`signInAnonymously`** Signs in a user anonymously. @@ -614,7 +614,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

signInWithProvider

+ **`signInWithProvider`** Signs in a user with an OAuth provider (e.g., Google, Facebook, etc.). @@ -625,7 +625,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

completeEmailLinkSignIn

+ **`completeEmailLinkSignIn`** Completes the email link sign-in flow by checking if the current URL is a valid email link. @@ -636,7 +636,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

generateTotpQrCode

+ **`generateTotpQrCode`** Generates a QR code data URL for TOTP (Time-based One-Time Password) enrollment. @@ -649,7 +649,7 @@ By default, any missing translations will fallback to English if not specified. Returns `string` (data URL of the QR code). -

signInWithMultiFactorAssertion

+ **`signInWithMultiFactorAssertion`** Signs in a user with a multi-factor authentication assertion. @@ -660,7 +660,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

enrollWithMultiFactorAssertion

+ **`enrollWithMultiFactorAssertion`** Enrolls a multi-factor authentication method for the current user. @@ -672,7 +672,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

generateTotpSecret

+ **`generateTotpSecret`** Generates a TOTP secret for multi-factor authentication enrollment. @@ -682,13 +682,13 @@ By default, any missing translations will fallback to English if not specified. Returns `Promise`. -

autoAnonymousLogin

+ **`autoAnonymousLogin`** Automatically signs in users anonymously when the UI initializes. Returns `Behavior<"autoAnonymousLogin">`. -

autoUpgradeAnonymousUsers

+ **`autoUpgradeAnonymousUsers`** Automatically upgrades anonymous users to permanent accounts when they sign in with a credential or provider. @@ -699,7 +699,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Behavior<"autoUpgradeAnonymousCredential" | "autoUpgradeAnonymousProvider" | "autoUpgradeAnonymousUserRedirectHandler">`. -

recaptchaVerification

+ **`recaptchaVerification`** Configures reCAPTCHA verification for phone authentication. @@ -709,19 +709,19 @@ By default, any missing translations will fallback to English if not specified. Returns `Behavior<"recaptchaVerification">`. -

providerRedirectStrategy

+ **`providerRedirectStrategy`** Configures OAuth providers to use redirect flow (full page redirect). Returns `Behavior<"providerSignInStrategy" | "providerLinkStrategy">`. -

providerPopupStrategy

+ **`providerPopupStrategy`** Configures OAuth providers to use popup flow (popup window). Returns `Behavior<"providerSignInStrategy" | "providerLinkStrategy">`. -

oneTapSignIn

+ **`oneTapSignIn`** Enables Google One Tap sign-in. @@ -731,13 +731,13 @@ By default, any missing translations will fallback to English if not specified. Returns `Behavior<"oneTapSignIn">`. -

requireDisplayName

+ **`requireDisplayName`** Requires users to provide a display name during registration. Returns `Behavior<"requireDisplayName">`. -

countryCodes

+ **`countryCodes`** Configures country code handling for phone number input. @@ -747,7 +747,7 @@ By default, any missing translations will fallback to English if not specified. Returns `Behavior<"countryCodes">`. -

hasBehavior

+ **`hasBehavior`** Checks if a behavior is enabled on a Firebase UI instance. @@ -758,7 +758,7 @@ By default, any missing translations will fallback to English if not specified. Returns `boolean`. -

getBehavior

+ **`getBehavior`** Gets a behavior handler from a Firebase UI instance. @@ -769,19 +769,19 @@ By default, any missing translations will fallback to English if not specified. Returns the behavior handler function. -

defaultBehaviors

+ **`defaultBehaviors`** The default behaviors that are automatically included in a Firebase UI instance. Includes `recaptchaVerification`, `providerRedirectStrategy`, and `countryCodes`. Type: `Behavior<"recaptchaVerification">`. -

countryData

+ **`countryData`** An array of country data objects containing name, dial code, country code, and emoji for all supported countries. Type: `readonly CountryData[]`. -

formatPhoneNumber

+ **`formatPhoneNumber`** Formats a phone number according to the specified country data. @@ -792,11 +792,11 @@ By default, any missing translations will fallback to English if not specified. Returns `string` (formatted phone number in E164 format). -

FirebaseUIError

+ **`FirebaseUIError`** A custom error class that extends FirebaseError with localized error messages. -

handleFirebaseError

+ **`handleFirebaseError`** Handles Firebase errors and converts them to FirebaseUIError with localized messages. Also handles special cases like account linking and multi-factor authentication. @@ -807,7 +807,7 @@ By default, any missing translations will fallback to English if not specified. Throws `FirebaseUIError`. -

getTranslation

+ **`getTranslation`** Gets a translated string for a given category and key. @@ -820,7 +820,7 @@ By default, any missing translations will fallback to English if not specified. Returns `string`. -

createSignInAuthFormSchema

+ **`createSignInAuthFormSchema`** Creates a Zod schema for email/password sign-in form validation. @@ -830,7 +830,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `email` and `password` fields. -

createSignUpAuthFormSchema

+ **`createSignUpAuthFormSchema`** Creates a Zod schema for email/password sign-up form validation. @@ -840,7 +840,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `email`, `password`, and optionally `displayName` fields. -

createForgotPasswordAuthFormSchema

+ **`createForgotPasswordAuthFormSchema`** Creates a Zod schema for forgot password form validation. @@ -850,7 +850,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `email` field. -

createEmailLinkAuthFormSchema

+ **`createEmailLinkAuthFormSchema`** Creates a Zod schema for email link authentication form validation. @@ -860,7 +860,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `email` field. -

createPhoneAuthNumberFormSchema

+ **`createPhoneAuthNumberFormSchema`** Creates a Zod schema for phone number input form validation. @@ -870,7 +870,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `phoneNumber` field. -

createPhoneAuthVerifyFormSchema

+ **`createPhoneAuthVerifyFormSchema`** Creates a Zod schema for phone verification code form validation. @@ -880,7 +880,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `verificationId` and `verificationCode` fields. -

createMultiFactorPhoneAuthNumberFormSchema

+ **`createMultiFactorPhoneAuthNumberFormSchema`** Creates a Zod schema for multi-factor phone authentication number form validation. @@ -890,7 +890,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `phoneNumber` and `displayName` fields. -

createMultiFactorPhoneAuthAssertionFormSchema

+ **`createMultiFactorPhoneAuthAssertionFormSchema`** Creates a Zod schema for multi-factor phone authentication assertion form validation. @@ -900,7 +900,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `phoneNumber` field. -

createMultiFactorPhoneAuthVerifyFormSchema

+ **`createMultiFactorPhoneAuthVerifyFormSchema`** Creates a Zod schema for multi-factor phone authentication verification form validation. @@ -910,7 +910,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `verificationId` and `verificationCode` fields. -

createMultiFactorTotpAuthNumberFormSchema

+ **`createMultiFactorTotpAuthNumberFormSchema`** Creates a Zod schema for multi-factor TOTP authentication form validation. @@ -920,7 +920,7 @@ By default, any missing translations will fallback to English if not specified. Returns `ZodObject` with `displayName` field. -

createMultiFactorTotpAuthVerifyFormSchema

+ **`createMultiFactorTotpAuthVerifyFormSchema`** Creates a Zod schema for multi-factor TOTP verification code form validation. @@ -935,7 +935,7 @@ By default, any missing translations will fallback to English if not specified.
@invertase/firebaseui-react - **FirebaseUIProvider** + **`FirebaseUIProvider`** Provider component that wraps your application and provides Firebase UI context. @@ -945,7 +945,7 @@ By default, any missing translations will fallback to English if not specified. | policies | `{ termsOfServiceUrl: PolicyURL; privacyPolicyUrl: PolicyURL; onNavigate?: (url: PolicyURL) => void; }?` | Optional policies configuration. If provided, UI components will automatically render the policies. | | children | `React.ReactNode` | Child components | - **SignInAuthForm** + **`SignInAuthForm`** Form component for email/password sign-in. @@ -955,7 +955,7 @@ By default, any missing translations will fallback to English if not specified. | onForgotPasswordClick | `() => void?` | Callback when forgot password link is clicked | | onSignUpClick | `() => void?` | Callback when sign-up link is clicked | - **SignUpAuthForm** + **`SignUpAuthForm`** Form component for email/password sign-up. @@ -964,7 +964,7 @@ By default, any missing translations will fallback to English if not specified. | onSignUp | `(credential: UserCredential) => void?` | Callback when sign-up succeeds | | onSignInClick | `() => void?` | Callback when sign-in link is clicked | - **ForgotPasswordAuthForm** + **`ForgotPasswordAuthForm`** Form component for password reset. @@ -973,7 +973,7 @@ By default, any missing translations will fallback to English if not specified. | onSendPasswordResetEmail | `() => void?` | Callback when password reset email is sent | | onBackClick | `() => void?` | Callback when back button is clicked | - **EmailLinkAuthForm** + **`EmailLinkAuthForm`** Form component for email link authentication. @@ -981,7 +981,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onSendSignInLinkToEmail | `() => void?` | Callback when sign-in link email is sent | - **PhoneAuthForm** + **`PhoneAuthForm`** Form component for phone number authentication. @@ -990,7 +990,7 @@ By default, any missing translations will fallback to English if not specified. | onVerifyPhoneNumber | `() => void?` | Callback when phone number verification is initiated | | onVerifyCode | `(credential: UserCredential) => void?` | Callback when verification code is verified | - **MultiFactorAuthAssertionForm** + **`MultiFactorAuthAssertionForm`** Form component for multi-factor authentication assertion during sign-in. @@ -998,7 +998,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onAssert | `(credential: UserCredential) => void?` | Callback when MFA assertion succeeds | - **MultiFactorAuthEnrollmentForm** + **`MultiFactorAuthEnrollmentForm`** Form component for multi-factor authentication enrollment. @@ -1006,7 +1006,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onEnroll | `() => void?` | Callback when MFA enrollment succeeds | - **SmsMultiFactorAssertionForm** + **`SmsMultiFactorAssertionForm`** Form component for SMS-based multi-factor authentication assertion. @@ -1014,7 +1014,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onAssert | `(credential: UserCredential) => void?` | Callback when SMS MFA assertion succeeds | - **SmsMultiFactorEnrollmentForm** + **`SmsMultiFactorEnrollmentForm`** Form component for SMS-based multi-factor authentication enrollment. @@ -1022,7 +1022,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onEnroll | `() => void?` | Callback when SMS MFA enrollment succeeds | - **TotpMultiFactorAssertionForm** + **`TotpMultiFactorAssertionForm`** Form component for TOTP-based multi-factor authentication assertion. @@ -1030,7 +1030,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onAssert | `(credential: UserCredential) => void?` | Callback when TOTP MFA assertion succeeds | - **TotpMultiFactorEnrollmentForm** + **`TotpMultiFactorEnrollmentForm`** Form component for TOTP-based multi-factor authentication enrollment. @@ -1038,35 +1038,35 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | onEnroll | `() => void?` | Callback when TOTP MFA enrollment succeeds | - **SignInAuthScreen** + **`SignInAuthScreen`** Screen component for email/password sign-in. Extends `SignInAuthFormProps` and accepts `children`. - **SignUpAuthScreen** + **`SignUpAuthScreen`** Screen component for email/password sign-up. Extends `SignUpAuthFormProps` and accepts `children`. - **ForgotPasswordAuthScreen** + **`ForgotPasswordAuthScreen`** Screen component for password reset. Extends `ForgotPasswordAuthFormProps`. - **EmailLinkAuthScreen** + **`EmailLinkAuthScreen`** Screen component for email link authentication. Extends `EmailLinkAuthFormProps` and accepts `children`. - **PhoneAuthScreen** + **`PhoneAuthScreen`** Screen component for phone number authentication. Extends `PhoneAuthFormProps` and accepts `children`. - **MultiFactorAuthAssertionScreen** + **`MultiFactorAuthAssertionScreen`** Screen component for multi-factor authentication assertion. Extends `MultiFactorAuthAssertionFormProps`. - **MultiFactorAuthEnrollmentScreen** + **`MultiFactorAuthEnrollmentScreen`** Screen component for multi-factor authentication enrollment. Extends `MultiFactorAuthEnrollmentFormProps`. - **OAuthScreen** + **`OAuthScreen`** Screen component for OAuth provider sign-in. @@ -1074,7 +1074,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | children | `React.ReactNode?` | Child components | - **OAuthButton** + **`OAuthButton`** Generic OAuth button component. @@ -1084,7 +1084,7 @@ By default, any missing translations will fallback to English if not specified. | themed | `boolean \| string?` | Whether to apply themed styling | | children | `React.ReactNode?` | Button content | - **GoogleSignInButton** + **`GoogleSignInButton`** Google OAuth sign-in button component. @@ -1092,7 +1092,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | themed | `boolean \| string?` | Whether to apply themed styling | - **AppleSignInButton** + **`AppleSignInButton`** Apple OAuth sign-in button component. @@ -1100,7 +1100,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | themed | `boolean \| string?` | Whether to apply themed styling | - **FacebookSignInButton** + **`FacebookSignInButton`** Facebook OAuth sign-in button component. @@ -1108,7 +1108,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | themed | `boolean \| string?` | Whether to apply themed styling | - **GitHubSignInButton** + **`GitHubSignInButton`** GitHub OAuth sign-in button component. @@ -1116,7 +1116,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | themed | `boolean \| string?` | Whether to apply themed styling | - **MicrosoftSignInButton** + **`MicrosoftSignInButton`** Microsoft OAuth sign-in button component. @@ -1124,7 +1124,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | themed | `boolean \| string?` | Whether to apply themed styling | - **TwitterSignInButton** + **`TwitterSignInButton`** Twitter OAuth sign-in button component. @@ -1132,7 +1132,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | themed | `boolean \| string?` | Whether to apply themed styling | - **Button** + **`Button`** Button component with variant support. @@ -1142,7 +1142,7 @@ By default, any missing translations will fallback to English if not specified. | asChild | `boolean?` | Render as child component using Slot | | ...props | `ComponentProps<"button">` | Standard button HTML attributes | - **Card** + **`Card`** Card container component. @@ -1151,23 +1151,23 @@ By default, any missing translations will fallback to English if not specified. | children | `React.ReactNode?` | Card content | | ...props | `ComponentProps<"div">` | Standard div HTML attributes | - **CardHeader** + **`CardHeader`** Card header component. Accepts `children` and standard div props. - **CardTitle** + **`CardTitle`** Card title component. Accepts `children` and standard h2 props. - **CardSubtitle** + **`CardSubtitle`** Card subtitle component. Accepts `children` and standard p props. - **CardContent** + **`CardContent`** Card content component. Accepts `children` and standard div props. - **CountrySelector** + **`CountrySelector`** Country selector component for phone number input. @@ -1175,7 +1175,7 @@ By default, any missing translations will fallback to English if not specified. |------|:----:|-------------| | ...props | `ComponentProps<"div">` | Standard div HTML attributes | - **Divider** + **`Divider`** Divider component. @@ -1184,87 +1184,87 @@ By default, any missing translations will fallback to English if not specified. | children | `React.ReactNode?` | Divider content | | ...props | `ComponentProps<"div">` | Standard div HTML attributes | - **Policies** + **`Policies`** Component that renders terms of service and privacy policy links. Automatically rendered when policies are provided to `FirebaseUIProvider`. - **RedirectError** + **`RedirectError`** Component that displays redirect errors from Firebase UI authentication flow. - **useUI** + **`useUI`** Gets the Firebase UI configuration from context. Returns `FirebaseUI`. - **useRedirectError** + **`useRedirectError`** Gets the redirect error from the UI store. Returns `string | undefined`. - **useSignInAuthFormSchema** + **`useSignInAuthFormSchema`** Creates a Zod schema for sign-in form validation. Returns `ZodObject` with `email` and `password` fields. - **useSignUpAuthFormSchema** + **`useSignUpAuthFormSchema`** Creates a Zod schema for sign-up form validation. Returns `ZodObject` with `email`, `password`, and optionally `displayName` fields. - **useForgotPasswordAuthFormSchema** + **`useForgotPasswordAuthFormSchema`** Creates a Zod schema for forgot password form validation. Returns `ZodObject` with `email` field. - **useEmailLinkAuthFormSchema** + **`useEmailLinkAuthFormSchema`** Creates a Zod schema for email link authentication form validation. Returns `ZodObject` with `email` field. - **usePhoneAuthNumberFormSchema** + **`usePhoneAuthNumberFormSchema`** Creates a Zod schema for phone number input form validation. Returns `ZodObject` with `phoneNumber` field. - **usePhoneAuthVerifyFormSchema** + **`usePhoneAuthVerifyFormSchema`** Creates a Zod schema for phone verification code form validation. Returns `ZodObject` with `verificationId` and `verificationCode` fields. - **useMultiFactorPhoneAuthNumberFormSchema** + **`useMultiFactorPhoneAuthNumberFormSchema`** Creates a Zod schema for multi-factor phone authentication number form validation. Returns `ZodObject` with `phoneNumber` and `displayName` fields. - **useMultiFactorPhoneAuthVerifyFormSchema** + **`useMultiFactorPhoneAuthVerifyFormSchema`** Creates a Zod schema for multi-factor phone authentication verification form validation. Returns `ZodObject` with `verificationId` and `verificationCode` fields. - **useMultiFactorTotpAuthNumberFormSchema** + **`useMultiFactorTotpAuthNumberFormSchema`** Creates a Zod schema for multi-factor TOTP authentication form validation. Returns `ZodObject` with `displayName` field. - **useMultiFactorTotpAuthVerifyFormSchema** + **`useMultiFactorTotpAuthVerifyFormSchema`** Creates a Zod schema for multi-factor TOTP verification code form validation. Returns `ZodObject` with `verificationCode` field. - **useRecaptchaVerifier** + **`useRecaptchaVerifier`** Creates and manages a reCAPTCHA verifier instance. @@ -1274,167 +1274,167 @@ By default, any missing translations will fallback to English if not specified. Returns `RecaptchaVerifier \| null`. - **useSignInAuthForm** + **`useSignInAuthForm`** Hook for managing sign-in form state and validation. Returns form state and handlers. - **useSignInAuthFormAction** + **`useSignInAuthFormAction`** Hook for sign-in form submission action. Returns async action handler. - **useSignUpAuthForm** + **`useSignUpAuthForm`** Hook for managing sign-up form state and validation. Returns form state and handlers. - **useSignUpAuthFormAction** + **`useSignUpAuthFormAction`** Hook for sign-up form submission action. Returns async action handler. - **useRequireDisplayName** + **`useRequireDisplayName`** Hook to check if display name is required for sign-up. Returns `boolean`. - **useForgotPasswordAuthForm** + **`useForgotPasswordAuthForm`** Hook for managing forgot password form state and validation. Returns form state and handlers. - **useForgotPasswordAuthFormAction** + **`useForgotPasswordAuthFormAction`** Hook for forgot password form submission action. Returns async action handler. - **useEmailLinkAuthForm** + **`useEmailLinkAuthForm`** Hook for managing email link auth form state and validation. Returns form state and handlers. - **useEmailLinkAuthFormAction** + **`useEmailLinkAuthFormAction`** Hook for email link auth form submission action. Returns async action handler. - **useEmailLinkAuthFormCompleteSignIn** + **`useEmailLinkAuthFormCompleteSignIn`** Hook to complete email link authentication. Returns async action handler. - **usePhoneNumberForm** + **`usePhoneNumberForm`** Hook for managing phone number form state and validation. Returns form state and handlers. - **usePhoneNumberFormAction** + **`usePhoneNumberFormAction`** Hook for phone number form submission action. Returns async action handler. - **useVerifyPhoneNumberForm** + **`useVerifyPhoneNumberForm`** Hook for managing phone verification form state and validation. Returns form state and handlers. - **useVerifyPhoneNumberFormAction** + **`useVerifyPhoneNumberFormAction`** Hook for phone verification form submission action. Returns async action handler. - **useMultiFactorAssertionCleanup** + **`useMultiFactorAssertionCleanup`** Hook for cleaning up multi-factor assertion state. - **useSmsMultiFactorAssertionPhoneFormAction** + **`useSmsMultiFactorAssertionPhoneFormAction`** Hook for SMS MFA assertion phone form submission action. Returns async action handler. - **useSmsMultiFactorAssertionVerifyFormAction** + **`useSmsMultiFactorAssertionVerifyFormAction`** Hook for SMS MFA assertion verification form submission action. Returns async action handler. - **useSmsMultiFactorEnrollmentPhoneNumberForm** + **`useSmsMultiFactorEnrollmentPhoneNumberForm`** Hook for managing SMS MFA enrollment phone number form state. Returns form state and handlers. - **useSmsMultiFactorEnrollmentPhoneAuthFormAction** + **`useSmsMultiFactorEnrollmentPhoneAuthFormAction`** Hook for SMS MFA enrollment phone auth form submission action. Returns async action handler. - **useMultiFactorEnrollmentVerifyPhoneNumberForm** + **`useMultiFactorEnrollmentVerifyPhoneNumberForm`** Hook for managing MFA enrollment phone verification form state. Returns form state and handlers. - **useMultiFactorEnrollmentVerifyPhoneNumberFormAction** + **`useMultiFactorEnrollmentVerifyPhoneNumberFormAction`** Hook for MFA enrollment phone verification form submission action. Returns async action handler. - **useTotpMultiFactorAssertionForm** + **`useTotpMultiFactorAssertionForm`** Hook for managing TOTP MFA assertion form state. Returns form state and handlers. - **useTotpMultiFactorAssertionFormAction** + **`useTotpMultiFactorAssertionFormAction`** Hook for TOTP MFA assertion form submission action. Returns async action handler. - **useTotpMultiFactorSecretGenerationForm** + **`useTotpMultiFactorSecretGenerationForm`** Hook for managing TOTP secret generation form state. Returns form state and handlers. - **useTotpMultiFactorSecretGenerationFormAction** + **`useTotpMultiFactorSecretGenerationFormAction`** Hook for TOTP secret generation form submission action. Returns async action handler. - **useMultiFactorEnrollmentVerifyTotpForm** + **`useMultiFactorEnrollmentVerifyTotpForm`** Hook for managing MFA enrollment TOTP verification form state. Returns form state and handlers. - **useMultiFactorEnrollmentVerifyTotpFormAction** + **`useMultiFactorEnrollmentVerifyTotpFormAction`** Hook for MFA enrollment TOTP verification form submission action. Returns async action handler. - **useSignInWithProvider** + **`useSignInWithProvider`** Hook for OAuth provider sign-in. @@ -1444,23 +1444,23 @@ By default, any missing translations will fallback to English if not specified. Returns async action handler. - **useCountries** + **`useCountries`** Hook to get list of countries for country selector. Returns array of country data. - **useDefaultCountry** + **`useDefaultCountry`** Hook to get default country for country selector. Returns country data or `undefined`. - **PolicyContext** + **`PolicyContext`** React context for policy configuration. - **PolicyProps** + **`PolicyProps`** Type for policy configuration. @@ -1470,11 +1470,11 @@ By default, any missing translations will fallback to English if not specified. | privacyPolicyUrl | `PolicyURL` | URL to privacy policy | | onNavigate | `(url: PolicyURL) => void?` | Optional navigation handler | - **PolicyURL** + **`PolicyURL`** Type alias: `string \| URL` - **FirebaseUIProviderProps** + **`FirebaseUIProviderProps`** Type for `FirebaseUIProvider` component props. @@ -1522,7 +1522,7 @@ By default, any missing translations will fallback to English if not specified.
@invertase/firebaseui-angular - **provideFirebaseUI** + **`provideFirebaseUI`** Provider function that configures Firebase UI for your Angular application. @@ -1532,7 +1532,7 @@ By default, any missing translations will fallback to English if not specified. Returns `EnvironmentProviders`. - **provideFirebaseUIPolicies** + **`provideFirebaseUIPolicies`** Provider function that configures policies (terms of service and privacy policy) for Firebase UI. @@ -1542,7 +1542,7 @@ By default, any missing translations will fallback to English if not specified. Returns `EnvironmentProviders`. - **SignInAuthFormComponent** + **`SignInAuthFormComponent`** Selector: `fui-sign-in-auth-form` @@ -1554,7 +1554,7 @@ By default, any missing translations will fallback to English if not specified. | forgotPassword | `EventEmitter` | Emitted when forgot password link is clicked | | signUp | `EventEmitter` | Emitted when sign-up link is clicked | - **SignUpAuthFormComponent** + **`SignUpAuthFormComponent`** Selector: `fui-sign-up-auth-form` @@ -1565,7 +1565,7 @@ By default, any missing translations will fallback to English if not specified. | signUp | `EventEmitter` | Emitted when sign-up succeeds | | signIn | `EventEmitter` | Emitted when sign-in link is clicked | - **ForgotPasswordAuthFormComponent** + **`ForgotPasswordAuthFormComponent`** Selector: `fui-forgot-password-auth-form` @@ -1576,7 +1576,7 @@ By default, any missing translations will fallback to English if not specified. | passwordSent | `EventEmitter` | Emitted when password reset email is sent | | backToSignIn | `EventEmitter` | Emitted when back button is clicked | - **EmailLinkAuthFormComponent** + **`EmailLinkAuthFormComponent`** Selector: `fui-email-link-auth-form` @@ -1587,7 +1587,7 @@ By default, any missing translations will fallback to English if not specified. | emailSent | `EventEmitter` | Emitted when sign-in link email is sent | | signIn | `EventEmitter` | Emitted when sign-in succeeds (via link or MFA) | - **PhoneAuthFormComponent** + **`PhoneAuthFormComponent`** Selector: `fui-phone-auth-form` @@ -1597,7 +1597,7 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | signIn | `EventEmitter` | Emitted when phone verification succeeds | - **MultiFactorAuthAssertionFormComponent** + **`MultiFactorAuthAssertionFormComponent`** Selector: `fui-multi-factor-auth-assertion-form` @@ -1607,7 +1607,7 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | onSuccess | `EventEmitter` | Emitted when MFA assertion succeeds | - **SmsMultiFactorAssertionFormComponent** + **`SmsMultiFactorAssertionFormComponent`** Selector: `fui-sms-multi-factor-assertion-form` @@ -1621,19 +1621,19 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | onSuccess | `EventEmitter` | Emitted when SMS MFA assertion succeeds | - **SmsMultiFactorAssertionPhoneFormComponent** + **`SmsMultiFactorAssertionPhoneFormComponent`** Selector: `fui-sms-multi-factor-assertion-phone-form` Phone number form component for SMS MFA assertion. - **SmsMultiFactorAssertionVerifyFormComponent** + **`SmsMultiFactorAssertionVerifyFormComponent`** Selector: `fui-sms-multi-factor-assertion-verify-form` Verification code form component for SMS MFA assertion. - **TotpMultiFactorAssertionFormComponent** + **`TotpMultiFactorAssertionFormComponent`** Selector: `fui-totp-multi-factor-assertion-form` @@ -1647,7 +1647,7 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | onSuccess | `EventEmitter` | Emitted when TOTP MFA assertion succeeds | - **SignInAuthScreenComponent** + **`SignInAuthScreenComponent`** Selector: `fui-sign-in-auth-screen` @@ -1658,7 +1658,7 @@ By default, any missing translations will fallback to English if not specified. | signIn | `EventEmitter` | Emitted when sign-in succeeds | | signUp | `EventEmitter` | Emitted when sign-up link is clicked | - **SignUpAuthScreenComponent** + **`SignUpAuthScreenComponent`** Selector: `fui-sign-up-auth-screen` @@ -1669,7 +1669,7 @@ By default, any missing translations will fallback to English if not specified. | signUp | `EventEmitter` | Emitted when sign-up succeeds | | signIn | `EventEmitter` | Emitted when sign-in link is clicked | - **ForgotPasswordAuthScreenComponent** + **`ForgotPasswordAuthScreenComponent`** Selector: `fui-forgot-password-auth-screen` @@ -1680,7 +1680,7 @@ By default, any missing translations will fallback to English if not specified. | passwordSent | `EventEmitter` | Emitted when password reset email is sent | | backToSignIn | `EventEmitter` | Emitted when back button is clicked | - **EmailLinkAuthScreenComponent** + **`EmailLinkAuthScreenComponent`** Selector: `fui-email-link-auth-screen` @@ -1691,7 +1691,7 @@ By default, any missing translations will fallback to English if not specified. | emailSent | `EventEmitter` | Emitted when sign-in link email is sent | | signIn | `EventEmitter` | Emitted when sign-in succeeds | - **PhoneAuthScreenComponent** + **`PhoneAuthScreenComponent`** Selector: `fui-phone-auth-screen` @@ -1701,7 +1701,7 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | signIn | `EventEmitter` | Emitted when phone verification succeeds | - **OAuthScreenComponent** + **`OAuthScreenComponent`** Selector: `fui-oauth-screen` @@ -1711,7 +1711,7 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | onSignIn | `EventEmitter` | Emitted when OAuth sign-in succeeds | - **OAuthButtonComponent** + **`OAuthButtonComponent`** Selector: `fui-oauth-button` @@ -1721,43 +1721,43 @@ By default, any missing translations will fallback to English if not specified. |-------|:----:|-------------| | provider | `AuthProvider` | Firebase Auth provider instance | - **GoogleSignInButtonComponent** + **`GoogleSignInButtonComponent`** Selector: `fui-google-sign-in-button` Google OAuth sign-in button component. - **AppleSignInButtonComponent** + **`AppleSignInButtonComponent`** Selector: `fui-apple-sign-in-button` Apple OAuth sign-in button component. - **FacebookSignInButtonComponent** + **`FacebookSignInButtonComponent`** Selector: `fui-facebook-sign-in-button` Facebook OAuth sign-in button component. - **GithubSignInButtonComponent** + **`GithubSignInButtonComponent`** Selector: `fui-github-sign-in-button` GitHub OAuth sign-in button component. - **MicrosoftSignInButtonComponent** + **`MicrosoftSignInButtonComponent`** Selector: `fui-microsoft-sign-in-button` Microsoft OAuth sign-in button component. - **TwitterSignInButtonComponent** + **`TwitterSignInButtonComponent`** Selector: `fui-twitter-sign-in-button` Twitter OAuth sign-in button component. - **ButtonComponent** + **`ButtonComponent`** Selector: `button[fui-button]` @@ -1767,37 +1767,37 @@ By default, any missing translations will fallback to English if not specified. |-------|:----:|-------------| | variant | `"primary" \| "secondary" \| "outline"?` | Button style variant | - **CardComponent** + **`CardComponent`** Selector: `fui-card` Card container component. - **CardHeaderComponent** + **`CardHeaderComponent`** Selector: `fui-card-header` Card header component. - **CardTitleComponent** + **`CardTitleComponent`** Selector: `fui-card-title` Card title component. - **CardSubtitleComponent** + **`CardSubtitleComponent`** Selector: `fui-card-subtitle` Card subtitle component. - **CardContentComponent** + **`CardContentComponent`** Selector: `fui-card-content` Card content component. - **CountrySelectorComponent** + **`CountrySelectorComponent`** Selector: `fui-country-selector` @@ -1811,43 +1811,43 @@ By default, any missing translations will fallback to English if not specified. |--------|:----:|-------------| | valueChange | `EventEmitter` | Emitted when country selection changes | - **DividerComponent** + **`DividerComponent`** Selector: `fui-divider` Divider component. - **PoliciesComponent** + **`PoliciesComponent`** Selector: `fui-policies` Component that renders terms of service and privacy policy links. Automatically rendered when policies are provided via `provideFirebaseUIPolicies`. - **RedirectErrorComponent** + **`RedirectErrorComponent`** Selector: `fui-redirect-error` Component that displays redirect errors from Firebase UI authentication flow. - **ContentComponent** + **`ContentComponent`** Selector: `fui-content` Content wrapper component. - **injectUI** + **`injectUI`** Injects the Firebase UI configuration as a read-only signal. Returns `ReadonlySignal`. - **injectRedirectError** + **`injectRedirectError`** Injects the redirect error from the UI store as a signal. Returns `Signal`. - **injectTranslation** + **`injectTranslation`** Injects a translated string for a given category and key. @@ -1858,73 +1858,73 @@ By default, any missing translations will fallback to English if not specified. Returns `Signal`. - **injectSignInAuthFormSchema** + **`injectSignInAuthFormSchema`** Injects a Zod schema for sign-in form validation. Returns `Signal` with `email` and `password` fields. - **injectSignUpAuthFormSchema** + **`injectSignUpAuthFormSchema`** Injects a Zod schema for sign-up form validation. Returns `Signal` with `email`, `password`, and optionally `displayName` fields. - **injectForgotPasswordAuthFormSchema** + **`injectForgotPasswordAuthFormSchema`** Injects a Zod schema for forgot password form validation. Returns `Signal` with `email` field. - **injectEmailLinkAuthFormSchema** + **`injectEmailLinkAuthFormSchema`** Injects a Zod schema for email link authentication form validation. Returns `Signal` with `email` field. - **injectPhoneAuthFormSchema** + **`injectPhoneAuthFormSchema`** Injects a Zod schema for phone number input form validation. Returns `Signal` with `phoneNumber` field. - **injectPhoneAuthVerifyFormSchema** + **`injectPhoneAuthVerifyFormSchema`** Injects a Zod schema for phone verification code form validation. Returns `Signal` with `verificationId` and `verificationCode` fields. - **injectMultiFactorPhoneAuthNumberFormSchema** + **`injectMultiFactorPhoneAuthNumberFormSchema`** Injects a Zod schema for multi-factor phone authentication number form validation. Returns `Signal` with `phoneNumber` and `displayName` fields. - **injectMultiFactorPhoneAuthAssertionFormSchema** + **`injectMultiFactorPhoneAuthAssertionFormSchema`** Injects a Zod schema for multi-factor phone authentication assertion form validation. Returns `Signal` with `phoneNumber` field. - **injectMultiFactorPhoneAuthVerifyFormSchema** + **`injectMultiFactorPhoneAuthVerifyFormSchema`** Injects a Zod schema for multi-factor phone authentication verification form validation. Returns `Signal` with `verificationId` and `verificationCode` fields. - **injectMultiFactorTotpAuthNumberFormSchema** + **`injectMultiFactorTotpAuthNumberFormSchema`** Injects a Zod schema for multi-factor TOTP authentication form validation. Returns `Signal` with `displayName` field. - **injectMultiFactorTotpAuthVerifyFormSchema** + **`injectMultiFactorTotpAuthVerifyFormSchema`** Injects a Zod schema for multi-factor TOTP verification code form validation. Returns `Signal` with `verificationCode` field. - **injectRecaptchaVerifier** + **`injectRecaptchaVerifier`** Injects a reCAPTCHA verifier instance. @@ -1934,19 +1934,19 @@ By default, any missing translations will fallback to English if not specified. Returns `Signal`. - **injectPolicies** + **`injectPolicies`** Injects the policy configuration. Returns `PolicyConfig \| null`. - **injectCountries** + **`injectCountries`** Injects the list of countries for country selector. Returns `Signal`. - **injectDefaultCountry** + **`injectDefaultCountry`** Injects the default country for country selector.