6

I am trying to create a new application in Blazor and am working on authentication. I am using a JWT tokens that is stored in Local storage. When the application loads i need to check if there is a token in the storage. If so, add it to the HTTP headers for all API requests, if not then redirect to the login page before the page loads....... where do i do that? There are multiple pages that need this check so this needs to be done in a single location to cover all. Should this be done in the Startup?

Searching did not provide a solution and since i am new to Blazor finding the right search terms is a bit difficult :)

2
  • 1
    I guess do you are mixing 2 questions in one: * How to get data from local storage. * How to redirect to login page. Try to split your question into atomic issues. May be this article can helps: How to create a Minimal, Complete, and Verifiable example Mar 28, 2019 at 16:29
  • 1
    No, the local storage part is fine, just the forced routing when not logged is the question. Mar 29, 2019 at 7:39

4 Answers 4

14

Create a component and name it RedirectToLogin.razor:

@inject NavigationManager Navigation
@code {
    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var authenticationState = await AuthenticationStateTask;

        if (authenticationState?.User?.Identity is null || !authenticationState.User.Identity.IsAuthenticated)
        {
            var returnUrl = Navigation.ToBaseRelativePath(Navigation.Uri);

            if (string.IsNullOrWhiteSpace(returnUrl))
                Navigation.NavigateTo("YourLoginPath", true);
            else
                Navigation.NavigateTo($"{YourLoginPath}?returnUrl={returnUrl}", true);
        }
    }
}

Modify App.razor:

<Found Context="routeData">
    <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(HostLayout)">
        <NotAuthorized>
            <RedirectToLogin></RedirectToLogin>
        </NotAuthorized>
    </AuthorizeRouteView>
</Found>

Credits go to: this article

1
  • 1
    Since we're overriding default OnInitializedAsync method, do we need to call base.OnInitialized(); in it? Aug 9, 2021 at 23:16
5

What I did was to write my own http service to do this.

It is called Backend and has a property for the token like this:

    public string ApiToken
    {
        get
        {
            if (!string.IsNullOrEmpty(apitoken))
                return apitoken;

            apitoken = Browser.ReadStorage("apitoken");
            return apitoken;
        }

        set
        {
            Browser.WriteStorage("apitoken", value);
        }
    }

And then in this class implement all the methods that the http class has, while injecting your token. for instance:

    public async Task<T> GetJsonAsync<T>(string uri)
    {
            this.InProgress = true;
            var result = await http.GetJsonAsync<ServerResult<T>>(uri, this.ApiToken);
            this.InProgress = false;

            if (!result.Success)
            {
                BlazorExtensions.Browser.Alert($"Error: {result.ErrorMessage}");
                return default(T);
            }

            return result.ValueObject;

    }

And everywhere use the backend service to do your requests. Also handy for your api url.

EDIT For the redirection part: For brevity I left out this part, but this is the full method:

    public async Task<T> GetJsonAsync<T>(string uri)
    {
        try
        {
            this.InProgress = true;
            var result = await http.GetJsonAsync<ServerResult<T>>(uri, this.ApiToken);
            this.InProgress = false;

            if (!result.Success)
            {
                BlazorExtensions.Browser.Alert($"Error: {result.ErrorMessage}");
                return default(T);
            }

            return result.ValueObject;
        }
        catch (UnauthorizedAccessException)
        {
            this.InProgress = false;
            uriHelper.NavigateTo("/bzr/Logon");
            return default(T);
        }
        catch (Exception e)
        {
            BlazorExtensions.Browser.Alert($"Fout bij http fetch: {e.Message}");
            this.InProgress = false;
            return default(T);
        }
    }

The uriHelper is simply injected in the constructor:

    public IUriHelper uriHelper { get; private set; }

    public Backend(HttpClient httpInstance, IUriHelper uriHelper)
    {
        http = httpInstance;
        this.uriHelper = uriHelper;

Guess that's what you need?

3
  • 1
    Thanks, but the Token and storage were not the question :) I did something similar by adding a default request header to the HttpClient: HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer { loginResult.Token }"); Mar 29, 2019 at 7:48
  • 1
    Ah right.. I did solve that.. one moment, I'll edit my answer.
    – Flores
    Mar 29, 2019 at 11:16
  • 1
    Ah thanks. I will add something like this to my solution also. A global error catch for all requests would be great, maybe later. Mar 29, 2019 at 13:30
2

What do you mean Startup ? The Startup class, right ?

Right now the Razor Components framework does not have application event cycles. Be patient...it is coming... Meanwhile, for learning's sake use Components event cycles. Generally, you should store yourJWT in the local storage, including data about the user, whether he has been authenticated and such like, and a service which retrieves this data finding out if the user is authenticated. You can call this service whenever authentication (or authorization) is necessary.

Incidentally, you don't mean to stop the process of ... by saying "before the page loads". You just mean that you don't want the "New Profile Page", as for instance, in online dating website, to be displayed, if the user is not authenticated, right ? Well, in that case, call the authenticating local service (which retrieves data from the local storage), from the page (Component) OnInit or OnInitAsync methods.

Hope this helps...

1
  • 2
    Yes, a component base class is the only way to protect routes at the moment. Mar 29, 2019 at 7:50
1

A solution (for now, not the best i think?) is to create a base class for all component pages to inherit from and override the OnInit method to do the checks and redirects. This also works when navigating to a link after the application has loaded.

A check in the app.cshtml component only works for the initial startup, not when navigating within the application. This would be nice for other checks, but not to protect routes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.