FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Firebase SDKs to eliminate boilerplate code and promote best practices.
Update: Announcing FirebaseUI v7 (alpha), a rewrite of this library to support the modular Firebase JS SDK, theming, and easier integration in popular web frameworks.
FirebaseUI Auth provides a drop-in auth solution that handles the UI flows for signing in users with email addresses and passwords, phone numbers, Identity Provider Sign In including Google, Facebook, GitHub, Twitter, Apple, Microsoft, Yahoo, OpenID Connect (OIDC) providers and SAML providers. It is built on top of Firebase Auth.
The FirebaseUI component implements best practices for authentication on mobile devices and websites, helping to sign-in and sign-up conversion for your app. It also handles cases like account recovery and account linking that can be security sensitive and error-prone to handle.
FirebaseUI Auth clients are also available for iOS and Android.
FirebaseUI fully supports all recent browsers. Signing in with federated providers (Google, Facebook, Twitter, GitHub, Apple, Microsoft, Yahoo, OIDC, SAML) is also supported in Cordova/Ionic environments. Additional non-browser environments(React Native...) or Chrome extensions will be added once the underlying Firebase core SDK supports them in a way that is compatible with FirebaseUI.
- Demo
- Installation
- Usage instructions
- Configuration
- Customization
- Advanced
- Developer Setup
- IAP External Identities Support with FirebaseUI
- Cordova Setup
- React DOM Setup
- Angular Setup
- Known issues
- Deprecated APIs
- Release Notes
Accessible here: https://fir-ui-demo-84a6c.firebaseapp.com.
You just need to include the following script and CSS file in the <head> tag
of your page, below the initialization snippet from the Firebase Console:
<script src="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css" />Localized versions of the widget are available through the CDN. To use a localized widget, load the localized JS library instead of the default library:
<script src="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth__{LANGUAGE_CODE}.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css" />where {LANGUAGE_CODE} is replaced by the code of the language you want. For example, the French
version of the library is available at
https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth__fr.js. The list of available
languages and their respective language codes can be found at LANGUAGES.md.
Right-to-left languages also require the right-to-left version of the stylesheet, available at
https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth-rtl.css, instead of the default
stylesheet. The supported right-to-left languages are Arabic (ar), Farsi (fa), and Hebrew (iw).
Install FirebaseUI and its peer-dependency Firebase via npm using the following commands:
$ npm install firebase firebaseui --saveYou can then import the following modules within your source files:
import firebase from 'firebase/compat/app';
import * as firebaseui from 'firebaseui'
import 'firebaseui/dist/firebaseui.css'Install FirebaseUI and its dependencies via Bower using the following command:
$ bower install firebaseui --saveYou can then include the required files in your HTML, if your HTTP Server serves
the files within bower_components/:
<script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />FirebaseUI includes the following flows:
- Interaction with Identity Providers such as Google and Facebook
- Phone number based authentication
- Sign-up and sign-in with email accounts (email/password and email link)
- Password reset
- Prevention of account duplication (activated when "One account per email address" setting is enabled in the Firebase console. This setting is enabled by default.)
- Integration with one-tap sign-up
- Ability to upgrade anonymous users through sign-in/sign-up.
- Sign-in as a guest
To use FirebaseUI to authenticate users you first need to configure each provider you want to use in their own developer app settings. Please read the Before you begin section of Firebase Authentication at the following links:
- Phone number
- Email and password
- Github
- Anonymous
- Email link
- Apple
- Microsoft
- Yahoo
For Google Cloud's Identity Platform (GCIP) developers, you can also enable SAML and OIDC providers following the instructions:
You first need to initialize your
Firebase app. The
firebase.auth.Auth instance should be passed to the constructor of
firebaseui.auth.AuthUI. You can then call the start method with the CSS
selector that determines where to create the widget, and a configuration object.
The following example shows how to set up a sign-in screen with all supported providers. Please refer to the demo application in the examples folder for a more in-depth example, showcasing a Single Page Application mode.
Firebase and FirebaseUI do not work when executed directly from a file (i.e. opening the file in your browser, not through a web server). Always run
firebase serve(or your preferred local server) to test your app locally.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample FirebaseUI App</title>
<script src="https://www.gstatic.com/firebasejs/10.0.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.0.0/firebase-auth-compat.js"></script>
<!-- *******************************************************************************************
* TODO(DEVELOPER): Paste the initialization snippet from this dialog box:
* Firebase Console > Project Settings > Add App > Web.
***************************************************************************************** -->
<script src="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css" />
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
signInSuccessUrl: '<url-to-redirect-to-on-success>',
signInOptions: [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.PhoneAuthProvider.PROVIDER_ID,
firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
],
// tosUrl and privacyPolicyUrl accept either url string or a callback
// function.
// Terms of service url/callback.
tosUrl: '<your-tos-url>',
// Privacy policy url/callback.
privacyPolicyUrl: function() {
window.location.assign('<your-privacy-policy-url>');
}
};
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
</script>
</head>
<body>
<!-- The surrounding HTML is left untouched by FirebaseUI.
Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
</body>
</html>This is only relevant for single page apps or apps where the sign-in UI is rendered conditionally (e.g. button click)
When redirecting back from Identity Providers like Google
and Facebook or email link sign-in, start() method needs to be called to
finish the sign-in flow.
If it requires a user interaction to start the initial sign-in process, you need
to check if there is a pending redirect operation going on on page load to check
whether start() needs to be called.
To check if there is a pending redirect operation to complete a sign-in attempt,
check isPendingRedirect() before deciding whether to render FirebaseUI
via start().
if (ui.isPendingRedirect()) {
ui.start('#firebaseui-auth-container', uiConfig);
}Here is how you would track the Auth state across all your pages:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample FirebaseUI App</title>
<script src="https://www.gstatic.com/firebasejs/10.0.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.0.0/firebase-auth-compat.js"></script>
<!-- *******************************************************************************************
* TODO(DEVELOPER): Paste the initialization snippet from:
* Firebase Console > Overview > Add Firebase to your web app. *
***************************************************************************************** -->
<script type="text/javascript">
initApp = function() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var uid = user.uid;
var phoneNumber = user.phoneNumber;
var providerData = user.providerData;
user.getIdToken().then(function(accessToken) {
document.getElementById('sign-in-status').textContent = 'Signed in';
document.getElementById('sign-in').textContent = 'Sign out';
document.getElementById('account-details').textContent = JSON.stringify({
displayName: displayName,
email: email,
emailVerified: emailVerified,
phoneNumber: phoneNumber,
photoURL: photoURL,
uid: uid,
accessToken: accessToken,
providerData: providerData
}, null, ' ');
});
} else {
// User is signed out.
document.getElementById('sign-in-status').textContent = 'Signed out';
document.getElementById('sign-in').textContent = 'Sign in';
document.getElementById('account-details').textContent = 'null';
}
}, function(error) {
console.log(error);
});
};
window.addEventListener('load', function() {
initApp()
});
</script>
</head>
<body>
<h1>Welcome to My Awesome App</h1>
<div id="sign-in-status"></div>
<div id="sign-in"></div>
<pre id="account-details"></pre>
</body>
</html>FirebaseUI supports the following configuration parameters.
| Name | Required | Description |
|---|---|---|
| autoUpgradeAnonymousUsers | No |
Whether to automatically upgrade existing anonymous users on sign-in/sign-up.
See Upgrading anonymous users.
Default: false
When set to true, signInFailure callback is
required to be provided to handle merge conflicts.
|
| callbacks | No |
An object of developers' callbacks after
specific events.
Default: {}
|
| credentialHelper | No |
The Credential Helper to use.
See Credential Helper.
Default: firebaseui.auth.CredentialHelper.NONE
|
| queryParameterForSignInSuccessUrl | No |
The redirect URL parameter name for the sign-in success URL. See
Overwriting the sign-in success URL.
Default: "signInSuccessUrl"
|
| queryParameterForWidgetMode | No |
The redirect URL parameter name for the “mode” of the Widget.
See FirebaseUI widget modes.
Default: "mode"
|
| signInFlow | No |
The sign-in flow to use for IDP providers: redirect or
popup.
Default: "redirect"
|
| immediateFederatedRedirect | No |
A boolean which determines whether to immediately redirect to the provider's
site or instead show the default 'Sign in with Provider' button when there is
only a single federated provider in signInOptions. In order for
this option to take effect, the signInOptions must only hold a
single federated provider (like 'google.com') and signInFlow must be set to
'redirect'.
|
| signInOptions | Yes | The list of providers enabled for signing into your app. The order you specify them will be the order they are displayed on the sign-in provider selection screen. |
| signInSuccessUrl | No |
The URL where to redirect the user after a successful sign-in.
Required when the signInSuccessWithAuthResult
callback is not used or when it returns true.
|
| tosUrl | Yes | The URL of the Terms of Service page or a callback function to be invoked when Terms of Service link is clicked. |
| privacyPolicyUrl | Yes | The URL of the Privacy Policy page or a callback function to be invoked when Privacy Policy link is clicked. |
| adminRestrictedOperation | No | This setting is only applicable to "Google Cloud Identity Platform" projects. Learn more about [GCIP]( |