CODEWITHSUNDEEP
iosangularazureauthenticationcapacitor
Toby x
Toby x

Reputation: 1

Cross-Origin Token Redemption Error in Capacitor Native App with Azure AD

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 REGISTRATION, THEY HAVE WEB REDIRECTS CONFIGURED (other ports and urls) AND I HAVE SPA AND IOS CONFIGURED, 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.

Upvotes: 0

Views: 122

Answers (1)

Rukmini
Rukmini

Reputation: 15544

The error "Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type" usually occurs if the Microsoft Entra ID application is not registered as SPA.

  • As you are making use of SPA authentication, the redirect URL must be registered under SPA platform.
  • Also make sure to pass correct headers.

enter image description here

Also make sure to pass origin as headers:

enter image description here

  • In your scenario, try registering all the URLs as SPA in the Microsoft Entra ID application to resolve the issue.
  • Try to remove the other redirect URLs registered as WEB to resolve the conflict and try to re-run the code to resolve the error.

Reference:

Error while login with Microsoft Active directory using Reactjs - Stack Overflow

Upvotes: 0

Related Questions