firebase/firebaseui-web

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

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

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

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:

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

function App() {
  return (
    <FirebaseUIProvider ui={ui}>
      ...
    </FirebaseUIProvider>
  );
}

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

@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:

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

export function MySignInPage() {
  return (
    <>
      <header>Welcome</header>
      <SignInAuthScreen onSignIn={() => { ... }} />
    </>
  )
}

View the reference API for a full list of components.

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

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

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

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

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:

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:

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

function App() {
  return (
    <FirebaseUIProvider ui={ui}>
      ...
    </FirebaseUIProvider>
  );
}

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

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

export function MySignInPage() {
  return (
    <>
      <header>Welcome</header>
      <SignInAuthScreen onSignIn={() => { ... }} />
    </>
  )
}

View the reference API for a full list of components.

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:

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:

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

@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:

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.

initializeUI

Initalizes a new FirebaseUIStore instance.

Returns FirebaseUIStore.

signInWithEmailAndPassword

Signs the user in with an email and password.

Returns Promise<UserCredential>.

createUserWithEmailAndPassword

Creates a new user account with an email and password.

Returns Promise<UserCredential>.

verifyPhoneNumber

Verifies a phone number and sends a verification code.

Returns Promise<string> (verification ID).

confirmPhoneNumber

Confirms a phone number verification with the verification code.

Returns Promise<UserCredential>.

sendPasswordResetEmail

Sends a password reset email to the user.

Returns Promise<void>.

sendSignInLinkToEmail

Sends a sign-in link to the user's email address.

Returns Promise<void>.

signInWithEmailLink

Signs in a user with an email link.

Returns Promise<UserCredential>.

signInWithCredential

Signs in a user with an authentication credential.

Returns Promise<UserCredential>.

signInWithCustomToken

Signs in a user with a custom token.

Returns Promise<UserCredential>.

signInAnonymously

Signs in a user anonymously.

Returns Promise<UserCredential>.

signInWithProvider

Signs in a user with an OAuth provider (e.g., Google, Facebook, etc.).

Returns Promise<UserCredential | never>.

completeEmailLinkSignIn

Completes the email link sign-in flow by checking if the current URL is a valid email link.

Returns Promise<UserCredential | null>.

generateTotpQrCode

Generates a QR code data URL for TOTP (Time-based One-Time Password) enrollment.

Returns string (data URL of the QR code).

signInWithMultiFactorAssertion

Signs in a user with a multi-factor authentication assertion.

Returns Promise<UserCredential>.

enrollWithMultiFactorAssertion

Enrolls a multi-factor authentication method for the current user.

Returns Promise<void>.

generateTotpSecret

Generates a TOTP secret for multi-factor authentication enrollment.

Returns Promise<TotpSecret>.

autoAnonymousLogin

Automatically signs in users anonymously when the UI initializes.

Returns Behavior<"autoAnonymousLogin">.

autoUpgradeAnonymousUsers

Automatically upgrades anonymous users to permanent accounts when they sign in with a credential or provider.

Returns Behavior<"autoUpgradeAnonymousCredential" | "autoUpgradeAnonymousProvider" | "autoUpgradeAnonymousUserRedirectHandler">.

recaptchaVerification

Configures reCAPTCHA verification for phone authentication.

Returns Behavior<"recaptchaVerification">.

providerRedirectStrategy

Configures OAuth providers to use redirect flow (full page redirect).

Returns Behavior<"providerSignInStrategy" | "providerLinkStrategy">.

providerPopupStrategy

Configures OAuth providers to use popup flow (popup window).

Returns Behavior<"providerSignInStrategy" | "providerLinkStrategy">.

oneTapSignIn

Enables Google One Tap sign-in.

Returns Behavior<"oneTapSignIn">.

requireDisplayName

Requires users to provide a display name during registration.

Returns Behavior<"requireDisplayName">.

countryCodes

Configures country code handling for phone number input.

Returns Behavior<"countryCodes">.

hasBehavior

Checks if a behavior is enabled on a Firebase UI instance.

Returns boolean.

getBehavior

Gets a behavior handler from a Firebase UI instance.

Returns the behavior handler function.

defaultBehaviors

The default behaviors that are automatically included in a Firebase UI instance. Includes recaptchaVerification, providerRedirectStrategy, and countryCodes.

Type: Behavior<"recaptchaVerification">.

countryData

An array of country data objects containing name, dial code, country code, and emoji for all supported countries.

Type: readonly CountryData[].

formatPhoneNumber

Formats a phone number according to the specified country data.

Returns string (formatted phone number in E164 format).

FirebaseUIError

A custom error class that extends FirebaseError with localized error messages.

handleFirebaseError

Handles Firebase errors and converts them to FirebaseUIError with localized messages. Also handles special cases like account linking and multi-factor authentication.

Throws FirebaseUIError.

getTranslation

Gets a translated string for a given category and key.

Returns string.

createSignInAuthFormSchema

Creates a Zod schema for email/password sign-in form validation.

Returns ZodObject with email and password fields.

createSignUpAuthFormSchema

Creates a Zod schema for email/password sign-up form validation.

Returns ZodObject with email, password, and optionally displayName fields.

createForgotPasswordAuthFormSchema

Creates a Zod schema for forgot password form validation.

Returns ZodObject with email field.

createEmailLinkAuthFormSchema

Creates a Zod schema for email link authentication form validation.

Returns ZodObject with email field.

createPhoneAuthNumberFormSchema

Creates a Zod schema for phone number input form validation.

Returns ZodObject with phoneNumber field.

createPhoneAuthVerifyFormSchema

Creates a Zod schema for phone verification code form validation.

Returns ZodObject with verificationId and verificationCode fields.

createMultiFactorPhoneAuthNumberFormSchema

Creates a Zod schema for multi-factor phone authentication number form validation.

Returns ZodObject with phoneNumber and displayName fields.

createMultiFactorPhoneAuthAssertionFormSchema

Creates a Zod schema for multi-factor phone authentication assertion form validation.

Returns ZodObject with phoneNumber field.

createMultiFactorPhoneAuthVerifyFormSchema

Creates a Zod schema for multi-factor phone authentication verification form validation.

Returns ZodObject with verificationId and verificationCode fields.

createMultiFactorTotpAuthNumberFormSchema

Creates a Zod schema for multi-factor TOTP authentication form validation.

Returns ZodObject with displayName field.

createMultiFactorTotpAuthVerifyFormSchema

Creates a Zod schema for multi-factor TOTP verification code form validation.

Returns ZodObject with verificationCode field.

FirebaseUIProvider

Provider component that wraps your application and provides Firebase UI context.

SignInAuthForm

Form component for email/password sign-in.

SignUpAuthForm

Form component for email/password sign-up.

ForgotPasswordAuthForm

Form component for password reset.

EmailLinkAuthForm

Form component for email link authentication.

PhoneAuthForm

Form component for phone number authentication.

MultiFactorAuthAssertionForm

Form component for multi-factor authentication assertion during sign-in.

MultiFactorAuthEnrollmentForm

Form component for multi-factor authentication enrollment.

SmsMultiFactorAssertionForm

Form component for SMS-based multi-factor authentication assertion.

SmsMultiFactorEnrollmentForm

Form component for SMS-based multi-factor authentication enrollment.

TotpMultiFactorAssertionForm

Form component for TOTP-based multi-factor authentication assertion.

TotpMultiFactorEnrollmentForm

Form component for TOTP-based multi-factor authentication enrollment.

SignInAuthScreen

Screen component for email/password sign-in. Extends SignInAuthFormProps and accepts children.

SignUpAuthScreen

Screen component for email/password sign-up. Extends SignUpAuthFormProps and accepts children.

ForgotPasswordAuthScreen

Screen component for password reset. Extends ForgotPasswordAuthFormProps.

EmailLinkAuthScreen

Screen component for email link authentication. Extends EmailLinkAuthFormProps and accepts children.

PhoneAuthScreen

Screen component for phone number authentication. Extends PhoneAuthFormProps and accepts children.

MultiFactorAuthAssertionScreen

Screen component for multi-factor authentication assertion. Extends MultiFactorAuthAssertionFormProps.

MultiFactorAuthEnrollmentScreen

Screen component for multi-factor authentication enrollment. Extends MultiFactorAuthEnrollmentFormProps.

OAuthScreen

Screen component for OAuth provider sign-in.

OAuthButton

Generic OAuth button component.

GoogleSignInButton

Google OAuth sign-in button component.

AppleSignInButton

Apple OAuth sign-in button component.

FacebookSignInButton

Facebook OAuth sign-in button component.

GitHubSignInButton

GitHub OAuth sign-in button component.

MicrosoftSignInButton

Microsoft OAuth sign-in button component.

TwitterSignInButton

Twitter OAuth sign-in button component.

Button

Button component with variant support.

Card

Card container component.

CardHeader

Card header component. Accepts children and standard div props.

CardTitle

Card title component. Accepts children and standard h2 props.

CardSubtitle

Card subtitle component. Accepts children and standard p props.

CardContent

Card content component. Accepts children and standard div props.

CountrySelector

Country selector component for phone number input.

Divider

Divider component.

Policies

Component that renders terms of service and privacy policy links. Automatically rendered when policies are provided to FirebaseUIProvider.

RedirectError

Component that displays redirect errors from Firebase UI authentication flow.

useUI

Gets the Firebase UI configuration from context.

Returns FirebaseUI.

useRedirectError

Gets the redirect error from the UI store.

Returns string | undefined.

useSignInAuthFormSchema

Creates a Zod schema for sign-in form validation.

Returns ZodObject with email and password fields.

useSignUpAuthFormSchema

Creates a Zod schema for sign-up form validation.

Returns ZodObject with email, password, and optionally displayName fields.

useForgotPasswordAuthFormSchema

Creates a Zod schema for forgot password form validation.

Returns ZodObject with email field.

useEmailLinkAuthFormSchema

Creates a Zod schema for email link authentication form validation.

Returns ZodObject with email field.

usePhoneAuthNumberFormSchema

Creates a Zod schema for phone number input form validation.

Returns ZodObject with phoneNumber field.

usePhoneAuthVerifyFormSchema

Creates a Zod schema for phone verification code form validation.

Returns ZodObject with verificationId and verificationCode fields.

useMultiFactorPhoneAuthNumberFormSchema

Creates a Zod schema for multi-factor phone authentication number form validation.

Returns ZodObject with phoneNumber and displayName fields.

useMultiFactorPhoneAuthVerifyFormSchema

Creates a Zod schema for multi-factor phone authentication verification form validation.

Returns ZodObject with verificationId and verificationCode fields.

useMultiFactorTotpAuthNumberFormSchema

Creates a Zod schema for multi-factor TOTP authentication form validation.

Returns ZodObject with displayName field.

useMultiFactorTotpAuthVerifyFormSchema

Creates a Zod schema for multi-factor TOTP verification code form validation.

Returns ZodObject with verificationCode field.

useRecaptchaVerifier

Creates and manages a reCAPTCHA verifier instance.

Returns RecaptchaVerifier \| null.

useSignInAuthForm

Hook for managing sign-in form state and validation.

Returns form state and handlers.

useSignInAuthFormAction

Hook for sign-in form submission action.

Returns async action handler.

useSignUpAuthForm

Hook for managing sign-up form state and validation.

Returns form state and handlers.

useSignUpAuthFormAction

Hook for sign-up form submission action.

Returns async action handler.

useRequireDisplayName

Hook to check if display name is required for sign-up.

Returns boolean.

useForgotPasswordAuthForm

Hook for managing forgot password form state and validation.

Returns form state and handlers.

useForgotPasswordAuthFormAction

Hook for forgot password form submission action.

Returns async action handler.

useEmailLinkAuthForm

Hook for managing email link auth form state and validation.

Returns form state and handlers.

useEmailLinkAuthFormAction

Hook for email link auth form submission action.

Returns async action handler.

useEmailLinkAuthFormCompleteSignIn

Hook to complete email link authentication.

Returns async action handler.

usePhoneNumberForm

Hook for managing phone number form state and validation.

Returns form state and handlers.

usePhoneNumberFormAction

Hook for phone number form submission action.

Returns async action handler.

useVerifyPhoneNumberForm

Hook for managing phone verification form state and validation.

Returns form state and handlers.

useVerifyPhoneNumberFormAction

Hook for phone verification form submission action.

Returns async action handler.

useMultiFactorAssertionCleanup

Hook for cleaning up multi-factor assertion state.

useSmsMultiFactorAssertionPhoneFormAction

Hook for SMS MFA assertion phone form submission action.

Returns async action handler.

useSmsMultiFactorAssertionVerifyFormAction

Hook for SMS MFA assertion verification form submission action.

Returns async action handler.

useSmsMultiFactorEnrollmentPhoneNumberForm

Hook for managing SMS MFA enrollment phone number form state.

Returns form state and handlers.

useSmsMultiFactorEnrollmentPhoneAuthFormAction

Hook for SMS MFA enrollment phone auth form submission action.

Returns async action handler.

useMultiFactorEnrollmentVerifyPhoneNumberForm

Hook for managing MFA enrollment phone verification form state.

Returns form state and handlers.

useMultiFactorEnrollmentVerifyPhoneNumberFormAction

Hook for MFA enrollment phone verification form submission action.

Returns async action handler.

useTotpMultiFactorAssertionForm

Hook for managing TOTP MFA assertion form state.

Returns form state and handlers.

useTotpMultiFactorAssertionFormAction

Hook for TOTP MFA assertion form submission action.

Returns async action handler.

useTotpMultiFactorSecretGenerationForm

Hook for managing TOTP secret generation form state.

Returns form state and handlers.

useTotpMultiFactorSecretGenerationFormAction

Hook for TOTP secret generation form submission action.

Returns async action handler.

useMultiFactorEnrollmentVerifyTotpForm

Hook for managing MFA enrollment TOTP verification form state.

Returns form state and handlers.

useMultiFactorEnrollmentVerifyTotpFormAction

Hook for MFA enrollment TOTP verification form submission action.

Returns async action handler.

useSignInWithProvider

Hook for OAuth provider sign-in.

Returns async action handler.

useCountries

Hook to get list of countries for country selector.

Returns array of country data.

useDefaultCountry

Hook to get default country for country selector.

Returns country data or undefined.

PolicyContext

React context for policy configuration.

PolicyProps

Type for policy configuration.

PolicyURL

Type alias: string \| URL

FirebaseUIProviderProps

Type for FirebaseUIProvider component props.

The shadcn registry is available at: https://firebaseopensource.com/r/{name}.json

provideFirebaseUI

Provider function that configures Firebase UI for your Angular application.

Returns EnvironmentProviders.

provideFirebaseUIPolicies

Provider function that configures policies (terms of service and privacy policy) for Firebase UI.

Returns EnvironmentProviders.

SignInAuthFormComponent

Selector: fui-sign-in-auth-form

Form component for email/password sign-in.

SignUpAuthFormComponent

Selector: fui-sign-up-auth-form

Form component for email/password sign-up.

ForgotPasswordAuthFormComponent

Selector: fui-forgot-password-auth-form

Form component for password reset.

EmailLinkAuthFormComponent

Selector: fui-email-link-auth-form

Form component for email link authentication.

PhoneAuthFormComponent

Selector: fui-phone-auth-form

Form component for phone number authentication.

MultiFactorAuthAssertionFormComponent

Selector: fui-multi-factor-auth-assertion-form

Form component for multi-factor authentication assertion during sign-in.

SmsMultiFactorAssertionFormComponent

Selector: fui-sms-multi-factor-assertion-form

Form component for SMS-based multi-factor authentication assertion.

SmsMultiFactorAssertionPhoneFormComponent

Selector: fui-sms-multi-factor-assertion-phone-form

Phone number form component for SMS MFA assertion.

SmsMultiFactorAssertionVerifyFormComponent

Selector: fui-sms-multi-factor-assertion-verify-form

Verification code form component for SMS MFA assertion.

TotpMultiFactorAssertionFormComponent

Selector: fui-totp-multi-factor-assertion-form

Form component for TOTP-based multi-factor authentication assertion.

SignInAuthScreenComponent

Selector: fui-sign-in-auth-screen

Screen component for email/password sign-in.

SignUpAuthScreenComponent

Selector: fui-sign-up-auth-screen

Screen component for email/password sign-up.

ForgotPasswordAuthScreenComponent

Selector: fui-forgot-password-auth-screen

Screen component for password reset.

EmailLinkAuthScreenComponent

Selector: fui-email-link-auth-screen

Screen component for email link authentication.

PhoneAuthScreenComponent

Selector: fui-phone-auth-screen

Screen component for phone number authentication.

OAuthScreenComponent

Selector: fui-oauth-screen

Screen component for OAuth provider sign-in.

OAuthButtonComponent

Selector: fui-oauth-button

Generic OAuth button component.

GoogleSignInButtonComponent

Selector: fui-google-sign-in-button

Google OAuth sign-in button component.

AppleSignInButtonComponent

Selector: fui-apple-sign-in-button

Apple OAuth sign-in button component.

FacebookSignInButtonComponent

Selector: fui-facebook-sign-in-button

Facebook OAuth sign-in button component.

GithubSignInButtonComponent

Selector: fui-github-sign-in-button

GitHub OAuth sign-in button component.

MicrosoftSignInButtonComponent

Selector: fui-microsoft-sign-in-button

Microsoft OAuth sign-in button component.

TwitterSignInButtonComponent

Selector: fui-twitter-sign-in-button

Twitter OAuth sign-in button component.

ButtonComponent

Selector: button[fui-button]

Button component with variant support.

CardComponent

Selector: fui-card

Card container component.

CardHeaderComponent

Selector: fui-card-header

Card header component.

CardTitleComponent

Selector: fui-card-title

Card title component.

CardSubtitleComponent

Selector: fui-card-subtitle

Card subtitle component.

CardContentComponent

Selector: fui-card-content

Card content component.

CountrySelectorComponent

Selector: fui-country-selector

Country selector component for phone number input.

DividerComponent

Selector: fui-divider

Divider component.

PoliciesComponent

Selector: fui-policies

Component that renders terms of service and privacy policy links. Automatically rendered when policies are provided via provideFirebaseUIPolicies.

RedirectErrorComponent

Selector: fui-redirect-error

Component that displays redirect errors from Firebase UI authentication flow.

ContentComponent

Selector: fui-content

Content wrapper component.

injectUI

Injects the Firebase UI configuration as a read-only signal.

Returns ReadonlySignal<FirebaseUI>.

injectRedirectError

Injects the redirect error from the UI store as a signal.

Returns Signal<string \| undefined>.

injectTranslation

Injects a translated string for a given category and key.

Returns Signal<string>.

injectSignInAuthFormSchema

Injects a Zod schema for sign-in form validation.

Returns Signal<ZodObject> with email and password fields.

injectSignUpAuthFormSchema

Injects a Zod schema for sign-up form validation.

Returns Signal<ZodObject> with email, password, and optionally displayName fields.

injectForgotPasswordAuthFormSchema

Injects a Zod schema for forgot password form validation.

Returns Signal<ZodObject> with email field.

injectEmailLinkAuthFormSchema

Injects a Zod schema for email link authentication form validation.

Returns Signal<ZodObject> with email field.

injectPhoneAuthFormSchema

Injects a Zod schema for phone number input form validation.

Returns Signal<ZodObject> with phoneNumber field.

injectPhoneAuthVerifyFormSchema

Injects a Zod schema for phone verification code form validation.

Returns Signal<ZodObject> with verificationId and verificationCode fields.

injectMultiFactorPhoneAuthNumberFormSchema

Injects a Zod schema for multi-factor phone authentication number form validation.

Returns Signal<ZodObject> with phoneNumber and displayName fields.

injectMultiFactorPhoneAuthAssertionFormSchema

Injects a Zod schema for multi-factor phone authentication assertion form validation.

Returns Signal<ZodObject> with phoneNumber field.

injectMultiFactorPhoneAuthVerifyFormSchema

Injects a Zod schema for multi-factor phone authentication verification form validation.

Returns Signal<ZodObject> with verificationId and verificationCode fields.

injectMultiFactorTotpAuthNumberFormSchema

Injects a Zod schema for multi-factor TOTP authentication form validation.

Returns Signal<ZodObject> with displayName field.

injectMultiFactorTotpAuthVerifyFormSchema

Injects a Zod schema for multi-factor TOTP verification code form validation.

Returns Signal<ZodObject> with verificationCode field.

injectRecaptchaVerifier

Injects a reCAPTCHA verifier instance.

Returns Signal<RecaptchaVerifier \| null>.

injectPolicies

Injects the policy configuration.

Returns PolicyConfig \| null.

injectCountries

Injects the list of countries for country selector.

Returns Signal<CountryData[]>.

injectDefaultCountry

Injects the default country for country selector.

Returns Signal<CountryData>.

import { OAuthProvider } from 'firebase/auth';
import { OAuthButton } from '@firebase-oss/ui-react';

function MyProviderButton() {
  // Get the provider ID from the Firebase Console
  const provider = new OAuthProvider('oidc.my-provider');

  return (
    <OAuthButton provider={provider} themed>
      Sign in with my provider
    </OAuthButton>
  )
}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OAuthProvider, UserCredential } from '@angular/fire/auth';
import { OAuthButtonComponent } from '@firebase-oss/ui-angular';

@Component({
  selector: 'app-my-provider-button',
  standalone: true,
  imports: [CommonModule, OAuthButtonComponent],
  template: `
    <fui-oauth-button [provider]="provider" [themed]="true">
      Sign in with my provider
    </fui-oauth-button>
  `,
})
export class MyProviderButtonComponent {
  // Get the provider ID from the Firebase Console
  provider = new OAuthProvider('oidc.my-provider');
}