Easily add sign-in to your Web app with FirebaseUI

FirebaseUI is a library built ontop of the Firebase Authentication SDK that provides drop-in UI flows for use inyour app. FirebaseUI provides the following benefits:

  • Multiple Providers - sign-in flows for email/password, email link, phoneauthentication, Google, Facebook, Twitter and GitHub sign-in.
  • Account Linking - flows to safely link user accounts across identityproviders.
  • Customization - override CSS styles of FirebaseUI to match your apprequirements. Also, because FirebaseUI is open source, you can fork theproject and customize it exactly to your needs.
  • One-tap sign-up and automatic sign-in - automatic integration withOne-tap sign-upfor fast cross-device sign-in.
  • Localized UI - internationalization for over 40languages.
  • Upgrading anonymous users - ability to upgrade anonymous users throughsign-in/sign-up. For more information, visit theUpgrading anonymous userssection.
Warning: FirebaseUI isnot compatible with themodular API.Thenamespaced API(specifically, the app-compat and auth-compatpackages) permits the usage of FirebaseUI alongside the JavaScript SDK, butwithout the app size reduction and other benefits of the modular API.

Before you begin

  1. Add Firebase Authentication to your web application,making sure that you're using the v9 or later namespaced API(not the modular API; see sidebar above).

  2. Include FirebaseUI via one of the following options:

    1. CDN

      Include the following script and CSS file in the <head> tag ofyour page, below the initialization snippet from the Firebase Console:

      <scriptsrc="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script><linktype="text/css"rel="stylesheet"href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css"/>

    2. npm Module

      Install FirebaseUI and its dependencies via npm using the followingcommand:

      $npminstallfirebaseui--save

      require the following modules within your source files:

      varfirebase=require('firebase');varfirebaseui=require('firebaseui');

    3. Bower Component

      Install FirebaseUI and its dependencies via Bower using the followingcommand:

      $bowerinstallfirebaseui--save

      Include the required files in your HTML, if your HTTP Server serves thefiles withinbower_components/:

      <scriptsrc="bower_components/firebaseui/dist/firebaseui.js"></script><linktype="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.varui=newfirebaseui.auth.AuthUI(firebase.auth());

Set up sign-in methods

Before you can use Firebase to sign in users, you must enable and configure thesign-in methods you want to support.

Email address and password

  1. In theFirebase console, open theAuthentication section and enableemail and password authentication.

  2. Add the email provider ID to the list of FirebaseUIsignInOptions.

    ui.start('#firebaseui-auth-container',{signInOptions:[firebase.auth.EmailAuthProvider.PROVIDER_ID],//Otherconfigoptions...});

  3. Optional: TheEmailAuthProvider can be configured to require the userto enter a display name (defaults totrue).

    ui.start('#firebaseui-auth-container',{signInOptions:[{provider:firebase.auth.EmailAuthProvider.PROVIDER_ID,requireDisplayName:false}]});

Email link authentication

  1. In theFirebase console, open theAuthentication section. On theSign in method tab, enable theEmail/Password provider. Notethat email/password sign-in must be enabled to use email link sign-in.

  2. In the same section, enableEmail link (passwordless sign-in) sign-inmethod and clickSave.

  3. Add the email provider ID to the list of FirebaseUIsignInOptions alongwith the email linksignInMethod.

    ui.start('#firebaseui-auth-container',{signInOptions:[{provider:firebase.auth.EmailAuthProvider.PROVIDER_ID,signInMethod:firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD}],//Otherconfigoptions...});

  4. When rendering the sign-in UI conditionally (relevant for single page apps),useui.isPendingRedirect() to detect if the URL corresponds to a sign-inwith email link and the UI needs to be rendered to complete sign-in.

    // Is there an email link sign-in?if(ui.isPendingRedirect()){ui.start('#firebaseui-auth-container',uiConfig);}// This can also be done via:if(firebase.auth().isSignInWithEmailLink(window.location.href)){ui.start('#firebaseui-auth-container',uiConfig);}

  5. Optional: TheEmailAuthProvider for email link sign-in can beconfigured to allow or block the user from completing cross device sign-in.

    An optionalemailLinkSignIn callback can be defined to return thefirebase.auth.ActionCodeSettingsconfiguration to use when sending the link. This provides the ability tospecify how the link can be handled, custom dynamic link, additional statein the deep link, etc. When not provided, the current URL is used and a webonly flow is triggered.

    Email link sign-in in FirebaseUI-web is compatible withFirebaseUI-AndroidandFirebaseUI-iOSwhere one user starting the flow from FirebaseUI-Android can open the linkand complete sign-in with FirebaseUI-web. The same is true for the oppositeflow.

    ui.start('#firebaseui-auth-container',{signInOptions:[{provider:firebase.auth.EmailAuthProvider.PROVIDER_ID,signInMethod:firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,// Allow the user the ability to complete sign-in cross device,// including the mobile apps specified in the ActionCodeSettings// object below.forceSameDevice:false,// Used to define the optional firebase.auth.ActionCodeSettings if// additional state needs to be passed along request and whether to open// the link in a mobile app if it is installed.emailLinkSignIn:function(){return{// Additional state showPromo=1234 can be retrieved from URL on// sign-in completion in signInSuccess callback by checking// window.location.href.url:'https://www.example.com/completeSignIn?showPromo=1234',// Custom FDL domain.dynamicLinkDomain:'example.page.link',// Always true for email link sign-in.handleCodeInApp:true,// Whether to handle link in iOS app if installed.iOS:{bundleId:'com.example.ios'},// Whether to handle link in Android app if opened in an Android// device.android:{packageName:'com.example.android',installApp:true,minimumVersion:'12'}};}}]});

OAuth providers (Google, Facebook, Twitter and GitHub)

  1. In theFirebase console, open theAuthentication section and enablethe specified OAuth provider sign-in. Make sure the corresponding OAuthclient ID and secret are also specified.

  2. Also in theAuthentication section, make sure the domain where yoursign-in page will be rendered is also added to the authorized domains list.

  3. Add the OAuth provider ID to the list of FirebaseUIsignInOptions.

    ui.start('#firebaseui-auth-container',{signInOptions:[// List of OAuth providers supported.firebase.auth.GoogleAuthProvider.PROVIDER_ID,firebase.auth.FacebookAuthProvider.PROVIDER_ID,firebase.auth.TwitterAuthProvider.PROVIDER_ID,firebase.auth.GithubAuthProvider.PROVIDER_ID],//Otherconfigoptions...});

  4. Optional: To specify custom scopes, or custom OAuth parameters perprovider, you can pass an object instead of just the provider value:

    ui.start('#firebaseui-auth-container',{signInOptions:[{provider:firebase.auth.GoogleAuthProvider.PROVIDER_ID,scopes:['https://www.googleapis.com/auth/contacts.readonly'],customParameters:{// Forces account selection even when one account// is available.prompt:'select_account'}},{provider:firebase.auth.FacebookAuthProvider.PROVIDER_ID,scopes:['public_profile','email','user_likes','user_friends'],customParameters:{// Forces password re-entry.auth_type:'reauthenticate'}},firebase.auth.TwitterAuthProvider.PROVIDER_ID,// Twitter does not support scopes.firebase.auth.EmailAuthProvider.PROVIDER_ID// Other providers don't need to be given as object.]});

Phone number

  1. In theFirebase console, open theAuthentication section and enable phone number sign-in.

  2. Make sure the domain where your sign-in page will be rendered is alsoadded to the authorized domain list.

  3. Add the phone number provider ID to the list of FirebaseUIsignInOptions.

    ui.start('#firebaseui-auth-container',{signInOptions:[firebase.auth.PhoneAuthProvider.PROVIDER_ID],//Otherconfigoptions...});

  4. Optional: The PhoneAuthProvider can be configured with custom reCAPTCHAparameters whether reCAPTCHA is visible or invisible (defaults to normal).Refer to thereCAPTCHA API docsfor more details.

    The default country to select in the phone number input can also be set.Refer to thelist of supported country codesfor the full list of codes.If unspecified, the phone number input will default to the United States(+1).

    The following options are currently supported.

    ui.start('#firebaseui-auth-container',{signInOptions:[{provider:firebase.auth.PhoneAuthProvider.PROVIDER_ID,recaptchaParameters:{type:'image',// 'audio'size:'normal',// 'invisible' or 'compact'badge:'bottomleft'//' bottomright' or 'inline' applies to invisible.},defaultCountry:'GB',// Set default country to the United Kingdom (+44).// For prefilling the national number, set defaultNationNumber.// This will only be observed if only phone Auth provider is used since// for multiple providers, the NASCAR screen will always render first// with a 'sign in with phone number' button.defaultNationalNumber:'1234567890',// You can also pass the full phone number string instead of the// 'defaultCountry' and 'defaultNationalNumber'. However, in this case,// the first country ID that matches the country code will be used to// populate the country selector. So for countries that share the same// country code, the selected country may not be the expected one.// In that case, pass the 'defaultCountry' instead to ensure the exact// country is selected. The 'defaultCountry' and 'defaultNationaNumber'// will always have higher priority than 'loginHint' which will be ignored// in their favor. In this case, the default country will be 'GB' even// though 'loginHint' specified the country code as '+1'.loginHint:'+11234567890'}]});

Sign in

To kick off the FirebaseUI sign in flow, initialize the FirebaseUI instance bypassing the underlyingAuth instance.

// Initialize the FirebaseUI Widget using Firebase.varui=newfirebaseui.auth.AuthUI(firebase.auth());

Define the HTML element where the FirebaseUI sign-in widget will be rendered.

<!-- 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></div><div>Loading...</div>

Specify the FirebaseUI configuration (providers supported and UI customizationsas well as success callbacks, etc).

varuiConfig={callbacks:{signInSuccessWithAuthResult:function(authResult,redirectUrl){// User successfully signed in.// Return type determines whether we continue the redirect automatically// or whether we leave that to developer to handle.returntrue;},uiShown:function(){// The widget is rendered.// Hide the loader.document.getElementById('loader').style.display='none';}},// Will use popup for IDP Providers sign-in flow instead of the default, redirect.signInFlow:'popup',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],// Terms of service url.tosUrl:'<your-tos-url>',// Privacy policy url.privacyPolicyUrl:'<your-privacy-policy-url>'};

Finally, render the FirebaseUI Auth interface:

// The start method will wait until the DOM is loaded.ui.start('#firebaseui-auth-container',uiConfig);

Upgrading anonymous users

Enabling anonymous user upgrade

When an anonymous user signs in or signs up with a permanent account, you wantto be sure the user can continue with what they were doing before signing up.To do so, simply setautoUpgradeAnonymousUsers totrue when you configurethe 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 upgradeto an existing Firebase user. Since an existing user cannot be linked to anotherexisting user, FirebaseUI will trigger thesignInFailure callback with anerror codefirebaseui/anonymous-upgrade-merge-conflict when the above occurs.The error object will also contain the permanent credential. Sign-in with thepermanent credential should be triggered in the callback to complete sign-in.Before sign-in can be completed viaauth.signInWithCredential(error.credential), you must save the anonymoususer's data and delete the anonymous user. Then, after sign-in completion, copythe data back to the non-anonymous user. An example below illustrates how thisflow would work.

// Temp variable to hold the anonymous user data if needed.vardata=null;// Hold a reference to the anonymous current user.varanonymousUser=firebase.auth().currentUser;ui.start('#firebaseui-auth-container',{// Whether to upgrade anonymous users should be explicitly provided.// The user must already be signed in anonymously before FirebaseUI is// rendered.autoUpgradeAnonymousUsers:true,signInSuccessUrl:'<url-to-redirect-to-on-success>',signInOptions:[firebase.auth.GoogleAuthProvider.PROVIDER_ID,firebase.auth.FacebookAuthProvider.PROVIDER_ID,firebase.auth.EmailAuthProvider.PROVIDER_ID,firebase.auth.PhoneAuthProvider.PROVIDER_ID],callbacks:{// signInFailure callback must be provided to handle merge conflicts which// occur when an existing credential is linked to an anonymous user.signInFailure:function(error){// For merge conflicts, the error.code will be// 'firebaseui/anonymous-upgrade-merge-conflict'.if(error.code!='firebaseui/anonymous-upgrade-merge-conflict'){returnPromise.resolve();}// The credential the user tried to sign in with.varcred=error.credential;// Copy data from anonymous user to permanent user and delete anonymous// user.// ...// Finish sign-in after data is copied.returnfirebase.auth().signInWithCredential(cred);}}});

Next Steps

  • For more information on using and customizing FirebaseUI, visit theREADME.
  • If you find an issue in FirebaseUI and would like to report it, use theGitHub issue tracker.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-09-18 UTC.