Add template for Blazor Web App with Web Api backend

[MarvinKlein1508]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

A common scenario for web applications is to use a Web API as the backend, which is then consumed by various projects. For instance, in my case, I am using a Blazor Server app for the frontend, and I want all data access to be handled exclusively through the Web API.

To implement this, I can simply add a Web API project to my solution and inject an HttpClient into my pages. However, even this straightforward approach requires some additional configuration, such as setting the Web API URL in appsettings, assigning it to the HttpClient, and creating a startup profile to launch both the Blazor app and the Web API simultaneously.

The situation becomes even more complex when authorization is introduced. Naturally, you wouldn't want every endpoint in the Web API to be accessible by unauthorized users. However, integrating both projects with proper authorization can quickly become a challenging task. Right now you can add Identity to all Blazor rendering modes but this always results in the data access being bundled with the Blazor app.

I believe the ASP.NET Core platform could greatly benefit from a dedicated template for this setup, as many small businesses rely on this approach.

The template would allow small businesses to start their projects even quicker.

Describe the solution you'd like

Basically what I want to achieve is:

• Web API with Identity support which is being used to authorize my Blazor apps (Perhaps even with JWTs)
• Blazor Web App (Server, SSR or WASM) to consume the API and use the Identity endpoints of the Web Api for authorization

Additional context

No response

[vertonghenb]

Also consider if it's hosted within the api as a fallback so consider

app.MapFallbackToFile("index.html");

[guardrex]

The documentation already addresses this with coverage and sample apps.

For Blazor WASM (web API+Identity) ...

• Article: https://learn.microsoft.com/aspnet/core/blazor/call-web-api
• WASM+Identity article: https://learn.microsoft.com/aspnet/core/blazor/security/webassembly/standalone-with-identity/
• WASM+Identity sample: https://github.com/dotnet/blazor-samples/tree/main/9.0/BlazorWebAssemblyStandaloneWithIdentity

For BWAs, there's the OIDC or Entra articles and their sample apps, which have web API coverage+examples for the classic weather data scenario:

• OIDC
  • Article: https://learn.microsoft.com/aspnet/core/blazor/security/blazor-web-app-with-oidc
  • Sample (non-BFF pattern): https://github.com/dotnet/blazor-samples/tree/main/9.0/BlazorWebAppOidc
  • Sample (BFF pattern): https://github.com/dotnet/blazor-samples/tree/main/9.0/BlazorWebAppOidcBff
• Entra
  • Article: https://learn.microsoft.com/aspnet/core/blazor/security/blazor-web-app-with-entra
  • Sample: https://github.com/dotnet/blazor-samples/tree/main/9.0/BlazorWebAppEntra

For BWAs, we also have coverage and a pair of sample apps for various web API scenarios ...

• Article (same article covers both WASM and BWAs): https://learn.microsoft.com/aspnet/core/blazor/call-web-api
• Sample 1: https://github.com/dotnet/blazor-samples/tree/main/9.0/BlazorWebAppCallWebApi
• Sample 2: https://github.com/dotnet/blazor-samples/tree/main/9.0/BlazorWebAppCallWebApi_Weather

We don't currently have Identity-enabled samples for the last two. I could enable Identity in them or create an additional pair of samples based on them with Identity.

@MarvinKlein1508 ... I'm not suggesting that your request isn't taken up for a new project template. I'm merely stating what we have in samples thus far and how a couple of additional samples might further help devs get up and running quickly with web API+Identity. I'll be 👂 for @danroth27 and the PU engineers to advise if they'd like me to follow-up on that last idea ☝ in 25Q1.

[MarvinKlein1508]

Hi @guardrex

thank you for your reply!

Yes I have seen a lot of those documentations over the last few years. I'm struggling a lot with this topic since .NET 3.1. But I must admit that those articles haven't really helped me.

I try to explain my difficulties as good as I can. When I create a new Blazor Web App I can choose Individual Accounts for authentification which will give me built in Identity support. When I do this I have all the connection to the database directly within my Blazor project.

When I create a new Web Api I can choose between Microsoft identity platform and Windows but both are completely different from the implementation of Identity in blazor. So I'm wondering can I even use default Identity for my web api?

My next issue is that I live in Germany. Many companies here do not trust any cloud services so they are hosting their own Active Directory within their company network on a local Windows Server installation. To implement this stuff is pretty difficult. I've managed to do it without Identity in this project here: https://github.com/MarvinKlein1508/BlazorForms/blob/master/BlazorForms/Components/Pages/Account/Login.cshtml.cs

Basically any guide about Web Apis in C# suggest to use JWT for authentification. So my next idea was to create a JWT from my API and use it within my Blazor app. But this seems to be a challenging task.

• How should I store my JWT?
• How should I use the JWT in my blazor app?
• What happens when it expires?
• What happens when user permissions have been changed?
• Same questions also apply to the refresh token

Is it even recommended to use JWT for authentification in Blazor?

As you can see there are already a lot of challenging task which every developer is handling differently. In my case it gets even more complex because I need to support both local LDAP and individual accounts at the same time.

So when I use the built in Individual Accounts for Blazor Web Apps, this stuff needs to be ported over to the Web API somehow. I think the ASP.NET Core project can really benefit from a combined project template. Authentification is one of the hardest topic about ASP.NET and I believe that many small businesses can take advantage of such a template. Because of those difficulties I (and others) often end up creating their own authentification logic (as you can see in my project). And let's be honest most of us aren't security experts at all and we can easily mess things up here.

Blazor would be so much more attractive for small and medium sized companies if this functionaltiy would be there just out of the box.

But I would love to hear what @danroth27 is thinking about this.

[javiercn]

@MarvinKlein1508 thanks for contacting us.

We believe this is a dupe of #55307

[MarvinKlein1508]

@javiercn I've taken a look on the other issue as well. I believe the other issue is about a template to use an API in general.

This issue here aims to move all data access to the API layer of the project. Especially the authetification part which is only mentioned in pne small sentence within the other ticket.

Are you able to provide some information about my different question from my earlier post?

Thanks and happy holidays! :)