OpenIDConnect in Blazor WebAssembly with an IdentityServer4 + ASP.NET Core Identity postgresql database without redirect

Question

I'm trying to create an IdentityServer4 + ASP.NET Core Identity backend to handle both access/refresh tokens and user/signin management. At some point in time I will also create a web API, hence I need the access tokens. My frontend is a Blazor WebAssembly.

In nearly every guide/tutorial I read, I am pointed towards an authorization code grant using Open ID Connect. However, when I implement this, I am redirected from a user login page to the identityserver login page on a different port as follows:

services.AddAuthentication(options =>
        {
            options.DefaultScheme = "Cookies";
            options.DefaultChallengeScheme = "oidc";
        })
        .AddCookie("Cookies")
        .AddOpenIdConnect("oidc", options =>
        {
            options.SignInScheme = "Cookies";

            options.Authority = "https://localhost:5000";
            options.RequireHttpsMetadata = false;

            options.ClientId = "mvc";
            options.SaveTokens = true;
        });

In this example my identityserver runs on localhost:5000, and my blazor wasm on localhost:5003. I want the user to be able to login using the frontend UI from Blazor Webassembly on the same domain, how can I do that?

Answer 1

@enet yes, that is exactly what I would like. I know I can edit the login page to look how I want it too, but I dont want to have to leave the domain of the blazor wasm for that to do it

What you wish to do is actually avoid redirection to the IdentityServer4 server, but alas, redirection is the heart of the OpenID Connect flow...

I can only think about a solution common before the Blazor team created the current WebAssembly authentication system: Use JWT Token Authentication...

Do the following:

• Create a WebAssembly hosted app.
• Create a Login page, register page, etc.

With WebAssembly hosted app, the front-end (browser) and the backend (server) belong to the same domain. You can add an account controller to the Controllers folder with a Login end point, which will be accessed from the front-end, using HTTP calls, with the users' credentials gathered by your Login page. The code in the Login end point should authenticate the user, perhaps using the Identity system (default), and then creates a JWT Token which is passed to the front-end (Could be stored in the local storage). Now, whenever you want to access a protected web api end point, you add the JWT Token to the HttpClient object's header.

Note: I do not recommend adopting this on account of the time and knowledge it require. Of course, it's feasible, and that's how we used to code before.

I did not have much time to answer your question in detail and in order, so if you have questions, don't hesitate to ask.

Thank you for your response! Maybe I just dont get it then... If I want login to any other site I am never redirected to some other domain to login. Does that mean all those sites dont use OIDC?

If what you're stating is correct, then the answer is yes. The flow of OpenID Connect requires redirection. You can't and you should not authenticate the user on the client (browser). You can redirect him to an identity provider like IdnetityServer4 if you're using OpenID Connect, as for instance, or perform an HTTP call to send the user's credentials to a Web Api end point to authenticate, returning a JWT Token. There are other methods of authenticating the user, none of which takes place on the front-end. As you want your web application as well as the server that serves the application and contains Web Api end points, you should consider my suggestion above. This is a viable solution, mind you, and I did not really meant to deter you from adopting it; the point is that Blazor offers you amazing functionality, well tested and secured which mostly requires you to configure some settings, etc., while implementing it on your own requires some knowledge and time. But of course you can find examples of JWT Token authentication for Blazor.