redirect_uri_mismatch Azure AD B2C with angular using MSAL

Question

While using loginRedirect() or acquireTokenRedirect(), I am getting the following error:

redirect_uri_mismatch:AADB2C90006%3a The redirect URI 'http%3a%2f%2flocalhost%3a4200%2fsubscription' provided in the request is not registered for the client id 'blah-blah-blah'. Correlation ID%3a 29978079-45a7-4f85-a9bf-4cde9d3adc84 Timestamp%3a 2017-09-29 05%3a32%3a22Z

Note: The client ID is the same that I am using in my tenant config as well as what is configured in Azure.

Please let me know why I am getting a redirect_uri_mismatch error every time and what the code redirect_uri_mismatch AADB2C90006 means. If you have a reference, please share a link.

Lamm

What have you configured as the reply urls for the app? – Defecate

what do you mean by reply URLs? are you talking about configurations? – Lamm

Yes, the configuration for your app in Azure AD. – Defecate

export const TENANT_CONFIG = { tenant: "xyz.onmicrosoft.com", clientID: 'blah-blah-blah', signInPolicy: "B2C_1_SignIn", signUpPolicy: "B2C_1_SignUp", b2cScopes: ["xyz.onmicrosoft.com/api/id_token"], redirect_uri : "localhost:4200" }; – Lamm

What have you configured in Azure AD B2C? – Defecate

all the required information. and yes for redirect Uri I also set localhost:4200 in Azure AD B2C. – Lamm

Let us continue this discussion in chat. – Lamm

Answer 1

If you're confident you have added the redirect URI(s) to the app registration then you have to WAIT. Waiting about 1-3hrs seems to resolve the issue.

During that window, it can be flaky as sometimes it works and sometimes it won't (AADB2C90006). We must be hitting one endpoint w/ the old version sometimes and vice versa 🤷‍♂️.

Palaeography

Answer 2

You need to add http://localhost:4200/subscription as a reply URL in your B2C Web App configuration. This documentation should help.

Palaeography

If this thing I have to configure then for each and every URL of my app I have to configure the same. whenever I am calling loginRedirect() so before that I am routing user to root url, that time working fine. but when its redirecting and done login then that time its again going to the previous URL. so i guess this is issue of MSAL implementation. – Lamm

@ChaitanyaChauhan - see this post, it might help. – Palaeography

Answer 3

I was having the same issue. I was able to fix it by running my user flow directly by going to the user flow in the Azure portal, clicking "Run user Flow" which opens the B2C url in the browser, then in Chrome, I long pressed the refresh button with the dev tools open and selected "Empty Cache and Hard Reload". Then when I go back to my app, I don't get that redirect_uri_mismatch error anymore.

Buttonhole

Answer 4

I had the same issue (with a Blazor application) and even I clear the cache of my browser, using InPrivate mode,... it did not work.

The only way to fix the issue for me was to just recreate the app registration with exactly the same settings (Redirect URI,...).

Of course, I just had to change the Client ID setting for MSAL library in my Blazor app, and it work ! So, I think it is related to an issue in Azure B2C side...

Billiebilling