How to navigate to a blazor component from a razor page in a Blazor server-side app?

Ivan-Mark Debono

I need to navigate from a razor page to a blazor page, so I tried to do:

public class LoginCallbackModel : PageModel
{
    private readonly NavigationManager navigationManager;

    public LoginCallbackModel(
        NavigationManager navigationManager)
    {
        this.navigationManager = navigationManager;
    }

    public async void OnGet()
    {
        if (User.Identity.IsAuthenticated)
        {
            var accessToken = await HttpContext.GetTokenAsync("access_token");
            var idToken = await HttpContext.GetTokenAsync("id_token");
        }

        navigationManager.NavigateTo("Dashboard");
    }
}

But I get this exception:

RemoteNavigationManager' has not been initialized

I also tried:

RedirectToPage("Dashboard");

But this doesn't work either.

I need to use a razor page because I have access to the HttpContext. So how can I navigate to a component from the page?

enet

However there's a step that I might be missing and I will create a separate question. The problem here is how to redirect from a razor page to a blazor page. I've tried different flavors of Redirect but none are working.

Yes, create a separate question. In the meanwhile, here's the answer:

Create a file named Login.cshtml.cs. This file should be called from Blazor (RedirectToLogin.razor).

This is the code of RedirectToLogin.razor

@inject NavigationManager NavigationManager

    @code{
    
        [Parameter]
        public string ReturnUrl { get; set; }
    
        protected override void OnInitialized()
        {
    
            NavigationManager.NavigateTo($"login?redirectUri={ReturnUrl}", forceLoad: true);
    
        }
    
    }

And this is the code of Login.cshtml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.IdentityModel.Tokens;


namespace <namespace of your app>.Pages
{
    public class LoginModel : PageModel
    {
       
        public async Task OnGet(string redirectUri)
        {
            await HttpContext.ChallengeAsync("oidc",
                   new AuthenticationProperties
                      {
                         RedirectUri = redirectUri,
                         IsPersistent = true,
                          ExpiresUtc = DateTimeOffset.UtcNow.AddHours(15)  
                                              // login expiration
                      });

        }
     
    }
}

The code above performs Authorization request to Auth server which return Authorization Code. RedirectUri will contain the url to redirect to when the Authorization request returns. You may set it to "Dashboard", not from ChallengeAsync but from your RedirectToLogin component (RedirectToLogin.razor). That is all...

Once again, the flow is RedirectToLogin (Blazor) => Login.cshtml.cs (cuurent code) => Auth server => Blazor( perhaps, "Dashboard")

By the time you arrive at the "Dashboard", the access token should be stored in your local storage if you've used the code I provided in the first answer. If you ask how then the answer is: this code do the magic:

var token = await HttpContext.GetTokenAsync("access_token");

This code instruct the http context to get the access token in exchange for the Authorization Code. When does it happen ? When your Blazor is accessed 'for the first time'; that is to say, before it is created at all - this is the time when _Host.cshtml is fulfilling its role, which includes a Get operation (mind you it's http request that is handled by a Get method:

public async Task OnGetAsync()
        {
            var token = await HttpContext.GetTokenAsync("access_token");
            var idToken = await HttpContext.GetTokenAsync("id_token");
            AccessToken = token;
            IDToken  = idToken;
        }

It's all in my first answer.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to retrieve the user claims in a Blazor server side app after the user has logged in?

From Dev

How to retrieve the user claims in a Blazor server side app after the user has logged in?

From Dev

Can a Blazor app using server-side functionality be hosted with Firebase?

From Dev

Can a Blazor app using server-side functionality be hosted with Firebase?

From Dev

How to pass value from Child component (RenderFragment) to Parent page in C# Blazor?

From Java

How to Localize validation message (DataAnnotationsValidator) in blazor server side

From Java

How do I access HttpContext in Server-side Blazor?

From Dev

Blazor app doesnt add css isolation scope identifiers to razor class library component elements

From Dev

Blazor app doesnt add css isolation scope identifiers to razor class library component elements

From Dev

Move component's Dependency Injected methods to separate CS library in Blazor Server-Side

From Java

Is there any hot reload for blazor server-side?

From Dev

OIDC authentication in server-side Blazor

From Dev

How to get updated property in singleton from a component in Blazor?

From Java

How can I modify the layout from a blazor page?

From Java

Blazor vs Razor

From Java

Razor components vs Blazor

From Java

Blazor-Component inherits from BaseClass

From Dev

IConfiguration is always NULL .NET CORE in Blazor app / Razor

From Java

How to force Blazor to re-render a component

From Dev

How to navigate to a web page from within a flutter app? (OAuth)

From Dev

Blazor server-side with multiple database based on hostname

From Dev

Blazor server side - Is there any way to get a Cookie value during the initialization?

From Dev

When ASPNETCORE_ENVIRONMENT changed to anything but "Development" - Blazor app doesn't see resources from razor class libraries when debugged in VS

From Dev

cannot convert from method group to eventcallback blazor (Server App) - Sync Fusion Grid

From Java

How to use Bootstrap modal in Blazor client app?

From Java

How can one generate and save a file client side using Blazor?

From Dev

How to pass data in server side rendering to reactjs component from node

From Dev

How to navigate data from page to page?

From Java

How to make two-way binding on Blazor component

Related Related

  1. 1

    How to retrieve the user claims in a Blazor server side app after the user has logged in?

  2. 2

    How to retrieve the user claims in a Blazor server side app after the user has logged in?

  3. 3

    Can a Blazor app using server-side functionality be hosted with Firebase?

  4. 4

    Can a Blazor app using server-side functionality be hosted with Firebase?

  5. 5

    How to pass value from Child component (RenderFragment) to Parent page in C# Blazor?

  6. 6

    How to Localize validation message (DataAnnotationsValidator) in blazor server side

  7. 7

    How do I access HttpContext in Server-side Blazor?

  8. 8

    Blazor app doesnt add css isolation scope identifiers to razor class library component elements

  9. 9

    Blazor app doesnt add css isolation scope identifiers to razor class library component elements

  10. 10

    Move component's Dependency Injected methods to separate CS library in Blazor Server-Side

  11. 11

    Is there any hot reload for blazor server-side?

  12. 12

    OIDC authentication in server-side Blazor

  13. 13

    How to get updated property in singleton from a component in Blazor?

  14. 14

    How can I modify the layout from a blazor page?

  15. 15

    Blazor vs Razor

  16. 16

    Razor components vs Blazor

  17. 17

    Blazor-Component inherits from BaseClass

  18. 18

    IConfiguration is always NULL .NET CORE in Blazor app / Razor

  19. 19

    How to force Blazor to re-render a component

  20. 20

    How to navigate to a web page from within a flutter app? (OAuth)

  21. 21

    Blazor server-side with multiple database based on hostname

  22. 22

    Blazor server side - Is there any way to get a Cookie value during the initialization?

  23. 23

    When ASPNETCORE_ENVIRONMENT changed to anything but "Development" - Blazor app doesn't see resources from razor class libraries when debugged in VS

  24. 24

    cannot convert from method group to eventcallback blazor (Server App) - Sync Fusion Grid

  25. 25

    How to use Bootstrap modal in Blazor client app?

  26. 26

    How can one generate and save a file client side using Blazor?

  27. 27

    How to pass data in server side rendering to reactjs component from node

  28. 28

    How to navigate data from page to page?

  29. 29

    How to make two-way binding on Blazor component

HotTag

Archive