azure-samples / active-directory-b2c-javascript-msal-singlepageapp

A single page application (SPA) calling a Web API. Authentication is done with Azure AD B2C by leveraging MSAL.js

JavaScript Single-Page Application built secured with MSAL.js on Azure AD B2C

There's a newer version of this sample taking advantage of MSAL.js v2.

Check it out: JavaScript SPA secured with MSAL.js using Authorization Code Flow (w/ PKCE) on Azure AD B2C

If you really need to access this sample, you can navigate to the master branch, but please know that it's no longer maintained.

active-directory-b2c-javascript-msal-singlepageapp's Issues

Web API & Scopes

Hi guys,

Can you help me with the following questions?
I'm building a SPA to use B2C authentication, but I don't know why I have to create the "Web API".
Why do I need to create the "Web API" and what is and where I get the b2cScopes?

const apiConfig = {
  b2cScopes: ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"],
  webApi: "https://fabrikamb2chello.azurewebsites.net/hello"
};

Thank you

Call Web API always fails with 401

I'm attempting to run this sample and cannot get it to successfully call the web api, as it returns a 401 error every time.

Repro:

1. Clone repo and run npm install.
2. Run the server.
3. Click to login (tried both a personal @outlook.com and @gmail.com account).
4. Click the button to call the web api.
5. Get the following output:

User 'Jason Nutter' logged-in
Error calling the Web api:
error

In the terminal:

jquery-3.2.1.min.js:4 GET https://fabrikamb2chello.azurewebsites.net/hello 401 (Unauthorized)

User 'undefined' logged-in

Hi,
i've followed the tutorial and with my WebAPi i get "User 'undefined' logged-in" after the login. Why user is undefined?

Authority uri with b2clogin.com can not work with msal.js v0.2.4

I used npm install msal and the latest version of msal.js is 0.2.4 rather than 0.1.1

active-directory-b2c-javascript-msal-singlepageapp/index.html

Line 24 in 7b68322

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.1.1/js/msal.min.js"></script>

In the applicationConfig fields, authority field can not accept https://{tenant}.b2clogin.com/tfp/{tenant}.onmicrosoft.com/B2C_1_SiUpIn , and it will print an error:

Error during login:
endpoints_resolution_error:Endpoints cannot be resolved

If I change the authority field to "https://login.microsoftonline.com/tfp/{tenant}.onmicrosoft.com/B2C_1_SiupIn", social account provider's (like Google, GitHub, Microsoft) redirect uri are not correct with my former settings (all the redirect uris are filled with b2c pattern) which will leads to sign in error.

Is there any sample with the msal.js v0.2.4? Thanks.

Javascript is not running in login page

I enabled on the javascript enforcing page layout. And when I test with postman and 'run user flow', I can see javascript is running on login page. But with MSAL library the javascript is not running on login page. Can you please provide any advice to run the script?

Forgot password policy

When using a combined signup - signin policy in Azure B2C, users have to handle the forgot password scenario themselves. Please take a look at the documentation.

How do I link a sign-up or sign-in policy with a password reset policy?
When you create a sign-up or sign-in policy (with local accounts), you see a Forgot password? link on the first page of the experience. Clicking this link doesn't automatically trigger a password reset policy.
Instead, the error code AADB2C90118 is returned to your app. Your app needs to handle this error code by invoking a specific password reset policy. For more information, see a sample that demonstrates the approach of linking policies.

I managed to redirect the page to the forgot password policy when that error with error_description AADB2C90118 occurs. However when the user then successfully resets his or hers password I'm not able to login the user, it seems that the authority's do not match since the policy names are included in the authority names. Can you please include the forgot password scenario in your samples?

Missing how to handle 'Forgot your password' redirect

Apparently when using a Sign Up/Sign In flow, clicking on the 'Forgot your Password' link will send an error back to the client. This tutorial is missing the handling of this error to show how we redirect the user to resetting their password.

Here is a stackoverflow link: https://stackoverflow.com/questions/41497158/azure-ad-b2c-self-service-password-reset-link-doesnt-work

And official docs: https://docs.microsoft.com/en-us/azure/active-directory-b2c/user-flow-overview#linking-user-flows

Appears there is an example in ASP .NET but not in JS 🙁

Sample might not work with MSA or Twitter

This sample works with most social providers but there is a possible issue with MSA and Twitter that we are investigating. We will update this sample if necessary.

CORS Error

Getting CORS Error, How to fix CORS set Azure B2C directory?

It Does Not Appear Auth Code PKCE Works With This Code

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)

Feature request: Catching errors returned by B2C.

The sample should also tell how the errors returned from B2C can be caught and acted upon.

For example see below question
https://stackoverflow.com/questions/57670399/azure-active-directory-b2c-catching-error-from-invitation-page

Open register window

Hi,

Is there a way to open directly the Create New Account window?

I have a case where I know it is a new account, and I dont want to allow user to do login, I also dont want to show him the login window and force him to press the create new account link.

Thank you.

Instructions for using own tenant are not up to date

Step 5, substep 3 shows login.microsoftonline.com instead of b2clogin
The little code snipped on step5 shows a single config object, but the code has 2 config objects:

Is there any way to only change password instead of forgot password?

Is there any way to only change password instead of forgot password?

used packages versions:
"@azure/msal-angular": "^1.0.0",
"msal": "^1.3.4",

I have integrated msal and signup, sign and forgot policies are working fine.
but i have to give support to user to change password after login.

Authority string is being incorrectly appended to

When I am trying to set an authority string the call to the server is corrupted.

Example:-

this.applicationConfig = {
      clientID: '<clientid>',
      authority:'https://login.microsoftonline.com/<mytenant>.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_GPlus',
      graphScopes: ['user.read']
    };

The authority is readable in a browser and returns a policy. However, when I run the application so:-

this.app = new Msal.UserAgentApplication(
      this.applicationConfig.clientID,
      this.applicationConfig.authority,
      () => {
        // callback for login redirect
      },
      {
        redirectUri
      }
    );

The popup closes and the browser reports a 400 (Bad Request) for the URL https://login.microsoftonline.com/<mytenant>.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=b2c_1_gplus/v2.0/.well-known/openid-configuration

Am I setting the authority incorrectly or is the library appending the string?

CORS Error while using the Google

I am getting the following error while using google account. Any thoughts please

/Naren

Sign In flow never appears

I'm attempting to get this working and am reasonably certain I've got it all configured correctly.

With authPopup.js being used for the Log In the popup window appears very briefly, loads no content and then disappears.

If I use authRedirect.js absolutely nothing happens - click the button and there's nothing. No change to page, no logs in node.js. I've tried heaps of browsers, multiple devices and always the same result.

Where am I going wrong?

decouple auth flow from API access

In the article Tutorial: Enable authentication in a single-page application using Azure AD B2C, readers are instructed to modify the sample such that it works with their own B2C tenant. In part two of the series, they're then instructed to register an API application and configure the sample to work with their tenant.

However, at the end of tutorial 1, because they've not yet configured the API portion of the sample, the application displays a permissions error even though they successfully authenticate, and have not selected the Call Web API button. This leads to frustration as evidenced by this issue in the azure-docs repo:

MicrosoftDocs/azure-docs#41456

Requesting here that API access is decoupled from the auth flow, and that a friendly error message is displayed if the Call Web API button is selected prior to the customer configuring the API portion.

Cc: @jennyf19

SPA example code is invalid

This part of authRedirect.js seems like a mistake:

active-directory-b2c-javascript-msal-singlepageapp/JavaScriptSPA/authRedirect.js

Lines 22 to 28 in ef99a86

	if (accessToken === null || accessToken === undefined) {
	try {
	callApiWithAccessToken(apiConfig.webApi, accessToken)
	} catch (err) {
	console.log(err);
	}
	}

Maybe something was missed in the recent example rewrite?

Using state in msal

How do I pass the state parameter in the example? I saw there was an issue about the state, so i guess it is possible to use state in the example. But, I can't figure out how to use it and how to retrieve it after token is returned.

Silent token acquisition fails ServerError: AADB2C90205

Cloning the project and running it works as expected.

After following the tutorial steps to configure the Azure Portal and adding my own details I am able to sign up and log in and get the message:

Hello User Name
User 'User Name' logged-in

However, when I click the "Call API" button the login screen pops up again and the following is output to the console:

Silent token acquisition fails. Acquiring token using popup authPopup.js:42:15
ServerError: AADB2C90205: This application does not have sufficient permissions against this web resource to perform the operation.

Nothing appears to have hit the local API.

This makes me think that there is some magic config in Azure that is causing this issue.
However, I can't work out what is causing it.

Screenshots in the README of the relevant config in the Azure backend that the demo uses would be useful to help debug issues like this.

API does not exist

I'm trying to get this sample to run, and it seems like the API that it is trying to call is not available.

https://fabrikamb2chello.azurewebsites.net/hello

I get a domain not found error. I've tried from several different networks.

Call Web API always fails with 401

I get this with pretty much any identity provider. I suspect this is because the web api has not been updated to work with b2clogin.com, even though there is a PR for this (open since Jan)

How to keep user logged in

Hi,
I just used this example, everything works fine. But if refresh the page and open a new window with same url then session is gone. I need to re-login again.

Is that something I'm doing wrong?

-Vasanth.

[Annoncement-issue] state parameter mismatch

We have seen some instances where the "state" OpenID Connect parameter passed to AAD B2C does not match the "state" parameter when AAD B2C returns an access token. We are investigating and will update this sample if necessary.

Readme needs update

I was following the Readme step by step, but there seems to be some errors in the directions that don't reflect the code.

Under the Using your own Azure AD B2C Tenant, step 3, there is an indication to "update the following variables" including tenantID, clientID and policyName in the index.html of the Node.js Web API sample.

But in this directory, there is not index.html. There is an index.js, but the variable names don't all match. So, I'm having a little trouble getting the sample up and would love some clarification. Thanks!

ASP.Net Core WebApi Sample

I see there is a sample for Node.js. Is there one for ASP.Net Core?

Sample for v1.2.* ?

Is it possible to for you to make a branch of this sample that corresponds to the next version of the msal.js lib? There's changes to the way redirects are handled and associated permissions that makes the latest version of this app on master not work
https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/MSAL-JS:-1.2.0-beta.0#feature-iframes-support-and-performance-enhancements

The demo doesnt work on IE11

Hi,

The demo doenst work on ie 11
The popup gives that the function Signin() is not set
How can i fix this?

Regards, Suzanne

Clarify Silent renewing of access tokens is not supported by all social identity providers.

Can you please clarify:

Silent renewing of access tokens is not supported by all social identity providers.

from the readme.md?

• What IDPs are not supported?
• Why wouldn't they be supported? We're requesting access tokens B2C not the IDP.
• Is "silent renewing of access tokens" the same thing as "silently requesting an access token"?

---

Reference: Update docs page request: Limited Aquire Token Silent Support?

HTTP Error 400. The size of the request headers is too long.

When I click the login button: I get : HTTP Error 400. The size of the request headers is too long.
Here's the url:
https://login.microsoftonline.com/te/fabrikamb2c.onmicrosoft.com/b2c_1_susi/oauth2/v2.0/authorize?response_type=id_token&scope=https%3A%2F%2Ffabrikamb2c.onmicrosoft.com%2Fdemoapi%2Fdemo.read%20openid%20profile&client_id=e760cab2-b9a1-4c0d-86fb-ff7084abd902&redirect_uri=http%3A%2F%2Flocalhost%3A6420%2F&state=dba15c86-8a33-46c6-8f7e-023201425485&nonce=b8d49401-0ecb-4570-bc4c-f3a054c8b025&client_info=1&x-client-SKU=MSAL.JS&x-client-Ver=0.1.1&client-request-id=ea827f7f-fffc-44f5-8652-e030c699c924&prompt=select_account&response_mode=fragment

What Is The Recommended Way To Test This?

Library

• "msal": "^1.4.0",
• "react-aad-msal": "^2.3.5",

Description

After successfully following this guide and having an email signup/login process integrated with my application I would like to do an end to end test.

However, this seems to cause problems with Cypress

https://stackoverflow.com/questions/57476816/handling-cypress-url-redirect

cypress-io/cypress#1342

What is the recommended way to test this?

Update samples for B2C with all supported policies

Update samples for B2C with all supported policies and basic use cases, tagging this with msal js issue here

Update MSAL to latest version

The MSAL being used on this example if from 2017... version 0.1.1... a lot appears to have changed since then...

Which of these auth config values are considered secrets?

Description

I would like to know if any of the authConfig.js or apiConfig.js values should be considered secrets? I am currently building a web app that has a web API back-end and a React SPA front-end with Azure AD B2C authentication being done in the React SPA. Just like the sample in this repo, I have auth config hard-coded in my React/JS code. Please let me know if any of the following values should be considered secrets and if they should not be committed to my git repository:

• instance: 'https://<b2cName>.b2clogin.com/tfp/'
• tenant: '<b2cName>.onmicrosoft.com'
• signInPolicy: '<signInPolicyName>'
• clientId: '<client-guid>'
• scopes: ['https://<b2cName>.onmicrosoft.com/<b2cAppName>/<scopeName>']

In my web API's appsettings.json, I have all of the above settings as well as the following additional settings:

• tenantId: '<tenant-guid>'
• authority: 'https://<b2cName>.b2clogin.com/tfp/<b2cName>.onmicrosoft.com/<signInPolicyName>/v2.0'
• audience: 'https://<b2cName>.onmicrosoft.com/<b2cAppName>'

Please let me know if any of the above values are considered secrets so I can make sure I don't commit secret values into my git repo.

Any help is appreciated. Thank you! 🙏🏽

Issues with MSAL.js using IE11 in corporate environments (Enable Protected Mode)

Hello! I am having an issue with the sample (as is) in a corporate environment and can be simulated at home via checking the Enable Protected mode box (which I am unable to do at work due to domain policies (currently showing home setup)

Running the bat file works great, I'm able to see the page:

I get a nice friendly popup. I signup or login as normal:

And then I get the parent form, now shown in the popup.

Watching my console, it appears that things went well until it hit:

GET / 304 1.550 ms - -
GET /null 200 2.382 ms - 4724

Further digging I came across this, which mentions that if you turn off this setting - voila, it works:

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

Which is all well and good if you are allowed to, but alas -- corporate policies. But as stated above, that only works if you have the ability to do so.

I tried this as a redirect as well and updating to the latest msl.js version, but no luck.

The only "hack" I could find was to run IE 11 as administrator (if you have the permission). Any suggestions?

Eliminate Popup

On click of login, this code opens the AD B2C authentication as a pop up. Could you guide me to change this within the same window rather than a popup ?

How to use this with Authorization Code Flow?

Please follow the issue template below. Failure to do so will result in a delay in answering your question.

Library

• [email protected] or @azure/[email protected]
• @azure/[email protected]
• @azure/[email protected]
• @azure/[email protected]
• @azure/[email protected]

Description

How do I configure Authorization Code flow with this example?, Right now it doesn't seem to work, I referred this sample to get the auth code flow working by added knownAuthorities in the auth configuration and enabling publicClient Type for the registered B2C application in the portal but not sure how to configure other policy like forgot password and profile edit in that. A better sample is needed. Any pinpoints or directions will also help thanks.

PS: I'm aware of the existing CROS issue which would hopefully get resolved this month but looking better samples and docs. I thank you in advance,

README.md refers to non-existent code in index.html

The instructions published here and in README.md indicate the following:

Third, in the index.html file of the Node.js Web API sample, update the following variables to refer to your Web API registration.

var tenantID = "<your-tenant-name>.onmicrosoft.com";
var clientID = "<Application ID for your Node.js Web API - found on Properties page in Azure portal>";
var policyName = "<Name of your sign in / sign up policy, e.g. B2C_1_SiUpIn>";

But those lines don't exist in index.html.

Does MSAL support device-specific authentication features (touchID, FaceID, etc...)?

Please provide any examples or information about MSAL's support for using device features like faceID, touchID, etc... (assuming B2C as IdP), and if that is not supported, please explain if that is planned. Thanks

Edit Profile policy?

Great example! In the documentation it's mentioned that edit profile policies are used, but I can't find them? That would be great to demo as well.

Sample not working when using ADFS as the ADB2C identity provider

Hi,

We have an Azure ADB2C instance which is configured with an ADFS as the backend IdP.

When using this sample, clicking on the login button launches a popup displaying our custom login form. On this form we can click on a Login with ADFS button, which redirects to the ADFS login page.

When logging into the ADFS, the browser gets redirected to the SPA, but we are not logged in.
We can see the following error in the browser console:

Refused to display 'https://<tenant>.b2clogin.com/<tenant>.onmicrosoft.com/b2c_1a_emlyon_default_signuporsignin/oauth2/v2.0/authorize?response_type=token&scope=https%3A%2F%2F<tenant>.onmicrosoft.com%2Ftest-api%2Fuser_impersonation%20openid%20profile&client_id=3d98c45a-eb05-4415-a5b9-4e94f56f3e7a&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2F&state=7b45ee7b-79f2-414f-a512-57c3e2d47dfb&nonce=a1b08caf-07fa-47b6-a00e-05fcab0626b7&client_info=1&x-client-SKU=MSAL.JS&x-client-Ver=1.1.2&login_req=392f09e8-b0c2-4227-8553-c338827f30e6-b2c_1a_default_signuporsignin&domain_req=bffecd0e-2a18-4e8a-8549-e781affd40cb&domain_hint=organizations&client-request-id=da6f2fa0-5c20-4ed9-bb79-9acba933bc43&prompt=none' in a frame because it set 'X-Frame-Options' to 'deny'.

Any idea on what could be wrong here?
Thanks

Token Expiry and Renewal

Do we have any sample codes that indicate how to check if the token has expired and also how to renew the token when it is expired using MSAL for SPA?

MSAL loginRedirect does not work properly.

If I use the MSAL loginRedirect method and if I run the sample and use email and password to login it does not login the user or call the handle callback method. Also, clicking on Google button to sigin with Google does not work.

In the Redirect Flow updateui() not working.

Please follow the issue template below. Failure to do so will result in a delay in answering your question.

Library

• [email protected] or @azure/[email protected]
• @azure/[email protected]
• @azure/[email protected]
• @azure/[email protected]
• @azure/[email protected]

Important: Please fill in your exact version number above, e.g. [email protected].

Framework

Description

Error Message

Security

• Is this issue security related?

Regression

• Did this behavior work before?

Version:

MSAL Configuration

// Provide configuration values here.
// For Azure B2C issues, please include your policies.

Reproduction steps

// 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)

Note on B2C usage with msal js

• msal js supports B2C flows for acquireTokenSilent but with certain conditions due to the manner in which B2C policies can manifest certain UI patterns.
• An interaction is mandated for any initial login and once a session is established and a token can be acquired silently, the use case is straight forward and supported.
• Some policies like edit-profile by default would need interaction and calling acquireTokenSilent which renders a hidden iframe is blocked by the B2C service with x-frame-options set to deny

We did some testing with our sample and have generated the below table:

Policy	Status with Sample	acquireTokenSilent
SignupSignIn (SUSI) - V2	works as expected	Supported
Password Reset - V2	X-frame-options deny	Not supported
SignIn - V2	works as expected	Supported
Profile Edit	X-frame-options deny	Not supported
SignUp - V2	works as expected for interactive calls	Not supported

It is possible that some IDPs are being called for silent calls where interaction is needed and B2C service is blocking the frame. We are investigating to improve this experience and throw proper errors for now but the above table can be used as a reference as we stabilize B2C experience in our samples for all policies.

This application does not have sufficient permissions against this web resource

I've downloaded the sample and replaced with my settings. After that, in the web page I'm getting:

Refused to display .... in a frame because it set 'X-Frame-Options' to 'deny'.

If I try to open the url, I'm getting:

This application does not have sufficient permissions against this web resource to perform the operation.

Any tips?

Azure AD B2C Msal.js acquireTokenSilent Performance issue

Hi Azure team,

I am facing performance issues while using msal.js. I have all the details over here

https://social.msdn.microsoft.com/Forums/en-US/22a53bc6-cd7d-4226-ba61-3ba84368dd8b/azure-ad-b2c-msaljs-acquiretokensilent-performance-issue?forum=WindowsAzureAD

Appreciate a quick turn around. Thanks in advance.

this.app.loginRedirect not working properly

I need page instead of pop up so I converted loginPopup to loginRedirect but it is not working.
Actually I think, on redirect it is loosing its state and redirecting to the page as a new instance.
can you please provide some example for loginRedirect?

Getting 401s when adapting this sample to Angular and Azure Functions

I tried to adapt this sample to Angular (SPA) and Azure Functions (API). I'm getting 401 Not Authorized when the SPA calls an API. Details are in this stack overflow issue.