FirebaseUI is a library built on top of the Firebase Authentication SDK that provides drop-in UI flows for use in your app. FirebaseUI provides the following benefits:
- Multiple Providers - sign-in flows for email/password, email link, phone authentication, Google, Facebook, Twitter and GitHub sign-in.
- Account Linking - flows to safely link user accounts across identity providers.
- Customization - override CSS styles of FirebaseUI to match your app requirements. Also, because FirebaseUI is open source, you can fork the project and customize it exactly to your needs.
- One-tap sign-up and automatic sign-in - automatic integration with One-tap sign-up for fast cross-device sign-in.
- Localized UI - internationalization for over 40 languages.
- Upgrading anonymous users - ability to upgrade anonymous users through sign-in/sign-up. For more information, visit the .
Before you begin
Add Firebase Authentication to your web application, ensuring you're using the v9 compat (recommended) or older SDK (see sidebar above).
Include FirebaseUI via one of the following options:
CDN
Include the following script and CSS file in the <head> tag of your page, below the initialization snippet from the Firebase Console:
<script src="//www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script> <link type="text/css" rel="stylesheet" href="//www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />npm Module
Install FirebaseUI and its dependencies via npm using the following command:
$ npm install firebaseui --savevar firebase = require('firebase'); var firebaseui = require('firebaseui'); 0 the following modules within your source files:
var firebase = require('firebase'); var firebaseui = require('firebaseui');Bower Component
Install FirebaseUI and its dependencies via Bower using the following command:
Include the required files in your HTML, if your HTTP Server serves the files within var firebase = require('firebase'); var firebaseui = require('firebaseui'); 1:
<script src="bower_components/firebaseui/dist/firebaseui.js"></script> <link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />
Initialize FirebaseUI
After importing the SDK, initialize the Auth UI.
// Initialize the FirebaseUI Widget using Firebase. var ui = new firebaseui.auth.AuthUI(firebase.auth());Set up sign-in methods
Before you can use Firebase to sign in users, you must enable and configure the sign-in methods you want to support.
Email address and password
In the Firebase console, open the Authentication section and enable email and password authentication.
Add the email provider ID to the list of FirebaseUI var firebase = require('firebase'); var firebaseui = require('firebaseui'); 2.
ui.start('#firebaseui-auth-container', { signInOptions: [ firebase.auth.EmailAuthProvider.PROVIDER_ID ], // Other config options... });Optional: The var firebase = require('firebase'); var firebaseui = require('firebaseui'); 3 can be configured to require the user to enter a display name (defaults to var firebase = require('firebase'); var firebaseui = require('firebaseui'); 4).
ui.start('#firebaseui-auth-container', { signInOptions: [ { provider: firebase.auth.EmailAuthProvider.PROVIDER_ID, requireDisplayName: false } ] });
Email link authentication
In the Firebase console, open the Authentication section. On the Sign in method tab, enable the Email/Password provider. Note that email/password sign-in must be enabled to use email link sign-in.
In the same section, enable Email link (passwordless sign-in) sign-in method and click Save.
Add the email provider ID to the list of FirebaseUI var firebase = require('firebase'); var firebaseui = require('firebaseui'); 2 along with the email link var firebase = require('firebase'); var firebaseui = require('firebaseui'); 6.
ui.start('#firebaseui-auth-container', { signInOptions: [ { provider: firebase.auth.EmailAuthProvider.PROVIDER_ID, signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD } ], // Other config options... });When rendering the sign-in UI conditionally (relevant for single page apps), use var firebase = require('firebase'); var firebaseui = require('firebaseui'); 7 to detect if the URL corresponds to a sign-in with email link and the UI needs to be rendered to complete sign-in.
Optional: The var firebase = require('firebase'); var firebaseui = require('firebaseui'); 3 for email link sign-in can be configured to allow or block the user from completing cross device sign-in.
An optional var firebase = require('firebase'); var firebaseui = require('firebaseui'); 9 callback can be defined to return the configuration to use when sending the link. This provides the ability to specify how the link can be handled, custom dynamic link, additional state in the deep link, etc. When not provided, the current URL is used and a web only flow is triggered.
Email link sign-in in FirebaseUI-web is compatible with and where one user starting the flow from FirebaseUI-Android can open the link and complete sign-in with FirebaseUI-web. The same is true for the opposite flow.
$ npm install firebaseui --save 0
OAuth providers (Google, Facebook, Twitter and GitHub)
In the Firebase console, open the Authentication section and enable the specified OAuth provider sign-in. Make sure the corresponding OAuth client ID and secret are also specified.
Also in the Authentication section, make sure the domain where your sign-in page will be rendered is also added to the authorized domains list.
Add the OAuth provider ID to the list of FirebaseUI var firebase = require('firebase'); var firebaseui = require('firebaseui'); 2.
$ npm install firebaseui --save 1Optional: To specify custom scopes, or custom OAuth parameters per provider, you can pass an object instead of just the provider value:
$ npm install firebaseui --save 2
Phone number
In the Firebase console, open the Authentication section and enable phone number sign-in.
Make sure the domain where your sign-in page will be rendered is also added to the authorized domain list.
Add the phone number provider ID to the list of FirebaseUI var firebase = require('firebase'); var firebaseui = require('firebaseui'); 2.
Optional: The PhoneAuthProvider can be configured with custom reCAPTCHA parameters whether reCAPTCHA is visible or invisible (defaults to normal). Refer to the reCAPTCHA API docs for more details.
The default country to select in the phone number input can also be set. Refer to the list of supported country codes for the full list of codes. If unspecified, the phone number input will default to the United States (+1).
The following options are currently supported.
$ npm install firebaseui --save 4
Sign in
To kick off the FirebaseUI sign in flow, initialize the FirebaseUI instance by passing the underlying $ bower install firebaseui --save 3 instance.
// Initialize the FirebaseUI Widget using Firebase. var ui = new firebaseui.auth.AuthUI(firebase.auth());Define the HTML element where the FirebaseUI sign-in widget will be rendered.
$ npm install firebaseui --save 6Specify the FirebaseUI configuration (providers supported and UI customizations as well as success callbacks, etc).
$ npm install firebaseui --save 7Finally, render the FirebaseUI Auth interface:
$ npm install firebaseui --save 8Upgrading anonymous users
Enabling anonymous user upgrade
When an anonymous user signs in or signs up with a permanent account, you want to be sure the user can continue with what they were doing before signing up. To do so, simply set $ bower install firebaseui --save 4 to var firebase = require('firebase'); var firebaseui = require('firebaseui'); 4 when you configure the sign-in UI (this option is disabled by default).
Handling anonymous user upgrade merge conflicts
There are cases when a user, initially signed in anonymously, tries to upgrade to an existing Firebase user. Since an existing user cannot be linked to another existing user, FirebaseUI will trigger the $ bower install firebaseui --save 6 callback with an error code $ bower install firebaseui --save 7 when the above occurs. The error object will also contain the permanent credential. Sign-in with the permanent credential should be triggered in the callback to complete sign-in. Before sign-in can be completed via $ bower install firebaseui --save 8, you must save the anonymous user's data and delete the anonymous user. Then, after sign-in completion, copy the data back to the non-anonymous user. An example below illustrates how this flow would work.