AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application'

Question

I am trying to send cross origin request to get access token on my React spa app localhost. I got the first 'Access-Control-Allow-Origin' error, to solve it I defined proxy to webpack.

When I run the code block below, I get 400 bad request errors.

Proxy code
'/payment': {
  target: 'https://apitest.domain.com',
  changeOrigin: true,
  secure: false,
  pathRewrite: { '^/payment': '' },
}
-------------------
  async getPaymentAccessToken() {
    const msg = await request<PaymentAccessTokenResponse>(`/payment/accesstoken/get`, {
      method: 'POST',
      prefix: undefined,
      credentials: 'include',
      headers: {
        client_id: this.client.client_id,
        client_secret: this.client.client_secret,
        'Ocp-Apim-Subscription-Key': this.client['payment-Subscription-Key'],
        'Merchant-Serial-Number': this.client['Merchant-Serial-Number']!,
      },
    });

    return msg;
  }

{"error":"invalid_request","error_description":"AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.\r\nTrace ID: 0c7f2993-b612-434d-9cee-244e88f51600\r\nCorrelation ID: 45d80262-c77f-487b-a95b-4566c736e1bc\r\nTimestamp: 2022-06-07 19:14:30Z","error_codes":[9002326],"timestamp":"2022-06-07 19:14:30Z","trace_id":"0c7f2993-b612-434d-9cee-244e88f51600","correlation_id":"45d80262-c77f-487b-a95b-4566c736e1bc","error_uri":"https://login.windows.net/error?code=9002326"}

Hoeg

Is there any solutions? – Hoeg

Answer 1

Make sure Azure app is registered for SPA platform. You can refer Microsoft official doc This should solve the issue.

check more config options and samples here

Ticklish

The Azure app is not mine. I'm just trying to access services. – Hoeg

Answer 2

migrate frontend redirect uris to "single-page application".

if "single-page application" does not exist click add a platform

Thymus

I didn't realize you could have both Web and SPA, thank you for this! – Epigraphy

Answer 3

It's weird, and sometimes you need to change the type in the Manifest:

"replyUrlsWithType": [
    {
        "url": "http://localhost:5173/",
        "type": "spa"
    }
],

If the type is Spa, you should change it to spa. Making it all lower cases.

Simonasimonds

this is an unacceptable bug, thanks for clarifying. – Hidie