Correct URL for Azure AD B2C login

Question

I've set up my app to use Azure AD B2C. The app has a public page that allows anonymous access and this is where I have a login link to Azure AD B2C login page. I'm getting the URL for this link from the following place on Azure portal under my Sign up or Sign in policies:

I just click the "Copy" button I circled and paste it into my link on my public page.

What's strange is that if I click the link on the public page, it takes me to Azure AD B2C login page where I login but when I get redirected back to my app, for some reason, it doesn't like it and sends me back to the login page again.

However, if I simply try to go to the protected area in my app directly i.e. http://localhost:49065/member, I automatically get redirected to Azure AD B2C login page and once I login, it redirects me back to my app and everything works fine.

So, it doesn't seem to like the URL I'm using in my link. Any idea where I can get the correct URL for Azure AD B2C login that I can use on my public page?

UPDATE:

Here are the two URLs. The first one doesn't work and the second one does. There are some differences between the two.

The first one is the one I got from the Azure Portal -- see image above. This one does NOT really work because it kicks me back to login again:

https://login.microsoftonline.com/myb2ctenant.onmicrosoft.com/oauth2/v2.0/authorize?p=B2C_1_MyApp_SignUp_SignIn&client_id=aed18b8d-cc45-a612-82b3-5128f414d22d&nonce=defaultNonce&redirect_uri=http%3A%2F%2Flocalhost%3A49065%2Fmember&scope=openid&response_type=id_token&prompt=login

This one is generated by MSAL.js. This is the URL I get when I get redirected to the Azure AD B2C login page if I try to go directly to a protected area of my app. This one works nicely:

https://login.microsoftonline.com/te/myb2ctenant.onmicrosoft.com/b2c_1_myapp_signup_signin/oauth2/v2.0/authorize?response_type=id_token&scope=https%3A%2F%2Fmyb2ctenant.onmicrosoft.com%2Fwebclient%2Fopenid%20openid%20profile&client_id=aed18b8d-cc45-a612-82b3-5128f414d22d&redirect_uri=http%3A%2F%2Flocalhost%3A49065%2Fmember&state=c3088fbf-a895-43c7-8f9b-4f0351631323&nonce=26b3cb5c-7cc5-40c9-935f-654735d4c9b1&client_info=1&x-client-SKU=MSAL.JS&x-client-Ver=0.1.5&client-request-id=3b769d57-3c6d-45bb-bd83-f126ab525218&prompt=select_account&response_mode=fragment

Any idea why the one I get from the portal doesn't work or why the second one does?

Answer 1

The "Run now"-generated authentication request is used for testing an Azure AD B2C policy.

The key difference between an MSAL.js-generated authentication request and the "Run now" one is MSAL.js generates a nonce value before it sends the authentication request to Azure AD B2C and then validates the nonce value after it receives the authentication response from Azure AD B2C. If it is valid, then the authentication response is accepted. If it is missing or it is invalid, then the authentication response is rejected. The nonce value mitigates against a replay attack.

This means the login link must initiate the authentication request by either invoking MSAL.js or redirecting to a protected page that invokes it.