[Blazor WebAssembly]Failed to fetch dynamically imported module

[wu-yafeng]

Step to reproduce:

1. dotnet new blazorwasm -n test01
2. cd test01
3. dotnet add package Fido2.BlazorWebAssembly --version 4.0.0
4. update your Program.cs

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using test01;
+ using Fido2.BlazorWebAssembly;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
+ builder.Services.AddWebAuthn();
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

5. update your Pages/Counter.razor

@page "/counter"
+ @using Fido2.BlazorWebAssembly
+ @inject WebAuthn WebAuthn

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
- private void IncrementCount()
+ private async Task IncrementCount()
    {
+      await WebAuthn.Init(); // Failed to fetch dynamically imported module
        currentCount++;
    }
}

6. dotnet run

console logs:

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

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Failed to fetch dynamically imported module: http://localhost:5272/_content/Fido2.BlazorWebAssembly/js/WebAuthn.js
      TypeError: Failed to fetch dynamically imported module: http://localhost:5272/_content/Fido2.BlazorWebAssembly/js/WebAuthn.js
Microsoft.JSInterop.JSException: Failed to fetch dynamically imported module: http://localhost:5272/_content/Fido2.BlazorWebAssembly/js/WebAuthn.js
TypeError: Failed to fetch dynamically imported module: http://localhost:5272/_content/Fido2.BlazorWebAssembly/js/WebAuthn.js
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__23`1[[Microsoft.JSInterop.IJSObjectReference, Microsoft.JSInterop, Version=10.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Fido2.BlazorWebAssembly.WebAuthn.<>c__DisplayClass2_0.<<-ctor>b__0>d.MoveNext()
--- End of stack trace from previous location ---
   at test01.Pages.Counter.IncrementCount() in C:\Users\xxxx\source\repos\sample\src\test01\Pages\Counter.razor:line 18
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

[ajakblackgoat]

Hi. Do you have a workaround abt this js/ts issue?

[wu-yafeng]

Hi. Do you have a workaround abt this js/ts issue?

@ajakblackgoat Yeah, assume you want use webauthn in your Home.razor

        private IJSObjectReference _jsModule = default!;
	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		if (firstRender)
		{
			_jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Components/Pages/Home.razor.js");
		}
		await base.OnAfterRenderAsync(firstRender);
	}

        /// <summary>
	/// Creates a new credential.
	/// </summary>
	/// <param name="options"></param>
	/// <returns></returns>
	public async Task<AuthenticatorAttestationRawResponse> CreateCredsAsync(CredentialCreateOptions options) =>
		await _jsModule.InvokeAsync<AuthenticatorAttestationRawResponse>("createCreds", options);

	/// <summary>
	/// Verifies a credential for login.
	/// </summary>
	/// <param name="options"></param>
	/// <returns></returns>
	public async Task<AuthenticatorAssertionRawResponse> VerifyAsync(AssertionOptions options) =>
		await _jsModule.InvokeAsync<AuthenticatorAssertionRawResponse>("verify", options);

Create a js file in your ./Components/Pages/Home.razor.js

export function isWebAuthnPossible() {
    return !!window.PublicKeyCredential;
}
function toBase64Url(arrayBuffer) {
    return btoa(String.fromCharCode(...new Uint8Array(arrayBuffer))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=*$/g, "");
}
function fromBase64Url(value) {
    return Uint8Array.from(atob(value.replace(/-/g, "+").replace(/_/g, "/")), c => c.charCodeAt(0));
}
function base64StringToUrl(base64String) {
    return base64String.replace(/\+/g, "-").replace(/\//g, "_").replace(/=*$/g, "");
}
export async function createCreds(options) {
    if (typeof options.challenge === 'string')
        options.challenge = fromBase64Url(options.challenge);
    if (typeof options.user.id === 'string')
        options.user.id = fromBase64Url(options.user.id);
    if (options.rp.id === null)
        options.rp.id = undefined;
    for (let cred of options.excludeCredentials) {
        if (typeof cred.id === 'string')
            cred.id = fromBase64Url(cred.id);
    }
    var newCreds = await navigator.credentials.create({ publicKey: options });
    const response = newCreds.response;
    const retval = {
        id: base64StringToUrl(newCreds.id),
        rawId: toBase64Url(newCreds.rawId),
        type: newCreds.type,
        clientExtensionResults: newCreds.getClientExtensionResults(),
        response: {
            attestationObject: toBase64Url(response.attestationObject),
            clientDataJSON: toBase64Url(response.clientDataJSON),
            transports: response.getTransports ? response.getTransports() : []
        }
    };
    return retval;
}
export async function verify(options) {
    if (typeof options.challenge === 'string')
        options.challenge = fromBase64Url(options.challenge);
    if (options.allowCredentials) {
        for (var i = 0; i < options.allowCredentials.length; i++) {
            const id = options.allowCredentials[i].id;
            if (typeof id === 'string')
                options.allowCredentials[i].id = fromBase64Url(id);
        }
    }
    var creds = await navigator.credentials.get({ publicKey: options });
    const response = creds.response;
    const retval = {
        id: creds.id,
        rawId: toBase64Url(creds.rawId),
        type: creds.type,
        clientExtensionResults: creds.getClientExtensionResults(),
        response: {
            authenticatorData: toBase64Url(response.authenticatorData),
            clientDataJSON: toBase64Url(response.clientDataJSON),
            userHandle: response.userHandle && response.userHandle.byteLength > 0 ? toBase64Url(response.userHandle) : undefined,
            signature: toBase64Url(response.signature)
        }
    };
    return retval;
}

[ajakblackgoat]

Thanks for your reply.

I ended up with creating my own modified version of Fido2.BlazorWebAssembly/WebAuthn.cs where in its constructor, fixed the import file to:

_initializer = Task.Run(async () => _jsModule = await js.InvokeAsync<IJSObjectReference>("import", "./js/**webauthn.js**"));

And of course, the compiled webauthn.js have to be placed in the wwwroot.