Do You know the Difference, between Coding and Programming?

Setup Windows Server 2016 with Blazor WebAssembly App : Authentication Failed

Today I feel I need to comment on the struggle I’m having with getting my Blazor WebAssembly app to work on my Windows server.

The Problem with Blazor Client App

I have set up a Blazor WebAssembly template with built-in accounts.

When I launch the project locally on IIS Express with Visual Studio in debug mode, everything works fine and as expected.

However, as soon as I publish the Blazor WASM on the web server in the live environment, the client side of the app loses the “connection/token/authentication”. I’m not sure about this and in 3 days I couldn’t figure out what exactly is wrong.

While you stay logged in on the server side of the Blazor Web Assembly app, you are redirected to the main page running on the client app, and there you always get this one error that says everything and nothing.

Blazor WebAssembly App failed to Login

Initial Server Setup

The server is a clean Windows Server 2016 installation. It is a simple test virtual machine from my server provider, with 4 GB RAM and 2 CPU. Enough to test and develop most things.

Server Roles

Add Roles to Windows Server
Add Roles to Windows Server

Server Features

Add Features to Windows Server
Add Features to Windows Server

Preparing the IIS Webserver

Install Components

I have installed all the necessary SDK’s, runtimes and modules to host a web server and run ASP.Net applications on it.

  • The Actual hosting Package and SDK’s for .Net 5 aswell as .Core 3.1.
  • The URL-Rewrite Modul
  • IIS 10.0 Express For Debugging and running from Visual Studio.
  • Web Deploy 3.6 so i can work from my Personal Computer and Deploy the App directly to the Server.

Implementing the Server Certificate to the Windows and IIS Server

I received an SSL certificate from my server provider to enable https on the server and add an extra layer of security to the http protocol.

With the private and secret key, I was able to successfully add the certificate to the certificate folder.

After the certificate was successfully implemented, I configured the IIS web server and bound the certificate to the IIS web server as well.

Double Checking with DigiCert

Then I used DigiCert Utitlity, a free and nice tool for managing certificates, to check if the certificate is installed and available on the server address: https://www.stusse-server.com


The result comes quickly and it seems that everything worked fine and the SSL setup is complete.

Adding the Microsoft SQL Database

I added Microsoft SQL Management Studio to the server to manage and configure the database and installed Microsoft SQL Server 2019 Developer Edition.

SQL Server Settings

Setup

The SQL Server is delivered with default settings and nothing out of the ordinary has been changed.

Add Database User

I have created an SQL user and a Windows user and given them access to the database. This way, handling the database will no longer require the administrator account.

I added the Windows user to the security groups and gave both users permission to the database.

Allow Authentication with SQL Server and Windows Authentication

MSSQL SQL and Windows Authentication Mode

This is a setting you can make in the SQL Server settings and must be made if you want to authenticate with the SQL user, as the default is set to “Windows Authentication Mode”.

To be honest, this setting drove me crazy as I had forgotten it and could not log in with the SQL user.

Prepared, Lets do some Blazor Development

Added Visual Studio to the server and created my first Blazor web assembly app. Super excited about the idea behind the structure and much nicer than the old MVC Razor stuff I was never a real fan of.

Choose Blazor WASM in Visual Studio
Create Blazor WASM net Core App with Single Accounts

The Blazor Webassembly Project Stusse Server

I have a real project for the app and it’s not just for testing purposes. I chose Blazor WebAssembly because I need an API and a web interface for my indie game company Stusse Games.

Setup Connection String and Update the Database

Blazor WebAssembly App, Connection String in appsettings

The entire solution so far is the standard Blazor WebAssembly template with built-in user accounts, Core Hosted.

I change the connection string and update the database

Blazor WebAssembly App, Database Tables

Working with Identity Server and ASP Identity

The migration of the standard AspNet identity database was successful and can now be used from the Blazor server side via the Entity Framework.

This will enable the registration and authorisation of users on the website, which is mandatory for the project.

Lets Start the Blazor Webassembly App

So the project is set up, the database is injected and the connection string has the right information!

Let’s start the IIS Express and start a round of debugging to see what’s going on.

It hasn’t been hard to create a Blazor WebAssembly app so far. The basic template also provides a login, which I also tested.

I registered and logged in successfully.

So up to this point, everything has worked wonderfully and as expected.

Of course, there are many things to consider about the authentication system and securing the server.

But first, let’s create a simple Blazor WebAssembly app that gives us a login and authentication system. Then we can extend the app as needed and add more security.

The Problem starts when Publishing Live

Lets upload the App to the IIS Webserver

but then "Housten we have a Problem" : Authentication Failed

I uploaded the Blazor WebAssembly app to the IIS ad server and to see the app in action in a live environment.

AppSettings.json

Before that, I changed the AppSettings and provided additional information as well as the key path for the certificate.

The launchSettings in server and client were also adjusted.

(I also tried a self-signed certificate which gave the same result).

launchSettings.json

The upload worked fine, then I went to https://www.stusse-server.com. The website launched and everything seemed normal and working. I went to the “Login” tab, which redirects to the server page of the app and opens the possibility to login.

I have now logged in and then the redirection to the main website (client side) starts and there the error message “There was an error trying to log you in. ” begins.

Mhh there are a number of things going on and the troubleshooting options are very limited. Actually, I don’t know how to debug this live environment properly to get more accurate answers as to what went wrong and I’ d be grateful for information here already.

Open FireFox Webtools

There is always this error coming up.

Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] Authorization failed.

https://stusse-server.com/connect/token

No Idea, Authentication still fails

I have now spent a few days researching with a friend to solve this problem with authentication. Unfortunately without any effective result.

I have tried so many different tutorials that I have found on the World Wide Web. I have read so much in the Microsoft documentation. I have checked the settings over and over again, tried so many options and variations.

But no matter what I try, the client side of the Blazor WebAssembly always loses the “Login/Authentication/Token”, or whatever.

This error only occurs in the live IIS web server environment, not in localhost debug mode.

However, the user is still logged into the backend.

Blazor WebAssembly App Manage Accounts

Curious Behaviour with Website Access

Not only did I test this from my end, but I also asked friends and other people to recreate the scenario with the same result.

For some reason, some people can’t even access the website.

Example:

  • Iphone 5 Safari = Access
  • Iphone 6 Safari = Access
  • Iphone 11 Safari = 400 Bad Request

Also, some people mention that they cannot access the website from their PC.

This is now on top of everything else, but could be interesting for the solution

Conclusion

The first conclusion I draw is that I really need help from someone who knows what is going on. For example, how the server setup needs to be or someone who can tell me more about authentication in both Blazor Server and Client App in a live environment.

So far all the tutorials and even the Microsoft documentation only work locally on my Windows Server in debug mode.

And no one shows or explains how to set it up for a live environment.

Need your Help

I am at the end of my ideas and need help to solve the problem. If you have any idea what my problem could be. Feel free to contact me at my social media accounts or email

I also posted in the Microsoft Q&A a Topic to this, so feel free to answer there.

https://docs.microsoft.com/en-us/answers/questions/432718/blazor-wasm-on-windows-2016-server-hosted-with-iis.html