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 element of your page:

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.

  2. Create a container element for FirebaseUI.

  3. Create a configuration for each tenant.

  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.

  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