custom aad login doesnt work with static web app

Question

I used to use "google" + "aad" to log in as a user. Until Azure stopped offering it and forced you to use standard hosting. Ok, I don't accept it, but I'm not going to discuss it here.

I switched to the paid plan, configured Google and it's working. But not AAD.

I tried thousands of different configurations and all the solutions I could find on the internet. Nothing worked. It should have been so simple when it came to configuring Google. I tried with/without the clientSecretSettingName, with tenantid/common/consumers in openIdIssuer, activating/deactivating Access tokens/ID tokens, activating several API permissions, among others that I can't remember now.

The errors I found along the way:

AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption.

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

You don’t have permissions for this page. Please check your login info and permissions and try again.

Not to be totally negative, if I choose WEB instead of SPA for authentication, it will work. But as far as I know, that’s not the right choice to make. And even if the login works, the logout doesn’t.

if this helps at all: I use blazor wasm + azure functions

Answer 1

Hi @Dhiogo Acioli

Thank you for posting this in Microsoft Q&A.

I understand that you are trying to log in using both Google and Microsoft Entra ID/Azure Active Directory (AAD) but are encountering issues.

Based on the details provided, it seems that your application is a Single Page Application (SPA) and is experiencing login issues, whereas authentication works when configured as a Web application.

For SPA applications, Proof Key for Code Exchange (PKCE) is required. Web applications do not require PKCE, which is why your authentication is working in that configuration. If you want to use SPA, you must implement PKCE.

To resolve this, you need to include a code challenge and challenge method in your authentication request.

You can generate a code_challenge and code_verifier using the following tool: PKCE Code Generator

Example: Authorization Code Request

// Line breaks for readability

https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize?
client_id=00001111-aaaa-2222-bbbb-3333cccc4444
&response_type=code
&redirect_uri=http%3A%2F%2Flocalhost%2Fmyapp%2F
&response_mode=query
&scope=https%3A%2F%2Fgraph.microsoft.com%2Fmail.read
&state=12345
&code_challenge=YTFjNjI1OWYzMzA3MTI4ZDY2Njg5M2RkNmVjNDE5YmEyZGRhOGYyM2IzNjdmZWFhMTQ1ODg3NDcxY2Nl
&code_challenge_method=S256

For more details, refer to: OAuth 2.0 Authorization Code Flow

Resolving the Second Error (ID Token Not Enabled)

The error "response_type 'id_token' is not enabled for the application" suggests that ID Token issuance is not enabled for your application. To enable it:

Go to Microsoft Entra ID -> Navigate to App Registrations ->Search and open your application ->Click on Authentication ->Under Implicit grant and hybrid flows, check the box for ID Token.

Hope this helps. Do let us know if you any further queries.

---

If this answers your query, do click Accept Answer and Yes for was this answer helpful. And, if you have any further query do let us know.