Ionic background not working with msal interceptor

[cdiazp-sacyr]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.24.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

3.0.23

Public or Confidential Client?

Public

Description

I'm using Ionic, and when I turn off the screen, the interceptor's http calls stop working, and the reason seems to be because angular-common-http is being used.

We have created a custom interceptor to use capacitorHttp, but the acquireTokenSilent method is still using angular-common-http internally, so it still blocks the call

Is there a way to make acquireTokenSilent use capacitorHttp instead of angular-common-http?

Error Message

No response

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

authConfig: {
    clientId: "clientId",
    tenantId: "tenantId",
    authority:
      "https://login.microsoftonline.com/tenantId",
    knownAuthorities: [""],
    redirectUri: "http://localhost:3000",
    postLogoutRedirectUri: "http://localhost:3000",
    scopes: ["user.read"],
    consentScopes: [
      "user.read",
      "api://url/user_impersonation",
    ],
    protectedResourceMap: [
      [
        "https://url/app.api/api",
        ["api://url/user_impersonation"],
      ],
    ],
  },

Relevant Code Snippets

Token stops renewing

Reproduction Steps

1. I get the token correctly
2. I turn off the screen of device
3. In the background, the token renewal is not called

Expected Behavior

should continue renewing token, but it doesn't

Identity Provider

Azure B2C Custom Policy

Browsers Affected (Select all that apply)

Other

Regression

No response

Source

External (Customer)

[tnorling]

You can provide your own implementation of the networkClient on the system options passed into PublicClientApplication. This is what msal-browser uses under the hood for all network requests.

See options: https://azuread.github.io/microsoft-authentication-library-for-js/ref/types/_azure_msal_browser.BrowserSystemOptions.html

[cdiazp-sacyr]

You can provide your own implementation of the networkClient on the system options passed into PublicClientApplication. This is what msal-browser uses under the hood for all network requests.

See options: https://azuread.github.io/microsoft-authentication-library-for-js/ref/types/_azure_msal_browser.BrowserSystemOptions.html

Thank you very much for your help!

Now, I have implemented this class for managing requests:

import { INetworkModule, NetworkRequestOptions, NetworkResponse } from '@azure/msal-browser';
import { CapacitorHttp } from '@capacitor/core';

export class CustomHttpClient implements INetworkModule {
    
    async sendGetRequestAsync<T>(url: string, options?: NetworkRequestOptions, cancellationToken?: number): Promise<NetworkResponse<T>> {
        try {

            const response = await CapacitorHttp.get({ url, headers: options?.headers });

            console.log('GET response:', response);

            return {
                body: response.data, 
                headers: response.headers,
                status: response.status
            } as NetworkResponse<T>;
        } catch (error) {
            console.error('GET request error:', error);
            throw error;
        }
    }
    
    async sendPostRequestAsync<T>(url: string, options?: NetworkRequestOptions): Promise<NetworkResponse<T>> {
        try {
            console.log('URL: ', url, options)
            const response = await CapacitorHttp.post({
                url,
                headers: options?.headers,
                data: options?.body,
            });

            console.log('POST response:', response);

            return {
                body: response.data, 
                headers: response.headers,
                status: response.status
            } as NetworkResponse<T>;
        } catch (error) {
            console.error('POST request error:', error);
            throw error;
        }
    }
}

But it returns the following error: Tokens issued for the 'Single-Page Application' client-type may only be redeemed via cross-origin requests.

Do you know what i can do?
Thank you very much!

[tnorling]

Your POST request is likely missing the origin header. I'd suggest confirming and, if so, make sure to include it

[cdiazp-sacyr]

Now, I add 'Origin' http://localhost:3000' and it works!!
But when I need to renew the token I obtain this error:

Unsafe attempt to initiate navigation for frame with URL 'https://localhost/home?sync=true' from frame with URL 'https://login.microsoftonline.com/...'. The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.

BrowserAuthError: monitor_window_timeout: Token acquisition in iframe failed due to timeout. For more visit: aka.ms/msaljs/browser-errors

Is it a configuration problem maybe?
Thanks!

[tnorling]

Your redirectUri page is attempting a navigation. Recommended best practice for silent/popup calls is to use a blank page that runs no javascript as your redirectUri page to avoid these types of problems. If that's not possible, you'll need to debug your redirectUri page and see if you can locate where it's attempting a redirect or change to the url

[cdiazp-sacyr]

Finally, we have made a custom solution, in which we manually use localstorage to only renew the token after a certain amount of time.
Our problem was that the acquireTokenSilence method was being called many times in a row, and the server denied it after a few calls in a row.
Now we control that manually.

Thank you very much for your help