AuthenticationService.js 404 not found in Blazor Multi Application

[latala43]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

When I try to use Authentication in my multi-WebAssembly Blazor applications, I receive the error that AuthenticationService.js is 404 not found.

The Blazor applications is working fine as the instructions here or here.

Also each Blazor application working fine if they are working from the root https://localhost even with authentication to my IdentityServer4.

Once I port them to https://localhost/FirstApp the following script is not working:

<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

I receive the 404 not found.

I think that StaticWebAssetBasePath does not load the _cocntents as it should be.

My Question is: How to load the AuthenticationService.js when working with multiple Blazor WebAssembly application without receiving the 404 not found?

I try the answer in this link but with no luck:

Expected Behavior

_content should be loaded as expected from dotnet assembly even ported to side applications.

Steps To Reproduce

Add <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script> to any of the clients in this project this project

Exceptions (if any)

AuthenticationService.js:1

   Failed to load resource: the server responded with a status of 404 ()

Failed to load resource: the server responded with a status of 404 ()
blazor.webassembly.js:1 Debugging hotkey: Shift+Alt+D (when application has focus)
blazor.webassembly.js:1 blazor Loaded 10.41 MB resourcesThis application was built with linking (tree shaking) disabled. Published applications will be significantly smaller.
blazor.webassembly.js:1

   crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
  Unhandled exception rendering component: Could not find 'AuthenticationService.init' ('AuthenticationService' was undefined).
  Error: Could not find 'AuthenticationService.init' ('AuthenticationService' was undefined).
      at https://192.168.1.101:7000/FirstApp/_framework/blazor.webassembly.js:1:328
      at Array.forEach (<anonymous>)
      at a.findFunction (https://192.168.1.101:7000/FirstApp/_framework/blazor.webassembly.js:1:296)
      at _ (https://192.168.1.101:7000/FirstApp/_framework/blazor.webassembly.js:1:2437)
      at https://192.168.1.101:7000/FirstApp/_framework/blazor.webassembly.js:1:3325
      at new Promise (<anonymous>)
      at Object.beginInvokeJSFromDotNet (https://192.168.1.101:7000/FirstApp/_framework/blazor.webassembly.js:1:3306)
      at Object.Rt [as invokeJSFromDotNet] (https://192.168.1.101:7000/FirstApp/_framework/blazor.webassembly.js:1:59738)
      at _mono_wasm_invoke_js_blazor (https://192.168.1.101:7000/FirstApp/_framework/dotnet.6.0.1.wpmoizgmhd.js:1:194546)
      at wasm://wasm/009705ea:wasm-function[219]:0x1a129

Microsoft.JSInterop.JSException: Could not find 'AuthenticationService.init' ('AuthenticationService' was undefined).
Error: Could not find 'AuthenticationService.init' ('AuthenticationService' was undefined).
at https://192.168.1.101:7000/FirstApp/_framework/blazor.webassembly.js:1:328
at Array.forEach ()
at a.findFunction (https://192.168.1.101:7000/FirstApp/_framework/blazor.webassembly.js:1:296)
at _ (https://192.168.1.101:7000/FirstApp/_framework/blazor.webassembly.js:1:2437)
at https://192.168.1.101:7000/FirstApp/_framework/blazor.webassembly.js:1:3325
at new Promise ()
at Object.beginInvokeJSFromDotNet (https://192.168.1.101:7000/FirstApp/_framework/blazor.webassembly.js:1:3306)
at Object.Rt [as invokeJSFromDotNet] (https://192.168.1.101:7000/FirstApp/_framework/blazor.webassembly.js:1:59738)
at _mono_wasm_invoke_js_blazor (https://192.168.1.101:7000/FirstApp/_framework/dotnet.6.0.1.wpmoizgmhd.js:1:194546)
at wasm://wasm/009705ea:wasm-function[219]:0x1a129
at Microsoft.JSInterop.JSRuntime.d__161[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext() at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args) at Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticationService3.d__27[[Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticationState, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60],[Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteUserAccount, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60],[Microsoft.AspNetCore.Components.WebAssembly.Authentication.ApiAuthorizationProviderOptions, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
at Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticationService3.<GetAuthenticatedUser>d__26[[Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticationState, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60],[Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteUserAccount, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60],[Microsoft.AspNetCore.Components.WebAssembly.Authentication.ApiAuthorizationProviderOptions, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext() at Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticationService3.d__25[[Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticationState, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60],[Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteUserAccount, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60],[Microsoft.AspNetCore.Components.WebAssembly.Authentication.ApiAuthorizationProviderOptions, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
at Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticationService`3.d__17[[Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticationState, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60],[Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteUserAccount, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60],[Microsoft.AspNetCore.Components.WebAssembly.Authentication.ApiAuthorizationProviderOptions, Microsoft.AspNetCore.Components.WebAssembly.Authentication, Version=6.0.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
at Microsoft.AspNetCore.Components.Authorization.AuthorizeViewCore.OnParametersSetAsync()
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

.NET Version

6.0.1

Anything else?

No response

[javiercn]

@latala43 thanks for contacting us.

You need to look at your output folder to determine where the script is located and adjust the path in your script tags accordingly.

[latala43]

The AuthenticationService.js is not loaded at if it is loaded from https://localhost/FirstApp

But the same code is working fine if it is from https://localhost

To reproduce the problem, just create a new Blaozr WebAssembly Project with hosted service AND Individual Authentication

• Move the project to run from https://localhost/FirstApp by doing the following changes:

`app.MapWhen(ctx =>
{
var startsWithSegments = ctx.Request.Path.StartsWithSegments("/FirstApp");
return startsWithSegments;
}, first =>
{
first.UseBlazorFrameworkFiles("/FirstApp");
first.UseStaticFiles();

     first.UseRouting();
     first.UseEndpoints(endpoints =>
     {
         endpoints.MapControllers();
         endpoints.MapFallbackToFile("FirstApp/{*path:nonfile}", "FirstApp/index.html");
     });

});`

• And add this line in csproj of the client <StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>
• And change the base to in wwwroot/index.html of the client

The line in this index.html that loads the AuthenticationService.js is not loaded from the dotnet assembly
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

The refenced Microsoft.AspNetCore.Components.WebAssembly.Authentication does not load the js file anywhere. The problem is in Dotnet.

I also traced the error and got the following log:

[08:18:21 VRB] Connection id "0HMF64I6QI61L" received HEADERS frame for stream ID 39 with length 52 and flags END_STREAM, END_HEADERS, PRIORITY. [08:18:21 INF] Request starting HTTP/2 GET https://192.168.1.101:7000/FirstApp/_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js - - [08:18:21 VRB] All hosts are allowed. [08:18:21 INF] Request starting HTTP/2 GET https://192.168.1.101:7000/FirstApp/_framework/blazor.webassembly.js - - [08:18:21 VRB] All hosts are allowed. [08:18:21 DBG] The request path /FirstApp/_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js does not match an existing file [08:18:21 VRB] Range header's value is empty. [08:18:21 VRB] Connection id "0HMF64I6QI61L" sending HEADERS frame for stream ID 33 with length 43 and flags END_HEADERS. [08:18:21 VRB] Connection id "0HMF64I6QI61L" sending DATA frame for stream ID 33 with length 911 and flags NONE. [08:18:21 DBG] 1 candidate(s) found for the request path '/FirstApp/_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js' [08:18:21 VRB] Connection id "0HMF64I6QI61L" sending HEADERS frame for stream ID 31 with length 16 and flags END_HEADERS. [08:18:21 INF] Sending file. Request path: '/FirstApp/css/app.css'. Physical path: '/src/SbBlazor/Client/wwwroot/css/app.css' [08:18:21 VRB] Connection id "0HMF64I6QI61L" sending DATA frame for stream ID 31 with length 16384 and flags NONE. [08:18:21 VRB] Range header's value is empty. [08:18:21 DBG] Endpoint 'Fallback FirstApp/{*path:nonfile}' with route pattern 'FirstApp/{*path:nonfile}' was rejected by constraint 'path':'Microsoft.AspNetCore.Routing.Constraints.NonFileNameRouteConstraint' with value '_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js' for the request path '/FirstApp/_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js' [08:18:21 DBG] Endpoint 'Fallback FirstApp/{*path:nonfile}' with route pattern 'FirstApp/{*path:nonfile}' is not valid for the request path '/FirstApp/_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js' [08:18:21 DBG] Request did not match any endpoints [08:18:21 VRB] Connection id "0HMF64I6QI61L" sending HEADERS frame for stream ID 37 with length 7 and flags END_STREAM, END_HEADERS. [08:18:21 VRB] Connection id "0HMF64I6QI61L" sending DATA frame for stream ID 31 with length 16384 and flags NONE. [08:18:21 VRB] Connection id "0HMF64I6QI61L" sending HEADERS frame for stream ID 35 with length 14 and flags END_HEADERS. [08:18:21 VRB] Connection id "0HMF64I6QI61L" sending DATA frame for stream ID 33 with length 0 and flags END_STREAM. [08:18:21 INF] Request finished HTTP/2 GET https://192.168.1.101:7000/FirstApp/_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js - - - 404 0 - 97.1643ms

Do you want me to create a sample project for this problem. It is very easy to reproduce.

[javiercn]

@latala43 thanks for the additional details.

I understand what you mean and what I'm pointing out is that it is your app that it is loading the script, so you need to update the src tag accordingly.

If the script is located at "/_content/..." and your app is being loaded on FirstApp, then you need to change the script to load from the root (prefix /).

[latala43]

Thank you for your support. But your last answer indicates that it is not possible to use multiple Blazor WebAssemblies with _content loaded from DotNet such as Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js?

I wish Blazor should support Multi Blazor WebAssembly created in the host!. I think it should be!

[latala43]

I try the following:
<script src="/_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
and
<script src="/FirstApp/_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
but still not working. DotNet Assembly does not load the AuthenticationService.js anywhere

[latala43]

@latala43 thanks for the additional details.

I understand what you mean and what I'm pointing out is that it is your app that it is loading the script, so you need to update the src tag accordingly.

If the script is located at "/_content/..." and your app is being loaded on FirstApp, then you need to change the script to load from the root (prefix /).

Thank you very much for your support. I'm sorry it was my mistake. I just follow the links shown in my first post and did not notice as reference to this documentation that I have to add first.UseStaticFiles("/FirstApp"); in MapWhen

first.UseBlazorFrameworkFiles("/FirstApp");
    first.UseStaticFiles();
    **first.UseStaticFiles("/FirstApp");**
    first.UseRouting();

Like this the static files are loaded from DotNet components without any issue. Without first.UseStaticFiles("/FirstApp"); I will receive the 404 not found for AuthenticationService.js

[javiercn]

No worries, this is a complicated thing to get right because there are three moving pieces involved.