MSAL for SPA -> Server side

[cvrdcollection]

Hello,

We are unable to implement case where authentication starts on the front-end and then completes on the backend (what I thought is one of the very common use cases). All the SPA examples and documentation use cases (from what I read) either run everything on a backend or front-end. Nevertheless we want a user to authorize access to their login in an SPA, generating authorization code and then send it to our backend where we exchange it for refresh and access tokens.

Currently the .js library seems (from what I read all over SO and other places) to hide the refresh token and keep it for itself.

How can we handle our scenario? We work with other authentication libraries such as from Google where this is very common use case but I didn't find anything from MS how to get the authorization code and exchange it on a backend.

[tnorling]

We don't currently support this scenario. It sounds like your backend is the one that will be both exchanging the code for tokens as well as actually using the tokens. So why not have the backend also generate the authorization url? Can you expand on why you want the SPA to do the work?

[cvrdcollection]

Thank you for getting back so quickly Thomas.

Our front-end is SPA in Angular. Not sure what you mean by backend generating the authorization URL - it is the front-end SPA where the user interacts and thus only there the use can authorize the access while backend is just ASP.NET Web API.

If you mean SPA calling the API to get the authorization URL > backend generating the authorization URL > returning URL back to SPA, then not sure what Angular should do with the URL. One option would be to redirect out of the SPA application to the loaded authorization URL and then redirect after authorization is completed back to the SPA using OAuth2 redirect URL. This would mean that we have to spin up the SPA again after the authorization, support all the necessary deep-linking etc. and also this is not very user-friendly.

What I'm looking for is demonstrated here and this is how I have seen many SPA's to use 3rd party OAuth2: https://miro.medium.com/max/1400/1*GTwMIRTHC62m0F8Vhe8wLA.gif
This is exactly what the Google library offers natively and the advantage is that it is simple to use and that the SPA doesn't close so you don't have to handle any front-end special deep-linking, state preservation, etc.

[tnorling]

That's exactly what I was suggesting. You could use the window.open() browser API to load the authorization url in a popup window as shown in the .gif you shared. No redirection necessary since the backend will handle auth code redemption.

[cvrdcollection]

I see. Opening a modal with the URL is the easy part. The challenge is how to capture from the SPA that the user completed the authorization in the modal. This is where we stopped investigating further. Also we analyzed the MSAL.js lib quickly and it seems that it uses timers to do this.

Anyway, we looked at some tools that are SPA and we know that MS login can be added through a modal - in the modal they open their own URL with MVC app first, which redirects to the authorization URL. When authorization completes then it redirects back to their MVC app (still in the same modal). There I guess then their own javascript is executed that takes the code and send it back to the main SPA. This means that next to WebAPI and SPA we need to have another MVC app for the modal.

Both solutions needs quite some coding from our side and it would be nice if MS provided native solution (or at least an example).

[tnorling]

We wait for the popup window to be on the same domain as our main window (getting the url of the popup window is only possible when you're on the same domain) to know we're done and can close the popup. Usually we would just use a blank page hosted on the same domain so that the user doesn't see the app rendered in the popup. You can find our popup monitoring code here for inspiration.

There I guess then their own javascript is executed that takes the code and send it back to the main SPA.

Not sure I understand this point. I thought you want your WebAPI to consume the auth code, not the SPA?

It would be nice if MS provided native solution

You are not the first person to request this feature so we may choose to pick it up eventually, though that work is not yet planned so I unfortunately can't give you the answer you're looking for today :/ We're always open to contributions, however, if you feel like taking a stab at it and opening a PR.

[MolyAgarwal]

@tnorling Any update on this feature... Is this feature out almost after 2.5 years?

[johnwc]

@tnorling We are also in need of this functionality. We have three areas we are working with. 1) A web site with backend code that populates pages for the logged in user. 2) Web components on each page written in vue js that interact with the API server. 3) An API server written in .net.

What is the best way to implement this setup using MSAL within the vue js components?