azure-samples/ms-identity-b2c-javascript-spa

Vanilla JavaScript single-page application calling a web API protected by Azure AD B2C

ms-identity-b2c-javascript-spa's Issues

Please inline configuration instead of breaking it out into small, separate files

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] question
- [ ] feature request
- [x] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Any log messages given by the failure

Expected/desired behavior

Breaking configuration out into separate files makes the code harder to read, because file navigation is required. There isn't much configuration data so decomposing it into smaller files hurts readability instead of improving it.

For example authConfig.js, apiConfig.js, and policies.js could be all be wrapped up into one file.

Browser and version?

Versions

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.

LoginRedirect and LoginPop does not work

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ x] bug report -> please search issues before submitting
- [ ] question
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Run application and sign-in. The application is not able to retrieve access_token with authorization_code grant_type

Any log messages given by the failure

Error :

FetchClient.ts:40 POST https://TENANT_NAME.b2clogin.com/TENANT_NAME.onmicrosoft.com/b2c_1/oauth2/v2.0/token 400 (Bad Request)
(anonymous) @ FetchClient.ts:40
step @ msal-browser.js:80
(anonymous) @ msal-browser.js:61
(anonymous) @ msal-browser.js:54
__awaiter @ msal-browser.js:50
FetchClient.sendPostRequestAsync @ FetchClient.ts:38
(anonymous) @ index.es.js:3332
step @ index.es.js:74
(anonymous) @ index.es.js:55
(anonymous) @ index.es.js:48
__awaiter$1 @ index.es.js:44
NetworkManager.sendPostRequest @ index.es.js:3326
(anonymous) @ index.es.js:3408
step @ index.es.js:74
(anonymous) @ index.es.js:55
(anonymous) @ index.es.js:48
__awaiter$1 @ index.es.js:44
BaseClient.executePostToTokenEndpoint @ index.es.js:3404
(anonymous) @ index.es.js:4722
step @ index.es.js:74
(anonymous) @ index.es.js:55
fulfilled @ index.es.js:45
Promise.then (async)
step @ index.es.js:47
(anonymous) @ index.es.js:48
__awaiter$1 @ index.es.js:44
AuthorizationCodeClient.executeTokenRequest @ index.es.js:4708
(anonymous) @ index.es.js:4647
step @ index.es.js:74
(anonymous) @ index.es.js:55
(anonymous) @ index.es.js:48
__awaiter$1 @ index.es.js:44
AuthorizationCodeClient.acquireToken @ index.es.js:4638
(anonymous) @ RedirectHandler.ts:89
step @ msal-browser.js:80
(anonymous) @ msal-browser.js:61
(anonymous) @ msal-browser.js:54
__awaiter @ msal-browser.js:50
RedirectHandler.handleCodeResponse @ RedirectHandler.ts:60
(anonymous) @ ClientApplication.ts:259
step @ msal-browser.js:80
(anonymous) @ msal-browser.js:61
fulfilled @ msal-browser.js:51
Promise.then (async)
step @ msal-browser.js:53
(anonymous) @ msal-browser.js:54
__awaiter @ msal-browser.js:50
ClientApplication.handleHash @ ClientApplication.ts:246
(anonymous) @ ClientApplication.ts:178
step @ msal-browser.js:80
(anonymous) @ msal-browser.js:61
(anonymous) @ msal-browser.js:54
__awaiter @ msal-browser.js:50
ClientApplication.handleRedirectResponse @ ClientApplication.ts:159
(anonymous) @ ClientApplication.ts:124
step @ msal-browser.js:80
(anonymous) @ msal-browser.js:61
(anonymous) @ msal-browser.js:54
__awaiter @ msal-browser.js:50
ClientApplication.handleRedirectPromise @ ClientApplication.ts:120
(anonymous) @ authRedirect.js:9
authRedirect.js:12 ServerError: invalid_request: undefined - [undefined]: AADB2C90079: Clients must send a client_secret when redeeming a confidential grant.
Correlation ID: 0f55ecf0-cf8c-499a-b34f-819da33a5dbc
Timestamp: 2020-12-17 15:01:45Z
 - Correlation ID: undefined - Trace ID: undefined
    at ServerError.AuthError [as constructor] (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:216:28)
    at new ServerError (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:3319:32)
    at ResponseHandler.validateTokenResponse (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:4508:23)
    at AuthorizationCodeClient.<anonymous> (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:4759:45)
    at step (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:181:27)
    at Object.next (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:162:57)
    at fulfilled (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:152:62)

Expected/desired behavior

Should get successful response for authorization_code grant_type

Browser and version?

Edge

Versions

"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4287.0 Safari/537.36 Edg/88.0.673.0"

Mention any other details that might be useful

This is sample request which is made
curl 'https://TENANT_NAME.b2clogin.com/TENANT_NAME.onmicrosoft.com/b2c_1/oauth2/v2.0/token' \ -H 'content-type: application/x-www-form-urlencoded;charset=utf-8' \ -H 'Accept: */*' \ -H 'Origin: http://localhost:6420' \ -H 'Referer: http://localhost:6420/' \ --data-raw 'client_id=CLIENT_ID&redirect_uri=http%3A%2F%2Flocalhost%3A6420&scope=openid%20https%3A%2F%2F<TENANT_NAME>.onmicrosoft.com%2FB2C_1%2Fdemo.read%20profile&code=LONG_CODE&code_verifier=CODE_VERIFIER&grant_type=authorization_code&client_info=1&client-request-id=652b426c-7223-4c37-9dec-7fdfb0df3951' \ --compressed

When I tried with adding client_secret using postman it worked and returned id_token

---

Thanks! We'll be in touch soon.

msal:acquireTokenFailure when editing profile

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] question
- [ ] feature request
- [x ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

The app works as expected with the provided test B2C instance fabrikamb2c but when you follow the documentation to create a B2C tennant the edit profile behaviour is broken. I can login successfully and use the app to call the /hello API of the node web api sample.

The problem occurs when using the "Edit Profile" button which launches a pop-up that imeediately dissapears and a generic error is logged as below. The second time the button is pressed, the popup is launched and I am required to login again, after submitting the credentials the pop-up is redirected to correct edit profile screen.

Is some additional config required on the Azure B2C instance that isn't documented?

Any log messages given by the failure

@azure/[email protected] : Info - Emitting event: msal:acquireTokenFailure
@azure/[email protected] : Info - BrowserCacheManager.cleanRequestByState: Removing temporary cache items for state: eyJpZCI6IjY1NjE0ZTVkLTgzZjctNDQ4Ny04NzY5LWU0ZDhlZWM4YjljNiIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicG9wdXAifX0
ServerError: server_error: AADB2C: An exception has occurred.
Correlation ID: 76f9204f-9119-4b2b-ac4f-f390ddaeb89e
Timestamp: 2021-10-05 14:36:14Z

    at ServerError.AuthError [as constructor] (index.es.js:422)
    at new ServerError (index.es.js:2778)
    at ResponseHandler.validateServerAuthorizationCodeResponse (index.es.js:4162)
    at AuthorizationCodeClient.handleFragmentResponse (index.es.js:4458)
    at PopupHandler.<anonymous> (InteractionHandler.ts:49)
    at step (msal-browser.js:81)
    at Object.next (msal-browser.js:62)
    at msal-browser.js:55
    at new Promise (<anonymous>)
    at __awaiter (msal-browser.js:51)

Expected/desired behavior

The same behaviour as the test B2C

Browser and version?

Chrome 94

Versions

Current main

Mention any other details that might be useful

Example that uses .Net core web api

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x ] question
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

I can't seem to find an example that uses a SPA front end and a .net core web api - can you point me to one?

Redirects to my app inside the popup

After logging in it redirects to my app inside the popup. Is this correct? I'd imagine anyone would want the popup to go away and my SPA to change route to authenticated content.

In the docs can you explain how to communicate with the popup, so after successful logins we can handle redirects within our app.

MSAL 2.1 and 2.6.1 fail with ClientAuthError: no_tokens_found: No tokens were found for the given scopes, and no authorization code was passed to acquireToken. You must retrieve an authorization code before making a call to acquireToken

Please provide us with the following information:

This issue is for a: (mark with an x)

- [X ] bug report -> please search issues before submitting
- [ ] question
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

1. git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
2. cd ms-identity-b2c-javascript-spa.git
3. npm install && npm update
4. npm start
5. In Chrome, open Dev Tools, and re-load the page so Sources are populated.
6. Navigate to authPopup.js, put a breakpoint at the line doing the acquireToken, ie:
   return myMSALObj.acquireTokenSilent(request)
7. Sign-in with a new or existing account
8. Click Call API
9. At the breakpoint, let it run and see the resolve never fires because catch is fires whose console.warn(error); produces this output:

ClientAuthError: no_tokens_found: No tokens were found for the given scopes, and no authorization code was passed to acquireToken. You must retrieve an authorization code before making a call to acquireToken().
at ClientAuthError.AuthError [as constructor] (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:216:28)
at new ClientAuthError (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:496:32)
at Function.ClientAuthError.createNoTokensFoundError (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:565:20)
at RefreshTokenClient. (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:5200:47)
at step (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:181:27)
at Object.next (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:162:57)
at https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:155:75
at new Promise ()
at __awaiter$1 (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:151:16)
at RefreshTokenClient.acquireTokenWithCachedRefreshToken (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:5194:20)
(anonymous) @ authPopup.js:100
Promise.catch (async)
getTokenPopup @ authPopup.js:99
passTokenToApi @ authPopup.js:118
onclick @ (index):40
authPopup.js:101 silent token acquisition fails. acquiring token using popup
(anonymous) @ authPopup.js:101
Promise.catch (async)
getTokenPopup @ authPopup.js:99
passTokenToApi @ authPopup.js:118
onclick @ (index):40
authPopup.js:112 ClientAuthError: no_tokens_found: No tokens were found for the given scopes, and no authorization code was passed to acquireToken. You must retrieve an authorization code before making a call to acquireToken().
at ClientAuthError.AuthError [as constructor] (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:216:28)
at new ClientAuthError (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:496:32)
at Function.ClientAuthError.createNoTokensFoundError (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:565:20)
at RefreshTokenClient. (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:5200:47)
at step (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:181:27)
at Object.next (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:162:57)
at https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:155:75
at new Promise ()
at __awaiter$1 (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:151:16)
at RefreshTokenClient.acquireTokenWithCachedRefreshToken (https://alcdn.msauth.net/browser/2.6.1/js/msal-browser.js:5194:20)

Any log messages given by the failure

Expected/desired behavior

acquireToken returns a result with an accessToken populated

Browser and version?

Chrome

Versions

Version 86.0.4240.75 (Official Build) (64-bit)

Mention any other details that might be useful

This works with MSAL 1.4, such as as https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi

In https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa code, in index.html, I have tried updating the MSAL version from 2.1.0 to 2.6.1, which is the latest version at this time, but the behavior is the same.

---

Thanks! We'll be in touch soon.

No docs (that I found) for how to enable auth on a Function App (and failing when doing the obvious)

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] question
- [ ] feature request
- [x] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

I am trying to adapt the example to use a Function App (it works just fine when using defaults). I can follow all the steps given, but
1 - I cannot find explicit instructions on how to enable Authentication in the Function App
2 - When I do what seems obvious (see below), the connection to the Function App fails (with a 401 error, as configured in step 1)
3 - When I ask (basic tier) MS support for help, describing what I did (basically, the info below in "any other details") they said everything seemed correct and suggested I open an issue here.

Any log messages given by the failure

Not that I can find. I do not see anything in the Function App log stream. Where else should I look?

Expected/desired behavior

I would hope to make a successful call to the Function App. By "successful" I mean it would be authorized; the call would still fail since we're not sending the correct payload, but not with a 401 code.

Browser and version?

Firefox 91.2 on Linux

Versions

Your demo is using MSAL 2.13.1 (from the URL in index.html)
Our Function App is using dotnet 3.1 and azure-functions-core-tools-3

Mention any other details that might be useful

These are all the notes I made doing this work, showing the steps involved:

I am following the instructions at https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa#registration

Register the Funcion App API

The instructions above refer to https://docs.microsoft.com/azure/active-directory-b2c/tutorial-single-page-app-webapi?tabs=app-reg-ga#add-a-web-api-application and I follow those:

1.A - Create flow. I add a new flow using the "Sign up and sign in" option with the "Recommended" version. I call it B2C_1_signupsignin and select "Email signup" as the "Local accounts". Created with everything else as default.

1.B - API registration. I add a new registration called "acdev2fnpublic" and Register with default values (Web with no "Redirect URI").

Then I add a new scope via "Expose an API" using the default "Application ID URI" and then a scope with the name "demo.read". The final URI is https://quakewatch.onmicrosoft.com/f0bb7e03-0482-4af3-94bd-44630d1592e3/demo.read

Register the Client

Returning to https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa#register-the-client-app-javascript-spa I do the following:

2.A - Client registration. I add a new registration called "ms-identity-b2c-javascript-spa" using the "SPA" option and a redirect URI of "http://localhost:6420". Created with everything else as default.

2.B - Connect permissions. In the "ms-identity-b2c-javascript-spa" registration I select "API permissions", "Add a permission", "My APIs", "acdev2fnpublic", and finally "demo.read". I add this permission and grant admin consent.

Modify the Demo

This is described at https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa#configure-the-app-javascript-spa-to-use-your-app-registration

3.A authConfig.js. Change clientId to the "Application (client) ID" for "ms-identity-b2c-javascript-spa". The redirectUri is already correct.

3.B policies.js. I remove the editProfile references, change the signUpSignIn name to "B2C_1_signupsignin", the authority to "https://quakewatch.b2clogin.com/quakewatch.onmicrosoft.com/B2C_1_signupsignin" and the authorityDomain to "quakewatch.b2clogin.com"

3.C apiConfig.js. I change the b2cScopes to https://quakewatch.onmicrosoft.com/f0bb7e03-0482-4af3-94bd-44630d1592e3/demo.read and the webApi to "https://acdev2fnpublic.azurewebsites.net/api/negotiate" (this is our Function App).

Enable the Function App

NOTE - This part I could not find documented

4.A Authentication. In the Function App Portal page, select "Authentication" and add "Microsoft" as an "identity provider" selecting the existing "acdev2fnpublic" entry created above (step 1).

4.B CORS. Add "http://localhost:6420" to CORS.

With all this done I can now run "npm start" (assuming "npm install" earlier) and load http://localhost:6420. I can sign in (using an identity I registered earlier). But I see an HTTP 401 error when calling the demo code calls https://acdev2fnpublic.azurewebsites.net/api/negotiate

Auth Redirect is not working properly

Hi there,

the function "Acquires and access token and then passes it to the API call"
function passTokenToApi() { getTokenRedirect(tokenRequest); if (accessToken) { try { callApi(apiConfig.webApi, accessToken); } catch(error) { console.warn(error); } } }
in ms-identity-b2c-javascript-spa/App/authRedirect.js is not working as expected.

It should be something like:
function passTokenToApi() { getTokenRedirect(tokenRequest).then(response => { if (response.accessToken) { try { callApi(apiConfig.webApi, response.accessToken); } catch (error) { console.warn(error); } } }); }

Versions since 2.1.0 seem to be not returning accessToken after returning from acquireTokenSilent

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ X] bug report -> please search issues before submitting
- [ ] question
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

In https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa cod

1. git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git

2. cd ms-identity-b2c-javascript-spa.git

3. npm install && npm update

4. npm start

5. In Chrome, open Dev Tools, and re-load the page so Sources are populated.

6. Navigate to authPopup.js, put a breakpoint at the line doing the acquireToken, ie:

7. return myMSALObj.acquireTokenSilent(request)

8. Sign-in with a new or existing account

9. Click Call API

10. At the breakpoint, let it run and see response.accessToken is populated

11. Now change index.html's script tag to any version after 2.1.0 and at the breakpoint see accessToken==""

It does not go into acquireTokenSilent's catch block, it simply returns with response.accessToken==""; other fields are populated.

I also tried this in a ReactJS application using npm packages and found the same behavior, received an accessToken with MSAL 2.1.0, received empty string in later version 2.7.0

Any log messages given by the failure

Expected/desired behavior

accessToken to be populated.

Browser and version?

Chrome

Versions

Version 86.0.4240.75 (Official Build) (64-bit)

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.

[Question] Login required when app is open on separate tabs in Safari Private browsing windows

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] question
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Description

After following the guide and registering my azure ad b2c tenant and application with the config files, i began testing SSO on different browsers. All seems to work fine except for an issue on Safari Private browsing windows.

While having the application open on two tabs, after authenticating in one tab, attempting to authenticate on the second tab required inputting credentials once again. I was just wondering if this is expected behavior for msal library, and if not, what might be a way to mitigate this issue? Thanks!

Minimal steps to reproduce

Go to the quickstart app
Open the app on two separate tabs in Safari Private Browsing Mode
Authenticate on the first tab
Navigate to the second tab
Notice that credentials are required, even though authentication was done in first tab

Any log messages given by the failure

Expected/desired behavior

Hopefully SSO is maintained when having the application open in two separate tabs

Browser and version?

Safari Version 14, Private Browsing Mode

Versions

"msal": "2.1.0"

Mention any other details that might be useful

I noticed that while no log messages are given because it is technically not a failure, it seems that Azure AD B2C does not retain the session in Safari Private Browsing Mode. That may/may not be accurate so any help is appreciated

---

Thanks! We'll be in touch soon.

Login Error via Microsoft Option!

Hi Derisen,

Congratulations on designing this!
When I SignIn using "Microsoft" option and use my organisation ID or O365 domain email, it says "That Microsoft account doesn't exist. Enter a different account or get a new one." but it does exists. Also, The same works with my outlook account can you please guide me through this step to login successfully through Microsoft.

Thanks and Regards!

Update sample to include iframes and next.js

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] question
- [ ] feature request
- [x ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Since the support for iframes and custom domains are in public preview, is there a plan to update the SPA samples, to include also the iframe solution (instead of the redirect/popup)?

Also, given that there is a MSAL sample for next.js (https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/nextjs-sample) is there a plan to add a specific example on how to integrate Next.js with B2C?

Thanks a lot!!

Sign In button throwing an error

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] question
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Followed the registration steps for both the apps https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi and https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa#register-the-client-app-javascript-spa.

When trying to hit sign in post registration shows me an error

ServerError: invalid_request: undefined - [undefined]: AADB2C90079: Clients must send a client_secret when redeeming a confidential grant.
Correlation ID: 0f27a2ef-25eb-4283-b3c3-f1688f9a7d94
Timestamp: 2021-04-06 04:04:18Z

• Correlation ID: undefined - Trace ID: undefined
  at ServerError.AuthError [as constructor] (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:216:28)
  at new ServerError (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:3319:32)
  at ResponseHandler.validateTokenResponse (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:4508:23)
  at AuthorizationCodeClient. (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:4759:45)
  at step (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:181:27)
  at Object.next (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:162:57)
  at fulfilled (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:152:62)

I looked into previous closed issues and found similar issues but those resolutions did not help me..

Any log messages given by the failure

Expected/desired behavior

Browser and version?

Versions

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.