how to jwt authentication blazor server without microsoft identity? - authentication

Question

i'm using blazor server ( not use webapi, httpclient and ...)
and i want to use jwt for authentication
Where should I store token? localStorage or cookie?
how to send jwt to server all of the request?
I had to use AuthenticationStateProvider?
I used httpContext but I got an error unless it fit into the cshtml
file I also used localstorage inside AuthenticationStateProvider but
just got an error
also , which one is better? blazor server (one project) or
blazor server with webapi?(two project, blazor server and api)

Answer 1

which one is better? blazor server (one project) or blazor server with webapi?(two project, blazor server and api)
There is no such thing better. It all depends on your requirements. Do you need or do you wish to use a Wep Api ? If you're not going to use a Web Api, don't use a Jwt authentication. A Jwt access token is used when you want to access A Web Api endpoints. You can use the Identity UI system instead, to authenticate your users. Which you're probably familiar with, and can be set up and run in a little while.
Where should I store token? localStorage or cookie?
You may use the JavaScript local storage to store and retrieve Jwt tokens.
how to send jwt to server all of the request
You mean to a server Wep Api endpoint, right ?
Retrieve the Jwt token from your local storage ( provided that your app has
already authenticated the user, and stored the token in the local storage)
as for instance:
#code {
List<Hotel> hotels;
protected override async Task OnInitializedAsync()
{
// Read the token from the store
var token = await TokenProvider.GetTokenAsync();
var httpClient = clientFactory.CreateClient();
httpClient.BaseAddress = new Uri("https://localhost:44381/");
// Perform HTTP call to your Web Api end point Hotels
// Deserialized the response into a list of hotel objects.
hotels = await httpClient.GetJsonAsync<List<Hotel>>("api/hotels",
new AuthenticationHeaderValue("Bearer", token));
}
}
Note how I pass the Jwt token to the Wep Api endpoint.
I had to use AuthenticationStateProvider?
Do you ask whether to use the AuthenticationStateProvider ?
Ordinarily, you don't use the AuthenticationStateProvider. Its subclass, ServerAuthenticationStateProvider, is automatically added to the DI container, so you can inject it to your components and use it. In Client side Blazor you'll have to create a custom AuthenticationStateProvider.
However, you'll have to use components such as AuthorizeRouteView and AuthorizeView, which need the AuthenticationState object to function, and it is provided by the AuthenticationStateProvider.
See here, in my answer, how I use them...
Update:
I mean, which is better? blazor server with signalr or blazor with webapi?
Blazor Server App is SignalR-based SPA, meaning that the communication between the client-side of the application (browser) and the server-side of the application (server) is implemented by SignalR. Generally speaking, SignalR, in the current context, is a means of transportation and communication between the two parts which constitutes A Blazor Server App, mentioned above.
A web Api, however, in the current context, is an API over the web which can be accessed using HTTP calls. More specifically, it is an application you add to your project with controllers that expose end points you can call using HttpClient service.
As you can see, it's not SignalR versus Web Api, as this terms refer to two completely different concepts. You may ask about the difference between SignalR versus HTTP protocols...
I'll ask the correct question instead of your question: How should I access data with my server-side Blazor app and what should I use services or Web Api ? I've answered this question at length in my other answers. You can also consult the docs.
Note that you should create a Web Api project of you wish to use it from your Blazor Server App.
and how authorize blazor with signalr?
I guess that by now you know the answer. Server Blazor App is SignalR-based. You don't do anything in that regard. Just create such type of project, and start coding, learning Blazor component model, which is the heart of Blazor.
Wrapping up, I just want to mention that Blazor client-side or Blazor WebAssembly Apps, do not employ SignalR, but rather WebAssembly, in case your confusion comes from here.