Microsoft Entra SPA and API failing to authenticate. How do I fix?

Question

Hi,

What we are trying to accomplish is to use Entra ID to handle signing in of users into our application. We have a SPA written in Vue and a C# API. In Vue we use the package @azure/msal-browser and we want to be able to login get a access token and add that to our request headers for the API using authorization code flow.

We have:

• Created a App Registration.
• App Registration set to - Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)
• Setup the SPA redirect URLs
• Added API Permissions
• Exposed the Application URI
• Added a scope

Now when logging in we get:

I got it working when using https://login.microsoftonline.com/<tenantid>.onmicrosoft.com for the authority URL.

However that only worked for an account types that had the email .onmicrosoft.com and nothing else. So personal email didn't work.

From everything I have found it seems the URL should be https://<tenantid>.ciamlogin.com/<tenantid> but that produces the above error.

After a couple of days looking into the issue I have found the exact endpoints that are called and also reproduced the error.

https://<tenant>.ciamlogin.com/<tenant>/oauth2/v2.0/authorize?client_id=<clientId>&response_type=code&redirect_uri=https%3A%2F%2Flocalhost:5173/signin-oidc&response_mode=query&scope=<clientid>%2F.default&state=123

Any help with getting this to work would be appreciated. I have followed so many different articles about resolving the error and none seem to work.

Thanks.

Answer 1

Hi @Kieran Haycock ,

Thanks for reaching out.

I can understand you are trying to authenticate the users and acquire an access token using Micrsoft Entra ID and getting error due to endpoints.

For supported account type "Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)", the endpoint should be https://login.microsoftonline.com/**common**/oauth2/v2.0/token.

The endpoint you are trying https://login.microsoftonline.com/<tenantid> allow users to authenticate from that particular tenant.

However, to authenticate users from other organizations and personal accounts, endpoint must be changed from <tenantId> to common.

Regarding https://<tenantid>.ciamlogin.com/<tenantid>, these endpoints require for consumer account while using Entra External ID for customers when users are registered in CIAM tenant which is different from Microsoft Entra ID.

Hope this will help.

Thanks,

Shweta

Please remember to "Accept Answer" if answer helped you.