MSAL in a SPA - Web App - Web API scenario

[johnwc]

Core Library

MSAL.js (@azure/msal-browser)

Wrapper Library

Not Applicable

Public or Confidential Client?

Public

Description

We need information on how to go about setting up MSAL for the scenario bellow, so that each can authenticate the user to be able to render correct UI as well as make requests in the API as the user.

We have three areas we are working with.

1. A ASP.Net web site with backend code that populates pages for the logged in user. (Changes the menu when a user is logged in, giving them menu options they have access to as well as a [user] menu in top right for user menu.)
2. SPA-like web components on each page written in Vue 3 that interact with the API server.
3. An API server written in .Net 8

What is the best way to implement this setup using MSAL, where all steps can be authenticated using the token from MSAL? How do we share the token with the vue js SPA-like so it can call the API server?

Source

External (Customer)

[tnorling]

What you're looking for here is the Hybrid SPA flow

Your backend and SPA each need to acquire their own tokens (don't pass tokens back and forth between frontend and backend), however, you can do this with a single interaction with the login service. See the sample linked above, it uses node for the backend but .NET is supported in this flow as well.

[johnwc]

Not stale, still testing