[Blazor-WASM 3.2 Preview 2] Override default identity UI

[mihaimyh]

When overriding the default identity UI in a Blazor Wasm project the layout of the site is messed up.

To reproduce create a new AspNet hosted wasm project, select Individual User Accounts as authentication option.

In the generated server project right click on Areas > Add > New Scaffolded Item > Identity > Check override all files > Choose ApplicationDbContext as data context class.

At this stage the compilation will fail due to missing using Microsoft.AspNetCore.Identity; statement in RegisterConfirmation.cshtml.cs.

Add the missing statement and run the application; result is below.

How can we override the default identity UI?

[mihaimyh]

After checking it further it seems that another wwwroot folder is being added in the server project after overriding the Identity files.

Removing that folder fixes the issue.

[Lanticee]

Hi
I found server project added another wwwroot after override Identity Scaffold items too. And it works after remove that. Thx a lot.

[danroth27]

I'm able to reproduce this issue after adding the missing using directive to workaround #20016.

The Identity scaffolder adds a wwwroot folder to the Server project with the default set of styles and other assets for the default Identity UI. These styles then override the styles that come from the Client project. In particular, both the Client and Server projects end up with a css/site.css.

It appears the Identity scaffolder has some logic to decide whether to generate a wwwroot folder. For example, in a Blazor Server project a wwwroot folder already exists and content is left untouched.

A couple of options here:

1. Change the name of site.css in the Client project to something else, like app.css, so it doesn't collide with the site.css that gets generated in the server project.
2. Update the ASP.NET Core hosted Blazor WebAssembly to move the static assets from the Client project to the Server project. I tried this out, and the Identity scaffolder then no longer generates a wwwroot folder in the Server project because there already is one. This seems more natural if you want to have a consistent set of styles across your entire ASP.NET Core app.

[mihaimyh]

Hi Dan, 2nd point feels more natural to me also. Thanks for checking this.

[mkArtakMSFT]

We'll rename the site.css in the Blazor project to avoid conflicts.