Search code examples
angularazure-ad-b2cazure-ad-msalazure-authentication

Angular Azure Active Directory B2C Authentication - CORS issue

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.

browser console screenshot

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

Solution

  • 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?