How to authenticate react app with dotnet 3.1 web api using AppAuth.js and Azure AD B2C?

Question

I have a react SPA which is consuming dotnet 3.1 web api.

Right now the authentication is using pingFederate. Right now I need to switch to Azure AD B2C.

Currently the authentication to PingFederate is done using https://www.npmjs.com/package/@openid/appauth this npm package.

As per the documentation its calling a method as below to fetch the configuration.

AuthorizationServiceConfiguration.fetchFromIssuer(openIdConnectUrl)
  .then(response => {
    log('Fetched service configuration', response);
    this.configuration = response;
    this.showMessage('Completed fetching configuration');
  })
  .catch(error => {
    log('Something bad happened', error);
    this.showMessage(`Something bad happened ${error}`)
  });

here the fetchFromIssuer method is expecting an openid connect URL. As per my understanding(Correct me if I am wrong), Azure AD B2C will support openid protocol.

From this tutorial I have got this URL https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_sign_in/v2.0/.well-known/openid-configuration.

But this is giving me an error. Without any messages. How can I use this method for Azure AD B2C with AppAuth js? Or how can I spot the correct openid URL for azure B2C?

Usually most of the tutorials are using msal for react based azure B2C implementations. But here I have a dependency with openid.

Answer 1

"fabrikam" is just a placeholder.

In B2C, go to your app. registration.

At the top, click "Endpoints".

That will give the endpoints for your environment.