How to Decouple Front-End from Back-End with Secure APIs for User Management in Blazor Web App (.NET 8)

Question

How to Decouple Front-End from Back-End with Secure APIs for User Management in Blazor Web App (.NET 8)

Laurent Guigon 311

Hello,

I'm used to creating Blazor Web App projects in .NET 8 with "individual accounts" and interactive render mode set to Auto, with per-page interactivity. The advantage of this setup is that all the account management mechanics are scaffolded, requiring minimal adjustments to meet specific needs.

However, I now need to decouple the front-end from the back-end and use secure APIs, with one of these APIs dedicated to everything handled by Microsoft.AspNetCore.Identity. This API should ensure security across the application—offering all available services (scaffolding, etc.) when integrating account management into the Web App—and also secure other APIs (microservices).

Note: Initially, a single API will serve as the presentation layer for multiple services to avoid dealing with API gateways, as my team is not yet fully familiar with microservices architecture.

My issue is that I have never worked this way before and am not sure how to proceed. I have found many examples on YouTube, but none that closely match what I’m aiming to achieve. The MSDN documentation also hasn’t provided a concrete example for this setup.

Could you guide me on how to approach this? Ideally, I would like my "Users" project to be general enough to be reused in other applications, while also offering all the services, like page scaffolding, similar to what’s available when creating a web app with user accounts.

Thank you in advance.

AgaveJoe 31,706 Reputation points

2024-10-31T15:31:51.84+00:00

The "individual account" template uses Razor Pages which is a server side application and technically decoupled from the front-end Blazor application that runs in the browser. The connection between the two applications is they share a domain. This allows the authentication cookie to work.

I think you want a separate Identity server that handles different types of clients. Logins for user-agents (browsers), authentication for code clients, and authorization for APIs.

Read the Identity Server documentation to see if that's what you're looking for. Unfortunately the new software is no longer open.

https://identityserver4.readthedocs.io/en/latest/

https://duendesoftware.com/

Other options are Azure

Authentication and authorization in Azure App Service and Azure Functions
Bruce (SqlWork.com) 85,416 Reputation points

2024-11-01T01:26:23.4833333+00:00

as stated, individual accounts only supports frontend authentication via cookies. If the front end server is trusted it can call protected api services, typically via a service account. It can pass the user name as part of the payload, but the api must trust the frontend to verify.

In addition individual accounts is not designed to be a single sign on solution.

Oauth is the typical solution for api and sso.
Anonymous

2024-11-01T02:33:10.2333333+00:00

Hi Laurent, according to your description, you are about to migrate to "microservices architecture", we usually use SSO structure in this scenario as microservices architecture always means distributed hosting. It will bring trouble for ensuring consistency if we still use the cookie + session mode and that's why we usually use OAuth protocol. It requires an external identity platform to manage users and their sign-in state, as well as the credential (known as access token) for accessing APIs in different servers.

You also had a description "The advantage of this setup is that all the account management mechanics are scaffolded" so that please allow me to share Azure AD/Microsoft Entra ID with you. This is the identity cloud platform from Microsoft, all user management task are on the cloud instead of local database. If you are creating a Blazor server app in .Net 6/7, you can choose "Microsoft Identity Platform" instead of "Individual Account" to scaffold the codes for you. This option hasn't ready for .Net 8 blazor web app in VS 2022. However, if you are planning to work on .Net 8 Blazor web assembly app (microservices architecture always use a separate single-page application), VS 2022 also has this option.
Laurent Guigon 311 Reputation points

2024-11-12T16:44:47.56+00:00

Thank you both for your responses. Unfortunately, I can't find what I'm looking for.

What I'm trying to do is what can be seen in this video: https://www.youtube.com/watch?v=tNzSuwV62Lw&list=PLF1jhYUTnHo4xzSbrznUEAsIl7upw3X7K&index=2.

But I don't want a cookie; I want a JWT. Also, I want my system to protect my API(s) and require authentication to access the API functions.

I've already set up the context with Blazor Web App 8 in Auto Render Mode (Server + WASM).

If I don't have a dedicated API for managing user accounts, I could consider creating a front-end WebApp project and implement the user account logic there, but that would mean I'd have to redo everything if I change my front-end... So, decoupling allows for reuse...

As for Duende: paid = NO! Azure: my app must be able to run on a simple PC with IIS... Due to budget constraints, I cannot rely on Azure, because more money = more means to use Azure...

If you have other ideas/proposals that could match my needs, or any information that could help me move forward, thank you in advance...

P.S.: I've heard about Blazor unify (something like that) which should be released with .Net Core 9, which would allow creating Blazor Apps without having to create both app + client projects.
Laurent Guigon 311 Reputation points

2024-11-12T16:45:27.9833333+00:00

Thank you both for your responses. Unfortunately, I can't find what I'm looking for.

What I'm trying to do is what can be seen in this video: https://www.youtube.com/watch?v=tNzSuwV62Lw&list=PLF1jhYUTnHo4xzSbrznUEAsIl7upw3X7K&index=2.

But I don't want a cookie; I want a JWT. Also, I want my system to protect my API(s) and require authentication to access the API functions.

I've already set up the context with Blazor Web App 8 in Auto Render Mode (Server + WASM).

If I don't have a dedicated API for managing user accounts, I could consider creating a front-end WebApp project and implement the user account logic there, but that would mean I'd have to redo everything if I change my front-end... So, decoupling allows for reuse...

As for Duende: paid = NO! Azure: my app must be able to run on a simple PC with IIS... Due to budget constraints, I cannot rely on Azure, because more money = more means to use Azure...

If you have other ideas/proposals that could match my needs, or any information that could help me move forward, thank you in advance...

P.S.: I've heard about Blazor unify (something like that) which should be released with .Net Core 9, which would allow creating Blazor Apps without having to create both app + client projects.
Bruce (SqlWork.com) 85,416 Reputation points

2024-11-12T19:05:54.14+00:00

the video is using individual accounts with razor pages. this uses cookie authentication.

the blazor context user is just the user principle defined by the hosting server. the user principal is defined by the HttpContext. if blazor server its passed to the app via the httpcontext, if WASM its passed as pre-render state.

to use JWT tokens with individual accounts you will need to add a web api to generate tokens. also there are service account tokens, and user tokens. service account use a clientid and secret to get a token. users use a clientid, user name and password to get the token.

to do what you want you will need to add login site. this site handles registration, acct management, etc. it also supports creating a jwt token. you will need to code a way for the blazor app to call the login site to get the token. it should then update the authentication state (use custom state). also many of the custom jwt samples skip validating the signature. be sure you do not skip this step in api server accepting the jwt token.

if you will have a regular website, then you will need to implement custom authentication that calls the login sever token api to authenticate, then implement some sort of cookie authentication.

note: the out of box solution is to use an oauth server instead of individual accounts. the oauth server has the login, and account management features. while oauth servers are complex, you can model your custom login site after oauth if you want. be sure you understand security exploits before coding your own single sign on server.

1 answer

Your answer

AgaveJoe 31,706 Reputation points

2024-10-31T15:31:51.84+00:00

The "individual account" template uses Razor Pages which is a server side application and technically decoupled from the front-end Blazor application that runs in the browser. The connection between the two applications is they share a domain. This allows the authentication cookie to work.

I think you want a separate Identity server that handles different types of clients. Logins for user-agents (browsers), authentication for code clients, and authorization for APIs.

Read the Identity Server documentation to see if that's what you're looking for. Unfortunately the new software is no longer open.

https://identityserver4.readthedocs.io/en/latest/

https://duendesoftware.com/

Other options are Azure

Authentication and authorization in Azure App Service and Azure Functions
Bruce (SqlWork.com) 85,416 Reputation points

2024-11-01T01:26:23.4833333+00:00

as stated, individual accounts only supports frontend authentication via cookies. If the front end server is trusted it can call protected api services, typically via a service account. It can pass the user name as part of the payload, but the api must trust the frontend to verify.

In addition individual accounts is not designed to be a single sign on solution.

Oauth is the typical solution for api and sso.
Anonymous

2024-11-01T02:33:10.2333333+00:00

Hi Laurent, according to your description, you are about to migrate to "microservices architecture", we usually use SSO structure in this scenario as microservices architecture always means distributed hosting. It will bring trouble for ensuring consistency if we still use the cookie + session mode and that's why we usually use OAuth protocol. It requires an external identity platform to manage users and their sign-in state, as well as the credential (known as access token) for accessing APIs in different servers.

You also had a description "The advantage of this setup is that all the account management mechanics are scaffolded" so that please allow me to share Azure AD/Microsoft Entra ID with you. This is the identity cloud platform from Microsoft, all user management task are on the cloud instead of local database. If you are creating a Blazor server app in .Net 6/7, you can choose "Microsoft Identity Platform" instead of "Individual Account" to scaffold the codes for you. This option hasn't ready for .Net 8 blazor web app in VS 2022. However, if you are planning to work on .Net 8 Blazor web assembly app (microservices architecture always use a separate single-page application), VS 2022 also has this option.
Laurent Guigon 311 Reputation points

2024-11-12T16:44:47.56+00:00

Thank you both for your responses. Unfortunately, I can't find what I'm looking for.

What I'm trying to do is what can be seen in this video: https://www.youtube.com/watch?v=tNzSuwV62Lw&list=PLF1jhYUTnHo4xzSbrznUEAsIl7upw3X7K&index=2.

But I don't want a cookie; I want a JWT. Also, I want my system to protect my API(s) and require authentication to access the API functions.

I've already set up the context with Blazor Web App 8 in Auto Render Mode (Server + WASM).

If I don't have a dedicated API for managing user accounts, I could consider creating a front-end WebApp project and implement the user account logic there, but that would mean I'd have to redo everything if I change my front-end... So, decoupling allows for reuse...

As for Duende: paid = NO! Azure: my app must be able to run on a simple PC with IIS... Due to budget constraints, I cannot rely on Azure, because more money = more means to use Azure...

If you have other ideas/proposals that could match my needs, or any information that could help me move forward, thank you in advance...

P.S.: I've heard about Blazor unify (something like that) which should be released with .Net Core 9, which would allow creating Blazor Apps without having to create both app + client projects.
Laurent Guigon 311 Reputation points

2024-11-12T16:45:27.9833333+00:00

Thank you both for your responses. Unfortunately, I can't find what I'm looking for.

What I'm trying to do is what can be seen in this video: https://www.youtube.com/watch?v=tNzSuwV62Lw&list=PLF1jhYUTnHo4xzSbrznUEAsIl7upw3X7K&index=2.

But I don't want a cookie; I want a JWT. Also, I want my system to protect my API(s) and require authentication to access the API functions.

I've already set up the context with Blazor Web App 8 in Auto Render Mode (Server + WASM).

If I don't have a dedicated API for managing user accounts, I could consider creating a front-end WebApp project and implement the user account logic there, but that would mean I'd have to redo everything if I change my front-end... So, decoupling allows for reuse...

As for Duende: paid = NO! Azure: my app must be able to run on a simple PC with IIS... Due to budget constraints, I cannot rely on Azure, because more money = more means to use Azure...

If you have other ideas/proposals that could match my needs, or any information that could help me move forward, thank you in advance...

P.S.: I've heard about Blazor unify (something like that) which should be released with .Net Core 9, which would allow creating Blazor Apps without having to create both app + client projects.
Bruce (SqlWork.com) 85,416 Reputation points

2024-11-12T19:05:54.14+00:00

the video is using individual accounts with razor pages. this uses cookie authentication.

the blazor context user is just the user principle defined by the hosting server. the user principal is defined by the HttpContext. if blazor server its passed to the app via the httpcontext, if WASM its passed as pre-render state.

to use JWT tokens with individual accounts you will need to add a web api to generate tokens. also there are service account tokens, and user tokens. service account use a clientid and secret to get a token. users use a clientid, user name and password to get the token.

to do what you want you will need to add login site. this site handles registration, acct management, etc. it also supports creating a jwt token. you will need to code a way for the blazor app to call the login site to get the token. it should then update the authentication state (use custom state). also many of the custom jwt samples skip validating the signature. be sure you do not skip this step in api server accepting the jwt token.

if you will have a regular website, then you will need to implement custom authentication that calls the login sever token api to authenticate, then implement some sort of cookie authentication.

note: the out of box solution is to use an oauth server instead of individual accounts. the oauth server has the login, and account management features. while oauth servers are complex, you can model your custom login site after oauth if you want. be sure you understand security exploits before coding your own single sign on server.

Answer 1

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

4 deleted comments

Comments have been turned off. Learn more