Angular Azure Active Directory B2C Authentication - CORS issue

Question

I am implementing Azure Active Directory B2C authentication in Angular. I am using msal interceptor to connect Azure AD B2C. The authentication request fails with error

Access to XMLHttpRequest at ' https://login.microsoftonline.com/ ...' from origin ' http://localhost/ ...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I configured everything according to this post: https://medium.com/@sambowenhughes/configuring-your-angular-6-application-to-use-microsoft-b2c-authentication-99a9ff1403b3

Answer 1

That article is about two years old and this.clientApplication.authority = "https://login.microsoftonline.com/tfp/" doesn't look right. It should be something like https://${b2cTenantName}.b2clogin.com/${b2cTenantName}.onmicrosoft.com/B2C_1_Sign_In .

Can you try to configure the angular sample app from https://github.com/Azure-Samples/active-directory-b2c-javascript-angular-spa and use that as a starting point?