docs: getting started documentation for web FirebaseUI v7 by russellwheatley · Pull Request #1340 · firebase/firebaseui-web

russellwheatley · 2026-03-20T10:11:31Z

Wrote a getting started document for the latest FirebaseUI web library to mirror closely the previous: https://firebase.google.com/docs/auth/web/firebaseui

gemini-code-assist · 2026-03-20T10:12:41Z

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request adds a comprehensive getting started guide for the latest FirebaseUI for Web library. It provides developers with step-by-step instructions on how to integrate FirebaseUI into their web applications, covering installation, initialization, authentication method setup, and UI customization for React, Shadcn, and Angular platforms. The guide also highlights key differences from the previous FirebaseUI version and offers migration guidance.

Highlights

Getting Started Guide: This PR introduces a new 'Getting Started' document for the latest FirebaseUI web library, mirroring the structure of the previous version.
Modernization: The new FirebaseUI for Web features a complete rewrite with a modern modular architecture, offering benefits like modular SDK support, composable UI elements, and support for React, Shadcn, and Angular.
Configuration: The guide details how to initialize FirebaseUI with the new initializeUI(...) method, set up sign-in methods, include styles, and configure behaviors for OAuth flows, Google One Tap, and anonymous user upgrades.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces a comprehensive "Getting Started" guide that mirrors the structure of the classic FirebaseUI documentation. The guide is well-written and covers installation and usage for React, Shadcn, and Angular, along with key features like authentication methods, UI customization, and behaviors. I've identified a couple of minor inconsistencies in the documentation that should be addressed to ensure clarity for developers. My detailed feedback is in the comments below.

GETTING_STARTED.md

dackers86 · 2026-03-25T17:02:17Z

GETTING_STARTED.md

+
+## Initialize FirebaseUI
+
+The old library used a widget instance and `ui.start(...)`. The new library uses a shared UI store created with `initializeUI(...)`.


Do we need to make references to the old library. This document could be seen as just the most relevant version?

I think it helps users understand the difference between them so it makes it easier to migrate, see what @jhuleatt thinks

Let's remove all references to the old library, except in the migration guide blurb above

russellwheatley · 2026-03-25T18:31:31Z

CI failure is addressed in this PR: #1345

russellwheatley · 2026-03-25T18:32:04Z

@jhuleatt - if you want to take a pass at this, I'd be grateful 🙏

jhuleatt · 2026-04-08T15:18:51Z

GETTING_STARTED.md

+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 now provides these benefits:
+
+- 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.


Instead of comparing to the old package, this should just list features that would be useful to someone that has never used FirebaseUI before. I think it will end up being a fusion of this list and the list that's currently in the docs

jhuleatt · 2026-04-08T15:20:29Z

GETTING_STARTED.md

+- 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.


Suggested change

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.

jhuleatt · 2026-04-08T15:20:38Z

GETTING_STARTED.md

+
+If you are migrating from the old `firebaseui` package, read [MIGRATION.md](MIGRATION.md) alongside this guide.
+
+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.


jhuleatt · 2026-04-08T15:22:27Z

GETTING_STARTED.md

+2. Use the modular Firebase JS SDK:
+
+   ```ts
+   import { initializeApp } from 'firebase/app';
+
+   const app = initializeApp({
+     /* your Firebase config */
+   });
+   ```
+
+3. Install `firebase` if it is not already in your project:
+
+   ```bash
+   npm install firebase
+   ```
+


these can be sub-steps of step 1. They're also out of order (need to install Firebase first)

jhuleatt · 2026-04-08T15:23:55Z

GETTING_STARTED.md

+   - `@firebase-oss/ui-react` for React apps
+   - the FirebaseUI Shadcn registry for Shadcn-based apps
+   - `@firebase-oss/ui-angular` with AngularFire for Angular apps


Suggested change

- `@firebase-oss/ui-react` for React apps

- the FirebaseUI Shadcn registry for Shadcn-based apps

- `@firebase-oss/ui-angular` with AngularFire for Angular 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

Let's reorder to shadcn-first

jhuleatt · 2026-04-08T15:31:31Z

GETTING_STARTED.md

+### 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.


as you mention the specific components in "Email address and password", let's do that for every method

jhuleatt · 2026-04-08T15:31:56Z

GETTING_STARTED.md

+
+## Sign in
+
+Instead of calling `ui.start('#container', config)`, render the auth screen you want and handle success in component callbacks or Angular outputs.


Suggested change

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.

jhuleatt · 2026-04-08T15:32:58Z

GETTING_STARTED.md

+## 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.


remove reference to the old library

jhuleatt · 2026-04-08T15:33:34Z

GETTING_STARTED.md

+};
+```
+
+## Upgrading anonymous users


I'm wondering if this should go under a new "Customize behavior" heading, along with the require username behavior

jhuleatt · 2026-04-08T15:34:30Z

GETTING_STARTED.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.


interesting, was Czech a community contribution?

maybe we can have Gemini generate a bunch of different languages

russellwheatley added 3 commits March 20, 2026 08:32

docs: getting started with FirebaseUI web documentation

076ac51

docs: update to be more concise and closer to old get started

160b473

docs: update language part

4563e10

gemini-code-assist bot reviewed Mar 20, 2026

View reviewed changes

GETTING_STARTED.md Show resolved Hide resolved

GETTING_STARTED.md Outdated Show resolved Hide resolved

docs: angular should have consistent dependency install

b759d0d

russellwheatley marked this pull request as ready for review March 24, 2026 09:04

russellwheatley changed the title ~~docs: getting started documentation~~ docs: getting started documentation for web FirebaseUI v7 Mar 24, 2026

dackers86 reviewed Mar 25, 2026

View reviewed changes

russellwheatley assigned jhuleatt Mar 25, 2026

docs: update to use official registry

e63011a

Merge branch 'main' into getting-started-doc

59e4784

russellwheatley unassigned jhuleatt Apr 7, 2026

russellwheatley requested a review from jhuleatt April 7, 2026 12:59

jhuleatt reviewed Apr 8, 2026

View reviewed changes


		## Initialize FirebaseUI

		The old library used a widget instance and `ui.start(...)`. The new library uses a shared UI store created with `initializeUI(...)`.

	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.


		If you are migrating from the old `firebaseui` package, read [MIGRATION.md](MIGRATION.md) alongside this guide.

		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.


		## Sign in

		Instead of calling `ui.start('#container', config)`, render the auth screen you want and handle success in component callbacks or Angular outputs.

	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.

		## 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.


		## 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.

Conversation

russellwheatley commented Mar 20, 2026

Uh oh!

gemini-code-assist bot commented Mar 20, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

russellwheatley commented Mar 25, 2026

Uh oh!

russellwheatley commented Mar 25, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants