FirebaseUI for Web

Firebase UI for Web brings out-of-the-box components for Firebase for your favourite frameworks:

• Support for React, Shadcn and Angular.
• Composable authentication components; Email/Password Sign Up/In, Forgot Password, Email Link, Phone Auth, OAuth, Multi-Factor and more.
• Configure the behavior of internal logic and UI via behaviors.
• Framework agnostic core package; bring your own UI.
• Built-in localization via translations.

Migration

Firebase UI v7 is a complete rewrite to support modern languages and frameworks. You can find information about the previous version, v6, in the v6-archive branch.

If you are looking to migrate, please check the MIGRATION.md guide.

Table of contents

• Getting Started
• Styling
• Behaviors
• Translations
• Reference API
• Bring your own UI

Getting Started

To get started, make sure that the firebase package is installed in your project:

npm install firebase

Once installed, setup Firebase in your project ensuring you have configured your Firebase instance via initializeApp:

import { initializeApp } from 'firebase/app';

const app = initializeApp({ ... });

Next, follow the framework specific installation steps, for either React, Shadcn or Angular:

React

Install the @firebase-oss/ui-react package:

bash npm install @firebase-oss/ui-react@beta

Alongside your Firebase configuration, import the initializeUI function and pass your configured Firebase App instance:

```ts import { initializeApp } from 'firebase/app'; import { initializeUI } from '@firebase-oss/ui-core';

const app = initializeApp({ ... });

const ui = initializeUI({ app, }); ```

Once configured, provide the ui instance to your application by wrapping it within the FirebaseUIProvider component:

```tsx import { FirebaseUIProvider } from '@firebase-oss/ui-react';

function App() { return ( ... ); } ```

Ensure your application includes the bundled styles for Firebase UI (see styling for additional info).

css @import "@firebase-oss/ui-styles/dist.min.css"; /* Or, if you use tailwind */ @import "@firebase-oss/ui-styles/tailwind";

That's it 🎉 You can now import components and start building:

```tsx import { SignInAuthScreen } from '@firebase-oss/ui-react';

export function MySignInPage() { return ( <>

Welcome

{ ... }} /> </> ) } ```

View the reference API for a full list of components.

Shadcn

Firstly, ensure you have installed and setup Shadcn in your project.

Once configured, add the @firebase registry to your components.json file:

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

Next, add a Firebase UI component from the registry, e.g.

bash npx shadcn@latest add @firebase/sign-in-auth-screen

This will automatically install any required dependencies.

Alongside your Firebase configuration, import the initializeUI function and pass your configured Firebase App instance:

```ts import { initializeApp } from 'firebase/app'; import { initializeUI } from '@firebase-oss/ui-core';

const app = initializeApp({ ... });

const ui = initializeUI({ app, }); ```

Once configured, provide the ui instance to your application by wrapping it within the FirebaseUIProvider component:

```tsx import { FirebaseUIProvider } from '@firebase-oss/ui-react';

function App() { return ( ... ); } ```

That's it 🎉 You can now import components and start building:

```tsx import { SignInAuthScreen } from '@/components/sign-in-auth-screen';

export function MySignInPage() { return ( <>

Welcome

{ ... }} /> </> ) } ```

View the reference API for a full list of components.

Angular

The Angular project requires that AngularFire is setup and configured before using Firebase UI.

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

Alongside your existing providers, add the provideFirebaseUI provider, returning a new Firebase UI instance via initializeUI:

```ts import { provideFirebaseApp, initializeApp } from '@angular/fire/app'; import { initializeUI } from '@firebase-oss/ui-core';

export const appConfig: ApplicationConfig = { providers: [ provideFirebaseApp(() => initializeApp({ ... })), provideFirebaseUI((apps) => initializeUI({ app: apps[0] })), ] }; ```

Ensure your application includes the bundled styles for Firebase UI (see styling for additional info).

css @import "@firebase-oss/ui-styles/dist.min.css"; /* Or for tailwind users */ @import "@firebase-oss/ui-styles/tailwind";

That's it 🎉 You can now import components and start building:

```tsx import { Component } from "@angular/core"; import { SignInAuthScreenComponent } from "@firebase-oss/ui-angular";

@Component({ selector: "sign-in-route", standalone: true, imports: [CommonModule, SignInAuthScreenComponent], template: <header>Sign In</header> <fui-sign-in-auth-screen (signIn)="onSignIn($event)" />, }) export class SignInRoute { onSignIn(user: User) { // ... } } ```

View the reference API for a full list of components.

Styling

Firebase UI provides out-of-the-box styling via CSS, and provides means to customize the UI to align with your existing application or guidelines.

Note: if you are using Shadcn this section does not apply. All styles are inherited from your Shadcn configuration.

Ensure your application imports the Firebase UI CSS file. This can be handled a number of ways depending on your setup:

CSS Bundling

If your bundler supports importing CSS files from node_modules:

Via JS:

import '@firebase-oss/ui-styles/dist.min.css';

Via CSS:

@import "@firebase-oss/ui-styles/dist.min.css";

Tailwind

If you are using Tailwind CSS, add the Tailwind specific CSS file:

@import "tailwindcss";
@import "@firebase-oss/ui-styles/tailwind";

Via CDN

If none of these options apply, include the CSS file via a CDN:

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@firebase-oss/ui-styles/dist/dist.min.css">
</head>

Theming

Out of the box, Firebase UI provides a neutral light and dark theme with some opinionated styling (colors, border radii etc). These are all controlled via CSS variables, allowing you to update these at will to match any existing UI design guidelines. To modify the variables, override the following CSS variables:

:root {
  /* The primary color is used for the button and link colors */
  --fui-primary: ...;
  /* The primary hover color is used for the button and link colors when hovered */
  --fui-primary-hover: ...;
  /* The primary surface color is used for the button text color */
  --fui-primary-surface: ...;
  /* The text color used for body text */
  --fui-text: ...;
  /* The muted text color used for body text, such as subtitles */
  --fui-text-muted: ...;
  /* The background color of the cards */
  --fui-background: ...;
  /* The border color used for none input fields */
  --fui-border: ...;
  /* The input color used for input fields */
  --fui-input: ...;
  /* The error color used for error messages */
  --fui-error: ...;
  /* The radius used for the input fields */
  --fui-radius: ...;
  /* The radius used for the cards */
  --fui-radius-card: ...;
}

Behaviors

Out of the box, Firebase UI applies sensible default behaviors for how the UI should handle specific scenarios which may occur during user flows. You can however customize this behavior by modifying your initializeUI to provide an array of "behaviors", for example:

import { requireDisplayName } from '@firebase-oss/ui-core';

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

autoAnonymousLogin

The autoAnonymousLogin behavior will automatically sign users in via anonymous authentication when initialized. Whilst authenticating, the Firebase UI state will be set to "loading", allowing you to block the loading of the application if you wish.

import { autoAnonymousLogin } from '@firebase-oss/ui-core';

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

autoUpgradeAnonymousUsers

The autoUpgradeAnonymousUsers behavior will automatically upgrade a user who is anonymously authenticated with your application upon a successful sign in (including OAuth). You can optionally provide a callback to handle an upgrade (such as merging account data). During the async callback, the UI will stay in a pending state.

import { autoUpgradeAnonymousUsers } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [autoUpgradeAnonymousUsers({
    async onUpgrade(ui, oldUserId, credential) {
      // Some account upgrade logic.
    }
  })],
});

recaptchaVerification

The recaptchaVerification behavior allows you to customize how the reCAPTCHA provider is rendered during some UI flows (such as Phone Authentication).

By default, the reCAPTCHA UI will be rendered in "invisible" mode. To override this:

import { recaptchaVerification } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [recaptchaVerification({
    size: "compact", // "normal" | "invisible" | "compact"
    theme: "dark", // "light" | "dark"
  })],
});

providerRedirectStrategy

The providerRedirectStrategy behavior redirects any external provider authentication (e.g. OAuth) via a redirect flow.

import { providerRedirectStrategy } from '@firebase-oss/ui-core';

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

providerPopupStrategy

The providerPopupStrategy behavior causes any external provider authentication (e.g. OAuth) to be handled via a popup window. This is the default strategy.

import { providerPopupStrategy } from '@firebase-oss/ui-core';

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

oneTapSignIn

The oneTapSignIn behavior triggers the Google One Tap experience to render.

Note: This behavior requires that Google Sign In is enabled as an authentication method on the Firebase Console. Once enabled, you can obtain the required clientId via the "Web SDK configuration" settings on the Console.

The One Tap popup can be additionally configured via this behavior:

import { oneTapSignIn } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [oneTapSignIn({
    clientId: "...", // required - from Firebase Console under Google provider
    autoSelect: false, // optional
    cancelOnTapOutside: false, // optional
  })],
});

See https://developers.google.com/identity/gsi/web/reference/js-reference for a full list of configuration options.

requireDisplayName

The requireDisplayName behavior configures Firebase UI to display a required "Display Name" input box in the UI, which is applied to the users account during sign up flows.

If you are not using pre-built components, the createUserWithEmailAndPassword function from Firebase UI will throw if a display name is not provided.

import { requireDisplayName } from '@firebase-oss/ui-core';

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

countryCodes

The countryCodes behavior controls how country codes are consumed throughout your application, for example during Phone Authentication flows when selecting a phone numbers country code.

import { countryCodes } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [countryCodes({
    allowedCountries: ['GB', 'US', 'FR'], // only allow Great Britain, USA and France
    defaultCountry: 'GB', // GB is default
  })],
});

Translations

Note: Firebase UI currently only provides English (en-US) translations out of the box.

Firebase UI provides a mechanism for overriding any localized strings in the UI components. To define your own custom locale, use the registerLocale function from the @firebase-oss/ui-translations package:

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

const frFr = registerLocale('fr-FR', {
  labels: {
    signIn: "Sign In, Matey",
  },
}); 

To use this locale, provide it to the initializeUI configuration:

const ui = initializeUI({
  app,
  locale: frFr,
});

Dynamic transl