Stay organized with collections
Save and categorize content based on your preferences.
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.
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.
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>
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.
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.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Hard to understand","hardToUnderstand","thumb-down"],["Incorrect information or sample code","incorrectInformationOrSampleCode","thumb-down"],["Missing the information/samples I need","missingTheInformationSamplesINeed","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-25 UTC."],[[["\u003cp\u003eThis document provides a guide on creating a tenant-specific sign-in page for Identity Platform using FirebaseUI and the Client SDK.\u003c/p\u003e\n"],["\u003cp\u003eYou must first enable multi-tenancy and configure identity providers for each tenant before implementing the sign-in page.\u003c/p\u003e\n"],["\u003cp\u003eFirebaseUI is used for sign-in flows, but the UI for tenant selection, such as buttons, must be custom-built.\u003c/p\u003e\n"],["\u003cp\u003eThe process involves creating tenant selection elements, a FirebaseUI container, tenant-specific configurations, and click handlers to render the appropriate sign-in component.\u003c/p\u003e\n"],["\u003cp\u003eMultiple UX flows are possible, such as separate login pages for each tenant, where the tenant ID can be parsed from the URL.\u003c/p\u003e\n"]]],[],null,["# Creating a sign-in page for multiple tenants\n============================================\n\nThis document shows you how to build a tenant-specific sign-in page for\nIdentity Platform using\n[FirebaseUI](https://github.com/firebase/firebaseui-web), a\ncollection of open-source, pre-built UI components, and the\n[Client SDK](https://github.com/firebase/firebase-js-sdk).\n\nSample code demonstrating the steps covered in this tutorial is available\non [GitHub](https://github.com/firebase/quickstart-js/blob/master/auth/multi-tenant-ui.html).\n\nBefore you begin\n----------------\n\n1. [Enable multi-tenancy and create at least two tenants](/identity-platform/docs/multi-tenancy-quickstart).\n2. [Configure identity providers for each tenant](/identity-platform/docs/quickstart-cicp#add-provider).\n\nGetting the components\n----------------------\n\nYou can fetch the UI script, Client SDK, and CSS files directly\nfrom the CDN by adding them to the `\u003chead\u003e` element of your page: \n\n \u003cscript src=\"https://www.gstatic.com/firebasejs/x.x.x/firebase-app.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"https://www.gstatic.com/firebasejs/x.x.x/firebase-auth.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"https://cdn.firebase.com/libs/firebaseui/x.x.x/firebaseui.js\"\u003e\u003c/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https://cdn.firebase.com/libs/firebaseui/x.x.x/firebaseui.css\" /\u003e\n\nAlternatively, you can install the modules using `npm`, and then reference them\nas ES6 imports: \n\n npm install firebase --save && \\\n npm install firebaseui --save\n\n // Import Firebase JS SDK.\n import * as firebase from \"firebase/app\";\n import \"firebase/auth\";\n import * as firebaseui from 'firebaseui'\n\n### Building a tenant selection UI\n\nFirebaseUI only handles sign-in flows; you'll need to build your own UI\nfor users to select a tenant to sign in with. The following steps show you how\nto build a simple tenant selection page with two buttons.\n\n1. Create two tenant selection elements.\n\n \u003cdiv id=\"tenant-selection-buttons\"\u003e\n \u003cbutton id=\"tenant1-select-button\" data-val=\"tenantId1\"\u003eDisplay name of Tenant 1\u003c/button\u003e\n \u003cbutton id=\"tenant2-select-button\" data-val=\"tenantId2\"\u003eDisplay name of Tenant 2\u003c/button\u003e\n \u003c/div\u003e\n\n2. Create a container element for FirebaseUI.\n\n \u003cdiv id=\"firebaseui-auth-container\"\u003e\u003c/div\u003e\n\n3. Create a configuration for each tenant.\n\n \u003cscript\u003e\n var uiConfigs = {\n 'TENANT_ID1': {\n 'signInOptions': [firebase.auth.EmailAuthProvider.PROVIDER_ID],\n 'credentialHelper': 'none',\n 'signInFlow': 'popup',\n 'callbacks': {\n 'signInSuccessWithAuthResult': function(authResult, redirectUrl) {\n // The sign in success callback.\n return false;\n }\n },\n // tosUrl and privacyPolicyUrl accept either url string or a callback\n // function.\n // Terms of service url/callback.\n tosUrl: '[YOUR_TOS_URL]',\n // Privacy policy url/callback.\n privacyPolicyUrl: function() {\n window.location.assign('[YOUR_PRIVACY_POLICY_URL]');\n }\n },\n 'TENANT_ID2': {\n 'signInOptions': [firebase.auth.GoogleAuthProvider.PROVIDER_ID],\n 'credentialHelper': 'none',\n 'signInFlow': 'popup',\n 'callbacks': {\n 'signInSuccessWithAuthResult': function(authResult, redirectUrl) {\n // The sign in success callback.\n return false;\n }\n },\n // tosUrl and privacyPolicyUrl accept either url string or a callback\n // function.\n // Terms of service url/callback.\n tosUrl: '[YOUR_TOS_URL]',\n // Privacy policy url/callback.\n privacyPolicyUrl: function() {\n window.location.assign('[YOUR_PRIVACY_POLICY_URL]');\n }\n }\n };\n \u003c/script\u003e\n\n4. Add tenant selection click handlers to render the sign-in component\n with FirebaseUI. Note that before rendering the UI component, you'll need to\n set the tenant ID on the `Auth` instance.\n\n \u003cscript\u003e\n var ui = new firebaseui.auth.AuthUI(firebase.auth());\n tenantSelectionButton.addEventListener('click', (e) =\u003e {\n var tenantId = e.target.getAttribute('data-val');\n firebase.auth().tenantId = tenantId;\n ui.reset();\n ui.start('#firebaseui-auth-container', uiConfigs[tenantId]);\n });\n \u003c/script\u003e\n\n5. Launch your app. A sign-in screen with two tenant buttons appears.\n\nWhile this example uses two simple buttons and a single page, many different\nUX flows are possible. For example, you could ask users to enter their email on\none page, then present a tenant selection screen. You could also host separate\nlogin pages for each tenant; in this case, you'd need to parse the tenant ID\nfrom the URL, and then set it on the `Auth` object.\n\nWhat's next\n-----------\n\n- [See the FirebaseUI source code on GitHub](https://github.com/firebase/firebaseui-web)"]]