firebase / firebaseui-web

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 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 package is installed in your project: Once installed, setup Firebase in your project ensuring you have configured your Firebase instance via : Next, follow the framework specific installation steps, for either React, Shadcn or Angular: React Install the package: Alongside your Firebase configuration, import the function and pass your configured Firebase App instance: Once configured, provide the instance to your application by wrapping it within the component: Ensure your application includes the bundled styles for Firebase UI (see styling for additional info). That's it 🎉 You can now import components and start building: 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 registry to your file: Next, add a Firebase UI component from the registry, e.g. This will automatically install any required dependencies. Alongside your Firebase configuration, import the function and pass your configured Firebase App instance: Once configured, provide the instance to your application by wrapping it within the component: That's it 🎉 You can now import components and start building: 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 , install the Firebase UI for Angular package: Alongside your existing providers, add the provider, returning a new Firebase UI instance via : Ensure your application includes the bundled styles for Firebase UI (see styling for additional info). That's it 🎉 You can now import components and start building: 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: Via CSS: Tailwind If you are using Tailwind CSS, add the Tailwind specific CSS file: Via CDN If none of these options apply, include the CSS file via a CDN: 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: 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 to provide an array of "behaviors", for example: The 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. The 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. The 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: The behavior redirects any external provider authentication (e.g. OAuth) via a redirect flow. The behavior causes any external provider authentication (e.g. OAuth) to be handled via a popup window. This is the default strategy. The 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 via the "Web SDK configuration" settings on the Console. The One Tap popup can be additionally configured via this behavior: See https://developers.google.com/identity/gsi/web/reference/js-reference for a full list of configuration options. The 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 function from Firebase UI will throw if a display name is not provided. The behavior controls how country codes are consumed throughout your application, for example during Phone Authentication flows when selecting a phone numbers country code. 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 U…