Authentication UI workflow in Blazor : Redirecting using code

Blazor preview build : 3.0.0-preview5-19227-01

Blazor is now in preview and not experimental anymore. With each preview build there is a lot of breaking changes. The above code will work with the latest preivew build mentioned above.

Sometimes you have to redirect using code in your client side application and one common use case is redirect users to the login page when not authenticated. Blazor is an expreimental framework letting developers write C# on the client side making use of webassenly.To keep the code in a centralised location we will be writing the logic to do the redirection in MainLayout.cshtml.

Below is the full code for MainLayout.cshtml. There is only 2 lines of code that is of intereset to us here.In Line 1 we are injecting the IUriHelper and in Line 17 we are using the NavigateTo method to redirect to the loging page when the user is not authenticated.

@inject Microsoft.AspNetCore.Components.IUriHelper UriHelper
@inherits LayoutComponentBase

    <div>
        @Body
    </div>

@functions
{
    // TODO : Setting as not authenticated to false for demo 
    private bool IsAuthenticated = false;

    protected override void OnInit()
    {
        if (!IsAuthenticated)
        {
            UriHelper.NavigateTo(@"\login");
        }
    }
}

Additional resources

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.