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

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:

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>

Create a container element for FirebaseUI.

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

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>

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>

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.

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

Before you begin

Get the components

Build a UI for selecting tenants

What's next