[Feature Request] HYBRID SPA Integration with IdWeb

[gladjohn]

Feature is described here: https://identitydivision.visualstudio.com/DevEx/_git/AuthLibrariesApiReview/pullrequest/3922?_a=files&iteration=17&base=16

Feature has already been implemented in MSAL.Net. Work to be done for ID WEB

• Add Hybrid SPA feature
• Add Unit tests
• Add Integration tests

This is a tracking item for adding feature to ID WEB

MSAL ,Net PR : AzureAD/microsoft-authentication-library-for-dotnet#2981

[jmprieur]

Thanks @gladjohn
Before we start on this, let's make sure we have the OWIN sample.

[gladjohn]

Sure @jmprieur tracking item for sample AzureAD/microsoft-authentication-library-for-dotnet#3006

[jmprieur]

Proposed design:

• Add a boolean requestSpaAuthCode in MicrosoftIdentityOptions
• in TokenAcquisition.cs, add a call to WithSpaAuthCode to AcquireTokenByAuthorizationCode if requestSpaAuthCode is present, and when receiving the auth code from the AuthenticationResult, and store it in the session (for instance as SpaAuthCode): HttpContext.Session["SpaAuthCode"] = spaAuthCode;

In the controller the applications could retrieve the auth code from the HttpContext.Session["SpaAuthCode"], and pass it to the HTML page. and remove it from the session.

[Grovespaz]

Hi, I was wondering if this issue is still on your roadmap?
I'm also wondering if there is a way we can accomplish this today already when using IdWeb, perhaps with a less ideal workaround?

[jmprieur]

@Grovespaz. It's still on the roadmap.
How urgent is it for you?
cc: @jennyf19

[Grovespaz]

@jmprieur we could use it very much starting today already.

Our use case is a privileged SPA whose source can not be accessible to the public, only to authenticated users. But once loaded, the SPA does all the heavy lifting itself and thus uses MSAL.js.

So it would be ideal for us if we could have the backend use IdWeb to authenticate and authorize and then pass the authorization to MSAL.js to prevent a second redirect to AAD whenever possible.

Thanks for your time.

[jennyf19]

@Grovespaz
Can you try this branch which has the support for hybrid spa?

You need to add the following in your Startup.cs:

services.AddSession(options =>
 {
            options.Cookie.IsEssential = true;  // if this is not included, the session is not maintained
});

In Configure:

...
app.UseSession();
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
...

In the Controller, get the spa auth code:

var code = HttpContext.Session.GetString(Constants.SpaAuthCode);

[Grovespaz]

@jennyf19 Thanks for getting back to me so soon with this!
I tried out the branch. Configuring it was easy (had to remember to do options.WithSpaAuthCode = true; too), it works great at first try.

One thing I did notice was that when I stopped the project (to make a change) and restarted it again, I would remain logged in to the backend but the session would no longer contain the spa code, leading to (what feels like a) spurious login redirect through MSAL.js in the frontend.

Additionally if I did have a code, when I refreshed the page it would try to use the same code from the session to acquire a token in MSAL.js but the request would fail with AADSTS54005: OAuth2 Authorization code was already redeemed, please retry with a new valid code or use an existing refresh token, which was not what I expected but makes sense in a way. Is it possible for the backend to re-acquire this token as needed or is it the responsibility of the frontend to redeem the code when first seen and store the resulting token itself? Should a developer clear the code from the session after first use?

I'll continue working with this to make sure it covers everything we need, but I thought I'd give you my preliminary feedback already as you were so quick and helpful in responding to me too.

[jmprieur]

@Grovespaz the spa code should be removed from the session anyway once you have redeemed it. It's only usable once.
hence the error you get (AADSTS54005),
Your question is more for the JavaScript team: @EmLauber @pkanher617 ?

[EmLauber]

Adding @jasonnutter who might have thoughts. You are welcome to open this issue on MSAL.js library so we can track there:
https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/new/choose

[jasonnutter]

Is it possible for the backend to re-acquire this token as needed or is it the responsibility of the frontend to redeem the code when first seen and store the resulting token itself? Should a developer clear the code from the session after first use?

@Grovespaz It is the responsibility of the backend (MSAL.net / MS Identity Web) to acquire the spa authorization code and provide it to the frontend (MSAL.js), and then MSAL.js will redeem that for its own set of tokens (including an RT which can be used to get more tokens). Once the spa has loaded, it doesn't need another spa authorization code from the backend, as it can get its own authorization code (i.e. once the RT has expired). MSAL.js will not cache/store the spa authorization code once it has been used.

And if the user has already logged in (i.e. have already redeemed the spa auth code), they do not need to go through the hybrid spa flow a second time.

[Grovespaz]

Perfect, thank you all.

That just leaves me to (dare) ask when you expect this to land in an official release. 😊 If anything meaningful can be said about that already, of course.

[jennyf19]

@Grovespaz I can aim to get it out Monday (2/14)

[jennyf19]

Just catching up on the thread :/

[jennyf19]

@Grovespaz 1.23.0 with Hybrid Spa support is available on Nuget. https://www.nuget.org/packages/Microsoft.Identity.Web/1.23.0

[VictorioBerra]

Why would the backend for front end pattern not suffice for this use-case?

IE: The confident client authenticates the user, YARP could then be configured to proxy the requests, after appending the bearer token to the request.