Receiving an error integrating Blazor client with Keycloak

Question

I am having issues with Keycloak 20.0.1 and dotnet 7 Blazor Webassembly. I am sure it is just a configuration, but I am having trouble finding specific documentation and all of the errors seem to be handled on the blazor/wasm side, removing any actionable detail.

I am able to get the client to redirect to the Keycloak server and get redirected back to the client, but I get this message on the client:

There was an error trying to log you in: 'There was an error signing in.'

configuration on the client looks like:

appsettings.json

{
  "oidc": {
    "Authority": "http://localhost:8080/realms/main_app",
    "ClientId": "main_app",
    "ResponseType": "code",
    "DetailedErrors": true,
    "DefaultScopes": [
      "openid",
      "profile"
    ],
    "PostLogoutRedirectUri": "https://localhost:7192/authentication/logout-callback",
    "RedirectUri": "https://localhost:7192/authentication/login-callback"
  }
}

program.cs

builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("oidc", options.ProviderOptions);
});

The Keycloak server is running on my local in a docker, and the Blazor app is a hosted Webassembly app.

A similar question was asked here as well: Blazor Wasm standalone authentication with KeyCloak But there are no answers to date.

Any thoughts would be appreciated!

Answer 1

I was able to get everything working after finding Keycloak.AuthServices.Authentication, which is a server-side library that helps integrate with Keycloak. The author has a full example for Blazor WASM DotNet 6 app, which adapted quite well for DotNet 7. If you look for the NuGet package you will find the authors GitHub repo with demo projects. I hope this helps anyone stumbling into this.