Blazor Webassembly Custom Authentication [Blazor Tutorial C# - Part 12]

Blazor Tutorial C# - Part 12 is a tutorial video which explains everything about Blazor WebAssembly Authentication and Authorization [Blazor Auth]. In this video, we create a custom blazor authentication state provider for implementing Blazor WASM Custom Authentication. The blazor webassmebly custom authentication state provider will be inherited from Blazor's Authentication State Provider.

.Net Blazor Tutorial Playlist link:

Blazor WebAssembly client application will send the authentication request to the server side API [Blazor WASM Authentication]. Then the API will generate a JWT Token and return the token, if the authentication got succeeded. Using the JWT Token [Blazor WebAssembly JWT Token], we'll the authorize each API request till the token expiry is reached.

AuthenticationStateProvider is the underlying service used by the Blazor AuthorizeView component and CascadingAuthenticationState component to get the authentication state.

You don't typically use AuthenticationStateProvider directly. The main drawback to using AuthenticationStateProvider directly is that the component isn't notified automatically if the underlying authentication state data changes.

The AuthenticationStateProvider service can provide the current user's ClaimsPrincipal data

If authentication state data is required for procedural logic, such as when performing an action triggered by the user, obtain the authentication state data by defining a cascading parameter of type Task of AuthenticationState.

If user.Identity.IsAuthenticated is true, claims can be enumerated and membership in roles evaluated.

AuthorizeRouteView Class combines the behaviors of Blazor AuthorizeView and Blazor RouteView, so that it displays the page matching the specified route but only if the user is authorized to see it.

The AuthorizeView component selectively displays UI content depending on whether the user is authorized. This approach is useful when you only need to display data for the user and don't need to use the user's identity in procedural logic.

The content of Authorized and NotAuthorized tags can include arbitrary items, such as other interactive components. A default event handler for an authorized element, such as the SecureMethod method for the button (Display Greeting Button) element in the video example, can only be invoked by an authorized user.

The AuthorizeView component supports role-based or policy-based (blazor authorization policy). For role-based authorization [blazor authorization], use the Roles parameter authorization and for policy-based authorization, use the Policy parameter.

The [Authorize] attribute (Blazor Authorize Attribute) also supports role-based or policy-based authorization. If neither Roles nor Policy is specified, [Authorize] uses the default policy.

The Router component, in conjunction with the AuthorizeRouteView component, allows the app to specify custom content by providing Authorized, NotAuthorized & Authorizing tags.

Video Chapters:
0:00 - Intro
1:16 - Project Setup
2:24 - Blazor Server Implementation
13:16 - Blazor WebAssembly Client Implementation
27:23 - Final Output

#CodingDroplets #Blazor #WebAssembly #WASM

[OnurBuyukcaglar]

This is the only, the most complete, simple and clarified tutorial on the whole YouTube about Blazor WebAssembly Authorization & Authentication. Thank you.

[johnpelitidis]

Your tutorials are beautifully explained and concise. Please continue with this series.

[khayolnoranjov]

Here is professionalism:
- Explain complex things in simple terms
- High quality video
- High sound quality

If it's possible, please create you official web site for your tutorials, It's will be better then a lot of world university programs
Respect!!!!

[deeplearning]

Brilliant Work! This covers a lot of the areas required for custom Authentication in Blazor. Very well put together, and very well presented. Thanks guys.

[Slugsie]

Thankyou for this tutorial. This is the first one I've found that explains how to succinctly add Authentication to a Blazor app without having to use the built in stuff and allowing us to implement our own authentication scheme. This is essential to me as I am trying to create a Blazor front end to an existing legacy system that has its own authentication system that can't be changed.

[BryanFritchie]

Wow, the quality and professionalism in this video is so much better than the videos earlier in the series. Well done on improving. 👍🏻

[BrandonGrant-zpxp]

You are a lifesaver! This is exactly what I needed. I was able to slightly adapt this for authentication against LDAP.

[andresgeary]

Thanks for the Video and the Series!!!! They are both Great

[petrprosek]

Excelent tutorial, was looking for this so long !!! Thanks

[cinemacentromegasala]

Excelente! Congratulations, César, Colombia

[CodingDroplets]

🔗Blazor Tutorial Series Playlist link:

[stephajn]

One thing about the custom authentication state provider class you created. There is no need to await a Task.FromResult. You are already in an async method, so just return the object. No need to create a new Task in the method and await it. That just creates a useless thread switching context that is not needed.
Also, Base64 Encoding is not "encrypting". For anyone watching this video, if you are relying on Base64 encoding something to be "encrypting it" you are not secure by a long shot.

[tanuchaudhary]

Waiting for more vedios. Your way of teaching is amazing sir.

[pascalsi]

Really great stuff !! I was looking for that for more than 1 year now !
This approach really gives you much more flexibility than Windows Identity.
Maybe just one little thing. In the LoginRequest the password is sent in clear text to the Web Api !

[Vale-mfhv]

Great tutorial. Simple and clear. Can you please implement the registration in the next video? Need it a lot. Thank you!

[oddikaro]

Great channel! I am wondering if you are going to continue this series.

[curiosity]

Sometimes you like a video and when you are going to hit a like you just know you already liked it few seconds ago.

[hades]

I have been following your entire Blazor tutorial playlist. All the videos have been very helpful. However the final two, the Auth tutorials, were very fast, and you spent most of the time pasting in code rather than typing out and explaining it. I have completed the auth tutorials, but I am left still with questions about exactly 'what' I wrote, and how/why it works.

I would prefer it if these auth videos were longer, and you took the time to explain what each step of the auth flow was actually doing.

[MehmetSaitDas]

Thanks for the explanation, it was nice. However, the token contains name, surname and role information. It is generally not preferred to get it with a different parameter 👏

[felixmatusinio]

This is awesome, easy to understand and follow along. However in which part of the video, did you set the value for the "ExpiryTimeStamp"? In GetToken method there's is validation where you compare the DateTime.Now to ExpiryTimeStamp. Thank you