Azure AD: code flow with PKCE: id_token is not enabled for the application

Viewed 1216

I'm trying to integrate a React single-page app (SPA) with Azure AD. I'm following the docs (e.g. scenario) and using the samples from react-aad-msal to see if things work at a basic level.

But, I get the following error when attempting to reach the Microsoft login page:

AADSTS700054: response_type 'id_token' is not enabled for the application.

Now, the docs are pretty clear that for SPAs, auth code flow with PKCE is the way to go, and you shouldn't use the implicit grant flow because it's insecure. This means that existing answers to similar questions (such as this one or this other one), which suggest blindly turning on a setting for the implicit flow, are inadequate.

Is it possible to enable login (ID tokens) and API access (access tokens) for an SPA without using the implicit flow?

(I'm not sure yet, but it's also possible that react-aad-msal is using the implicit flow. I haven't found any setting that tells it which flow to use.)

3 Answers

I ran into this building Blazor WASM (.NET 6 with all up to date libraries), but I think my resolution may still apply for some folks.

After following the tutorial here as closely as possible, I was still getting the "id_token is not enabled" message. One thing I noticed that confused me big time was this part of the tutorial regarding registering your client application : enter image description here

But if you look in the Azure Portal the actual checkboxes seem to state the opposite : enter image description here

I chalked this up to an error in the tutorial and left them unchecked thinking that should allow me to use auth code flow. Tried everything and was still getting the same message. Ready to punt on the whole issue, I enabled both Access Tokens and ID Tokens.

Things started working! But looking at the network traffic, it was actually calling the /authorize endpoint multiple times when hitting the application. The first time with response_type=id_token and then after that with response_type=code.

Eventually realized this was caused by the /authsettings resource deployed on the app service. Azure was trying to authenticate me to the app service itself using response_type=id_token.

After moving to a fresh app service without any authentication settings, and just relying on the application's configuration to redirect unauthenticated users, auth code flow worked, and the check boxes in the app registration were unchecked.

react-aad-msal actually doesn't state which version of MSAL it's using. Right now there are 2 versions:

  • MSAL 1.x supports only the implicit flow.
  • MSAL 2.0 supports auth code flow with PKCE

The package.json file for react-aad-msal's JavaScript sample is clearly using MSAL 1.x:

    "msal": "^1.2.0",

So that's my problem right there. Implicit flow. Can't use react-aad-msal for auth code flow with PKCE.

While I did not try @Ryan D's solution with creating a whole new App Service, it did inspire me to try something else. I went into my existing App Service for my app and removed authentication, because I already had it built into my application. It's programmed in the code already. That fixed the error about the ID token.

I did this:

  1. Log into the Azure Portal.
  2. Go to App Services.
  3. Select your application
  4. On the left under Settings, click on Authentication.
  5. Remove/delete the authentication method you have setup. For me it was Microsoft.

I guess if you have it all built into your application code, you don't need to set it up in Azure? I get the Microsoft login now when I launch my application.

So you may not have to re-create a whole new App Service, although everyone's situation is different. This is what fixed it for me.

EDIT: This update allowed me to access my application, but I cannot connect to our internal database. Still trying to figure out if it's related to the authentication in Azure.

Related