Limit web application to only specific Microsoft accounts
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.