v7 Alpha (rewrite)

[jhuleatt]

v7 Alpha (Rewrite)

We're excited to introduce a preview of the next evolution of FirebaseUI for Web — a complete rewrite designed to reflect the state of the modern web.

The web development landscape has changed dramatically since the original FirebaseUI library was first released. This rewrite brings a fresh take, allowing us to use the modular Firebase JS SDK, and address long-awaited feature requests like theming and easier localization.

✨ Core Features

🧱 Modern Web Support

Prebuilt framework components
Drop-in UI components for Angular and React that make it easier to build authentication screens.

// Next.js
import { EmailLinkAuthScreen } from "@firebase-ui/react";

// Angular
import { EmailLinkAuthScreenComponent } from '@firebase-ui/angular';

SSR/SSG compatibility
Supports server-side rendering and static site generation.

Reduced bundle size
The new API uses the modular Firebase JS SDK and has a new configuration API designed to maximize tree-shakeability, so that you only need to bundle the parts of the library you actually use.

Headless UI API
The Angular and React components are built on a shared core library, and we're working on refining that library so that other frameworks can use FirebaseUI. We're still working on the documentation for this, but you can take a look at the source if you're curious.

🌐 i18n & Translations

Easier translations
The original FirebaseUI library required re-building the library to incorporate other languages. The new version has a modular approach that makes it easy to include the language(s) you need via config.

import { english } from '@firebase-ui/translations';

Note: for this early release, English is the only included language, but you can add your own with the customLanguage api.

Customizable text
Simple API to override default strings for full control over UI language.

🎨 Styling & Theming

Out-of-the-box theming
TailwindCSS-based default styling with override capability. Here's an example of a dark theme.

Custom theming via CSS variables
Fine-grained design control using your own theme tokens to reflect your brand.

🧪 Example Projects

Angular
Pre-configured app showing state, theming, and auth flows.

React (static)
Full working demo including auth setup, state management, and theming.

Next.js
Example with SSR and full FirebaseUI integration.

---

Try it out

Documentation and source for the updated library are in the v7-alpha branch. See Framework-specific Installation and the Getting Started guide to try it out yourself.

Note that this is an early alpha version of the library. It doesn't have all the functionality of the original FirebaseUI library, and the API may change. We’re seeking your feedback as we continue shaping this project, so let us know what you think in the v7 alpha discussion topic!

---

What about the current library (v6)?

FirebaseUI v6 will remain available to use on npm and CDN, but won't receive new features.

Will v7 be distributed via CDN?

v6 is available via the gstatic CDN. Right now v7 is only available via npm. Since the new library is designed to be modular, it's unclear what a CDN-distributed version would look like. What would you like a CDN version of v7 to look like? Let us know in the v7 alpha discussion topic.

How do I migrate from v6 to v7?

The features above, especially the focus on framework integrations and modularity, require API changes from v6. When using FirebaseUI, the main changes are:

• The modular Firebase JS SDK is required
• Instead of flags in a config object, different functionality needs to be imported individually
• Some settings, like ToS url, have moved from the config object to React props or Angular input properties.

We understand it's difficult to rewrite code. We're exploring a compatibility API that would take the v6 config object, at the expense of tree-shakeability, but don't have anything to share yet.

To give a rough idea of the difference at setup, here's how to implement email and password auth with automatic anonymous user upgrade in v6 and v7:

v6:

import firebase from "firebase/compat/app";
import * as firebaseui from "firebaseui";
import "firebaseui/dist/firebaseui.css";

const uiConfig = {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID,
  ],
  tosUrl: '<my-tos-url>',
  privacyPolicyUrl: '<my-privacy-policy-url>',
  autoUpgradeAnonymousUsers: true,
  callbacks: { /* ... */ }
};

const ui = new firebaseui.auth.AuthUI(firebase.auth());

v7:

// index.tsx
import React from "react";
import ReactDOM from "react-dom/client";

import { getApp } from "firebase/app";
import {
  autoUpgradeAnonymousUsers,
  intializeUI,
} from "@firebase-ui/core";
import { ConfigProvider } from "@firebase-ui/react";

const ui = initializeUI({
  app: getApp(),
  behaviors: [autoUpgradeAnonymousUsers()],
});

const root = document.getElementById("root");

ReactDOM.createRoot(root).render(
    <ConfigProvider
      ui={ui}
      policies={{
        termsOfServiceUrl: "<my-tos-url>",
        privacyPolicyUrl: "<my-privacy-policy-url>",
      }}
    >
	{ /* your app components here... */ }
    </ConfigProvider>
);

// SignIn.tsx

import { SignInAuthScreen } from "@firebase-ui/react";

export default function SignIn() {
  // The default sign in screen is email auth
  return <SignInAuthScreen />;
}

[jhuleatt]

This is a big change with a lot to discuss! Please post in the v7 alpha Discussions topic with your thoughts and feedback.