Create a sign-in page for multiple tenants with Identity Platform

This page shows you how to build a sign-in page for multiple tenants in Identity Platform by using FirebaseUI, which is a collection of open-source, prebuilt UI components, and the Client SDK.

Before you begin

  1. Enable multi-tenancy and create at least two tenants.
  2. Configure identity providers for each tenant.

Get the components

You can fetch the UI script, Client SDK, and CSS files directly from the CDN by adding them to the <head> element of your page:

<script src="https://www.gstatic.com/firebasejs/x.x.x/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/x.x.x/firebase-auth.js"></script> <script src="https://cdn.firebase.com/libs/firebaseui/x.x.x/firebaseui.js"></script> <link rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/x.x.x/firebaseui.css" />

Alternatively, you can install the modules using npm, and then reference them as ES6 imports:

npm install firebase --save && \ npm install firebaseui --save 
// Import Firebase JS SDK. import * as firebase from "firebase/app"; import "firebase/auth"; import * as firebaseui from 'firebaseui'

Build a UI for selecting tenants

FirebaseUI only handles sign-in flows; you need to build your own UI for users to select a tenant to sign in with.

To build a basic tenant selection page with two buttons, do the following:

  1. Create two tenant selection elements.

    <div id="tenant-selection-buttons"> <button id="tenant1-select-button" data-val="tenantId1">Display name of Tenant 1</button> <button id="tenant2-select-button" data-val="tenantId2">Display name of Tenant 2</button> </div>

  2. Create a container element for FirebaseUI.

    <div id="firebaseui-auth-container"></div>

  3. Create a configuration for each tenant.

    <script> var uiConfigs = { 'TENANT_ID1': { 'signInOptions': [firebase.auth.EmailAuthProvider.PROVIDER_ID], 'credentialHelper': 'none', 'signInFlow': 'popup', 'callbacks': { 'signInSuccessWithAuthResult': function(authResult, redirectUrl) { // The sign in success callback. return false; } }, // 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]'); } }, 'TENANT_ID2': { 'signInOptions': [firebase.auth.GoogleAuthProvider.PROVIDER_ID], 'credentialHelper': 'none', 'signInFlow': 'popup', 'callbacks': { 'signInSuccessWithAuthResult': function(authResult, redirectUrl) { // The sign in success callback. return false; } }, // 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]'); } } }; </script>

  4. To render the sign-in component with FirebaseUI, add tenant selection click handlers. Before rendering the UI component, set the tenant ID on the Auth instance.

    <script> var ui = new firebaseui.auth.AuthUI(firebase.auth()); tenantSelectionButton.addEventListener('click', (e) => { var tenantId = e.target.getAttribute('data-val'); firebase.auth().tenantId = tenantId; ui.reset(); ui.start('#firebaseui-auth-container', uiConfigs[tenantId]); }); </script>

  5. Launch your app. A sign-in screen with two tenant buttons appears.

You can also build multi-page workflows. For example, you can create a workflow where the first page asks users for their email, and the next page lets them select a tenant. Additionally, you can host separate login pages for each tenant. To do this, you must parse the tenant ID from the URL and then set it on the Auth object.

What's next