From 076ac51786c48f3c5415ea1e9fd3cb8242c462db Mon Sep 17 00:00:00 2001
From: russellwheatley <russellwheatley85@gmail.com>
Date: Fri, 20 Mar 2026 08:32:43 +0000
Subject: [PATCH 01/10] docs: getting started with FirebaseUI web documentation

---
 GETTING_STARTED.md | 476 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 476 insertions(+)
 create mode 100644 GETTING_STARTED.md

diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md
new file mode 100644
index 00000000..1dedd240
--- /dev/null
+++ b/GETTING_STARTED.md
@@ -0,0 +1,476 @@
+# Easily add sign-in to your Web app with Firebase UI for Web
+
+Firebase UI for Web is a set of libraries built on the [Firebase Authentication](https://firebase.google.com/docs/auth) JavaScript SDK. It provides composable screens and buttons for email/password, email link, phone, OAuth, multi-factor authentication, and more—so you can ship auth flows quickly and still customize behavior and styling.
+
+**Compared to the previous `firebaseui` package (v6):** v7 is a full rewrite with a modular architecture: a framework-agnostic core (`@firebase-oss/ui-core`), framework packages (React, Angular, Shadcn registry), and separate style and translation packages. It is designed to work with the **modern modular Firebase JS SDK** (`import { initializeApp } from 'firebase/app'`, etc.), not the legacy namespaced compat-only pattern required by old FirebaseUI. If you are migrating from v6, see [MIGRATION.md](MIGRATION.md).
+
+This guide follows the same overall flow as the [classic FirebaseUI Web documentation](https://firebase.google.com/docs/auth/web/firebaseui), updated for v7.
+
+## Table of contents
+
+- [Before you begin](#before-you-begin)
+- [CDN / no bundler](#cdn--no-bundler)
+- [Install packages](#install-packages)
+- [Initialize Firebase UI](#initialize-firebase-ui)
+- [Include styles](#include-styles)
+- [Set up sign-in methods](#set-up-sign-in-methods)
+- [Sign in](#sign-in)
+- [OAuth: popup vs redirect](#oauth-popup-vs-redirect)
+- [Phone number](#phone-number)
+- [Google One Tap](#google-one-tap)
+- [Terms of service and privacy policy](#terms-of-service-and-privacy-policy)
+- [Upgrading anonymous users](#upgrading-anonymous-users)
+- [Translations](#translations)
+- [Next steps](#next-steps)
+
+## Before you begin
+
+1. Add Firebase to your web app and enable **Authentication** in the [Firebase console](https://console.firebase.google.com/).
+2. Use the **modular** Firebase JS SDK (v9+), for example:
+
+   ```ts
+   import { initializeApp } from 'firebase/app';
+
+   const app = initializeApp({
+     /* your Firebase config */
+   });
+   ```
+
+3. Install the `firebase` package if you have not already:
+
+   ```bash
+   npm install firebase
+   ```
+
+4. Choose your integration: **React**, **Next.js**, **Shadcn** (React components from the registry), or **Angular** (with AngularFire).
+
+## CDN / no bundler
+
+The legacy `firebaseui` v6 workflow often used **CDN script tags** for `firebase-ui-auth.js` and CSS. **Firebase UI for Web v7 does not ship a single drop-in script** for the UI library: the packages (`@firebase-oss/ui-react`, `@firebase-oss/ui-core`, etc.) are published on npm and are intended for use with a **bundler** (Vite, webpack, Next.js, Angular CLI, etc.) or another modern JavaScript toolchain.
+
+- **Styles only via CDN:** You can still load the compiled stylesheet from a CDN for apps that bundle your own JS but want CSS without importing from `node_modules`. See [README.md#styling](README.md#styling) (and the “Via CDN” example there).
+- **No bundler at all:** If you cannot use a bundler, you would need to assemble compatible ESM builds and dependencies yourself (not officially supported as a first-class path). For most teams, **use npm + a bundler** and follow one of the framework sections below.
+
+## Install packages
+
+### React
+
+```bash
+npm install @firebase-oss/ui-react@beta
+```
+
+The React package pulls in `@firebase-oss/ui-core` as a dependency. You will also use `@firebase-oss/ui-styles` for CSS (see [Include styles](#include-styles)).
+
+### Next.js
+
+Use the **same npm packages as React** (`@firebase-oss/ui-react@beta`). The [Next.js App Router](https://nextjs.org/docs/app) example in this repo keeps Firebase UI on the **client**: initialize Firebase and `initializeUI` in a **`"use client"`** module (for example `lib/firebase/clientApp.ts`), wrap the tree in **`FirebaseUIProvider`** from another client component (for example `lib/firebase/ui.tsx`), and import that wrapper from `app/layout.tsx`. See [examples/nextjs](examples/nextjs).
+
+### Shadcn
+
+Shadcn uses the **same React runtime** (`@firebase-oss/ui-react`) as plain React. Install [Shadcn](https://ui.shadcn.com/docs/installation) first, then register the Firebase UI registry and add the components you need:
+
+```json
+{
+  "registries": {
+    "@firebase": "https://firebaseopensource.com/r/{name}.json"
+  }
+}
+```
+
+```bash
+npx shadcn@latest add @firebase/sign-in-auth-screen
+```
+
+After that, **initialize Firebase UI and wrap your app exactly as in the React section**—the only difference is you import generated components from your project (for example `@/components/sign-in-auth-screen`) instead of from `@firebase-oss/ui-react`.
+
+### Angular
+
+Install AngularFire and the Angular package (see also [packages/angular/README.md](packages/angular/README.md)):
+
+```bash
+npm install @angular/fire @firebase-oss/ui-angular@beta
+```
+
+## Initialize Firebase UI
+
+Create a Firebase UI instance with `initializeUI` from `@firebase-oss/ui-core`, then expose it to your UI layer.
+
+### React
+
+```ts
+import { initializeApp } from 'firebase/app';
+import { initializeUI } from '@firebase-oss/ui-core';
+
+const app = initializeApp({
+  /* your config */
+});
+
+export const ui = initializeUI({
+  app,
+  // behaviors: [...]  // optional; see sections below
+});
+```
+
+Wrap your application with `FirebaseUIProvider`:
+
+```tsx
+import { FirebaseUIProvider } from '@firebase-oss/ui-react';
+
+function Root() {
+  return (
+    <FirebaseUIProvider ui={ui}>
+      {/* your routes / screens */}
+    </FirebaseUIProvider>
+  );
+}
+```
+
+### Shadcn
+
+Use the **same** `initializeUI` and `FirebaseUIProvider` snippets as **React**. Import screens from the paths Shadcn generated, for example:
+
+```tsx
+import { SignInAuthScreen } from '@/components/sign-in-auth-screen';
+
+export function MySignInPage() {
+  return <SignInAuthScreen onSignIn={() => { /* ... */ }} />;
+}
+```
+
+### Angular
+
+Provide the Firebase app and Firebase UI alongside AngularFire:
+
+```ts
+import { type ApplicationConfig } from '@angular/core';
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideFirebaseUI } from '@firebase-oss/ui-angular';
+import { initializeUI } from '@firebase-oss/ui-core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ /* your config */ })),
+    provideFirebaseUI((apps) => initializeUI({ app: apps[0] })),
+  ],
+};
+```
+
+### Next.js (App Router)
+
+Create a **client** module that exports your `ui` instance (same `initializeUI` pattern as React). The App Router runs server components by default, so mark client-only files with `"use client"`:
+
+```ts
+// lib/firebase/clientApp.ts
+'use client';
+
+import { initializeApp, getApps } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+import { initializeUI } from '@firebase-oss/ui-core';
+
+const app = getApps().length === 0 ? initializeApp({ /* your config */ }) : getApps()[0];
+
+export const auth = getAuth(app);
+
+export const ui = initializeUI({ app });
+```
+
+Wrap your app with `FirebaseUIProvider` in a small client component and use it from `app/layout.tsx`:
+
+```tsx
+// lib/firebase/ui.tsx
+'use client';
+
+import { ui } from '@/lib/firebase/clientApp';
+import { FirebaseUIProvider } from '@firebase-oss/ui-react';
+
+export function FirebaseUIProviderHoc({ children }: { children: React.ReactNode }) {
+  return (
+    <FirebaseUIProvider
+      ui={ui}
+      policies={{
+        termsOfServiceUrl: 'https://example.com/terms',
+        privacyPolicyUrl: 'https://example.com/privacy',
+      }}
+    >
+      {children}
+    </FirebaseUIProvider>
+  );
+}
+```
+
+```tsx
+// app/layout.tsx (server layout imports the client wrapper)
+import { FirebaseUIProviderHoc } from '@/lib/firebase/ui';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <FirebaseUIProviderHoc>{children}</FirebaseUIProviderHoc>
+      </body>
+    </html>
+  );
+}
+```
+
+Import Firebase UI styles from `app/globals.css` the same way as in [Include styles](#include-styles). Full reference: [examples/nextjs](examples/nextjs).
+
+## Include styles
+
+> **Shadcn:** You normally **do not** import Firebase UI’s bundled CSS; styling comes from your Shadcn theme and generated components.
+
+For React, Next.js, and Angular default UI, import styles from `@firebase-oss/ui-styles` (for example in `globals.css` for Next.js):
+
+```css
+@import '@firebase-oss/ui-styles/dist.min.css';
+```
+
+Or with Tailwind:
+
+```css
+@import 'tailwindcss';
+@import '@firebase-oss/ui-styles/tailwind';
+```
+
+See [README.md#styling](README.md#styling) for CDN import, theming via CSS variables, and details.
+
+## Set up sign-in methods
+
+In the Firebase console, open **Authentication** → **Sign-in method** and enable each provider you need (Email/Password, Email link, Google, GitHub, Phone, etc.). Add your app’s domain to **Authorized domains** where required (OAuth and phone flows).
+
+In v7 you **do not** pass a single `signInOptions` array. Instead you:
+
+- Render the **screens and buttons** that match your product (for example `SignInAuthScreen`, `OAuthScreen`, or individual `GoogleSignInButton` components).
+- Optionally tune flows with **behaviors** on `initializeUI` (see the following sections).
+
+### Email address and password
+
+1. Enable **Email/Password** in the console.
+2. Use a screen such as `SignInAuthScreen` / `SignUpAuthScreen` (React) or `<fui-sign-in-auth-screen>` / `<fui-sign-up-auth-screen>` (Angular).
+
+Optional: require a display name on sign-up via the `requireDisplayName` behavior:
+
+```ts
+import { requireDisplayName } from '@firebase-oss/ui-core';
+
+const ui = initializeUI({
+  app,
+  behaviors: [requireDisplayName()],
+});
+```
+
+### Email link authentication
+
+1. Enable **Email/Password** and **Email link (passwordless)** in the console.
+2. Use the email-link auth screen or forms from the library; complete the flow using the core helpers (for example `completeEmailLinkSignIn`) as documented in [README.md#reference](README.md#reference).
+
+### OAuth providers (Google, Facebook, GitHub, Apple, Microsoft, Yahoo, X/Twitter, …)
+
+1. Enable each provider in the console and configure OAuth client IDs/secrets as required.
+2. Add OAuth buttons inside an OAuth screen or your own layout. Example (React):
+
+   ```tsx
+   import { OAuthScreen, GoogleSignInButton, GitHubSignInButton } from '@firebase-oss/ui-react';
+
+   export function OAuthExample() {
+     return (
+       <OAuthScreen>
+         <GoogleSignInButton />
+         <GitHubSignInButton />
+       </OAuthScreen>
+     );
+   }
+   ```
+
+   Angular uses the `fui-*` components, for example `<fui-oauth-screen>` with `<fui-google-sign-in-button>` inside.
+
+3. **Custom scopes or provider options:** pass a configured provider to a button when needed—for example a `GoogleAuthProvider` with `addScope(...)`—via the optional `provider` prop on `GoogleSignInButton` (React) or the analogous input on the Angular component.
+
+### Phone number
+
+1. Enable **Phone** in the console and add your domain to authorized domains.
+2. Use the phone auth screen/form components.
+3. Optional: restrict countries and set a default with the `countryCodes` behavior; customize reCAPTCHA with `recaptchaVerification`. See [README.md#behaviors](README.md#behaviors).
+
+## Sign in
+
+Render the screen you want on a route or container. Handle success in component props (React) or outputs (Angular)—this replaces v6’s `callbacks.signInSuccessWithAuthResult` and related hooks.
+
+### React
+
+```tsx
+import { SignInAuthScreen } from '@firebase-oss/ui-react';
+import { useNavigate } from 'react-router';
+
+export function SignInPage() {
+  const navigate = useNavigate();
+
+  return (
+    <SignInAuthScreen
+      onSignIn={() => {
+        navigate('/dashboard');
+      }}
+    />
+  );
+}
+```
+
+### Shadcn
+
+Same as React, but import from your Shadcn path:
+
+```tsx
+import { SignInAuthScreen } from '@/components/sign-in-auth-screen';
+```
+
+### Next.js
+
+Use **client components** for screens that depend on Firebase UI (`"use client"`). Navigate with the App Router:
+
+```tsx
+'use client';
+
+import { SignInAuthScreen } from '@firebase-oss/ui-react';
+import { useRouter } from 'next/navigation';
+
+export default function SignInPage() {
+  const router = useRouter();
+
+  return (
+    <SignInAuthScreen
+      onSignIn={() => {
+        router.push('/dashboard');
+      }}
+    />
+  );
+}
+```
+
+### Angular
+
+```ts
+import { Component } from '@angular/core';
+import { SignInAuthScreenComponent } from '@firebase-oss/ui-angular';
+import { Router } from '@angular/router';
+import type { User } from '@angular/fire/auth';
+
+@Component({
+  selector: 'app-sign-in',
+  standalone: true,
+  imports: [SignInAuthScreenComponent],
+  template: `
+    <fui-sign-in-auth-screen (signIn)="onSignIn($event)" />
+  `,
+})
+export class SignInPage {
+  constructor(private router: Router) {}
+
+  onSignIn(user: User) {
+    this.router.navigate(['/dashboard']);
+  }
+}
+```
+
+If you relied on v6’s `signInSuccessUrl` or query parameters, perform redirects yourself in these handlers (see [MIGRATION.md](MIGRATION.md)).
+
+## OAuth: popup vs redirect
+
+v6 used `signInFlow: 'popup' | 'redirect'`. In v7, use **behaviors**:
+
+- **Popup (default):** `providerPopupStrategy()` or omit an explicit strategy.
+- **Redirect:** `providerRedirectStrategy()`.
+
+```ts
+import { providerRedirectStrategy } from '@firebase-oss/ui-core';
+
+const ui = initializeUI({
+  app,
+  behaviors: [providerRedirectStrategy()],
+});
+```
+
+## Phone number
+
+Configure default country and allowed regions with `countryCodes`; tune reCAPTCHA with `recaptchaVerification`. Example:
+
+```ts
+import { countryCodes, recaptchaVerification } from '@firebase-oss/ui-core';
+
+const ui = initializeUI({
+  app,
+  behaviors: [
+    countryCodes({
+      allowedCountries: ['GB', 'US', 'FR'],
+      defaultCountry: 'GB',
+    }),
+    recaptchaVerification({
+      size: 'compact',
+      theme: 'light',
+    }),
+  ],
+});
+```
+
+## Google One Tap
+
+The old **Account Chooser / credential helper** style integration maps conceptually to **Google One Tap** in v7 via the `oneTapSignIn` behavior (requires Google sign-in enabled and a web client ID from the console). See [README.md#behaviors](README.md#behaviors) and [MIGRATION.md](MIGRATION.md).
+
+## Terms of service and privacy policy
+
+v6 used `tosUrl` and `privacyPolicyUrl` on the widget config. In v7:
+
+- **React / Next.js / Shadcn:** pass `policies` to `FirebaseUIProvider` (in Next.js, keep the provider in a client component as in [Next.js (App Router)](#nextjs-app-router)):
+
+  ```tsx
+  <FirebaseUIProvider
+    ui={ui}
+    policies={{
+      termsOfServiceUrl: 'https://example.com/terms',
+      privacyPolicyUrl: 'https://example.com/privacy',
+    }}
+  >
+    {children}
+  </FirebaseUIProvider>
+  ```
+
+- **Angular:** use `provideFirebaseUIPolicies`:
+
+  ```ts
+  import { provideFirebaseUIPolicies } from '@firebase-oss/ui-angular';
+
+  // In appConfig.providers:
+  provideFirebaseUIPolicies(() => ({
+    termsOfServiceUrl: 'https://example.com/terms',
+    privacyPolicyUrl: 'https://example.com/privacy',
+  })),
+  ```
+
+## Upgrading anonymous users
+
+Enable anonymous auth in the console if needed. Use the `autoUpgradeAnonymousUsers` behavior and optionally implement `onUpgrade` for data migration (replacing v6’s `autoUpgradeAnonymousUsers` flag and `signInFailure` merge handling). See [README.md#behaviors](README.md#behaviors) and the anonymous upgrade sections in [MIGRATION.md](MIGRATION.md).
+
+```ts
+import { autoUpgradeAnonymousUsers } from '@firebase-oss/ui-core';
+
+const ui = initializeUI({
+  app,
+  behaviors: [
+    autoUpgradeAnonymousUsers({
+      async onUpgrade(ui, oldUserId, credential) {
+        // Migrate data from anonymous user to the signed-in user if needed
+      },
+    }),
+  ],
+});
+```
+
+## Translations
+
+Register locales with `@firebase-oss/ui-translations` and pass `locale` into `initializeUI`, or call `ui.setLocale(...)` at runtime. See [README.md#translations](README.md#translations).
+
+## Next steps
+
+- Full feature list, behaviors reference, and API tables: [README.md](README.md).
+- Migrating from v6: [MIGRATION.md](MIGRATION.md).
+- Example apps: [examples/react](examples/react), [examples/nextjs](examples/nextjs), [examples/shadcn](examples/shadcn), [examples/angular](examples/angular).
+- Custom OIDC and advanced flows: [CUSTOM_AUTHENTICATION.md](CUSTOM_AUTHENTICATION.md).

From 160b473be6104d9f4013176b7519eef2cab9205a Mon Sep 17 00:00:00 2001
From: russellwheatley <russellwheatley85@gmail.com>
Date: Fri, 20 Mar 2026 09:50:03 +0000
Subject: [PATCH 02/10] docs: update to be more concise and closer to old get
 started

---
 GETTING_STARTED.md | 488 ++++++++++++++++++++++++---------------------
 1 file changed, 259 insertions(+), 229 deletions(-)

diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md
index 1dedd240..b05f57d5 100644
--- a/GETTING_STARTED.md
+++ b/GETTING_STARTED.md
@@ -1,32 +1,24 @@
-# Easily add sign-in to your Web app with Firebase UI for Web
+# Easily add sign-in to your web app with FirebaseUI for Web
 
-Firebase UI for Web is a set of libraries built on the [Firebase Authentication](https://firebase.google.com/docs/auth) JavaScript SDK. It provides composable screens and buttons for email/password, email link, phone, OAuth, multi-factor authentication, and more—so you can ship auth flows quickly and still customize behavior and styling.
+FirebaseUI for Web is a set of libraries built on the [Firebase Authentication](https://firebase.google.com/docs/auth) JavaScript SDK. Like the classic `firebaseui` package, it helps you ship authentication flows quickly, but the latest version is a complete rewrite with a modern modular architecture.
 
-**Compared to the previous `firebaseui` package (v6):** v7 is a full rewrite with a modular architecture: a framework-agnostic core (`@firebase-oss/ui-core`), framework packages (React, Angular, Shadcn registry), and separate style and translation packages. It is designed to work with the **modern modular Firebase JS SDK** (`import { initializeApp } from 'firebase/app'`, etc.), not the legacy namespaced compat-only pattern required by old FirebaseUI. If you are migrating from v6, see [MIGRATION.md](MIGRATION.md).
+FirebaseUI for Web now provides these benefits:
 
-This guide follows the same overall flow as the [classic FirebaseUI Web documentation](https://firebase.google.com/docs/auth/web/firebaseui), updated for v7.
+- Modern modular SDK support with `initializeApp(...)` and the current Firebase JS SDK.
+- Composable screens, forms, and buttons instead of a single monolithic widget.
+- Support for React, Shadcn, and Angular.
+- Configurable behaviors for redirect vs popup flows, Google One Tap, anonymous upgrade, phone settings, and more.
+- Localization support via `@firebase-oss/ui-translations`.
+- Built-in support for email/password, email link, phone auth, OAuth providers, and multi-factor flows.
 
-## Table of contents
+If you are migrating from the old `firebaseui` package, read [MIGRATION.md](MIGRATION.md) alongside this guide.
 
-- [Before you begin](#before-you-begin)
-- [CDN / no bundler](#cdn--no-bundler)
-- [Install packages](#install-packages)
-- [Initialize Firebase UI](#initialize-firebase-ui)
-- [Include styles](#include-styles)
-- [Set up sign-in methods](#set-up-sign-in-methods)
-- [Sign in](#sign-in)
-- [OAuth: popup vs redirect](#oauth-popup-vs-redirect)
-- [Phone number](#phone-number)
-- [Google One Tap](#google-one-tap)
-- [Terms of service and privacy policy](#terms-of-service-and-privacy-policy)
-- [Upgrading anonymous users](#upgrading-anonymous-users)
-- [Translations](#translations)
-- [Next steps](#next-steps)
+This document follows the same overall flow as the [classic FirebaseUI Web documentation](https://firebase.google.com/docs/auth/web/firebaseui), but updated for the current version of FirebaseUI for Web.
 
 ## Before you begin
 
 1. Add Firebase to your web app and enable **Authentication** in the [Firebase console](https://console.firebase.google.com/).
-2. Use the **modular** Firebase JS SDK (v9+), for example:
+2. Use the modular Firebase JS SDK:
 
    ```ts
    import { initializeApp } from 'firebase/app';
@@ -36,38 +28,32 @@ This guide follows the same overall flow as the [classic FirebaseUI Web document
    });
    ```
 
-3. Install the `firebase` package if you have not already:
+3. Install `firebase` if it is not already in your project:
 
    ```bash
    npm install firebase
    ```
 
-4. Choose your integration: **React**, **Next.js**, **Shadcn** (React components from the registry), or **Angular** (with AngularFire).
+4. Choose your platform:
+   - `@firebase-oss/ui-react` for React apps
+   - the FirebaseUI Shadcn registry for Shadcn-based apps
+   - `@firebase-oss/ui-angular` with AngularFire for Angular apps
 
-## CDN / no bundler
-
-The legacy `firebaseui` v6 workflow often used **CDN script tags** for `firebase-ui-auth.js` and CSS. **Firebase UI for Web v7 does not ship a single drop-in script** for the UI library: the packages (`@firebase-oss/ui-react`, `@firebase-oss/ui-core`, etc.) are published on npm and are intended for use with a **bundler** (Vite, webpack, Next.js, Angular CLI, etc.) or another modern JavaScript toolchain.
-
-- **Styles only via CDN:** You can still load the compiled stylesheet from a CDN for apps that bundle your own JS but want CSS without importing from `node_modules`. See [README.md#styling](README.md#styling) (and the “Via CDN” example there).
-- **No bundler at all:** If you cannot use a bundler, you would need to assemble compatible ESM builds and dependencies yourself (not officially supported as a first-class path). For most teams, **use npm + a bundler** and follow one of the framework sections below.
+> The new FirebaseUI for Web does not use the old `firebaseui.auth.AuthUI(firebase.auth())` widget model. Instead, you initialize a shared UI instance with `initializeUI(...)`, then render framework-specific components.
 
 ## Install packages
 
 ### React
 
 ```bash
-npm install @firebase-oss/ui-react@beta
+npm install @firebase-oss/ui-react@beta @firebase-oss/ui-styles
 ```
 
-The React package pulls in `@firebase-oss/ui-core` as a dependency. You will also use `@firebase-oss/ui-styles` for CSS (see [Include styles](#include-styles)).
-
-### Next.js
-
-Use the **same npm packages as React** (`@firebase-oss/ui-react@beta`). The [Next.js App Router](https://nextjs.org/docs/app) example in this repo keeps Firebase UI on the **client**: initialize Firebase and `initializeUI` in a **`"use client"`** module (for example `lib/firebase/clientApp.ts`), wrap the tree in **`FirebaseUIProvider`** from another client component (for example `lib/firebase/ui.tsx`), and import that wrapper from `app/layout.tsx`. See [examples/nextjs](examples/nextjs).
-
 ### Shadcn
 
-Shadcn uses the **same React runtime** (`@firebase-oss/ui-react`) as plain React. Install [Shadcn](https://ui.shadcn.com/docs/installation) first, then register the Firebase UI registry and add the components you need:
+Shadcn uses the same React runtime as the React package, but the UI components come from the Firebase registry instead of direct package imports.
+
+Add the Firebase registry to `components.json`:
 
 ```json
 {
@@ -77,70 +63,68 @@ Shadcn uses the **same React runtime** (`@firebase-oss/ui-react`) as plain React
 }
 ```
 
+Then add the components you want to use:
+
 ```bash
 npx shadcn@latest add @firebase/sign-in-auth-screen
 ```
 
-After that, **initialize Firebase UI and wrap your app exactly as in the React section**—the only difference is you import generated components from your project (for example `@/components/sign-in-auth-screen`) instead of from `@firebase-oss/ui-react`.
+This installs the underlying React FirebaseUI dependencies for you.
 
 ### Angular
 
-Install AngularFire and the Angular package (see also [packages/angular/README.md](packages/angular/README.md)):
-
 ```bash
-npm install @angular/fire @firebase-oss/ui-angular@beta
+npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core @firebase-oss/ui-styles @firebase-oss/ui-translations
 ```
 
-## Initialize Firebase UI
+## Initialize FirebaseUI
 
-Create a Firebase UI instance with `initializeUI` from `@firebase-oss/ui-core`, then expose it to your UI layer.
+The old library used a widget instance and `ui.start(...)`. The new library uses a shared UI store created with `initializeUI(...)`.
 
 ### React
 
-```ts
+```tsx
 import { initializeApp } from 'firebase/app';
 import { initializeUI } from '@firebase-oss/ui-core';
+import { FirebaseUIProvider } from '@firebase-oss/ui-react';
 
 const app = initializeApp({
-  /* your config */
+  /* your Firebase config */
 });
 
-export const ui = initializeUI({
+const ui = initializeUI({
   app,
-  // behaviors: [...]  // optional; see sections below
 });
-```
-
-Wrap your application with `FirebaseUIProvider`:
-
-```tsx
-import { FirebaseUIProvider } from '@firebase-oss/ui-react';
 
-function Root() {
-  return (
-    <FirebaseUIProvider ui={ui}>
-      {/* your routes / screens */}
-    </FirebaseUIProvider>
-  );
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  return <FirebaseUIProvider ui={ui}>{children}</FirebaseUIProvider>;
 }
 ```
 
 ### Shadcn
 
-Use the **same** `initializeUI` and `FirebaseUIProvider` snippets as **React**. Import screens from the paths Shadcn generated, for example:
+Shadcn uses the same setup as React, because it also uses `@firebase-oss/ui-react` under the hood:
 
 ```tsx
-import { SignInAuthScreen } from '@/components/sign-in-auth-screen';
+import { initializeApp } from 'firebase/app';
+import { initializeUI } from '@firebase-oss/ui-core';
+import { FirebaseUIProvider } from '@firebase-oss/ui-react';
+
+const app = initializeApp({
+  /* your Firebase config */
+});
 
-export function MySignInPage() {
-  return <SignInAuthScreen onSignIn={() => { /* ... */ }} />;
+const ui = initializeUI({
+  app,
+});
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  return <FirebaseUIProvider ui={ui}>{children}</FirebaseUIProvider>;
 }
 ```
 
 ### Angular
 
-Provide the Firebase app and Firebase UI alongside AngularFire:
-
 ```ts
 import { type ApplicationConfig } from '@angular/core';
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
@@ -149,109 +133,56 @@ import { initializeUI } from '@firebase-oss/ui-core';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideFirebaseApp(() => initializeApp({ /* your config */ })),
-    provideFirebaseUI((apps) => initializeUI({ app: apps[0] })),
+    provideFirebaseApp(() =>
+      initializeApp({
+        /* your Firebase config */
+      }),
+    ),
+    provideFirebaseUI((apps) =>
+      initializeUI({
+        app: apps[0],
+      }),
+    ),
   ],
 };
 ```
 
-### Next.js (App Router)
-
-Create a **client** module that exports your `ui` instance (same `initializeUI` pattern as React). The App Router runs server components by default, so mark client-only files with `"use client"`:
-
-```ts
-// lib/firebase/clientApp.ts
-'use client';
-
-import { initializeApp, getApps } from 'firebase/app';
-import { getAuth } from 'firebase/auth';
-import { initializeUI } from '@firebase-oss/ui-core';
-
-const app = getApps().length === 0 ? initializeApp({ /* your config */ }) : getApps()[0];
-
-export const auth = getAuth(app);
-
-export const ui = initializeUI({ app });
-```
-
-Wrap your app with `FirebaseUIProvider` in a small client component and use it from `app/layout.tsx`:
-
-```tsx
-// lib/firebase/ui.tsx
-'use client';
-
-import { ui } from '@/lib/firebase/clientApp';
-import { FirebaseUIProvider } from '@firebase-oss/ui-react';
-
-export function FirebaseUIProviderHoc({ children }: { children: React.ReactNode }) {
-  return (
-    <FirebaseUIProvider
-      ui={ui}
-      policies={{
-        termsOfServiceUrl: 'https://example.com/terms',
-        privacyPolicyUrl: 'https://example.com/privacy',
-      }}
-    >
-      {children}
-    </FirebaseUIProvider>
-  );
-}
-```
-
-```tsx
-// app/layout.tsx (server layout imports the client wrapper)
-import { FirebaseUIProviderHoc } from '@/lib/firebase/ui';
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <body>
-        <FirebaseUIProviderHoc>{children}</FirebaseUIProviderHoc>
-      </body>
-    </html>
-  );
-}
-```
-
-Import Firebase UI styles from `app/globals.css` the same way as in [Include styles](#include-styles). Full reference: [examples/nextjs](examples/nextjs).
-
 ## Include styles
 
-> **Shadcn:** You normally **do not** import Firebase UI’s bundled CSS; styling comes from your Shadcn theme and generated components.
-
-For React, Next.js, and Angular default UI, import styles from `@firebase-oss/ui-styles` (for example in `globals.css` for Next.js):
+If you are using the default React or Angular components, include the FirebaseUI styles:
 
 ```css
 @import '@firebase-oss/ui-styles/dist.min.css';
 ```
 
-Or with Tailwind:
+If you are using Tailwind:
 
 ```css
 @import 'tailwindcss';
 @import '@firebase-oss/ui-styles/tailwind';
 ```
 
-See [README.md#styling](README.md#styling) for CDN import, theming via CSS variables, and details.
+If you are using Shadcn, you typically do **not** import FirebaseUI's bundled CSS. The generated components inherit your Shadcn design system instead.
 
 ## Set up sign-in methods
 
-In the Firebase console, open **Authentication** → **Sign-in method** and enable each provider you need (Email/Password, Email link, Google, GitHub, Phone, etc.). Add your app’s domain to **Authorized domains** where required (OAuth and phone flows).
+Before users can sign in, enable each provider you want in **Authentication** -> **Sign-in method** in the Firebase console.
 
-In v7 you **do not** pass a single `signInOptions` array. Instead you:
+The biggest change from the old library is this:
 
-- Render the **screens and buttons** that match your product (for example `SignInAuthScreen`, `OAuthScreen`, or individual `GoogleSignInButton` components).
-- Optionally tune flows with **behaviors** on `initializeUI` (see the following sections).
+- Old FirebaseUI used a single `signInOptions` array passed to a widget config.
+- New FirebaseUI uses screens, forms, and buttons that you render directly.
+- Cross-cutting configuration now lives in `behaviors` passed to `initializeUI(...)`.
 
 ### Email address and password
 
-1. Enable **Email/Password** in the console.
-2. Use a screen such as `SignInAuthScreen` / `SignUpAuthScreen` (React) or `<fui-sign-in-auth-screen>` / `<fui-sign-up-auth-screen>` (Angular).
+1. Enable **Email/Password** in the Firebase console.
+2. Render `SignInAuthScreen` or `SignUpAuthScreen` in React/Shadcn, or `fui-sign-in-auth-screen` / `fui-sign-up-auth-screen` in Angular.
 
-Optional: require a display name on sign-up via the `requireDisplayName` behavior:
+Optional: require a display name during sign-up:
 
 ```ts
-import { requireDisplayName } from '@firebase-oss/ui-core';
+import { initializeUI, requireDisplayName } from '@firebase-oss/ui-core';
 
 const ui = initializeUI({
   app,
@@ -261,40 +192,57 @@ const ui = initializeUI({
 
 ### Email link authentication
 
-1. Enable **Email/Password** and **Email link (passwordless)** in the console.
-2. Use the email-link auth screen or forms from the library; complete the flow using the core helpers (for example `completeEmailLinkSignIn`) as documented in [README.md#reference](README.md#reference).
+1. Enable **Email/Password** and **Email link (passwordless sign-in)** in the Firebase console.
+2. Render the email link components from your platform package.
+3. Complete sign-in with the current URL using the core helpers when needed.
 
-### OAuth providers (Google, Facebook, GitHub, Apple, Microsoft, Yahoo, X/Twitter, …)
+```ts
+import { completeEmailLinkSignIn } from '@firebase-oss/ui-core';
 
-1. Enable each provider in the console and configure OAuth client IDs/secrets as required.
-2. Add OAuth buttons inside an OAuth screen or your own layout. Example (React):
+await completeEmailLinkSignIn(ui, window.location.href);
+```
 
-   ```tsx
-   import { OAuthScreen, GoogleSignInButton, GitHubSignInButton } from '@firebase-oss/ui-react';
+### OAuth providers
 
-   export function OAuthExample() {
-     return (
-       <OAuthScreen>
-         <GoogleSignInButton />
-         <GitHubSignInButton />
-       </OAuthScreen>
-     );
-   }
-   ```
+FirebaseUI for Web supports built-in buttons for providers such as Google, Apple, Facebook, GitHub, Microsoft, and X/Twitter.
 
-   Angular uses the `fui-*` components, for example `<fui-oauth-screen>` with `<fui-google-sign-in-button>` inside.
-
-3. **Custom scopes or provider options:** pass a configured provider to a button when needed—for example a `GoogleAuthProvider` with `addScope(...)`—via the optional `provider` prop on `GoogleSignInButton` (React) or the analogous input on the Angular component.
+1. Enable the provider in the Firebase console.
+2. Add your app domain to **Authorized domains** where required.
+3. Render the provider buttons you want.
 
 ### Phone number
 
-1. Enable **Phone** in the console and add your domain to authorized domains.
-2. Use the phone auth screen/form components.
-3. Optional: restrict countries and set a default with the `countryCodes` behavior; customize reCAPTCHA with `recaptchaVerification`. See [README.md#behaviors](README.md#behaviors).
+1. Enable **Phone** in the Firebase console.
+2. Add your app domain to **Authorized domains**.
+3. Render the phone auth screen or form for your platform.
+
+Optional: configure allowed countries, default country, or reCAPTCHA behavior:
+
+```ts
+import {
+  countryCodes,
+  initializeUI,
+  recaptchaVerification,
+} from '@firebase-oss/ui-core';
+
+const ui = initializeUI({
+  app,
+  behaviors: [
+    countryCodes({
+      allowedCountries: ['GB', 'US', 'FR'],
+      defaultCountry: 'GB',
+    }),
+    recaptchaVerification({
+      size: 'compact',
+      theme: 'light',
+    }),
+  ],
+});
+```
 
 ## Sign in
 
-Render the screen you want on a route or container. Handle success in component props (React) or outputs (Angular)—this replaces v6’s `callbacks.signInSuccessWithAuthResult` and related hooks.
+Instead of calling `ui.start('#container', config)`, render the auth screen you want and handle success in component callbacks or Angular outputs.
 
 ### React
 
@@ -317,29 +265,19 @@ export function SignInPage() {
 
 ### Shadcn
 
-Same as React, but import from your Shadcn path:
+Shadcn uses the same runtime and flow as React. The only difference is that you import the generated component from your app instead of from `@firebase-oss/ui-react`:
 
 ```tsx
 import { SignInAuthScreen } from '@/components/sign-in-auth-screen';
-```
-
-### Next.js
-
-Use **client components** for screens that depend on Firebase UI (`"use client"`). Navigate with the App Router:
-
-```tsx
-'use client';
-
-import { SignInAuthScreen } from '@firebase-oss/ui-react';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router';
 
-export default function SignInPage() {
-  const router = useRouter();
+export function SignInPage() {
+  const navigate = useNavigate();
 
   return (
     <SignInAuthScreen
       onSignIn={() => {
-        router.push('/dashboard');
+        navigate('/dashboard');
       }}
     />
   );
@@ -350,19 +288,19 @@ export default function SignInPage() {
 
 ```ts
 import { Component } from '@angular/core';
-import { SignInAuthScreenComponent } from '@firebase-oss/ui-angular';
 import { Router } from '@angular/router';
+import { SignInAuthScreenComponent } from '@firebase-oss/ui-angular';
 import type { User } from '@angular/fire/auth';
 
 @Component({
-  selector: 'app-sign-in',
+  selector: 'app-sign-in-page',
   standalone: true,
   imports: [SignInAuthScreenComponent],
   template: `
     <fui-sign-in-auth-screen (signIn)="onSignIn($event)" />
   `,
 })
-export class SignInPage {
+export class SignInPageComponent {
   constructor(private router: Router) {}
 
   onSignIn(user: User) {
@@ -371,17 +309,17 @@ export class SignInPage {
 }
 ```
 
-If you relied on v6’s `signInSuccessUrl` or query parameters, perform redirects yourself in these handlers (see [MIGRATION.md](MIGRATION.md)).
+## OAuth providers: popup vs redirect
 
-## OAuth: popup vs redirect
+The old FirebaseUI used `signInFlow: 'popup' | 'redirect'`. The new library uses behaviors:
 
-v6 used `signInFlow: 'popup' | 'redirect'`. In v7, use **behaviors**:
+- `providerPopupStrategy()` for popup flows
+- `providerRedirectStrategy()` for redirect flows
 
-- **Popup (default):** `providerPopupStrategy()` or omit an explicit strategy.
-- **Redirect:** `providerRedirectStrategy()`.
+Popup is the default, so you only need to configure redirect explicitly:
 
 ```ts
-import { providerRedirectStrategy } from '@firebase-oss/ui-core';
+import { initializeUI, providerRedirectStrategy } from '@firebase-oss/ui-core';
 
 const ui = initializeUI({
   app,
@@ -389,88 +327,180 @@ const ui = initializeUI({
 });
 ```
 
-## Phone number
+To render OAuth buttons, add them to your platform-specific screen.
+
+### React
+
+```tsx
+import {
+  GitHubSignInButton,
+  GoogleSignInButton,
+  OAuthScreen,
+} from '@firebase-oss/ui-react';
+
+export function OAuthPage() {
+  return (
+    <OAuthScreen>
+      <GoogleSignInButton />
+      <GitHubSignInButton />
+    </OAuthScreen>
+  );
+}
+```
+
+### Shadcn
 
-Configure default country and allowed regions with `countryCodes`; tune reCAPTCHA with `recaptchaVerification`. Example:
+```tsx
+import { GitHubSignInButton } from '@/components/github-sign-in-button';
+import { GoogleSignInButton } from '@/components/google-sign-in-button';
+import { OAuthScreen } from '@/components/oauth-screen';
+
+export function OAuthPage() {
+  return (
+    <OAuthScreen>
+      <GoogleSignInButton />
+      <GitHubSignInButton />
+    </OAuthScreen>
+  );
+}
+```
+
+### Angular
 
 ```ts
-import { countryCodes, recaptchaVerification } from '@firebase-oss/ui-core';
+import { Component } from '@angular/core';
+import {
+  GithubSignInButtonComponent,
+  GoogleSignInButtonComponent,
+  OAuthScreenComponent,
+} from '@firebase-oss/ui-angular';
+
+@Component({
+  selector: 'app-oauth-page',
+  standalone: true,
+  imports: [
+    OAuthScreenComponent,
+    GoogleSignInButtonComponent,
+    GithubSignInButtonComponent,
+  ],
+  template: `
+    <fui-oauth-screen>
+      <fui-google-sign-in-button />
+      <fui-github-sign-in-button />
+    </fui-oauth-screen>
+  `,
+})
+export class OAuthPageComponent {}
+```
+
+## Google One Tap
+
+The old library exposed credential helper and One Tap style integrations through widget configuration. In the new library, use the `oneTapSignIn(...)` behavior:
+
+```ts
+import { initializeUI, oneTapSignIn } from '@firebase-oss/ui-core';
 
 const ui = initializeUI({
   app,
   behaviors: [
-    countryCodes({
-      allowedCountries: ['GB', 'US', 'FR'],
-      defaultCountry: 'GB',
-    }),
-    recaptchaVerification({
-      size: 'compact',
-      theme: 'light',
+    oneTapSignIn({
+      clientId: 'YOUR_GOOGLE_WEB_CLIENT_ID',
+      autoSelect: false,
+      cancelOnTapOutside: false,
     }),
   ],
 });
 ```
 
-## Google One Tap
-
-The old **Account Chooser / credential helper** style integration maps conceptually to **Google One Tap** in v7 via the `oneTapSignIn` behavior (requires Google sign-in enabled and a web client ID from the console). See [README.md#behaviors](README.md#behaviors) and [MIGRATION.md](MIGRATION.md).
+Make sure Google sign-in is enabled in the Firebase console, then copy the web client ID from the Google provider settings.
 
 ## Terms of service and privacy policy
 
-v6 used `tosUrl` and `privacyPolicyUrl` on the widget config. In v7:
-
-- **React / Next.js / Shadcn:** pass `policies` to `FirebaseUIProvider` (in Next.js, keep the provider in a client component as in [Next.js (App Router)](#nextjs-app-router)):
-
-  ```tsx
-  <FirebaseUIProvider
-    ui={ui}
-    policies={{
-      termsOfServiceUrl: 'https://example.com/terms',
-      privacyPolicyUrl: 'https://example.com/privacy',
-    }}
-  >
-    {children}
-  </FirebaseUIProvider>
-  ```
+The old library used `tosUrl` and `privacyPolicyUrl` in the widget config. The new library attaches policy links through the platform provider configuration.
 
-- **Angular:** use `provideFirebaseUIPolicies`:
+### React
 
-  ```ts
-  import { provideFirebaseUIPolicies } from '@firebase-oss/ui-angular';
+```tsx
+import { FirebaseUIProvider } from '@firebase-oss/ui-react';
 
-  // In appConfig.providers:
-  provideFirebaseUIPolicies(() => ({
+<FirebaseUIProvider
+  ui={ui}
+  policies={{
     termsOfServiceUrl: 'https://example.com/terms',
     privacyPolicyUrl: 'https://example.com/privacy',
-  })),
-  ```
+  }}
+>
+  {children}
+</FirebaseUIProvider>;
+```
+
+### Shadcn
+
+Use the same `FirebaseUIProvider` configuration as React.
+
+### Angular
+
+```ts
+import { type ApplicationConfig } from '@angular/core';
+import { provideFirebaseUIPolicies } from '@firebase-oss/ui-angular';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseUIPolicies(() => ({
+      termsOfServiceUrl: 'https://example.com/terms',
+      privacyPolicyUrl: 'https://example.com/privacy',
+    })),
+  ],
+};
+```
 
 ## Upgrading anonymous users
 
-Enable anonymous auth in the console if needed. Use the `autoUpgradeAnonymousUsers` behavior and optionally implement `onUpgrade` for data migration (replacing v6’s `autoUpgradeAnonymousUsers` flag and `signInFailure` merge handling). See [README.md#behaviors](README.md#behaviors) and the anonymous upgrade sections in [MIGRATION.md](MIGRATION.md).
+The old library supported anonymous account upgrade with `autoUpgradeAnonymousUsers` plus `signInFailure` merge handling. The new library keeps the capability, but it is now configured as a behavior.
 
 ```ts
-import { autoUpgradeAnonymousUsers } from '@firebase-oss/ui-core';
+import {
+  autoUpgradeAnonymousUsers,
+  initializeUI,
+} from '@firebase-oss/ui-core';
 
 const ui = initializeUI({
   app,
   behaviors: [
     autoUpgradeAnonymousUsers({
       async onUpgrade(ui, oldUserId, credential) {
-        // Migrate data from anonymous user to the signed-in user if needed
+        // Migrate or merge user data here if needed.
       },
     }),
   ],
 });
 ```
 
+If you previously handled merge conflicts in v6 callbacks, see [MIGRATION.md](MIGRATION.md) for the updated behavior-based model.
+
 ## Translations
 
-Register locales with `@firebase-oss/ui-translations` and pass `locale` into `initializeUI`, or call `ui.setLocale(...)` at runtime. See [README.md#translations](README.md#translations).
+FirebaseUI for Web supports localization through `@firebase-oss/ui-translations`. Register a locale, then pass it to `initializeUI(...)` or switch locales later with `ui.setLocale(...)`.
+
+```ts
+import { initializeUI } from '@firebase-oss/ui-core';
+import { registerLocale } from '@firebase-oss/ui-translations';
+
+const frFr = registerLocale('fr-FR', {
+  labels: {
+    signIn: 'Sign In',
+  },
+});
+
+const ui = initializeUI({
+  app,
+  locale: frFr,
+});
+```
 
 ## Next steps
 
-- Full feature list, behaviors reference, and API tables: [README.md](README.md).
-- Migrating from v6: [MIGRATION.md](MIGRATION.md).
-- Example apps: [examples/react](examples/react), [examples/nextjs](examples/nextjs), [examples/shadcn](examples/shadcn), [examples/angular](examples/angular).
-- Custom OIDC and advanced flows: [CUSTOM_AUTHENTICATION.md](CUSTOM_AUTHENTICATION.md).
+- Read [README.md](README.md) for the full API, behaviors, and component reference.
+- Read [MIGRATION.md](MIGRATION.md) if you are moving from the old `firebaseui` package.
+- See the package-specific docs in [packages/react/README.md](packages/react/README.md), [packages/shadcn/README.md](packages/shadcn/README.md), and [packages/angular/README.md](packages/angular/README.md).
+- Explore the examples in [examples/react](examples/react), [examples/shadcn](examples/shadcn), and [examples/angular](examples/angular).

From 4563e1015954fdfebd1f4543fcc782dbec9dd32d Mon Sep 17 00:00:00 2001
From: russellwheatley <russellwheatley85@gmail.com>
Date: Fri, 20 Mar 2026 10:09:24 +0000
Subject: [PATCH 03/10] docs: update language part

---
 GETTING_STARTED.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md
index b05f57d5..94ad7b2a 100644
--- a/GETTING_STARTED.md
+++ b/GETTING_STARTED.md
@@ -480,21 +480,21 @@ If you previously handled merge conflicts in v6 callbacks, see [MIGRATION.md](MI
 
 ## Translations
 
-FirebaseUI for Web supports localization through `@firebase-oss/ui-translations`. Register a locale, then pass it to `initializeUI(...)` or switch locales later with `ui.setLocale(...)`.
+FirebaseUI for Web supports localization through `@firebase-oss/ui-translations`. At the moment, a couple of locales are bundled out of the box, including English (`en-US`) and Czech (`cs-CZ`). You can also register and use your own locale overrides today, and PRs to add more built-in languages are welcomed.
 
 ```ts
 import { initializeUI } from '@firebase-oss/ui-core';
 import { registerLocale } from '@firebase-oss/ui-translations';
 
-const frFr = registerLocale('fr-FR', {
+const enUsCustom = registerLocale('en-US', {
   labels: {
-    signIn: 'Sign In',
+    signIn: 'Continue',
   },
 });
 
 const ui = initializeUI({
   app,
-  locale: frFr,
+  locale: enUsCustom,
 });
 ```
 

From b759d0d689701035746bb71e89ac45b1154bf4e9 Mon Sep 17 00:00:00 2001
From: russellwheatley <russellwheatley85@gmail.com>
Date: Tue, 24 Mar 2026 08:59:31 +0000
Subject: [PATCH 04/10] docs: angular should have consistent dependency install

---
 GETTING_STARTED.md         | 2 +-
 MIGRATION.md               | 2 +-
 README.md                  | 2 +-
 packages/angular/README.md | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md
index 94ad7b2a..c9c814b8 100644
--- a/GETTING_STARTED.md
+++ b/GETTING_STARTED.md
@@ -74,7 +74,7 @@ This installs the underlying React FirebaseUI dependencies for you.
 ### Angular
 
 ```bash
-npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core @firebase-oss/ui-styles @firebase-oss/ui-translations
+npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta
 ```
 
 ## Initialize FirebaseUI
diff --git a/MIGRATION.md b/MIGRATION.md
index 021ad906..fab73f74 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -69,7 +69,7 @@ First, remove the old `firebaseui` package and install the appropriate new packa
 
   Install the new Angular package:
   ```bash
-  npm install @firebase-oss/ui-angular@beta
+  npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta
   ```
 
   **Note:** The Angular package requires [AngularFire](https://github.com/angular/angularfire) to be installed and configured first.
diff --git a/README.md b/README.md
index 1c5b4512..b750e5c4 100644
--- a/README.md
+++ b/README.md
@@ -182,7 +182,7 @@ Next, follow the framework specific installation steps, for either React, Shadcn
   Once you have provided the Firebase App instance to your application using `provideFirebaseApp`, install the Firebase UI for Angular package:
 
   ```bash
-  npm install @firebase-oss/ui-angular@beta
+  npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta
   ```
 
   Alongside your existing providers, add the `provideFirebaseUI` provider, returning a new Firebase UI instance via `initializeUI`:
diff --git a/packages/angular/README.md b/packages/angular/README.md
index 63958a26..c0fd909d 100644
--- a/packages/angular/README.md
+++ b/packages/angular/README.md
@@ -7,7 +7,7 @@ This package contains the Angular components for FirebaseUI.
 Install the package from NPM:
 
 ```bash
-npm install @angular/fire @firebase-oss/ui-angular @firebase-oss/ui-core @firebase-oss/ui-styles @firebase-oss/ui-translations
+npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta
 ```
 
 ## Development

From e63011a89c1f081f4430e3040e7ed8fa8ebbeb83 Mon Sep 17 00:00:00 2001
From: russellwheatley <russellwheatley85@gmail.com>
Date: Wed, 25 Mar 2026 18:30:25 +0000
Subject: [PATCH 05/10] docs: update to use official registry

---
 MIGRATION.md | 2 +-
 README.md    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index fab73f74..76c12f42 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -90,7 +90,7 @@ First, remove the old `firebaseui` package and install the appropriate new packa
   {
     ...
     "registries": {
-      "@firebase": "https://fir-ui-shadcn-registry.web.app/r/{name}.json"
+      "@firebase": "https://firebaseopensource.com/r/{name}.json"
     }
   }
   ```
diff --git a/README.md b/README.md
index b750e5c4..6f950c3d 100644
--- a/README.md
+++ b/README.md
@@ -1530,7 +1530,7 @@ By default, any missing translations will fallback to English if not specified.
 <details>
   <summary>Shadcn</summary>
 
-  The shadcn registry is available at: https://fir-ui-shadcn-registry.web.app/r/{name}.json
+  The shadcn registry is available at: https://firebaseopensource.com/r/{name}.json
 
   | Name     |       Path       | Description |
   |----------|:----------------:|-------------|

From 555f08649277606c0bb1516516b40b500d09bafd Mon Sep 17 00:00:00 2001
From: Russell Wheatley <russellwheatley85@gmail.com>
Date: Thu, 9 Apr 2026 11:48:15 +0100
Subject: [PATCH 06/10] Apply suggestions from code review

Co-authored-by: Jeff <3759507+jhuleatt@users.noreply.github.com>
---
 GETTING_STARTED.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md
index c9c814b8..b379e566 100644
--- a/GETTING_STARTED.md
+++ b/GETTING_STARTED.md
@@ -11,7 +11,7 @@ FirebaseUI for Web now provides these benefits:
 - Localization support via `@firebase-oss/ui-translations`.
 - Built-in support for email/password, email link, phone auth, OAuth providers, and multi-factor flows.
 
-If you are migrating from the old `firebaseui` package, read [MIGRATION.md](MIGRATION.md) alongside this guide.
+Note: If you are migrating from FirebaseUI v6 or earlier, read [the migration guide](https://github.com/firebase/firebaseui-web/blob/main/MIGRATION.md) in the FirebaseUI repository.
 
 This document follows the same overall flow as the [classic FirebaseUI Web documentation](https://firebase.google.com/docs/auth/web/firebaseui), but updated for the current version of FirebaseUI for Web.
 
@@ -35,9 +35,9 @@ This document follows the same overall flow as the [classic FirebaseUI Web docum
    ```
 
 4. Choose your platform:
-   - `@firebase-oss/ui-react` for React apps
-   - the FirebaseUI Shadcn registry for Shadcn-based apps
+   - the FirebaseUI Shadcn registry for [shadcn/ui](https://ui.shadcn.com/)-based React apps
    - `@firebase-oss/ui-angular` with AngularFire for Angular apps
+   - `@firebase-oss/ui-react` for React apps without shadcn/ui
 
 > The new FirebaseUI for Web does not use the old `firebaseui.auth.AuthUI(firebase.auth())` widget model. Instead, you initialize a shared UI instance with `initializeUI(...)`, then render framework-specific components.
 
@@ -51,9 +51,9 @@ npm install @firebase-oss/ui-react@beta @firebase-oss/ui-styles
 
 ### Shadcn
 
-Shadcn uses the same React runtime as the React package, but the UI components come from the Firebase registry instead of direct package imports.
+The Firebase shadcn/ui registry provides a convenient way to install FirebaseUI in your React app.
 
-Add the Firebase registry to `components.json`:
+Add the Firebase registry to [`components.json`](https://ui.shadcn.com/docs/components-json):
 
 ```json
 {
@@ -242,7 +242,7 @@ const ui = initializeUI({
 
 ## Sign in
 
-Instead of calling `ui.start('#container', config)`, render the auth screen you want and handle success in component callbacks or Angular outputs.
+Render the auth screen you want and handle success in component callbacks or Angular outputs.
 
 ### React
 

From f807a0711c32511ac20cfc314f8600bfa16deded Mon Sep 17 00:00:00 2001
From: russellwheatley <russellwheatley85@gmail.com>
Date: Thu, 9 Apr 2026 12:08:10 +0100
Subject: [PATCH 07/10] docs: address reviewer feedback on migration-focused
 framing. i.e. remove mention of old firebaseui auth

---
 GETTING_STARTED.md | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md
index b379e566..cc9daaa6 100644
--- a/GETTING_STARTED.md
+++ b/GETTING_STARTED.md
@@ -1,6 +1,6 @@
 # Easily add sign-in to your web app with FirebaseUI for Web
 
-FirebaseUI for Web is a set of libraries built on the [Firebase Authentication](https://firebase.google.com/docs/auth) JavaScript SDK. Like the classic `firebaseui` package, it helps you ship authentication flows quickly, but the latest version is a complete rewrite with a modern modular architecture.
+FirebaseUI for Web is a set of libraries built on the [Firebase Authentication](https://firebase.google.com/docs/auth) JavaScript SDK. It helps you ship authentication flows quickly with a modern modular architecture.
 
 FirebaseUI for Web now provides these benefits:
 
@@ -13,7 +13,7 @@ FirebaseUI for Web now provides these benefits:
 
 Note: If you are migrating from FirebaseUI v6 or earlier, read [the migration guide](https://github.com/firebase/firebaseui-web/blob/main/MIGRATION.md) in the FirebaseUI repository.
 
-This document follows the same overall flow as the [classic FirebaseUI Web documentation](https://firebase.google.com/docs/auth/web/firebaseui), but updated for the current version of FirebaseUI for Web.
+This guide walks through installation, initialization, sign-in methods, and common configuration for React, Shadcn, and Angular apps.
 
 ## Before you begin
 
@@ -39,7 +39,7 @@ This document follows the same overall flow as the [classic FirebaseUI Web docum
    - `@firebase-oss/ui-angular` with AngularFire for Angular apps
    - `@firebase-oss/ui-react` for React apps without shadcn/ui
 
-> The new FirebaseUI for Web does not use the old `firebaseui.auth.AuthUI(firebase.auth())` widget model. Instead, you initialize a shared UI instance with `initializeUI(...)`, then render framework-specific components.
+> Initialize a shared UI instance with `initializeUI(...)`, then render the framework-specific components for the screens and buttons you want to use.
 
 ## Install packages
 
@@ -79,7 +79,7 @@ npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@be
 
 ## Initialize FirebaseUI
 
-The old library used a widget instance and `ui.start(...)`. The new library uses a shared UI store created with `initializeUI(...)`.
+Create a shared UI store with `initializeUI(...)`, then pass it to your framework integration.
 
 ### React
 
@@ -168,11 +168,7 @@ If you are using Shadcn, you typically do **not** import FirebaseUI's bundled CS
 
 Before users can sign in, enable each provider you want in **Authentication** -> **Sign-in method** in the Firebase console.
 
-The biggest change from the old library is this:
-
-- Old FirebaseUI used a single `signInOptions` array passed to a widget config.
-- New FirebaseUI uses screens, forms, and buttons that you render directly.
-- Cross-cutting configuration now lives in `behaviors` passed to `initializeUI(...)`.
+FirebaseUI for Web uses screens, forms, and buttons that you render directly. Shared configuration for those flows lives in `behaviors` passed to `initializeUI(...)`.
 
 ### Email address and password
 
@@ -311,7 +307,7 @@ export class SignInPageComponent {
 
 ## OAuth providers: popup vs redirect
 
-The old FirebaseUI used `signInFlow: 'popup' | 'redirect'`. The new library uses behaviors:
+Choose the provider sign-in flow with behaviors:
 
 - `providerPopupStrategy()` for popup flows
 - `providerRedirectStrategy()` for redirect flows
@@ -395,7 +391,7 @@ export class OAuthPageComponent {}
 
 ## Google One Tap
 
-The old library exposed credential helper and One Tap style integrations through widget configuration. In the new library, use the `oneTapSignIn(...)` behavior:
+Use the `oneTapSignIn(...)` behavior to enable Google One Tap:
 
 ```ts
 import { initializeUI, oneTapSignIn } from '@firebase-oss/ui-core';
@@ -416,7 +412,7 @@ Make sure Google sign-in is enabled in the Firebase console, then copy the web c
 
 ## Terms of service and privacy policy
 
-The old library used `tosUrl` and `privacyPolicyUrl` in the widget config. The new library attaches policy links through the platform provider configuration.
+Attach policy links through the platform provider configuration.
 
 ### React
 
@@ -456,7 +452,7 @@ export const appConfig: ApplicationConfig = {
 
 ## Upgrading anonymous users
 
-The old library supported anonymous account upgrade with `autoUpgradeAnonymousUsers` plus `signInFailure` merge handling. The new library keeps the capability, but it is now configured as a behavior.
+Configure anonymous account upgrade with the `autoUpgradeAnonymousUsers(...)` behavior.
 
 ```ts
 import {
@@ -476,7 +472,7 @@ const ui = initializeUI({
 });
 ```
 
-If you previously handled merge conflicts in v6 callbacks, see [MIGRATION.md](MIGRATION.md) for the updated behavior-based model.
+For migration details, see [MIGRATION.md](MIGRATION.md).
 
 ## Translations
 
@@ -501,6 +497,6 @@ const ui = initializeUI({
 ## Next steps
 
 - Read [README.md](README.md) for the full API, behaviors, and component reference.
-- Read [MIGRATION.md](MIGRATION.md) if you are moving from the old `firebaseui` package.
+- Read [MIGRATION.md](MIGRATION.md) if you are migrating an existing app to FirebaseUI for Web.
 - See the package-specific docs in [packages/react/README.md](packages/react/README.md), [packages/shadcn/README.md](packages/shadcn/README.md), and [packages/angular/README.md](packages/angular/README.md).
 - Explore the examples in [examples/react](examples/react), [examples/shadcn](examples/shadcn), and [examples/angular](examples/angular).

From 10a1779fa927cec19b1ae9a85d6e7223b9f530bc Mon Sep 17 00:00:00 2001
From: russellwheatley <russellwheatley85@gmail.com>
Date: Thu, 9 Apr 2026 12:15:52 +0100
Subject: [PATCH 08/10] docs: address reviewer feedback on setup flow and
 component guidance

---
 GETTING_STARTED.md | 100 +++++++++++++++++++++------------------------
 1 file changed, 47 insertions(+), 53 deletions(-)

diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md
index cc9daaa6..0b5a11ac 100644
--- a/GETTING_STARTED.md
+++ b/GETTING_STARTED.md
@@ -17,71 +17,67 @@ This guide walks through installation, initialization, sign-in methods, and comm
 
 ## Before you begin
 
-1. Add Firebase to your web app and enable **Authentication** in the [Firebase console](https://console.firebase.google.com/).
-2. Use the modular Firebase JS SDK:
+1. Add Firebase to your web app:
 
-   ```ts
-   import { initializeApp } from 'firebase/app';
-
-   const app = initializeApp({
-     /* your Firebase config */
-   });
-   ```
+   Enable **Authentication** in the [Firebase console](https://console.firebase.google.com/).
 
-3. Install `firebase` if it is not already in your project:
+   Install `firebase` if it is not already in your project:
 
    ```bash
    npm install firebase
    ```
 
-4. Choose your platform:
-   - the FirebaseUI Shadcn registry for [shadcn/ui](https://ui.shadcn.com/)-based React apps
-   - `@firebase-oss/ui-angular` with AngularFire for Angular apps
-   - `@firebase-oss/ui-react` for React apps without shadcn/ui
+   Use the modular Firebase JS SDK:
 
-> Initialize a shared UI instance with `initializeUI(...)`, then render the framework-specific components for the screens and buttons you want to use.
+   ```ts
+   import { initializeApp } from 'firebase/app';
 
-## Install packages
+   const app = initializeApp({
+     /* your Firebase config */
+   });
+   ```
 
-### React
+2. Choose your platform and install FirebaseUI:
 
-```bash
-npm install @firebase-oss/ui-react@beta @firebase-oss/ui-styles
-```
+   For [shadcn/ui](https://ui.shadcn.com/)-based React apps, add the Firebase registry to `components.json`:
 
-### Shadcn
+   ```json
+   {
+     "registries": {
+       "@firebase": "https://firebaseopensource.com/r/{name}.json"
+     }
+   }
+   ```
 
-The Firebase shadcn/ui registry provides a convenient way to install FirebaseUI in your React app.
+   The auth components used throughout this guide are available from that registry, including `sign-in-auth-screen`, `sign-up-auth-screen`, `email-link-auth-screen`, `oauth-screen`, `phone-auth-screen`, `google-sign-in-button`, `apple-sign-in-button`, and `github-sign-in-button`.
 
-Add the Firebase registry to [`components.json`](https://ui.shadcn.com/docs/components-json):
+   Then add the components you want to use:
 
-```json
-{
-  "registries": {
-    "@firebase": "https://firebaseopensource.com/r/{name}.json"
-  }
-}
-```
+   ```bash
+   npx shadcn@latest add @firebase/sign-in-auth-screen @firebase/google-sign-in-button
+   ```
 
-Then add the components you want to use:
+   This installs the underlying React FirebaseUI dependencies for you.
 
-```bash
-npx shadcn@latest add @firebase/sign-in-auth-screen
-```
+   For React apps without shadcn/ui, install:
 
-This installs the underlying React FirebaseUI dependencies for you.
+   ```bash
+   npm install @firebase-oss/ui-react@beta @firebase-oss/ui-styles
+   ```
 
-### Angular
+   For Angular apps, install:
 
-```bash
-npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta
-```
+   ```bash
+   npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta
+   ```
 
 ## Initialize FirebaseUI
 
 Create a shared UI store with `initializeUI(...)`, then pass it to your framework integration.
 
-### React
+### Shadcn
+
+Shadcn uses the same setup as React, because it also uses `@firebase-oss/ui-react` under the hood:
 
 ```tsx
 import { initializeApp } from 'firebase/app';
@@ -101,9 +97,7 @@ export function AppProviders({ children }: { children: React.ReactNode }) {
 }
 ```
 
-### Shadcn
-
-Shadcn uses the same setup as React, because it also uses `@firebase-oss/ui-react` under the hood:
+### React
 
 ```tsx
 import { initializeApp } from 'firebase/app';
@@ -173,7 +167,7 @@ FirebaseUI for Web uses screens, forms, and buttons that you render directly. Sh
 ### Email address and password
 
 1. Enable **Email/Password** in the Firebase console.
-2. Render `SignInAuthScreen` or `SignUpAuthScreen` in React/Shadcn, or `fui-sign-in-auth-screen` / `fui-sign-up-auth-screen` in Angular.
+2. Render `SignInAuthScreen` or `SignUpAuthScreen` in React, the generated `sign-in-auth-screen` or `sign-up-auth-screen` components in Shadcn, or `fui-sign-in-auth-screen` / `fui-sign-up-auth-screen` in Angular.
 
 Optional: require a display name during sign-up:
 
@@ -189,7 +183,7 @@ const ui = initializeUI({
 ### Email link authentication
 
 1. Enable **Email/Password** and **Email link (passwordless sign-in)** in the Firebase console.
-2. Render the email link components from your platform package.
+2. Render `EmailLinkAuthScreen` in React, the generated `email-link-auth-screen` component in Shadcn, or `fui-email-link-auth-screen` in Angular.
 3. Complete sign-in with the current URL using the core helpers when needed.
 
 ```ts
@@ -204,13 +198,13 @@ FirebaseUI for Web supports built-in buttons for providers such as Google, Apple
 
 1. Enable the provider in the Firebase console.
 2. Add your app domain to **Authorized domains** where required.
-3. Render the provider buttons you want.
+3. Render `OAuthScreen` with the provider buttons you want, such as `GoogleSignInButton`, `AppleSignInButton`, `FacebookSignInButton`, `GitHubSignInButton`, `MicrosoftSignInButton`, or `TwitterSignInButton` in React, the generated shadcn equivalents in your app, or `fui-oauth-screen` with `fui-google-sign-in-button`, `fui-apple-sign-in-button`, `fui-facebook-sign-in-button`, `fui-github-sign-in-button`, `fui-microsoft-sign-in-button`, or `fui-twitter-sign-in-button` in Angular.
 
 ### Phone number
 
 1. Enable **Phone** in the Firebase console.
 2. Add your app domain to **Authorized domains**.
-3. Render the phone auth screen or form for your platform.
+3. Render `PhoneAuthScreen` or `PhoneAuthForm` in React, the generated `phone-auth-screen` or `phone-auth-form` components in Shadcn, or `fui-phone-auth-screen` in Angular.
 
 Optional: configure allowed countries, default country, or reCAPTCHA behavior:
 
@@ -240,10 +234,12 @@ const ui = initializeUI({
 
 Render the auth screen you want and handle success in component callbacks or Angular outputs.
 
-### React
+### Shadcn
+
+Shadcn uses the same runtime and flow as React. The only difference is that you import the generated component from your app instead of from `@firebase-oss/ui-react`:
 
 ```tsx
-import { SignInAuthScreen } from '@firebase-oss/ui-react';
+import { SignInAuthScreen } from '@/components/sign-in-auth-screen';
 import { useNavigate } from 'react-router';
 
 export function SignInPage() {
@@ -259,12 +255,10 @@ export function SignInPage() {
 }
 ```
 
-### Shadcn
-
-Shadcn uses the same runtime and flow as React. The only difference is that you import the generated component from your app instead of from `@firebase-oss/ui-react`:
+### React
 
 ```tsx
-import { SignInAuthScreen } from '@/components/sign-in-auth-screen';
+import { SignInAuthScreen } from '@firebase-oss/ui-react';
 import { useNavigate } from 'react-router';
 
 export function SignInPage() {

From 17dfe175473228c454ddad3c8e83738228865795 Mon Sep 17 00:00:00 2001
From: russellwheatley <russellwheatley85@gmail.com>
Date: Thu, 9 Apr 2026 12:18:05 +0100
Subject: [PATCH 09/10] docs: address reviewer feedback on behavior
 customization docs

---
 GETTING_STARTED.md | 78 ++++++++++++++++++++++++----------------------
 1 file changed, 41 insertions(+), 37 deletions(-)

diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md
index 0b5a11ac..970d3492 100644
--- a/GETTING_STARTED.md
+++ b/GETTING_STARTED.md
@@ -97,6 +97,8 @@ export function AppProviders({ children }: { children: React.ReactNode }) {
 }
 ```
 
+Use your existing shadcn styles for these generated components. You typically do not import FirebaseUI's bundled CSS when using the shadcn registry.
+
 ### React
 
 ```tsx
@@ -156,8 +158,6 @@ If you are using Tailwind:
 @import '@firebase-oss/ui-styles/tailwind';
 ```
 
-If you are using Shadcn, you typically do **not** import FirebaseUI's bundled CSS. The generated components inherit your Shadcn design system instead.
-
 ## Set up sign-in methods
 
 Before users can sign in, enable each provider you want in **Authentication** -> **Sign-in method** in the Firebase console.
@@ -169,17 +169,6 @@ FirebaseUI for Web uses screens, forms, and buttons that you render directly. Sh
 1. Enable **Email/Password** in the Firebase console.
 2. Render `SignInAuthScreen` or `SignUpAuthScreen` in React, the generated `sign-in-auth-screen` or `sign-up-auth-screen` components in Shadcn, or `fui-sign-in-auth-screen` / `fui-sign-up-auth-screen` in Angular.
 
-Optional: require a display name during sign-up:
-
-```ts
-import { initializeUI, requireDisplayName } from '@firebase-oss/ui-core';
-
-const ui = initializeUI({
-  app,
-  behaviors: [requireDisplayName()],
-});
-```
-
 ### Email link authentication
 
 1. Enable **Email/Password** and **Email link (passwordless sign-in)** in the Firebase console.
@@ -230,6 +219,45 @@ const ui = initializeUI({
 });
 ```
 
+## Customize behavior
+
+Configure shared auth behavior in `behaviors` passed to `initializeUI(...)`.
+
+### Require a display name during sign-up
+
+```ts
+import { initializeUI, requireDisplayName } from '@firebase-oss/ui-core';
+
+const ui = initializeUI({
+  app,
+  behaviors: [requireDisplayName()],
+});
+```
+
+### Upgrade anonymous users
+
+Use the `autoUpgradeAnonymousUsers(...)` behavior to merge an anonymous session into a signed-in account.
+
+```ts
+import {
+  autoUpgradeAnonymousUsers,
+  initializeUI,
+} from '@firebase-oss/ui-core';
+
+const ui = initializeUI({
+  app,
+  behaviors: [
+    autoUpgradeAnonymousUsers({
+      async onUpgrade(ui, oldUserId, credential) {
+        // Migrate or merge user data here if needed.
+      },
+    }),
+  ],
+});
+```
+
+For migration details, see [MIGRATION.md](MIGRATION.md).
+
 ## Sign in
 
 Render the auth screen you want and handle success in component callbacks or Angular outputs.
@@ -444,30 +472,6 @@ export const appConfig: ApplicationConfig = {
 };
 ```
 
-## Upgrading anonymous users
-
-Configure anonymous account upgrade with the `autoUpgradeAnonymousUsers(...)` behavior.
-
-```ts
-import {
-  autoUpgradeAnonymousUsers,
-  initializeUI,
-} from '@firebase-oss/ui-core';
-
-const ui = initializeUI({
-  app,
-  behaviors: [
-    autoUpgradeAnonymousUsers({
-      async onUpgrade(ui, oldUserId, credential) {
-        // Migrate or merge user data here if needed.
-      },
-    }),
-  ],
-});
-```
-
-For migration details, see [MIGRATION.md](MIGRATION.md).
-
 ## Translations
 
 FirebaseUI for Web supports localization through `@firebase-oss/ui-translations`. At the moment, a couple of locales are bundled out of the box, including English (`en-US`) and Czech (`cs-CZ`). You can also register and use your own locale overrides today, and PRs to add more built-in languages are welcomed.

From 8cd93d124dba884a8e540dfe9d940f513ac707e0 Mon Sep 17 00:00:00 2001
From: russellwheatley <russellwheatley85@gmail.com>
Date: Thu, 9 Apr 2026 12:48:03 +0100
Subject: [PATCH 10/10] docs: Customization header and sign out to match other
 platforms

---
 GETTING_STARTED.md | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md
index 970d3492..ccd5b763 100644
--- a/GETTING_STARTED.md
+++ b/GETTING_STARTED.md
@@ -219,7 +219,7 @@ const ui = initializeUI({
 });
 ```
 
-## Customize behavior
+## Customization
 
 Configure shared auth behavior in `behaviors` passed to `initializeUI(...)`.
 
@@ -327,6 +327,17 @@ export class SignInPageComponent {
 }
 ```
 
+## Sign out
+
+FirebaseUI for Web uses the standard Firebase Authentication sign-out API:
+
+```ts
+import { getAuth, signOut } from 'firebase/auth';
+
+const auth = getAuth(app);
+await signOut(auth);
+```
+
 ## OAuth providers: popup vs redirect
 
 Choose the provider sign-in flow with behaviors: