I’m developing a native application using Angular, Angular OIDC Client, and Capacitor, but I’m encountering an error during authentication with Microsoft Azure AD. The error message in my Xcode logs is:

The error:

AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type. Request origin: 'http://localhost:4200'.

Frameworks and Tools:
Angular: 11.0.0
Angular OIDC Client: 11.6.8
Capacitor: 3.0.0
Azure AD: For authentication

Authentication Flow:
The native app opens a browser to authenticate with Azure AD.
Azure AD redirects back to the app using a custom URI scheme.
Configurations:
Auth Configuration (Angular OIDC Client):

import { PassedInitialConfig } from 'angular-auth-oidc-client';

const isNative = true;

export const authConfig: PassedInitialConfig = {
  config: {
    authority: 'MyAuthority',
    redirectUrl: isNative ? 'msauth.laadpalen.monitor.native://auth' : 'http://localhost:4200',
    postLogoutRedirectUri: isNative ? 'msauth.laadpalen.monitor.native://auth' : 'http://localhost:4200',
    authWellknownEndpointUrl: 'MyEndpoint',
    clientId: 'MyClientID',
    scope: 'MyScope',
    responseType: 'code',
    silentRenew: true,
    useRefreshToken: true,
    maxIdTokenIatOffsetAllowedInSeconds: 600,
    issValidationOff: false,
    autoUserInfo: false,
    customParamsAuthRequest: {
      prompt: 'select_account',
    },
  }
}

iOS Configuration (Info.plist):

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>laadpalen.monitor.native</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>msauth.laadpalen.monitor.native</string>
    </array>
  </dict>
</array>

Capacitor Configuration (capacitor.config.json):

{
  "appId": "stage.optis.cloud.laadpalen.monitor",
  "appName": "laadpalen-monitor-fe",
  "webDir": "dist/browser",
  "server": {
    "url": "http://localhost:4200"
  },
  "packageClassList": [
    "AppPlugin"
  ]
}

Azure AD Configuration:

Redirect URIs:
http://localhost:4200 (for web)
msauth.laadpalen.monitor.native://auth (for native)

Issue:
After the browser redirects back to the app with the custom URI scheme (msauth.laadpalen.monitor.native://auth), I receive the error mentioned above.

Question:
What could be causing this cross-origin token redemption error, and how can I resolve it to allow my native app to authenticate properly with Azure AD?

Ask me for more config if needed! Also don’t mind the isNative boolean since its just for testing.

NOTE THAT I AM DOING AN INTERNSHIP AND ANOTHER TEAM WITH ANOTHER WEB APP IS IN THE SAME AZURE APP REQISTRATION, THEY HAVE WEB REDIRECTS CONFIGURED (other ports and urls) AND I HAVE SPA AND IOS CONFIGURES, CAN THIS BE A CAUSE OF THE ERROR?

Troubleshooting Steps Taken:
Confirmed the redirect URIs in Azure AD.
Verified the platform type configuration in Azure AD.
Checked the configuration in the Angular app and Capacitor setup.