Limit web application to only specific Microsoft accounts

Question

I'm building a web application with a React frontend and a NodeJS backend (for API calls), and I need to limit it's use to perhaps ~ 10 users within a single company, who have corporate Microsoft AD / MS Entra ID accounts. It needs to be protected by MFA (which the domain users already have, and SSO is fine), and nobody but the assigned users should have access.

Ideally I'd like for ALL the access setup to be able to be performed from within Entra ID admin center. (Not require a separate users database table to be maintained for the application.)

There doesn't need to be different levels of access, all ~ 10 users can have the same permissions.

I setup the application in MS Entra admin center, got my client ID, setup the redirect, etc., and tried using these packages, which I thought would allow me to accomplish such:

    "@azure/msal-browser": "^4.0.1",
    "@azure/msal-react": "^3.0.1",

After much research and trial and error (the "quick build" code available in the portal used very old versions of these dependencies, and I wanted to use the latest versions, which have different structure), I finally had it where I could press login, be directed to a Microsoft login page, select my account, and then be directed back to my application, from which my SPA private routes (page views) were then accessible. And they were not accessible unless I was logged in. So I thought I had the frontend authentication basics working.

However, even though in Entra admin center I had "Assignment required" set to Yes for the application, I found that I could still login with a different MS user account, that was not assigned.

Even with no assigned users, I could still sign in with any user:

I even went so far as to set "Enabled for users to sign-in" to No.

But I could STILL login to my app using Microsoft. Tried clearing the cache in Edge, made no difference - I could still login.

I tried deleting the app entirely from within Entra admin center, and then I (understandably) could NOT login.

I'm using the isAuthenticated value from msal-react:

  const isAuthenticated = useIsAuthenticated();

So why can I still login, and does anyone have any recommendations on how to achieve this? (I want to avoid deprecated dependencies.)

I presume I'm doing something wrong and this isn't a major Microsoft security flaw.

Answer 1

Hello @Ben in CA,

Thank you for connecting offline to understand the scenario.

During our call, we observed two authentication scenarios—one using the /common endpoint and the other using the /tenantID endpoint.

• When using the /tenantID endpoint in your authentication request, the process follows the OAuth 2.0 Authorization Code flow as expected. As discussed, this involves sending a GET request to the authorization endpoint followed by a POST request to the token endpoint. We confirmed that the OAuth 2.0 Authorization Code Grant flow is being correctly executed in this scenario.
• However, when using the /common endpoint in your script, the application only sends an Authorize request but fails to send a POST request to the token endpoint. As a result, authentication does not complete successfully on this page.

To resolve this issue, modifications are required at the script level to ensure the authentication request is handled according to the OAuth 2.0 Authorization Code flow design.

For reference, please review the OAuth 2.0 Authorization Code flow documentation: OAuth 2.0 Authorization Code Flow

I hope this information is helpful. Please "Accept the answer" if the information helped you. This will help us and others in the community as well.

Answer 2

Hello @Ben in CA ,

Thank you for posting your query on Microsoft Q&A.

From your description, it seems you're facing an issue where, even with "Assignment Required" set to "Yes" in the Entra Admin Center, you're still able to log in with an unassigned Microsoft account. Despite setting "Enabled for users to sign-in" to "No" and clearing the cache, the authentication flow isn't respecting your settings. You're using msal-react with useIsAuthenticated() for managing authentication.

Even if you set "Enabled for users to sign-in" to No, you still need to ensure that "Assignment Required" is set to Yes. This is the key to restricting access to only those users who are explicitly assigned to your application.

Steps to do that : 

1. In the Microsoft Entra Admin Center, ensure "Enabled for users to sign-in" is set to Yes. This is required to allow the application to be used.
2. Ensure "Assignment Required" is set to Yes. This will restrict access to only the users explicitly assigned to your app.

By doing this, only the assigned users will be able to sign in. You can assign users through the "Enterprise Applications" section in Entra ID.

Let me know if this helps or if you need further clarification.

I hope this information is helpful. Please feel free to reach out if you have any further questions. If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Thanks,
Chaithra.

Answer 3

Turns out that if you use:

authority: "https://login.microsoftonline.com/common",

Then the access settings you set for the app won't apply.

I've changed it to include my directory / tenant id:

authority: "https://login.microsoftonline.com/XXXXX-XXXXX-XXXX-XXXXX",

Not sure why the common version wouldn't abide by the settings... seems to be a bit of a bug that there should be a warning about, but at least I can work around it.