Blazor Authentication Tutorial - How to Authorize in Blazor [Blazor Tutorial]

🌟 Get Source Code by Supporting on Patreon: / codingdroplets
🔗Blazor Tutorial Series Playlist link:
• Blazor Tutorial - Begi...
In this comprehensive Blazor Authentication Tutorial [Blazor Server Authentication Tutorial] which is a part of our Blazor Tutorial Series, we dive into authentication and authorization methods. In this Blazor login tutorial (blazor login example), we explore how to authenticate users and implement authorization using Blazor's built-in features. This video clearly explains How to authenticate in Blazor and How to Authorize in Blazor.
Blazor Authorization Tutorial:
Learn how to authorize [Blazor Server Role Authorize] in Blazor and utilize Blazor server authentication to secure your web applications effectively. We cover various authentication methods in Blazor, including Blazor server authentication and custom authentication without Identity. Additionally, we demonstrate how to use the Blazor authorize attribute for role-based authorization. Follow along as we guide you through Blazor authentication and authorization tutorials, providing a sample Blazor web app to illustrate concepts. Whether you're new to Blazor or seeking to enhance your knowledge of authentication and authorization in Blazor, this tutorial (Blazor Server Authorize) has you covered.
Blazor Cookie Authentication [Blazor Server Side Cookie Authentication]:
We'll explore Blazor cookie authentication, a crucial aspect of Blazor authentication methods. Blazor cookie authentication offers a seamless way to authenticate users within your Blazor web app without the need for identity. With the release of Blazor authentication .NET 8, cookie authentication has become even more accessible and powerful. In our example of Blazor authentication without identity, we'll demonstrate how to implement cookie authentication effectively. By utilizing Blazor server cookie authentication, you can ensure secure and reliable authentication for your users. We'll cover Blazor server-side cookie authentication in detail, showcasing its integration within Blazor server applications.
Blazor Server Custom Authentication State [Blazor Server Auth State Provider]:
In this Blazor authentication example (blazor login user), we'll delve into Blazor custom authentication, a powerful method for authenticating users within your Blazor web app. Through our Blazor web app sample, we'll demonstrate how to implement custom authentication effectively.

[@CodingDroplets]

🌟 Get Source Code: www.patreon.com/CodingDroplets 🔗Blazor Tutorial Series: kzbin.info/aero/PLzewa6pjbr3IQEUfNiK2SROQC1NuKl6PV

[@albertoramirez9031]

hello team, i´m having an issue on my project because i´m using radzen components and HTTPContext doesn´t work with InteractiveServer as rendermode... any idea with it? thanks.

[@elangovan4ever]

This video is a gem. Lot of people are looking for this in stack overflow and reddit. The video title made me think this is one of the efcore identity video and I was about to skip. luckily didn't skip and this helped me a lot to understand the auth stuff. Maybe you can add "Custom" or "without efcore identity" in the title so it will be clear and listed out for the people who is searching for this. Thanks for the wonderful tutorial!

[@CodingDroplets]

Thank you for your feedback and suggestion! I'm glad the video was helpful to you.

[@isaacnavarro4716]

how to solve the empty HttpContext in the login

[@DiegoVieira]

HttpContext aways null (using InteractiveServer render mode), any tips?

[@futasccsloli]

This tutorial is obsolete. the blazer app provides an template

[@DiegoVieira]

@@futasccsloli you mean, if i create a new project as blazor web app with individual authentication enabled?

[@CodingDroplets]

Thanks for reaching out! In this tutorial, I used the Blazor Web App project template (DotNet 8) with Server (Interactive Render Mode) and Per Page/Component (Interactivity Location). Are you using Global (Interactivity Location)?

[@DiegoVieira]

@@CodingDroplets i'm using the same setup as you, but when I set @rendermode InteractiveServer on Login page the HttpContext is aways null, it only works if I don't set rendermode

[@futasccsloli]

@@DiegoVieira Yes.But it uses efcore, and if you use another orm, you have to replace it.

[@softw.netcore7521]

thanks very much. excelente video information! Congratulations!

[@CodingDroplets]

You are Welcome! Glad to hear that.

[@JulianBedoyaVargas]

Excellent video, I have tried to implement the LOGIN component with the FluentUI library and it throws some errors, could someone help me, thank you !!

[@CodingDroplets]

Thank you! I haven't tried implementing the LOGIN component with FluentUI myself. Could you please share the specific errors you're encountering? That way, I or someone else in the community might be able to assist you better.

[@JulianBedoyaVargas]

@@CodingDroplets in the LOGIN component the error in this statement "HttpContext.User.Identity.IsAuthenticated" indicates that HttpContext is null

[@CodingDroplets]

The login page might be using InteractiveServer render mode. You should not specify any render modes for login page.

[@pilou15cantal69]

Hi thanks for this vidéo ! i have this error when login : InvalidOperationException: EditForm requires either a Model parameter, or an EditContext parameter, please provide one of these. thanks so lot

[@CodingDroplets]

It seems like you've not assigned the model for the EditForm

[@cfmoin2]

Nice video but I have a big problem. I did everything like you but the cookie won’t be stored properly or the data isn’t retrieved from it. If I login, the Pages won’t change and if I do the httpcontext.user.Identity.inauthenticated I always get false

[@CodingDroplets]

Thank you for your comment! It sounds like there might be an issue with how the cookie is being configured. Please ensure that your Cookie configuration is correct.

[@RajK09]

Hello there, could you make a video on Authentication & Authorization on .Net Blazor Web App (both Server & Client in a single solution) using .Net 8?

[@CodingDroplets]

Thank you for the suggestion! I'll definitely consider creating a video on Authentication & Authorization for a .NET Blazor Web App, covering both Server-side and Client-side implementations in a single solution using .NET 8. Stay tuned for upcoming videos.

[@socomjoy4563]

@@CodingDroplets would love to see that!

[@Perfeitor]

If I don't have rendermode, the information I enter won't be saved. If I add rendermode then I can't login because HttpContext is null. What should I do?

[@CodingDroplets]

You can avoid using render-mode only on the login page, ensuring that HttpContext is available during login. For other pages where you are saving data, you can use the render-mode.

[@Perfeitor]

@@CodingDroplets The problem is, without rendermode information like username and password will not be saved and sent. The program will say that the information is empty and needs to be entered when I run it

[@Perfeitor]

I have found the problem. When the code I forgot about [SupplyParameterFromForm], after adding it the program runs fine even without rendermode

[@CodingDroplets]

Great to hear you found the solution! Adding [SupplyParameterFromForm] is indeed essential. Thanks for sharing your fix. This will be helpful for others facing the same issue. Happy coding!

[@gilbert3546]

Can you make a video about interceptors? A class where all the request are going through and set token as a header for every request. Can i store acces_token in claims to use for my request? Great video!

[@CodingDroplets]

Thank you for the suggestion! Creating a video on interceptors and token management sounds like a great idea. I'll keep your request in mind for future videos.

[@gilbert3546]

@@CodingDroplets Can't wait to see you solution, since you can't call AuthenticationState in service, only in Razor components.

[@wellington18m]

The only problem with this app template is that no dialog can be display if there is any error due to the component has no interaction

[@danilovalim9400]

How to resolve HttContext always null? :(

[@CodingDroplets]

Are you using any render-modes in login component?

[@danilovalim9400]

@@CodingDroplets My project uses global Server Render.

[@DiegoVieira]

@@CodingDroplets same problem here, I'm trying with InteractiveServer render mode

[@prakriti_gupta]

@@CodingDroplets Hi, I am also facing the same problem. But I am not explicitly using any rendermodes in the login component. Please help! :(

[@danielpelissari7539]

I removed "@rendermode InteractiveServer" it and it solved it for me!

[@GiantsOnTheHorizon]

Thanks!

[@CodingDroplets]

Thank You so much for the support!

[@muhlurihlungwani508]

Can you please show where the user can register first then login with the registered information.

[@CodingDroplets]

Thank you for your suggestion! I'll definitely consider including a demonstration of user registration followed by login with the registered information in an upcoming video.

[@yaredalmaw6644]

Excellent

[@CodingDroplets]

Thank you!

[@kipchickensout]

All the text and pictures bobbing and jiggling around is distracting

[@CodingDroplets]

Thank you for your feedback! I apologize for any distraction caused by the text and pictures in the tutorial. I'll make sure to take your comment into consideration for future videos to ensure a smoother viewing experience.

[@kipchickensout]

@@CodingDroplets no problem, nice video

[@thehardwareguy]

Excellent tutorial, from one content creator to another. I just got this working exactly as you did. For anyone else trying to follow, I highly recommend you gain and understanding of render modes before doing this tutorial. Important things to note: the project must be setup as (DotNet 8) with Server (Interactive Render Mode) and Per Page/Component (Interactivity Location). If not, this will not work. I also watched your previous video 'DotNet Core Web API - ASP Net Core Web API CRUD with Entity Framework Core' which helped massively. I did also have to look up other videos on how to setup a local SQL server (it's easy). Be aware that the connection string is a little different for a local database. Thank you!

[@CodingDroplets]

Thank you for the detailed feedback and for sharing your experience! Your insights will definitely help others following along. Glad to hear that you found the tutorials helpful.

[@fongaming101]

I am having a hard time going from login screen to the main layout, hope this helps!

[@mightypirate100]

Thank you, but why not using Microsoft identity?

[@CodingDroplets]

Thank you for your question! In this particular video, we focused on implementing a custom authentication solution to provide a deeper understanding of the authentication process in Blazor. However, using Microsoft Identity for authentication is indeed a common and robust approach, and we'll definitely cover it in an upcoming video.

[@WolligesSchaf]

We have our own database and user verification, spread around multiple applications (and not only Microsoft) If we implemented Identity, we would have needed 2 user databases and a Skript to synchronize them. (Maybe there is a better solution, but this video is definitely the preferred way for now) Also, every Microsoft documentation ever about authentication talks about Identity already... Except one I found, but it's MVC exclusive

[@albertoramirez9031]

@CodingDroplets, hello team, i´m having an issue on my project because i´m using radzen components and HTTPContext doesn´t work with InteractiveServer as rendermode... any idea with it? thanks.

[@CodingDroplets]

When using the InteractiveServer render mode, Blazor communicates with the server using SignalR, causing the HttpContext object to be null. To receive the HttpContext, we utilize a standard form post method.

[@albertoramirez9031]

@@CodingDroplets Thanks a lot for your response. I´ll do it.

[@Arm0geddon]

@@CodingDroplets I have the same issue. What do mean standard form post method?

[@CodingDroplets]

@Arm0geddon .. Make sure the login page is not using InteractiveServer render mode.

[@shaharukhpathan5331]

Facing thi below issue on login command "A cookie was not sent to an insecure origin from a secure context. Because this cookie would have been sent across schemes on the same site, it was not sent. This behavior enhances the SameSite attribute’s protection of user data from request forgery by network attackers. Resolve this issue by migrating your site (as defined by the eTLD+1) entirely to HTTPS. It is also recommended to mark the cookie with the Secure attribute if that is not already the case."

[@CodingDroplets]

Thanks for your comment! Just to clarify, is your site using HTTPS? The error you're encountering typically happens when cookies are not sent from an insecure (HTTP) origin to a secure (HTTPS) context.

[@socketafricaremotedesktop]

Awesome tutorial @CodingDroplets, but I have issue with the HttpContext in the Login.razor Line 62, it is null at runtime. Is there something that I am missing?

[@CodingDroplets]

You might be using rendermode in Login page

[@myrogitesir7075]

Thank you, Will this code work for blazor web assembly ?

[@aisyahh38]

Your tutorial of Blazor are the best! Short, concise and pretty straightforward! Keep making those!

[@CodingDroplets]

Thank you so much for your kind words! I'm glad you find the tutorials helpful.

[@saroasahamed]

Great Tutorial! I am getting 'Object Reference not set to an instance of an object on code 'await HttpContext.SignInAsync(principal);' in Login.razor is there any I have missed

[@CodingDroplets]

Are you using any render modes in the login page?

[@klondikexx2831]

what project template are you using, and how is it setup. I don't get the same initial code as your video when i select a Blazor web app

[@CodingDroplets]

The project template used in the tutorial is "Blazor Web App (dotnet 8)" with the "per page/component interactive server" render mode.

[@navirbox4913]

This is it my dude. Everyone is showcasing the particular de facto method proposed by Microsoft, you're getting into the good and actually useful stuff.

[@CodingDroplets]

Thank you so much! I'm glad you found the tutorial useful. It's always great to hear that the content is making a difference.

[@anthonyquijano7697]

Quick and easy to follow, thank you..

[@CodingDroplets]

Thank You for your feedback. Glad to hear that.

[@kastriotgjoka7226]

why the HttpContext is coming null at login page

[@kastriotgjoka7226]

i figured it bc it was at rendermode interactiveserver httpcontext is always null 😀

[@gilbert3546]

@@kastriotgjoka7226 had the same issue, thanks for letting us know

[@CodingDroplets]

Thank you both for sharing your experiences! It's great to hear that you were able to identify the issue.

[@gladqueiroz01]

Simple, fast and directly to subject. Thank you!

[@CodingDroplets]

You're welcome!

[@parashgoswami264]

The most powerful yet concise intro to Authentication & Authorization. Very useful. Thanks

[@CodingDroplets]

Thank you so much for the kind words! I'm glad you found the introduction to Authentication & Authorization useful.

[@michaelreiricamata2347]

In my program.cs, it says that AddCascadingAuthenticationState is not defined in IServiceCollection

[@Lavaman-fn2ip]

I have the same issue

[@CodingDroplets]

Thank you for your comment! The tutorial you're referring to is specifically for .NET 8 Blazor Web App. If you're using a lower version, it's possible that the method might not be available in your version. For viewers using a lower version, I recommend checking out the tutorial at kzbin.info/www/bejne/n6KVk6d6bryonKs

[@nkkounmany3902]

On this i have error Exception of type 'Microsoft.AspNetCore.Components.NavigationException' was thrown, and can not navigate to other page after login. And how to fix that issue?

[@CodingDroplets]

To help you better, could you please provide more details about the error? You can check the console for more details on the exception. Additional information will be helpful in diagnosing the problem.

[@AdrianWoodUK]

2:50 - Whoa, hold up a sec; so this method stores passwords *in plain text* in the backend? That is *not* secure. I would be very worried if I found out a site I had an account with was storing my password unencrypted like this. If you're using your own login system, always, *always,* store a salted hash of the password, not the password itself, and have your login system check the hash of the supplied password against the one in the system. That's been a fundemental aspect of system security for as long as I remember.

[@CodingDroplets]

Thank you for your comment! This video is primarily focused on explaining Blazor Authentication rather than implementing a fully secure authentication system. However, you're absolutely right about the importance of storing passwords securely. In a production environment, it's crucial to use techniques like salting and hashing to protect user passwords. This video aimed to demonstrate the authentication process within a Blazor application, but I appreciate you highlighting the importance of password security.

[@socomjoy4563]

when you press F5 you will be logged out, won't you? I'm struggeling implementing a persisent way in Server Blazor ...

[@CodingDroplets]

You won't get logged out when you press F5 as long as the authentication cookie is valid. The persistence of the authentication state depends on the lifetime of the authentication cookie. If you're facing issues with maintaining the login state, ensure that your authentication cookie settings are correct.

[@solokit2569]

Hello, I would like to know how to access the login page by default instead of placing it on the right side of navmenu

[@CodingDroplets]

You can add the Authorize attribute to the main page, which will automatically redirect unauthenticated users to the login page.

[@truestoriesz]

Thanks bro it worked, now i need to understand how everything works because i just did copy and paste everything 😢 then, im going do it again without watching i guess 😅

[@CodingDroplets]

Glad to hear it worked for you! 😊 It's totally fine to start by copying and pasting. The real learning happens when you break it down and rebuild it step by step. Re-doing it without the video will help you understand the flow and concepts.

[@LebaneseEntertainment]

Thx for the help. It worked the first time but the second time a get a message with the problem: disable antiforgerytoken How can i fix this issue?

[@imashar]

Much Needed Video👏

[@CodingDroplets]

Thank you for your feedback! I'm glad to hear that you found the video helpful. Your feedback is valuable and helps me create content that meets the needs of viewers like you. 😊🚀

[@mizanurrahaman1056]

Thank you! It is straightforward, fast, and focused on the main thing.

[@CodingDroplets]

Thank you so much for your feedback! Glad to hear that.

[@TobiasLarsen93]

Thank you so much for this! Exactly what i needed to understand how to implement auth!

[@CodingDroplets]

You're very welcome! Glad to hear that.

[@DannysGalaxyTab]

This is amazing my friend. Thank you so much.

[@CodingDroplets]

You're very welcome

[@MEIYANG-sj2sb]

quality content, thanks!

[@CodingDroplets]

Thank you for your feedback! I'm glad you enjoyed the content.

[@saroshwadia]

Excellent video, very easy to understand - Will this same Authentication/Authorization logic work in a Blazor WASM app as well or is it very different? Thx

[@CodingDroplets]

Thank you for your feedback! I'm glad you found the video easy to understand. The Authentication/Authorization logic can indeed work in a Blazor WebAssembly (WASM) app as well, but there are a few differences and considerations to keep in mind due to the client-side nature of WASM. I'll be covering the specifics of Authentication and Authorization in Blazor WASM in a separate video.

[@saroshwadia]

Looking forward to that video where you show how to handle both Server and WASM together. Thx again@@CodingDroplets

[@RockoShaw]

Awesome tutorial, thanks

[@CodingDroplets]

Thank you! I'm glad you enjoyed the tutorial

[@AP-pz9wp]

If you refresh the page after successfully authenticating it forces you to login again?

[@CodingDroplets]

No it won't. It will force to login again only after cookie expiry.

[@socomjoy4563]

same problem right here, F5 is logging me out somehow

[@JohnAmbeliotis]

Great tutorial! I applied the whole logic to my project but when I try to reach the login I'm getting this exception: Microsoft.AspNetCore.Components.Forms.EditForm.OnParametersSet() Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync() Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync() Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters) Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(ref DiffContext diffContext, int frameIndex) Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(ref DiffContext diffContext, int frameIndex) Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(ref DiffContext diffContext, int newFrameIndex) Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(ref DiffContext diffContext, int oldStartIndex, int oldEndIndexExcl, int newStartIndex, int newEndIndexExcl) Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, int componentId, ArrayRange oldTree, ArrayRange newTree) Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, out Exception renderFragmentException) Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue() Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue() Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(int componentId, RenderFragment renderFragment) Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged() Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync() Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync() Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters) Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(int componentId, ParameterView initialParameters) Microsoft.AspNetCore.Components.HtmlRendering.Infrastructure.StaticHtmlRenderer.BeginRenderingComponent(IComponent component, ParameterView initialParameters) Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.RenderEndpointComponent(HttpContext httpContext, Type rootComponentType, ParameterView parameters, bool waitForQuiescence) System.Threading.Tasks.ValueTask.get_Result() Microsoft.AspNetCore.Components.Endpoints.RazorComponentEndpointInvoker.RenderComponentCore(HttpContext context) Microsoft.AspNetCore.Components.Endpoints.RazorComponentEndpointInvoker.RenderComponentCore(HttpContext context) Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext+c+d.MoveNext() Microsoft.AspNetCore.Localization.RequestLocalizationMiddleware.Invoke(HttpContext context) Microsoft.AspNetCore.Antiforgery.Internal.AntiforgeryMiddleware.InvokeAwaited(HttpContext context) Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context) Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context) Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)

[@JohnAmbeliotis]

I'm using Blazor 8 and I find that the only way to make the form to respond is with @rendermode InteractiveServer but now the problem is this "Headers are read-only, response has already started." if you actually using a service or if you follow exactly your implementation there's an "Object reference not set to an instance of an object" in this line: var claimsIdentity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme); await HttpContext.SignInAsync( CookieAuthenticationDefaults.AuthenticationScheme, new ClaimsPrincipal(claimsIdentity) ); Any ideas? :)

[@CodingDroplets]

The demo project in the video is also developed using dotnet 8. If you use render-mode, Blazor will use SignalR instead of a normal form post which will cause the HttpContext to be null.

[@leriosindane720]

You Got a Eternal Subscriber😁

[@CodingDroplets]

Wow! Thank you so much for your support and for being an eternal subscriber! I'm glad to have you as part of the community.

[@talkathiriify]

Very useful. Thank you very much.

[@CodingDroplets]

You're welcome! I'm glad you found the tutorial useful.

[@yassermian9913]

great video. but how does built-in authentication system know about iuser_accoint table in sql.

[@StephenBargewell]

Thanks

[@CodingDroplets]

Thank You So Much for the Support!

[@stephanegenet1523]

I ❤ it !!! Ty

[@CodingDroplets]

Thank you for your positive feedback! Glad to hear that.

[@minidragon76]

thanks you

[@CodingDroplets]

You are most welcome!

[@lemonade2345-j4e]

Excellent tutorial. You sir have showed me some things I have not seen in other videos yet. Thank you!

[@CodingDroplets]

You are Welcome! Glad to hear that.

[@RajK09]

Hello there, could you make a video on Authentication & Authorization on .Net Blazor Web App (both Server & Client in a single solution) using .Net 8?

[@CodingDroplets]

Thank you for the suggestion! I'll definitely consider creating a video on Authentication & Authorization for a .NET Blazor Web App, covering both Server-side and Client-side implementations in a single solution using .NET 8. Stay tuned for upcoming videos.

[@nishanthrajkumar8333]

@@CodingDroplets Thanks! Looking forward to this. It is much needed and I haven't seen anybody cover this from basic. Would be really helpful to a lot of people including myself who wish to incorporate custom Authentication in Blazor web app with Auto render mode.

[@yogeshgodse7372]

Hi ,really liked this video. You have covered it very well. Could you please consider making a small video about micro front end with Blazor and .net core Microservices

[@RajK09]

This is awesome tutorial, this is cool. You got a new subscriber!

[@CodingDroplets]

Thank you so much for the kind words and for subscribing! I'm glad you found the tutorial helpful.