FirebaseUI-Web V7 Beta (Rewrite)

We're excited to announce that the next development phase of FirebaseUI for Web has moved from alpha to beta!

The web development landscape has changed dramatically since the original FirebaseUI library was first released. This rewrite modernizes the library. It allows us to use the latest Firebase JS SDK, supports modern frameworks natively, and addresses long-awaited feature requests like theming and easier localization.

Learn more about the goals for this rewrite in the original alpha announcement.

What's New in Beta

While the Alpha sets the foundation, the Beta brings production-grade features, deeper customization options, and robust validation logic, including new support for shadcn/ui

Official shadcn/ui Support

FirebaseUI v7 introduces first-class support for shadcn/ui, making it the perfect auth solution for modern React stacks.

Get started by adding the official registry to your components.json file:

{
  "registries": {
    "@firebase": "https://firebaseopensource.com/r/{name}.json"
  }
}

Next add a component to your project using the shadcn/ui CLI:

shadcn add @firebase/sign-in-auth-screen

Improved Core API

The @firebase-ui/core package has been completely redesigned to support advanced headless implementations.

• Functional & Modular: You now import individual functions (e.g. signInWithEmailAndPassword), ensuring your bundle remains small.
• Behaviors System: Complex flows are handled via a composable plugin system. Simply plug in behaviors like autoUpgradeAnonymousUsers, oneTapSignIn, or recaptchaVerification.
• Locale-Aware Zod Schemas: We now export ready-to-use Zod schemas for every authentication form (createSignInAuthFormSchema, createPhoneAuthFormSchema, etc.). These schemas include localized validation logic, for building custom forms.
• Improved Error Handling: We have standardized error handling across the core api. Validation messages are now consistent, locale-aware, and provide better feedback for edge cases like missing display names or auth error handling.

Advanced Authentication

We have added a suite of new capabilities, including but not limited to:

• Complete Authentication flows: Full support for Email/Password Sign Up/In, Email Link authentication, Forgot Password, Phone Auth and OAuth (including custom providers).
• Google One Tap: A dedicated behavior to trigger the OneTap login component.
• Multi-Factor Authentication (MFA): Full support for MFA enrollment and sign-in (SMS & TOTP), including a generateTotpQrCode utility.
• Anonymous Authentication: Behaviors like autoAnonymousLogin for automatic anonymous sign-in and autoUpgradeAnonymousUsers to link anonymous accounts to new accounts.
• Phone Auth Utilities: Exposed recaptchaVerifier for manual control over verification flows, plus countryCodes behavior for international phone number support.
• OAuth Strategy Control: Choose between popup (default) or redirect strategies for OAuth flows via providerPopupStrategy and providerRedirectStrategy behaviors.
• Display Name Management: Optional requireDisplayName behavior to enforce display name collection during registration.

Styling & Theming

• Brand-Aware Provider Buttons: Modern, styled buttons for Google, Apple, GitHub, Microsoft, Facebook, and Twitter/X, with the ability to style your own custom providers.
• Zero Specificity Styles: We now use the :where() selector for default styles. You can override the default styling with standard CSS or Tailwind classes without needing modifiers.
• Automatic Dark Mode: The library now detects and applies dark mode styles based on your root configuration.
• Tailwind Integration: Native Tailwind CSS support with dedicated import paths. Import styles directly into your Tailwind configuration or use the compiled CSS bundle for non-Tailwind projects.

Example Apps

Expanded and updated examples to show v7 in action:

• shadcn/ui: Full registry integration.
• Next.js: SSR and SSG demonstration with both client-side and server-side rendering examples.
• Angular: Full auth flow implementation with SSR support.
• React: Standard headless implementation for a React SPA.

Migration guide

While v7 is a fundamentally different library, we've created a guide describing how to move from v6 config objects to v7 components. See MIGRATION.md for details.

Try it out

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

⚠️ Note for Alpha Users: We have renamed EmailPasswordForm to SignInAuthForm to better reflect its purpose. Please update your imports when upgrading to Beta.

We're seeking your feedback as we continue shaping this project, so let us know what you think in the v7 discussion topic!