How do I control the page to which a user is directed after logging in using AAD B2C in Blazor?

Question

I have a hosted WASM website using Azure's AAD B2C for user authentication and authorization. The root of the website is a simple landing page that presents the user with a button that takes the user to the Authorization page, which is identical to the default one created according to the tutorial at https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/hosted-with-azure-active-directory-b2c?view=aspnetcore-5.0

I would like the user to be redirected to a specific page once they complete the login procedure- not back to the landing page (and not to a page they were on with an [authorize] tag that they weren't authorized to access). I have tried setting returnUrl to the url of the page I want the user to be directed to after login ( Navigation.NavigateTo($"authentication/login?returnUrl=http://localhost:5000/Start"); ), but we are still directed back to the root page.

Answer 1

You should have an Authentication component, which has in it a RemoteAuthenticatorView component, and that has an OnLogInSucceeded parameter which you can use to register a method to be called when the user logs in - in this method you can set the state.ReturnUrl to redirect wherever you like, e.g. Counter as shown below:

Authentication.razor

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" OnLogInSucceeded="LoginSuccessHandler" />

@code{
 [Parameter] public string Action { get; set; }
 [Inject] public NavigationManager NavigationManager { get; set; }

 void LoginSuccessHandler(RemoteAuthenticationState state)
 {
  state.ReturnUrl = "Counter";
 }
}