It Does Not Appear Auth Code PKCE Works With This Code

[tjmcclure0501]

AzureAD/microsoft-authentication-library-for-js#1795

It seemed that the CORS Issue was solved but I am using this sample and I still experience it.

Reproduction steps

Access to XMLHttpRequest at 'https://straxprototype.b2clogin.com/straxprototype.onmicrosoft.com/b2c_1_susi/v2.0/.well-known/openid-configuration' from origin 'http://localhost:6420' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

To reproduce run this sample - I may have made a mistake cutting and pasting the example but could you tell me if this example should now work with authcode PKCE.

Thanks,
Tim

// Provide relevant code snippets here.
// For Azure B2C issues, please include your policies.

Expected behavior

Browsers/Environment

• Chrome
• Firefox
• Edge
• Safari
• IE
• Other (Please add browser name here)

[derisen]

@tjmcclure0501 we have an auth code sample lined up, but we are holding on to it until all the issues with B2C service is solved. The main change you need to make to run this sample with auth code flow is to set the knownAuthorities property (after correctly registering your application in Azure Portal), as in:

const msalConfig = {
    auth: {
      clientId: "2fdd06f3-7b34-49a3-a78b-0cf1dd87878e",
      authority: https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi,
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      redirectUri: "http://localhost:6420"
    }
  };

Bear in mind there are further changes in the MSAL.js 2.x APIs. For instance, getAccount() is deprecated and you should is getAllAccounts() and getAccountByHomeId() APIs instead.

[tjmcclure0501]

Thx for your feedback - I thought the issue was already solved based on this link:
AzureAD/microsoft-authentication-library-for-js#1795 - how long do you think it will take?

Also the tutorial - which is a fantastic tool to see how it all works refers to an API Access window - I did not have this - did I do something wrong? See below:
Once the application is created, open your My Test SPA and open the API Access window (in the left nav menu). Click Add and select the name of the Node.js Web API you registered previously, My Test Node.js Web API. Select the scope(s) you defined previously, for example, demo.read and hit Save.

This menu option did not show up for me.

[derisen]

@tjmcclure0501 you're welcome : ) that particular issue is resolved, but there is another one pending. Unfortunately, I don't have an ETA, but it is high priority (also, we have a document on working with B2C)

I'm not sure what access window refers to -would you mind sharing the link to that document?

[tjmcclure0501]

Thanks for the doc - the missing piece I am talking about is in your document PART II - Step 2 the last bullet point - I made it in bold below - I do not see this option when I am configuring Azure following the steps given - did this change since the document was published or am I doing something wrong?

PART II: Configure the Client
Step 1: Register your own Web Application with Azure AD B2C
Next, you need to register your single page application in your B2C tenant.

Provide the following values for the Single Page Application registration:

Provide a descriptive Name for the single page application, for example, My Test SPA. You will identify this application by its Name whenever working in the Azure portal.
Mark Yes for the Web App/Web API setting for your application.
Set the Reply URL for your app to http://localhost:6420. This sample provided in this repository is configured to run on port 6420.
Create the application.
Once the application is created, open your My Test SPA and open the API Access window (in the left nav menu). Click Add and select the name of the Node.js Web API you registered previously, My Test Node.js Web API. Select the scope(s) you defined previously, for example, demo.read and hit Save.

[derisen]

@tjmcclure0501 Ah I see, it should have been API Permissions blade in the App Registration (below):

So sorry for the confusion, and thanks for catching it! I'll update the readme asap.