Blazor Webassembly Standalone App (No PWA) fails to authenticate using OidcAuthentication due to authorization redirect leaving the browser

[webdrivendevelopment]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I cannot use OidcAuthentication from a Webassembly Standalone app.
The flow is Auth Code Flow with PKCE.
After being redirected to login form by Blazor app, after successful login, the authorization redirect with auth code in query/fragment (tried both ResponseModes) is not intercepted by Blazor app and shows up in the browser with 404 status code.

Expected Behavior

After performing the aforementioned configuration, the Webassembly Standalone App Oidc Auth (against Keycloak IP) should succeed and user should be in logged in state.

Steps To Reproduce

I am using a Webassembly Standalone App (no PWA) .NET 9 created via Visual Studio 2022.

For Oidc auth, using Microsoft.AspNetCore.Components.WebAssembly.Authentication v9.0.5 (v9.0.4 had same behavior)

The realm and clientId is configured correctly,
I've configured the redirectUris as the default ones from ProviderOptions
(https://localhost:/authorization/login-callback,
https://localhost:/authorization/logout-callback)

For some reason, the Keycloak authorization redirect after login is not intercepted by AuthroizationService.js (whose refernce is added to index.html) / Blazor App and fails with 404 code.

I do have:
Authentication.razor :
@page "/authentication/{action}"
...
and
AuthenticationLoginCallback.razor (to be sure) :
@page "/authentication/login-callback"
...
Redirect still leaving the wasm app...
I tried setting ResponseMode : "fragment" but it didnt' help.

I have seen the sample working on Youtube (e.g. https://www.youtube.com/watch?v=o4_ISZyaUdg) but I cannot get it to work.

I'm exposing the standalone app by referencing its project from a webapi and using the following middleware:

This is the classical SPA-style Oidc Auth scenario and should work.
I followed the official documentation as best as I could, no success yet.

Exceptions (if any)

No response

.NET Version

9.0.300

Anything else?

No response

[MackinnonBuck]

We think this is related to #61896.

Could you please check out these docs for configuring the fallback route and see if they help resolve your issue?

[guardrex]

I'm going to keep an 👁 on this one, too, for potential doc work later.

[CosminSontu]

I'll try it out, this looks like what I was missing. (I accidentally used another account to log this issue, I notice only after posting).

Documentation-wise, I think it's more useful to have this bit of information here:
Secure an ASP.NET Core Blazor WebAssembly standalone app with the Authentication library
since this is the page that I stumbled upon and thoroughly read :D.

To get this scenario going, I got creative and registered login and logout redirect Uris with this form:
http://localhost:/index.html?redirect=autentication/login-callback
of course whenever "redirect" qs param is present I NavigateTo it.

Will get back with conclusion once I try fallback route which is what I was looking for.
Thanks !

[CosminSontu]

The "navigaitonFallback" setting is a viable solution in case one uses azure static websites.
My solution above is the easiest fix, as long as your IdP knows to append its querystring params to your url which already contains querystring params (which Keycloak does correctly).

Another solution is to handle those redirect routes on the server and redirect to your index.html while appending the routes as query string parameters as I mentioned above (so you can navigate with NavigationManager on the client in case you receive a ~"redirect" query string parameter)

The advantage is that your redirect URIs registered in your IdP will look natural like:
http://localhost:[localPort]/authentication/login-callback
which is handled by your backend WebApi to redirect to:
http://localhost:[localPort]/index.html?redirect=/authentication/login-callback
which does the job.

Blazor Feature Suggestion1: It would be a great feature to have this functionality built into BlazorWebassembly (Standalone), to just be able to intercept the redirects on the client with a config similar to "(client)navigationFallback" but specified in wwwroot/appsettings.json, not relying on server-side routing.

Blazor Feature Suggestion2: Honestly, I was hoping the Auth Oidc Client would do this for PKCE Auth Code Flow since there is no point going to the server for those IdP redirect URIs. So why not handle the redirects in the auth component and keep the user inside Blazor Standalone SPA app, not leaving the browser.

Hope this helps improve the already amazing Blazor Webassembly.

Cheers!

[guardrex]

Documentation-wise, I think it's more useful to have this bit of information here:

I don't think we'll be able to take that approach because we'd end up having to link everything to everything 😄. The hosting articles are in one node (folder) and cover several hosting scenarios, while the security articles are in their own node and cover several identity provider scenarios. Readers should access each node for whatever combination of hosting and security features that they're trying to implement.

However, I did place a section into the SWA article that we maintain to help surface the fallback guidance because it's buried over in the SWA articles ...

https://learn.microsoft.com/aspnet/core/blazor/host-and-deploy/webassembly/azure-static-web-apps#app-configuration

[webdrivendevelopment]

I answered above (@CosminSontu) stating the suggested fix is valid only in the context of azure static websites.
Please let me know if I got that bit wrong and it's actually a Blazor Webassembly feature.

I am exposing the blazor webassembly app from a asp.net core webapi from wwwroot folder.

I have also made 2 suggestions.

Thanks,
Cosmin