Added support for multi-tenant Entra ID apps. (#2848)

Author: azaslonov

src/components/users/signin-social/react/runtime/SignInAadRuntime.tsx

@@ -13,19 +13,23 @@ import { BtnSpinner } from "../../../../utils/react/BtnSpinner";
 
 type SignInAadRuntimeProps = {
     label: string
+    tenants: string[],
     replyUrl: string,
     classNames: string
 }
 type SignInAadRuntimeFCProps = SignInAadRuntimeProps & {
-    signIn: () => Promise<void>
+    signIn: (selectedTenant: string) => Promise<void>
 };
 
-const SignInAadRuntimeFC = ({ label, signIn, classNames }: SignInAadRuntimeFCProps) => {
+const SignInAadRuntimeFC = ({ label, signIn, tenants, classNames }: SignInAadRuntimeFCProps) => {
     return (
-        <BtnSpinner onClick={signIn} className={classNames}>
-            <i className="icon-emb icon-svg-entraId"></i>
-            {label}
-        </BtnSpinner>
+        <div className="flex flex-wrap">
+            {tenants.map(tenant => (
+            <BtnSpinner key={tenant} onClick={()=>signIn(tenant)} className={classNames}>
+                <i className="icon-emb icon-svg-entraId"></i>
+                {tenants.length > 1 ? `${label} (${tenant.replace('.onmicrosoft.com', '')})`: label }
+            </BtnSpinner>))}
+        </div>
     );
 };
 
@@ -48,23 +52,24 @@ export class SignInAadRuntime extends React.Component<SignInAadRuntimeProps> {
     private selectedService: IAadService;
     private aadConfig: AadClientConfig;
 
-    public async signIn(): Promise<void> {
+    public async signIn(selectedTenant: string): Promise<void> {
         dispatchErrors(this.eventManager, ErrorSources.signInOAuth, []);
         this.logger.trackEvent(eventTypes.aadLogin, { message: "Initiating AAD login" });
 
         try {
             this.aadConfig  = await this.settingsProvider.getSetting<AadClientConfig>(SettingNames.aadClientConfig);
 
-            if (this.aadConfig ) {
-                if (this.aadConfig .clientLibrary === AadClientLibrary.v2) {
+            if (this.aadConfig) {
+                if (this.aadConfig.clientLibrary === AadClientLibrary.v2) {
                     this.selectedService = this.aadServiceV2;
                 }
                 else {
                     this.selectedService = this.aadService;
                 }
 
-                await this.selectedService.signInWithAad(this.aadConfig .clientId, this.aadConfig .authority, this.aadConfig .signinTenant || defaultAadTenantName, this.props.replyUrl);
-            } else {
+                await this.selectedService.signInWithAad(this.aadConfig.clientId, this.aadConfig.authority, selectedTenant, this.props.replyUrl);
+            } 
+            else {
                 this.logger.trackEvent(eventTypes.aadLogin, { message: "AAD client config is not set" });
             }
         } catch (error) {

src/components/users/signin-social/signinSocialViewModelBinder.ts

@@ -53,10 +53,13 @@ export class SigninSocialViewModelBinder implements ViewModelBinder<SigninSocial
         const termsOfService = await this.getTermsOfService();
         const termsOfUse = (termsOfService.text && termsOfService.enabled) ? termsOfService.text : undefined;
 
+        const tenants = aadIdentityProvider.allowedTenants || [];
+        
         if (aadIdentityProvider) {
             state.aadConfig = {
                 classNames: classNames,
                 label: model.aadLabel,
+                tenants: tenants,
                 replyUrl: model.aadReplyUrl || undefined,
                 termsOfUse: aadB2CIdentityProvider ? undefined : termsOfUse // display terms of use only once if both configs are present
             };

src/contracts/aadB2CClientConfig.ts

@@ -1,6 +1,6 @@
 import { AadClientConfig } from "./aadClientConfig";
 
-export interface AadB2CClientConfig extends AadClientConfig{
+export interface AadB2CClientConfig extends AadClientConfig {
     /**
      * Sign-in policy name. Only applies to AAD B2C identity provider.
      */

src/contracts/aadClientConfig.ts

@@ -17,6 +17,11 @@ export interface AadClientConfig {
      */
     signinTenant: string;
 
+    /**
+     * The list of allowed tenants for multi-tenant applications.
+     */
+    allowedTenants?: string[];
+
     /**
      * The client library to be used in the developer portal
      */

src/publishing/aadConfigPublisher.ts

@@ -25,6 +25,7 @@ export class AadConfigPublisher implements IPublisher {
                 clientId: aadIdentityProvider.clientId,
                 authority: aadIdentityProvider.authority,
                 signinTenant: aadIdentityProvider.signinTenant,
+                allowedTenants: aadIdentityProvider.allowedTenants,
                 clientLibrary: aadIdentityProvider.clientLibrary
             };
 

src/services/runtimeConfigurator.ts

@@ -36,6 +36,7 @@ export class RuntimeConfigurator {
                 clientId: aadIdentityProvider.clientId,
                 authority: aadIdentityProvider.authority,
                 signinTenant: aadIdentityProvider.signinTenant,
+                allowedTenants: aadIdentityProvider.allowedTenants,
                 clientLibrary: aadIdentityProvider.clientLibrary
             };