Example of a .Net6 Blazor WebAssembly application with authentication using local Sql Db?

Question

I'm trying to add authentication (with registration, password reset etc) to a .Net6 Blazor WebAssembly project. When creating the project include authentication for individual accounts (to local sql db), configure for HTTPS, Asp.Net Core hosted and Progressive Web Application. This is done in VS 2022.

The problem I'm facing is that each project I've created so far continues to crash as soon as I try to register or login.

similar to this thread: Blazor WebAssembly Hosted Proxy crash on successful authentication

I also looked at the link to https://github.com/dotnet/aspnetcore/issues/26635 but the issue was resolved. I'm currently running Chrome Version 99.0.4844.82 (Official Build) (64-bit).

I tried removing the autocomplete attribute on the server side cshtml pages but the project still random crashes.

Has anyone successfully implemented authentication (using local Sql) in a webAssebly project with .Net6?

I also tried to run the samples from the .NetCore git repo and the apps continue to crash.

This is the server console output:

fail: Microsoft.WebAssembly.Diagnostics.DevToolsProxy[0] DevToolsProxy::Run: Exception System.AggregateException: One or more errors occurred. (The remote party closed the WebSocket connection without completing the close handshake.) ---> System.Net.WebSockets.WebSocketException (0x80004005): The remote party closed the WebSocket connection without completing the close handshake. ---> System.Net.Sockets.SocketException (995): The I/O operation has been aborted because of either a thread exit or an application request. at Microsoft.AspNetCore.Server.Kestrel.Transport.Sockets.Internal.SocketAwaitableEventArgs.g__ThrowSocketException|5_0(SocketError e) at Microsoft.AspNetCore.Server.Kestrel.Transport.Sockets.Internal.SocketAwaitableEventArgs.GetResult(Int16 token) at Microsoft.AspNetCore.Server.Kestrel.Transport.Sockets.Internal.SocketConnection.DoReceive() at System.IO.Pipelines.Pipe.GetReadResult(ReadResult& result) at System.IO.Pipelines.Pipe.GetReadAsyncResult() at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.Http1UpgradeMessageBody.ReadAsyncInternalAwaited(ValueTask1 readTask, CancellationToken cancellationToken) at System.Runtime.CompilerServices.PoolingAsyncValueTaskMethodBuilder1.StateMachineBox1.System.Threading.Tasks.Sources.IValueTaskSource<TResult>.GetResult(Int16 token) at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpRequestStream.ReadAsyncInternal(Memory1 destination, CancellationToken cancellationToken) at System.Net.WebSockets.ManagedWebSocket.EnsureBufferContainsAsync(Int32 minimumRequiredBytes, CancellationToken cancellationToken, Boolean throwOnPrematureClosure) at System.Runtime.CompilerServices.PoolingAsyncValueTaskMethodBuilder1.StateMachineBox1.System.Threading.Tasks.Sources.IValueTaskSource.GetResult(Int16 token) at System.Net.WebSockets.ManagedWebSocket.ReceiveAsyncPrivate[TResult](Memory1 payloadBuffer, CancellationToken cancellationToken) at System.Net.WebSockets.ManagedWebSocket.ReceiveAsyncPrivate[TResult](Memory1 payloadBuffer, CancellationToken cancellationToken) at System.Runtime.CompilerServices.PoolingAsyncValueTaskMethodBuilder1.StateMachineBox1.System.Threading.Tasks.Sources.IValueTaskSource.GetResult(Int16 token) at System.Threading.Tasks.ValueTask`1.ValueTaskSourceAsTask.<>c.<.cctor>b__4_0(Object state) --- End of stack trace from previous location --- at Microsoft.WebAssembly.Diagnostics.DevToolsProxy.ReadOne(WebSocket socket, CancellationToken token) --- End of inner exception stack trace --- at Microsoft.WebAssembly.Diagnostics.DevToolsProxy.Run(Uri browserUri, WebSocket ideSocket)

This is the VS output screen details:

Exception thrown: 'System.Net.Sockets.SocketException' in Microsoft.AspNetCore.Server.Kestrel.Transport.Sockets.dll Exception thrown: 'System.Net.Sockets.SocketException' in Microsoft.AspNetCore.Server.Kestrel.Transport.Sockets.dll The program '' has exited with code 4294967295 (0xffffffff). Exception thrown: 'Microsoft.AspNetCore.Connections.ConnectionResetException' in System.Private.CoreLib.dll Exception thrown: '' in Unknown Module. The thread 0x1 has exited with code 0 (0x0). The program 'service-worker.js' has exited with code 4294967295 (0xffffffff). The program '[25288] Chatter.Server.exe' has exited with code 4294967295 (0xffffffff). The thread 0x0 has exited with code 0 (0x0). The program 'localhost:7151' has exited with code 4294967295 (0xffffffff).

Any advise will be greatly appreciated.

Thanx

Riaan

Answer 1

fail: Microsoft.WebAssembly.Diagnostics.DevToolsProxy[0] DevToolsProxy::Run: Exception System.AggregateException: One or more errors occurred. (The remote party closed the WebSocket connection without completing the close handshake.)

To the above error, as far as I know, after update to VS 2022 17.1, it will show the websocket error. And, if check the console output, you will find the above error.

To solve the above error, you can try to use the VS 2022 17.2.0 Preview 2.0 version, this issue has been fixed in this version. Or you can try to install the earlier VS 2022 version, refer this link. I also check it using VS 2022 17.0.4 version, it doesn't have this error, you can try to use this version.

To the Local SQL Server error, I guess you are meeting the following error, right?

To solve the above error, you can use the following migration commands to generate the DataBase first (Or you can use the existing database), then the above error will disappear when you run the application.

add-migration generateDatabase
Update-Database

More detail information about migration, see Migrations Overview.

Answer 2

I have the same error as you have, using .Net6 and Blazor. I'm authenticating against a Keycloak but I suppose this has no real impact, the problem is coming back in the Blazor app with a callback url.

My crashes don't seem to be random, I can just remove all breakpoints in the Blazor app and it works correctly. I can then set them back when I'm authenticated / back in the Blazor app.

My confidence in Blazor is the same as yours; some things are nice but some others are just so annoying... I'll stick with Angular for my next projects if given the choice.