Add extraQueryParams for api calls (#7974)

yongdiw · web-flow · commit 8316ee5f4bf2 · 2025-08-27T19:50:29.000+01:00
diff --git a/change/@azure-msal-browser-e3d4b10b-bba6-47de-9ff2-7ee4039bb97e.json b/change/@azure-msal-browser-e3d4b10b-bba6-47de-9ff2-7ee4039bb97e.json
@@ -0,0 +1,7 @@
+{
+    "type": "minor",
+    "comment": "Add extraQueryParams for api calls #7974",
+    "packageName": "@azure/msal-browser",
+    "email": "yongdiwang@microsoft.com",
+    "dependentChangeType": "minor"
+}
diff --git a/lib/msal-browser/src/custom_auth/configuration/CustomAuthConfiguration.ts b/lib/msal-browser/src/custom_auth/configuration/CustomAuthConfiguration.ts
@@ -11,6 +11,7 @@ import {
 export type CustomAuthOptions = {
     challengeTypes?: Array<string>;
     authApiProxyUrl: string;
+    customAuthApiQueryParams?: Record<string, string>;
     capabilities?: Array<string>;
 };
 
diff --git a/lib/msal-browser/src/custom_auth/controller/CustomAuthStandardController.ts b/lib/msal-browser/src/custom_auth/controller/CustomAuthStandardController.ts
@@ -113,7 +113,8 @@ export class CustomAuthStandardController
                     this.authority.getCustomAuthApiDomain(),
                     this.customAuthConfig.auth.clientId,
                     new FetchHttpClient(this.logger),
-                    this.customAuthConfig.customAuth?.capabilities?.join(" ")
+                    this.customAuthConfig.customAuth?.capabilities?.join(" "),
+                    this.customAuthConfig.customAuth?.customAuthApiQueryParams
                 ),
             this.authority
         );
diff --git a/lib/msal-browser/src/custom_auth/core/interaction_client/CustomAuthInteractionClientBase.ts b/lib/msal-browser/src/custom_auth/core/interaction_client/CustomAuthInteractionClientBase.ts
@@ -64,7 +64,7 @@ export abstract class CustomAuthInteractionClientBase extends StandardInteractio
 
     protected getScopes(scopes: string[] | undefined): string[] {
         if (!!scopes && scopes.length > 0) {
-            scopes;
+            return scopes;
         }
 
         return [
diff --git a/lib/msal-browser/src/custom_auth/core/network_client/custom_auth_api/BaseApiClient.ts b/lib/msal-browser/src/custom_auth/core/network_client/custom_auth_api/BaseApiClient.ts
@@ -27,7 +27,8 @@ export abstract class BaseApiClient {
     constructor(
         baseUrl: string,
         private readonly clientId: string,
-        private httpClient: IHttpClient
+        private httpClient: IHttpClient,
+        private customAuthApiQueryParams?: Record<string, string>
     ) {
         this.baseRequestUrl = parseUrl(
             !baseUrl.endsWith("/") ? `${baseUrl}/` : baseUrl
@@ -45,7 +46,11 @@ export abstract class BaseApiClient {
             ...data,
         });
         const headers = this.getCommonHeaders(correlationId, telemetryManager);
-        const url = buildUrl(this.baseRequestUrl.href, endpoint);
+        const url = buildUrl(
+            this.baseRequestUrl.href,
+            endpoint,
+            this.customAuthApiQueryParams
+        );
 
         let response: Response;
 
diff --git a/lib/msal-browser/src/custom_auth/core/network_client/custom_auth_api/CustomAuthApiClient.ts b/lib/msal-browser/src/custom_auth/core/network_client/custom_auth_api/CustomAuthApiClient.ts
@@ -18,25 +18,29 @@ export class CustomAuthApiClient implements ICustomAuthApiClient {
         customAuthApiBaseUrl: string,
         clientId: string,
         httpClient: IHttpClient,
-        capabilities?: string
+        capabilities?: string,
+        customAuthApiQueryParams?: Record<string, string>
     ) {
         this.signInApi = new SignInApiClient(
             customAuthApiBaseUrl,
             clientId,
             httpClient,
-            capabilities
+            capabilities,
+            customAuthApiQueryParams
         );
         this.signUpApi = new SignupApiClient(
             customAuthApiBaseUrl,
             clientId,
             httpClient,
-            capabilities
+            capabilities,
+            customAuthApiQueryParams
         );
         this.resetPasswordApi = new ResetPasswordApiClient(
             customAuthApiBaseUrl,
             clientId,
             httpClient,
-            capabilities
+            capabilities,
+            customAuthApiQueryParams
         );
     }
 }
diff --git a/lib/msal-browser/src/custom_auth/core/network_client/custom_auth_api/ResetPasswordApiClient.ts b/lib/msal-browser/src/custom_auth/core/network_client/custom_auth_api/ResetPasswordApiClient.ts
@@ -34,9 +34,15 @@ export class ResetPasswordApiClient extends BaseApiClient {
         customAuthApiBaseUrl: string,
         clientId: string,
         httpClient: IHttpClient,
-        capabilities?: string
+        capabilities?: string,
+        customAuthApiQueryParams?: Record<string, string>
     ) {
-        super(customAuthApiBaseUrl, clientId, httpClient);
+        super(
+            customAuthApiBaseUrl,
+            clientId,
+            httpClient,
+            customAuthApiQueryParams
+        );
         this.capabilities = capabilities;
     }
 
diff --git a/lib/msal-browser/src/custom_auth/core/network_client/custom_auth_api/SignInApiClient.ts b/lib/msal-browser/src/custom_auth/core/network_client/custom_auth_api/SignInApiClient.ts
@@ -30,9 +30,15 @@ export class SignInApiClient extends BaseApiClient {
         customAuthApiBaseUrl: string,
         clientId: string,
         httpClient: IHttpClient,
-        capabilities?: string
+        capabilities?: string,
+        customAuthApiQueryParams?: Record<string, string>
     ) {
-        super(customAuthApiBaseUrl, clientId, httpClient);
+        super(
+            customAuthApiBaseUrl,
+            clientId,
+            httpClient,
+            customAuthApiQueryParams
+        );
         this.capabilities = capabilities;
     }
 
diff --git a/lib/msal-browser/src/custom_auth/core/network_client/custom_auth_api/SignupApiClient.ts b/lib/msal-browser/src/custom_auth/core/network_client/custom_auth_api/SignupApiClient.ts
@@ -27,9 +27,15 @@ export class SignupApiClient extends BaseApiClient {
         customAuthApiBaseUrl: string,
         clientId: string,
         httpClient: IHttpClient,
-        capabilities?: string
+        capabilities?: string,
+        customAuthApiQueryParams?: Record<string, string>
     ) {
-        super(customAuthApiBaseUrl, clientId, httpClient);
+        super(
+            customAuthApiBaseUrl,
+            clientId,
+            httpClient,
+            customAuthApiQueryParams
+        );
         this.capabilities = capabilities;
     }
 
diff --git a/lib/msal-browser/src/custom_auth/core/utils/UrlUtils.ts b/lib/msal-browser/src/custom_auth/core/utils/UrlUtils.ts
@@ -17,9 +17,23 @@ export function parseUrl(url: string): URL {
     }
 }
 
-export function buildUrl(baseUrl: string, path: string): URL {
+export function buildUrl(
+    baseUrl: string,
+    path: string,
+    queryParams?: Record<string, string>
+): URL {
     const newBaseUrl = !baseUrl.endsWith("/") ? `${baseUrl}/` : baseUrl;
     const newPath = path.startsWith("/") ? path.slice(1) : path;
     const url = new URL(newPath, newBaseUrl);
+
+    // Add query parameters if provided
+    if (queryParams) {
+        Object.entries(queryParams).forEach(([key, value]) => {
+            if (value !== undefined && value !== null) {
+                url.searchParams.set(key, String(value));
+            }
+        });
+    }
+
     return url;
 }
diff --git a/lib/msal-browser/test/custom_auth/core/network_client/custom_auth_api/CustomAuthApiClient.spec.ts b/lib/msal-browser/test/custom_auth/core/network_client/custom_auth_api/CustomAuthApiClient.spec.ts
@@ -26,26 +26,121 @@ describe("CustomAuthApiClient", () => {
         expect(customAuthApiClient.resetPasswordApi).toBeDefined();
     });
 
-    it("should pass capabilities to individual API clients when provided", () => {
-        const logger = getDefaultLogger();
-        const capabilities = "custom_capability_1 custom_capability_2";
-        const apiClient = new CustomAuthApiClient(
-            "https://test.com",
-            "client_id",
-            new FetchHttpClient(logger),
-            capabilities
-        );
+    describe("customAuthApiQueryParams", () => {
+        it("should initialize with customAuthApiQueryParams containing dc", () => {
+            const logger = getDefaultLogger();
+            const customAuthApiQueryParams = { dc: "datacenter1" };
+
+            const apiClient = new CustomAuthApiClient(
+                "https://test.com",
+                "client_id",
+                new FetchHttpClient(logger),
+                undefined,
+                customAuthApiQueryParams
+            );
+
+            expect(apiClient.signInApi).toBeDefined();
+            expect(apiClient.signUpApi).toBeDefined();
+            expect(apiClient.resetPasswordApi).toBeDefined();
+        });
+
+        it("should initialize with customAuthApiQueryParams containing slice", () => {
+            const logger = getDefaultLogger();
+            const customAuthApiQueryParams = { slice: "slice2" };
+
+            const apiClient = new CustomAuthApiClient(
+                "https://test.com",
+                "client_id",
+                new FetchHttpClient(logger),
+                undefined,
+                customAuthApiQueryParams
+            );
+
+            expect(apiClient.signInApi).toBeDefined();
+            expect(apiClient.signUpApi).toBeDefined();
+            expect(apiClient.resetPasswordApi).toBeDefined();
+        });
+
+        it("should initialize with customAuthApiQueryParams containing both dc and slice", () => {
+            const logger = getDefaultLogger();
+            const customAuthApiQueryParams = {
+                dc: "datacenter1",
+                slice: "slice2",
+            };
+
+            const apiClient = new CustomAuthApiClient(
+                "https://test.com",
+                "client_id",
+                new FetchHttpClient(logger),
+                undefined,
+                customAuthApiQueryParams
+            );
 
-        // Verify that the individual API clients are created (capabilities are internal to them)
-        expect(apiClient.signInApi).toBeDefined();
-        expect(apiClient.signUpApi).toBeDefined();
-        expect(apiClient.resetPasswordApi).toBeDefined();
+            expect(apiClient.signInApi).toBeDefined();
+            expect(apiClient.signUpApi).toBeDefined();
+            expect(apiClient.resetPasswordApi).toBeDefined();
+        });
+
+        it("should initialize with undefined customAuthApiQueryParams", () => {
+            const logger = getDefaultLogger();
+
+            const apiClient = new CustomAuthApiClient(
+                "https://test.com",
+                "client_id",
+                new FetchHttpClient(logger),
+                undefined,
+                undefined
+            );
+
+            expect(apiClient.signInApi).toBeDefined();
+            expect(apiClient.signUpApi).toBeDefined();
+            expect(apiClient.resetPasswordApi).toBeDefined();
+        });
     });
 
-    it("should create API clients without capabilities when not provided", () => {
-        // Verify that the individual API clients are created without capabilities
-        expect(customAuthApiClient.signInApi).toBeDefined();
-        expect(customAuthApiClient.signUpApi).toBeDefined();
-        expect(customAuthApiClient.resetPasswordApi).toBeDefined();
+    describe("capabilities", () => {
+        it("should pass capabilities to individual API clients when provided", () => {
+            const logger = getDefaultLogger();
+            const capabilities = "custom_capability_1 custom_capability_2";
+            const apiClient = new CustomAuthApiClient(
+                "https://test.com",
+                "client_id",
+                new FetchHttpClient(logger),
+                capabilities
+            );
+
+            // Verify that the individual API clients are created (capabilities are internal to them)
+            expect(apiClient.signInApi).toBeDefined();
+            expect(apiClient.signUpApi).toBeDefined();
+            expect(apiClient.resetPasswordApi).toBeDefined();
+        });
+
+        it("should create API clients without capabilities when not provided", () => {
+            // Verify that the individual API clients are created without capabilities
+            expect(customAuthApiClient.signInApi).toBeDefined();
+            expect(customAuthApiClient.signUpApi).toBeDefined();
+            expect(customAuthApiClient.resetPasswordApi).toBeDefined();
+        });
+
+        it("should pass both capabilities and customAuthApiQueryParams when provided", () => {
+            const logger = getDefaultLogger();
+            const capabilities = "custom_capability_1 custom_capability_2";
+            const customAuthApiQueryParams = {
+                dc: "datacenter1",
+                slice: "slice2",
+            };
+
+            const apiClient = new CustomAuthApiClient(
+                "https://test.com",
+                "client_id",
+                new FetchHttpClient(logger),
+                capabilities,
+                customAuthApiQueryParams
+            );
+
+            expect(apiClient.signInApi).toBeDefined();
+            expect(apiClient.signUpApi).toBeDefined();
+            expect(apiClient.resetPasswordApi).toBeDefined();
+        });
     });
 });
diff --git a/lib/msal-browser/test/custom_auth/core/utils/UrlUtils.spec.ts b/lib/msal-browser/test/custom_auth/core/utils/UrlUtils.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ export abstract class CustomAuthInteractionClientBase extends StandardInteractio`
`64`	`64`
`65`	`65`	`protected getScopes(scopes: string[] \| undefined): string[] {`
`66`	`66`	`if (!!scopes && scopes.length > 0) {`
`67`		`- scopes;`
	`67`	`+ return scopes;`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`return [`