Creating a sign-in page for multiple tenants

This document shows you how to build a tenant-specific sign-in page for Identity Platform using FirebaseUI, a collection of open-source, pre-built UI components, and the Client SDK.

Sample code demonstrating the steps covered in this tutorial is available on GitHub.

Before you begin

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

Getting 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'

Building a tenant selection UI

FirebaseUI only handles sign-in flows; you'll need to build your own UI for users to select a tenant to sign in with. The following steps show you how to build a simple tenant selection page with two buttons.

  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. Add tenant selection click handlers to render the sign-in component with FirebaseUI. Note that before rendering the UI component, you'll need to 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.

While this example uses two simple buttons and a single page, many different UX flows are possible. For example, you could ask users to enter their email on one page, then present a tenant selection screen. You could also host separate login pages for each tenant; in this case, you'd need to parse the tenant ID from the URL, and then set it on the Auth object.

What's next