Microsoft Authentication Library SPA versus a Web App

Question

TLDR: Which is the correct way to check for login states across multiple web pages, a SPA or a Web App.

I'm looking to develop an internal staff website for a company I'm working with. We currently have a SPA configured and developed and working properly but as we are adding more features I'm thinking that we are going to need more than one single page.

Correct me if I'm wrong, but this is my current understanding of MSAL.js with SPAs. Let's say a end-user is attempting to access our staff page at [company].com/home, if the user has not authenticated with their account that is stored in our Azure AD, the end-user can authenticate only for that page and their session state can be stored in the local storage, so when they access [company].com/home, their login can be acquired silently and the end-user will not have to log in again. If they do not have an account, they will not be able to access any page.

Also, by this logic, if the end-user accesses [company].com/staffresources, they will have to also login for this page as well, in addition to the cached login for [company].com/home, and the same will follow for each page throughout the website. At least, that is my understanding, correct?

I do see that there is an option for a Web App, would this solve the issue to where the end-user would have to authenticate each seperate page that they attempt to connect to? Or is there a way to check for a login state using a SPA, if the user has not been authenticated, they are can be redirected to a [company].com/login.

Any direct links to proper documentation for a solution would also be greatly appreciated.

Answer 1

localstorage is segmented by domain, not by each individual page. If a user signs in with msal.js on [company].com/login they will be signed on every page under the [company].com domain.