Auth pages with auto render mode in blazor

Question

Auth pages with auto render mode in blazor

Mahdi Elahi 31

I want to build a Blazor 8 or 9 project using Interactive Auto .
But I want to implement authentication using JWT or identity , so that whenever I want, I can show the login page inside a modal or elsewhere.( without refresh page or ... )

Because I've tested it before — when using a modal and trying to use SignInManager.SignIn inside the login component, it throws a 'headers are read-only, response has already started ' error and doesn't let it work.

I've seen many websites that show auth modals anywhere without refreshing the page, and it works fine.
how to do it ?

AgaveJoe 30,036 Reputation points

2025-04-13T23:37:04.8166667+00:00
The core issue with using SignInManager.SignIn directly in Blazor is that it relies on setting cookies within the HTTP context. Blazor, especially client-side Blazor WebAssembly, operates in the browser and doesn't have the same direct access or context as a traditional server-rendered ASP.NET Core application where cookies are naturally handled.

Regarding modals, it's important to clarify that they are purely a front-end UI component for displaying content within the existing page. They are unrelated to the underlying authentication mechanisms.

JSON Web Tokens (JWTs) are indeed commonly employed for authorization in stateless systems, particularly distributed architectures, by carrying claims about the user's identity and permissions.

Therefore, while a completely seamless authentication process without any server-side interaction is not feasible in Blazor, you can significantly reduce the perceived page refresh or redirect. A common approach using a JWT involves:

Storing an authentication token (like a JWT) in the browser's local storage after the initial successful login.

Implementing a custom AuthenticationStateProvider. This service, central to Blazor's authentication system, can:

Read the stored token upon application startup or during navigation between pages.

Asynchronously validate this token by making a request to your backend Web API.

Based on the validation result, update the application's AuthenticationState, informing Blazor whether the user is authenticated and what their claims are.

This strategy allows your Blazor application to check and potentially refresh authentication in the background when navigating, minimizing the disruptive full page loads associated with traditional redirects. However, it still necessitates server-side communication for token validation. https://learn.microsoft.com/en-us/aspnet/core/blazor/security/?view=aspnetcore-9.0&tabs=visual-studio#authenticationstateprovider-service
Jones 0 Reputation points

2025-04-14T06:02:38.17+00:00

can you show sample code
me too have this problem

i want show login page is modal
or use interactive server mode in login page
AgaveJoe 30,036 Reputation points

2025-04-14T09:46:08.6066667+00:00

or use interactive server mode in login page

The ASP.NET Core SDK provides a convenient starting point for SSR Blazor development. It offers a template that contains all the essential code; simply generate a new project using this template and specify "Individual Account" as your authentication choice.

https://learn.microsoft.com/en-us/aspnet/core/blazor/security/?view=aspnetcore-9.0&tabs=visual-studio#project-template

i want show login page is modal

As explained above a modal is purely a front-end UI component for displaying content within the existing page. They are unrelated to the underlying authentication mechanisms.
Jones 0 Reputation points

2025-04-14T12:13:03.9466667+00:00

you the modal is not good for this ?

can i use jwt token for auth that dont need referesh ?

1 answer

Your answer

Jones 0 Reputation points

2025-04-14T06:02:38.17+00:00

can you show sample code
me too have this problem

i want show login page is modal
or use interactive server mode in login page
AgaveJoe 30,036 Reputation points

2025-04-14T09:46:08.6066667+00:00

or use interactive server mode in login page

The ASP.NET Core SDK provides a convenient starting point for SSR Blazor development. It offers a template that contains all the essential code; simply generate a new project using this template and specify "Individual Account" as your authentication choice.

https://learn.microsoft.com/en-us/aspnet/core/blazor/security/?view=aspnetcore-9.0&tabs=visual-studio#project-template

i want show login page is modal

As explained above a modal is purely a front-end UI component for displaying content within the existing page. They are unrelated to the underlying authentication mechanisms.
Jones 0 Reputation points

2025-04-14T12:13:03.9466667+00:00

you the modal is not good for this ?

can i use jwt token for auth that dont need referesh ?

Answer 1

interactive auto is a server static render pre-render with a WASM client. if login is to be handled by the WASM client without a redirect, then you need to write custom authentication.

the build-in authentication uses razor pages and cookie authentication. the Blazor app redirects to the razor pages to login and set the cookie. the SSR renders to the client via pre-render persist state the user principal:

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/prerender?view=aspnetcore-9.0

the other option with WASM is oauth and msal which requires requires the Blazor code redirect to the oauth server to get the id token.

if you are using individual accounts, you can write custom authenication. your SSR server will need to supply a webapi to login via a passed user name & password, and return the user principal in some format. if the WASM will make other api calls, then a JWT token would be handy, but you could use a custom header.

the Blazor login page would call the webapi to login, then call the custom authentication state provider and pass the new user principal information.

note: Blazor WASM does not support SigninManager. it needs to call a webapi. If you switched to Blazor Server you could use it.

Share via

Auth pages with auto render mode in blazor

1 answer

Your answer