page components doesn't update after oidc authentication in blazor web app server based

Question

page components doesn't update after oidc authentication in blazor web app server based

Zahra Ghadyani 40

I have a blazor web app (server based) with page components defined parametrically as below:

@page "/System/{iSysnum:int?}"
@page "/System/{iSysnum:int?}"
@implements IDisposable
@rendermode InteractiveServer
@page "/System/{iSysnum:int?}"
...
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]

I have added authentication in program.cs as follows:

builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(options =>
    {
        builder.Configuration.Bind("AzureAdB2C", options);
    });

After successful log in in the web app, the pages /system/1, /system/2, ... become available and I can navigate to any one (/system/n). But when I navigate to a different page (/system/m) , only the heading text is updated but presented data are still from previous system. The system data gets updated when refresh the browser, but it is not the desired behavior...

P.S. The web app did update data for each system when navigating between pages before implementing the B2C authorization.

Deleted

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

1 answer

Your answer

Deleted

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

Answer 1

Bruce (SqlWork.com) 78,316 Volunteer Moderator

when your Blazor app uses Azure Ad to login, the Blazor app redirects to a razor page to authenticate. this unloads the Blazor app. After authentication the razor pages redirects back to the Blazor hosting page which reloads the app. no Blazor state is preserved automatically. There must be a coding error on your part.

maybe your old code did redirects instead of Blazor navigation.

Zahra Ghadyani 40

In original code NavMenue looked like:

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">Title</a>
    </div>
</div>
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="System/1">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> System/1
            </NavLink>
        </div>                
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="System/2">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> System/2
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="System/3">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> System/3
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="System/4">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true">

In this stage, the navigation between systems was loading the full data for each system.

After implementing the authentication, the authorized pages are sandwiched between

<AuthorizeView>

and two Razor components of Routes and RedirectToLogin are added. The Routes looks like this:

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)">
            <NotAuthorized>
                <RedirectToLogin />
            </NotAuthorized>
        </AuthorizeRouteView>
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

and RedirectToLogin looks like:

@inject NavigationManager Navigation

@code {
    protected override void OnInitialized()
    {
        Navigation.NavigateTo($"authentication/login?returnUrl={Uri.EscapeDataString(Navigation.Uri)}", forceLoad: true);
    }
}

Is the RedirectToLogin that screw up the navigation behaviour and how to fix it?

Thanks

Bruce (SqlWork.com) 78,316 Reputation points Volunteer Moderator

2025-06-19T15:40:21.7833333+00:00

Most likely the issue is that a nav to an authorized only page, sets a state value, that is picked up by the other pages. if you login, but do not navigate to an any of the authorized pages does it work as you expected?
Syed Saleem Peera 13,065 Reputation points Microsoft External Staff Volunteer Moderator

2025-06-20T16:30:55.3433333+00:00

Hi Zahra Ghadyani,

Just checking in to see if you had a chance to see the previous answer. Please let me know if it was helpful and don't hesitate to reach out to us if you face any issue.
Zahra Ghadyani 40 Reputation points

2025-06-23T13:33:48.32+00:00
Hi,

I tried to go back to the last version of the project where navigation between pages was working fine (updated page without need to press refresh) and start to add authentication step by step and inspect navigation behavior. I realized that the issue was connected to these lines of code in App.razor:

<HeadOutlet @rendermode="InteractiveServer" /> ... <Routes @rendermode="InteractiveServer" />

the issue is resolved by removing the @rendermode="InteractiveServer". I am not sure why this render mode was causing the issue. I am wondering what is the default render mode when nothing is passed and what is recommended render mode to pass here?
Syed Saleem Peera 13,065 Reputation points Microsoft External Staff Volunteer Moderator

2025-06-24T11:35:46.48+00:00

Hello Zahra Ghadyani,

Yes, the issue was caused by applying @rendermode="InteractiveServer" to the <Routes> and <HeadOutlet> components in your App.razor. These components are part of the core Blazor app infrastructure and should not have a render mode explicitly set, as doing so creates separate interactive circuits. This can disrupt normal navigation and state updates.

When no render mode is specified, these components use the default render mode configured for the app typically InteractiveServer at the root level in a Blazor Server application. The recommended approach is to apply @rendermode only to top level components that are rendered independently, not to components like <Routes> or <HeadOutlet> within App.razor.

Removing the render mode, as you did, is the correct solution and aligns with recommended Blazor practices.
Zahra Ghadyani 40 Reputation points

2025-06-24T13:11:33.64+00:00

Hello Syed Saleem Peera,

Thank you for your reply. I have now removed the @rendermode="InteractiveServer" in App.razor

Unfortunately, I am facing issues that seem to be connected to rendering. The web app loads with an unhandled error. I see these messages in developers tools:

Failed to load resource: the server responded with a status of 404 () --- plotly-latest.min.js:1

Failed to load resource: the server responded with a status of 404 () --- plotly-interop.js:1

Error handling response: TypeError: Cannot set properties of null (setting 'valueAsNumber') at chrome-extension://kpmbpdpbjjadabknommjfphilmecebab/js/popup.js:20:57

It seems .js processes is trying to access elements that are not loaded yet... Do you have any idea what the cause is and how to fix it?

P.S. The web app was working fine after my previous post and I applied minor changes and restart it, and it was working fine. After completely stopping and starting the web app, I faced rendering issues. Unfortunately, undoing of all changes, I can't repeat the same state as before even in incognito...

Share via

page components doesn't update after oidc authentication in blazor web app server based

1 answer

Your answer