⭐ Join Us on Patreon: www.patreon.com/CodingDroplets 🔗Blazor Tutorial Series Playlist link: th-cam.com/play/PLzewa6pjbr3IQEUfNiK2SROQC1NuKl6PV.html 🔗Blazor Web App Authentication: th-cam.com/video/GKvEuA80FAE/w-d-xo.html
Absolutely the best i have seen on the web for a "how to develop a custom authentication for blazor server!". you covered all bases and that is simply awesome!
I've completed all the parts and have successfully implemented CRUD operations and authentication with a local database, using Entity Framework. I have significantly improved. Great tutorial, many thanks!
That's fantastic to hear, and congratulations on your successful implementation of CRUD operations and authentication with a local database using Entity Framework! I'm thrilled that the tutorial was helpful in your journey to improve your skills. Keep up the great work, and happy coding! 🚀😊 .. Thank You So Much for the Support.
Very nice tutorial. You briefly showed the final product without forcing audience to wait to the end of the video. Also you did not dive into irrelevant database details, useless jokes etc. Clear and fluent narrative. Thanks!
This is the best video on youtube for this topic. Explains everything from the vanilla project, and it is quick, comprehensive and to the point, and it works. On top of that, for me the explanation about server render mode in conjunction with ProtectedSessionStorage at 21:32 explained exactly the problem I'd had with other attempts to use ProtectedSessionStorage, probably from following blazor wasm tutorials, and now I know why that was. Thank you!
Absolutely outstanding! This is exactly what I have been looking for! You literally took me step by step through a perfectly rendered security implementation for my Blazer Server applications. Even your variable names and coding standards were exactly how I would have implemented them. Excellent video! Thank you so much!
This is the first time I see a content creator answering comments and with a deep explanation indeed. Subscribed! Of course, the video is also superb, since there are very few videos in this topic. Blessings!
Thank you so much! We're delighted to have you as part of our community. We believe in the importance of engaging with our viewers and providing thorough explanations to address any questions or concerns. Your feedback confirms that we're on the right track, and we'll continue to be responsive to our viewers' comments and provide in-depth explanations to support your learning journey.
Thank you! One of the clearer step by step tutorials I've seen on a subject I have struggled with. This is the first time I've actually understood what is going on. Appreciate that you kept the design simple and basic with clear steps. Going to follow it through using minimal API I've developed for our product, which has a JWT based auth endpoint. nb. It would be nice if you included your github code links in the summary, though I found them easily enough from your channel About page.
Thank you so much for your thoughtful feedback! Glad to hear that the step-by-step approach helped you grasp the subject more clearly and that you found the design and steps straightforward. I appreciate your suggestion regarding GitHub code links in the video summary. Providing easy access to code resources is indeed important, and I'll certainly consider your feedback for my future videos.
Yo llevaba meses buscando algo decente, y todos salían con las Razor Pages scaffoldeadas de MS Identity, incluso llegué a pensar que no se podía hacer nada si no era con eso. Fue desesperante hasta que encontré esta joya. De todos modos me preocupa el tema del render mode por lo del SEO, luego investigaré más a fondo.
Muchas gracias por ver mi video y por tu comentario! Me alegra saber que mi video ha sido útil para ti en tu búsqueda de soluciones de autenticación y autorización con Blazor Server. Es cierto que la mayoría de las soluciones que se encuentran en línea utilizan las páginas Razor Pages de MS Identity, pero hay muchas otras formas de implementar la autenticación y autorización en Blazor Server. Me complace que mi video haya sido una alternativa útil para ti.
Great video, you helped me a lot. For those who want to recreatte this: Watch out VS sometimes suggests you code parts and the ifs are reversed e.g. instead of if(userSession != null) it suggests if(userSession == null), took me some time to realize that.
Thank you so much for taking the time to watch the video, and for your kind words! I'm glad to hear that you found the tutorial style helpful and easy to follow. I always aim to make my tutorials clear and concise, without overwhelming viewers with unnecessary information. It's great to know that this approach resonated with you and helped you to understand about this important topic. Thanks again for your feedback, and I hope you continue to find my content helpful in the future.
THANK YOU SO MUCH sir! This is exactly what I searched for. I searched through StackOverflow and I didn’t found it. I searched in other places also. You are my hero!
Thank you for your kind words and feedback! I'm glad to hear that the tutorial was exactly what you were looking for and that it helped you with your project.
💥Host Your Blazor App in Linux: th-cam.com/video/bXK-F-uL7Qo/w-d-xo.html 🔗Blazor Tutorial Series Playlist link: th-cam.com/play/PLzewa6pjbr3IQEUfNiK2SROQC1NuKl6PV.html
Thank you for watching the video and leaving your positive feedback. I'm delighted to hear that you found my explanations to be clear and helpful in your search for a solution to your Blazor login page needs. I'm always striving to provide the best possible content to my viewers, and your comment encourages me to continue creating informative and useful videos. If you have any further questions or topics you'd like me to cover, please don't hesitate to let me know. Thanks again!
it was excellent tutorial, most of the available resource are based on the bulky aspnet tables and db context, ef core type used, but this was the actual custom authentication tutorial, thanks and great. it will be great help if added a tutorial to add custom fields in user identity , that may need to show on different pages, .i.e like full name, and other related data, like picture etc..
I really appreciate your clear explanations and work pace. Your tutorial provides an excellent foundation that can be easily applied to own projects :)
Thank you so much for your kind words and support, I'm thrilled to hear that you found my video helpful and consider me the GOAT (Greatest Of All Time), it means a lot to me! I appreciate you taking the time to leave a comment and for considering my content underrated, I'll continue to do my best to create more valuable videos for you and others to enjoy.
A very helpful video... I've seen many other ones and I've read some article, but this is the first time that I was able to implement a login logic, even if hard-coded data. My next step will be to use a microservice for authentication, I hope that all videos can help me as well. Regards.
Thank you for your comment and support! I'm glad to hear that the video was helpful in implementing a login logic in your Blazor Server application, even with hard-coded data. It's great to see that you were able to apply the concepts from the tutorial successfully. Using a microservice for authentication is a great next step, and I'm confident that the other videos in the series will provide valuable insights and guidance for your journey. Feel free to explore the rest of the videos, as they cover various aspects of Blazor applications. If you have any questions or need further assistance along the way, don't hesitate to reach out. Best of luck with your authentication microservice implementation, and once again thank you for your kind regards and support!
Very cool tutorial, managed to follow all the way to the end, sometimes you go a bit too fast but it's all good. Also, I don't know if the new version of Blazor changed anything but you can't do custom NotAuthorized messages in App.Razor. I hope you can expand on this and do one when you connect to a database and then authorise other stuff like product images, profile pictures etc. I would be grateful. Stay blessed and full of luck and thanks for the knowledge!
I'm glad to hear that you found the tutorial helpful, and I appreciate your input regarding the pace of the tutorial. I'll make sure to be mindful of the pace and provide more detailed explanations in future videos. I'll definitely consider making a video addressing your queries including database connectivity.
Many thanks for you, this is a very simple and straight forward lesson in blazor custom authentication and authorization. I was wondering if a user has more than one role, how to handle them, if you can do another tutorial for managing roles dynamically from the database, I mean the roles of the pages can be managed through the app not hard coded using @attribue. Highly appreciated 👍
Most welcome. I would like thank you for sharing your thoughts. For dynamic roles, we have to implement additional logics. We'll try to do a video soon.
This works perfectly with Net 6 and 7. Unfortunately I have tried the same thing with a .Net 8 (RTM no longer RC2) Blazor Server application and it is no longer working . I've seen that in the standart .NET 8 Blazor Web App with 'Authentication type:individual accounts', 'Interactive render mode:Server', 'Interactivity location:Per page/component' template there is a RevalidatingServerAuthenticationStateProvider instead the AuthenticationStateProvider . I have not yet figured out how this is working ! Will you update your videos for Blazor Net 8 ?
Thank you for bringing this to my attention. I appreciate your feedback. I'll make sure to explore and create updated content for Blazor Web App in .NET 8, including any changes in authentication mechanisms. Stay tuned, and I'll cover the latest developments in upcoming tutorial videos.
Very well explained for someone who is new to Blazor. One question, is there a tutorial to implement 2FA as part of authentication? Or any resources that are available?
Thank you for taking the time to watch my .NET Blazor Server Authentication & Authorization video and for your kind words! As for your question regarding 2FA (Two-Factor Authentication), there are definitely resources available to help you implement it as part of your authentication flow. One resource that I recommend is the official Microsoft documentation on implementing Two-Factor Authentication in ASP.NET Core: docs.microsoft.com/en-us/aspnet/core/security/authentication/2fa?view=aspnetcore-6.0
I'm glad to hear that you found the video helpful and that it aligned with your search for best practices! Thank you so much for your 5-star rating and positive feedback.
Useful tutorial 👍👍 Thank you so much. However, how can I solve the issue where authenticated user open 2 different tabs in same browser? I noticed that the newly opened tab will not log user in.
You're most welcome! Thanks a lot for sharing your thoughts. You can make use of local storage instead of session storage. Local storage is shared between all tabs and windows from the same origin. The data does not expire. It remains after the browser restart and even OS reboot.
Excellent and very help full video, can you Extend the same authentication to apply an idle timer and after a defined time say 30 Seconds user automatically logout from all the open tabs and/or windows of the same session
It can be done by providing some additional logic in GetAuthenticationStateAsync method of CustomAuthenticationStateProvider class. We'll try to do a video on this soon.
I believe there might be a slight misunderstanding. In the tutorial, we used "ProtectedSessionStorage" instead of "protectedsessionstate" for managing session state securely. The "ProtectedSessionStorage" is a part of Blazor's session state management system, which allows you to store and retrieve sensitive data securely in the user's session. It ensures that the data is encrypted and protected from tampering.
I followed this to a T but it has so many errors plus the variable names keep changing for the AuthStateProvider and it's CustomAuthStateProvider somewhere else
I'm sorry to hear that you encountered errors. You can find the source code for the tutorial on GitHub: github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
Hie there. I have followed the whole tutorial and I am using Mudblazor. Once I changed the rendering mode to prerender: false, nothing appears on the screen for all pages. Please help
In the UserAccountService class if I want to populate the list with the properties of my databases, how should I approach it more or less? any ideas? Thank you
Thank you so much. It was a feature that I was looking for perfectly. I have a question, after logging in, go to the page you gave me permission and refresh (f5) and the page will be unauthenticated and the page will not be displayed (I got an error) Is there any way to solve this problem? I'd appreciate it if you could suggest a way to keep me logged in or something else even if I refresh. (.net 8.0 blazor webapp)
Thank you so much, best explanation on custom authentication!! Could you explain how to integrate an authentication from Google or from any other Authentication Provider? I would like the user to authenticate with Google, get the user's email, and then use the email to get the customer role from the database
Thank you for your comment! I'm glad to hear that you found my explanation helpful. Integrating an authentication from Google or any other Authentication Provider is definitely possible with Blazor Server App. In fact, there are built-in authentication templates available for Google, Facebook, Twitter, and Microsoft accounts. You can find more detailed instructions and code samples for integrating Google authentication in a Blazor Server App in the Microsoft documentation: docs.microsoft.com/en-us/aspnet/core/security/authentication/social/google-logins I hope this helps!
Hmm, so the built-in Identity that uses razor pages (and different layout, etc) should be replaced with blazor dedicated identity. Too bad one needs to write it again and blazor server template includes identity based on razor pages rather than blazor
Thank you for your comment and feedback on the tutorial! You're correct that when using Blazor Server, the default template includes identity based on razor pages. However, it's important to note that the decision to use the built-in Identity with razor pages or a custom authentication approach like the one demonstrated in the tutorial depends on the specific requirements and preferences of your application. The built-in Identity with razor pages provides a robust and feature-rich authentication system with pre-built UI components and functionality. If you're comfortable with razor pages and find that it meets your needs, there's no requirement to replace it with a Blazor-specific identity implementation. On the other hand, if you prefer a more customized authentication experience or want to leverage Blazor-specific features and components, implementing a custom AuthenticationStateProvider class as shown in the tutorial can be a good option. It allows you to have fine-grained control over the authentication process and integrate it seamlessly with your Blazor components.
Hi, thank you so much for your tutorial. So simple and to the point! In your github repository, I was able to get the code and tried it out. I found a commented out code //await Task.Delay(5000) Was this to remedy the issue where calling protectedsessionstorage can throw an error when used with cascading authentication state component (because JSInterlop is not initialized)? I do have this issue right now- were you able to solve it? I am wondering if I should make my own cascading authentication state component and call GetAuthenticationStateAsync manually during onAfterRenderAsync call?
Thank you for your positive feedback on the tutorial and for taking the time to try out the code from the GitHub repository. Regarding the commented out code "//await Task.Delay(5000)", its purpose was to introduce a delay for displaying a message during the authorization process. As for the JSInterop error you mentioned, in the tutorial video, we explained the option of changing the render mode to server-side rendering, which can help mitigate such issues. By utilizing server-side rendering, you can minimize the dependencies on JavaScript interop and ensure a smoother authentication process.
It is possible to use old identity mechanism with roles claims etc.? I see posibilities in your code to split repository code to another project but I confiused how it can work with custom authenctitation by key.
Thank you for the great tutorial video. If I were to change it to Windows Authentication, how and where to use your CustomAuthenticationStateProvider to load all the claims for Roles from a database? Would it be the index.razor or the app.razor file? Thank you.
This video is to implement a custom authentication in a Blazor Server Application. For implementing Windows Authentication, please refer the below URL. docs.microsoft.com/en-us/aspnet/core/security/authentication/windowsauth?view=aspnetcore-6.0&tabs=visual-studio
You are welcome! Just implement the method to fetch user account data from database instead of hardcoding it. If you are using SQL Server database, just make use of EF Core to achieve the same
@@anonymousug9648 - Could you please be so kind and give me here some code example how you did that? I need the same and not sure in which class/how to do that. My DB is a postgres DB. Thank you
@@CodingDropletsI am using sql server db and created a method to fetch the data from db in UserAccountService using entityframeworkcore. Will you please tell me what changes need to made in GetByUserName method
Great video and very informative. I wonder if you could help a little though? I have tried to implement what Milan has asked below about going straight to the login page. Which I have achieved, and when the user logs in, it takes them to the correct page, and displays the correct greeting, the problem I have is the side menu bar is "locked". If I manually enter the URL it takes me back to the login screen, which I am happy about, but can't get anywhere. Any idea as to why the sidebar is locked down?
Thank you for watching the video and leaving your comment. I'm glad to hear that you found the video informative. Regarding your question, I'm not exactly sure who Milan is or what they asked for in their comment. However, I can try to address the issue you mentioned. It seems like you have implemented a login page and the user is able to log in successfully, but the side menu bar is not working as expected. One possibility could be that you have implemented some authorization logic for the sidebar menu that prevents access until the user is authenticated. If this is the case, you may need to update your authorization logic to allow authenticated users to access the sidebar menu. I also wanted to mention that the source code for the project in the video is available on GitHub at github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization. You may want to check that out to see if there are any differences between your implementation and the sample code. I hope this helps! Let me know if you have any further questions or concerns.
@@CodingDroplets thanks very much for coming back to me. I had put an else statement in my Login statement on the MainLayout page, I removed that and now I can login and use the sidebar.
Thank for this excellent tutorial and for the github code too. Do you have plan to make another video (or simple github repo) implementing localstorage (sql) , session timeout and dynamic role support? It woulde be super great! Thank you
Thank you for your comment and raising a valid concern about the security and reliability of the custom AuthenticationStateProvider approach in a production application. The custom AuthenticationStateProvider demonstrated in the tutorial is a commonly used approach in Blazor Server applications and can be considered reliable and secure if implemented correctly. However, it is important to note that security is a complex topic, and there are additional factors to consider when deploying a production application. To enhance the security of your application, it is recommended to follow best practices such as: Secure Communication: Ensure that your application uses HTTPS for secure communication between the client and server. This helps protect sensitive data during transmission. Secure Password Storage: Implement proper password hashing techniques to securely store user passwords in your application's database. Input Validation: Validate and sanitize user input to prevent common security vulnerabilities like SQL injection and cross-site scripting (XSS) attacks. Authorization and Access Control: Implement proper authorization mechanisms to control user access to different parts of your application. This can involve roles, claims, or other access control techniques. Regular Updates and Security Patches: Stay updated with the latest security patches and updates for your application framework, libraries, and dependencies to address any known vulnerabilities. Remember, security is an ongoing process, and it's crucial to stay informed about the latest security best practices and techniques. Additionally, conducting thorough security testing, including penetration testing and code reviews, can help identify and address any potential vulnerabilities. By following these guidelines and adopting a proactive approach to security, you can build a production-ready application with a reliable and secure custom AuthenticationStateProvider.
I like your technique, but I found that when I reload the application after logging in, an error is thrown. System.InvalidOperationException: 'JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.' Is it possible in pre-render server mode?
Great video!!!, but I'm getting this error on the task UpdateAuthenticationState , await _sessionStorage.SetAsync("UserSession", userSession); when I call an api: JavaScript interop calls cannot be issued at this time. This is because the circuit has been disconnected and is being disposed of. I would appreciate any help
Have you tried changing the render mode? Please verify your code. Source code is available in the below URL. github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
Thank you for this great Tutorial. I actually have three questions: First: Is this the current best practice considering an implementation for authentication? Second: Are the pasowrds hashed when stored? and third: Can multiple users be logged on at the same time or will "UserSession" in the Storage get overwritten then? Thanks in advance :)
Hi! I'd be happy to answer your questions. The use of ProtectedSessionStorage to store user session details in Blazor Server-side applications is a common practice. However, the best approach for authentication implementation depends on various factors such as the size and complexity of the application, the security requirements, and user experience. As a general rule, it is always recommended to follow industry standards and guidelines, and to consult security experts for critical applications. In the demonstration video, the passwords were not stored in a database. Instead, they were hardcoded directly into the code. It is crucial to store passwords securely by hashing and salting them before storing them in a database or any other storage medium. This helps protect user passwords in case of a data breach. This implementation allows multiple users to log in concurrently without interfering with each other's sessions. The ProtectedSessionStorage used in the tutorial is user-specific and isolated, and each user's session data is stored in their browser. Therefore, multiple users can use the application simultaneously without any conflicts. I hope this helps! Let me know if you have any further questions.
@@CodingDroplets Hello, Thank you for your fast response! Thats very good to know, about the Password hashing, is there a a function provided by Microsoft ASP which is recommended to use or do I need to implement this on my own? Thanks in advance!
You can check out this link for more information: learn.microsoft.com/en-us/aspnet/core/security/data-protection/consumer-apis/password-hashing This page provides a detailed explanation of how to hash passwords and also covers other topics related to password security. Hope this helps!
Thank you for your comment and I'm glad to hear that you found the tutorial helpful! Regarding your question about using a Singleton lifetime for the UserAccountService, it's important to note that in the example shown in the video, the user account details were hardcoded. However, in a real application, the user account details would typically be fetched from a database or another data source. In this scenario, using a Scoped lifetime for services that interact with a database is a good practice. Scoped lifetime means that a new instance of the service is created and shared only within the scope of a request or operation. I hope this answers your question, and if you have any further queries or concerns, please feel free to let me know!
Excellent tutorial, thank you. I am however getting the error below in program.cs (on the line 'var app = builder.Build();'). Could you please indicate how I can fix this? Some services are not able to be constructed (Error while validating the service descriptor 'ServiceType: Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider Lifetime: Scoped ImplementationType: BlazorApp1.Authentication.CustomAuthenticationStateProvider': Unable to resolve service for type 'Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage.ProtectedBrowserStorage' while attempting to activate 'BlazorApp1.Authentication.CustomAuthenticationStateProvider'.)'
Thank You for sharing your feedback. You can find the source code of the project from the below URL. github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization Please verify your source code with the demo project.
@@CodingDroplets I've cloned the source code and can confirm that it runs successfully for me. My code looks to be identical but there must be a difference somewhere - I'll keep hunting thanks!
Greetings, to those who have the error "Some services are not able to be constructed (Error while validating the service descriptor 'ServiceType: Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider Lifetime: Scoped ImplementationType: Unable to resolve service for type 'System.Security.Claims.ClaimsPrincipal' while attempting to activate." I have a potential solution for you: In the class: "CustomAuthenticationStateProvider.cs" be sure that the "constructor" part is not expecting a parameter which you will not use. The itelliSense has put me the following: "public CustomAuthenticationStateProvider(ProtectedSessionStorage sessionStorage, ClaimsPrincipal anonymous)". This is something wrong, since it really should go: "public CustomAuthenticationStateProvider(ProtectedSessionStorage sessionStorage)". Notice that in the example number 1 I am expecting a "ClaimsPrincipal anonimous" and this is never used in the constructor, it is possible that inside the constructor the intellisense has autocompleted that code, so I recommend to copy the following code: "public CustomAuthenticationStateProvider(ProtectedSessionStorage sessionStorage)" And make that your constructor, in the class "CustomAuthenticationStateProvider.cs". It worked for me and here I leave you the comparison of my code and the tutorial. github.com/MaxwellTav/LoginAuth/commit/782295bcb29ee49add2ff2ef981e506a26200fbc Remember that to see the differences, in Github you must have the "Split" option to see the differences side by side. Best of luck.
It was really a very useful tutorial. I would like to thank you for this video. Also if you could help with, how to set the session time-out value? I have been searching for this long since. Please help me.
unable to cast object of type Microsoft.AspNetCore.Components.Server.ServerAuthenticationStateProvider' to type 'CustomAuthentication.Authentication.CustomAuthenticationStateProvider here var customAuthStateProvider = (CustomAuthenticationStateProvider)asp; on the login page UI this error is showing to me what problem could be ??
Is your CustomAuthenticationStateProvider class inherited from AuthenticationStateProvider? Please find the project source code in our Github repo (URL below): github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
Hi, Thanks for your video. Just one question, is there any better way to use localstorage or cookie instead of ProtectedSessionStorage. Otherwise we lost our session in another tab.
Please check the below project in which I've used Local Storage for saving User Session details. Inside CustomAuthenticationStateProvider, you can see a constant named SESSION_VALIDITY_MINS (for Session Duration). The constant value can be changed based on your need. Also I suggest you to implement some encryption while saving the data. github.com/codingdroplets/BlazorServerAuthenticationAndAuthorizationWithLocalStorage
Hii Coding Droplets I wondering if once you implements this kind of Authetication on dev you wont pay anything to put it on production(after deploy and publish the app)? Thank you
Hi there! Thanks for your comment and for watching the video. To answer your question, the authentication and authorization techniques that I covered in the video are built into Blazor Server and do not require any additional fees or services to be used in production. Once you have implemented the authentication and authorization on your development environment, you can publish your Blazor Server application to any hosting provider or server, and the authentication and authorization will continue to work as intended. However, it's important to note that the hosting providers will charge you for the hosting itself or for additional features that you may need for your application. So be sure to check the pricing and features of your hosting provider before deploying your application.
Thank you for watching my video and for your question! In the GetAuthenticationStateAsync method, we need to provide the authentication type string parameter when creating the ClaimsPrincipal instance because that method is responsible for retrieving the current user's authentication information. The authentication type string specifies the type of authentication being used and is necessary to correctly create the ClaimsPrincipal instance. On the other hand, the NotifyAuthenticationStateChanged method is used to notify the application that a change in the authentication state has occurred. In this method, the authentication type string is not necessary, since it is not used to create a new ClaimsPrincipal instance. Instead, it simply notifies the application that the authentication state has changed and that the UI should be re-rendered to reflect the new state. I hope this clarifies your question. If you have further questions or need more information, please don't hesitate to let me know. Thank you again for watching my video and for your comment!
You're welcome! I'm glad that my explanation helped and that it's clear now. Thank you for watching my videos and for taking the time to leave a comment. If you have any other questions or topics you'd like me to cover, please feel free to let me know. Thanks again and have a great day!
While it might seem like a lot of work to add to each page, it's a powerful and flexible approach. However, if you want a more centralized solution, you can also create a layout or a component that includes the authorization logic, and then use that layout or component across multiple pages. This way, you can manage authorization in a more centralized manner. It all depends on the structure and requirements of your application. Hope this helps!
@@CodingDroplets thank you yes I'm a bit new to Blazor and indeed to the whole Microsoft .Net Core framework (an old multivalue Pick/Revelation programmer!). Been confused over the various authentication approaches but am finding these couple of videos very useful. They take a more measured approach than some I've seen which just dive into what seem overly complex approaches.Thanks.
A Question: when i logged in (in your example application) . i am opening a new tab and writing the adress and doing enter. But the page shows me i am not logged in. How to solve this problem ?
Thank you for your question! In the example application, I've used Protected Session Storage to save the user session, which is a type of storage that is specific to the current browsing session. When you open a new tab and navigate to the application, the session storage is not shared between tabs, which is why you appear as not logged in. To address this issue and maintain user authentication across multiple tabs, you can switch to using Local Storage instead of Protected Session Storage. Local Storage is a type of web storage that persists even when you open a new tab. To implement this change, you would need to modify the authentication logic and update the storage mechanism to use Local Storage. By doing so, the user's authentication state will be preserved across different tabs.
That's great to hear! I'm glad you were able to solve the issue. It's good to know that everything is working fine now. If you have any more questions or need further assistance, feel free to ask. Happy coding! 😊👍
hi ..! thanks for your tutorials . I facing issue on my existing project build .net6 , when i implement your code . unable to cast object of type Microsoft.AspNetCore.Components.Server.ServerAuthenticationStateProvider' to type 'CustomAuthentication.Authentication.CustomAuthenticationStateProvider here var customAuthStateProvider = (CustomAuthenticationStateProvider)AuthenticationStateProvider
Make sure you've inherited AuthenticationStateProvider in the CustomAuthenticationStateProvider class. You can find the source code in the below URL. github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
@@CodingDroplets Thanks for your code. there is no issue in your code its Perfectly work . issue is on my existing project . now its working after changed on app.razor to
Thank you for your positive feedback! To prevent a user from logging into multiple instances using the same account across multiple browsers, you can implement a mechanism called "session management" or "single sign-on (SSO)". Here are a few approaches you can consider: Limit Concurrent Logins: You can restrict users to a single active session at a time. When a user logs in from a new browser, you can invalidate the previous session and force a logout. Unique Session Identifiers: Assign a unique identifier (e.g., session token) to each user session. Store these identifiers in a secure manner, such as in a database or cache. When a user attempts to log in from a different browser, you can check if the session identifier is already in use and handle the situation accordingly. Token-based Authentication: Use token-based authentication mechanisms like JSON Web Tokens (JWT). Include additional information in the token, such as the user's browser details or IP address. When a new token is issued, you can compare this information to the existing token and take appropriate action if a mismatch is detected. It's important to consider the specific requirements and security considerations of your application when implementing session management. You can explore these concepts further and adapt them to your needs.
Thank you for watching the tutorial and I'm glad to hear that you found it helpful. Regarding the issue you are facing with the sidebar not showing, it could be due to a variety of reasons. Without looking at the code, it's hard to pinpoint the exact issue. However, some common causes of this issue could be: Missing CSS: The sidebar might be hidden due to missing CSS classes or styles. Double-check the CSS file and make sure all the necessary styles are present. Incorrect placement: Make sure the sidebar component is placed in the right location within the layout. It's possible that the sidebar is not being rendered because it's not included in the correct location. Browser caching: Try clearing your browser's cache and reloading the page. It's possible that the browser is caching an old version of the page that doesn't include the sidebar. If none of these suggestions work, please provide more details or share your code on a platform like GitHub so I can take a closer look and provide a more specific solution.
Sometime many Dots in Blazor project name produces this side navigation bar hiding issue. For example "My.Sample.Demo.prj" -----> instead create project without Dots "MySampleDemo" and see. Seems like auto generated file referencing issue.
AuthenticationStateProvider doesn't work on Blazor Server, I have to use either ServerAuthenticationStateProvider or RevalidatingServerAuthenticationStateProvider.
Greetings, to those who have the error "Some services are not able to be constructed (Error while validating the service descriptor 'ServiceType: Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider Lifetime: Scoped ImplementationType: Unable to resolve service for type 'System.Security.Claims.ClaimsPrincipal' while attempting to activate." I have a potential solution for you: In the class: "CustomAuthenticationStateProvider.cs" be sure that the "constructor" part is not expecting a parameter which you will not use. The itelliSense has put me the following: "public CustomAuthenticationStateProvider(ProtectedSessionStorage sessionStorage, ClaimsPrincipal anonymous)". This is something wrong, since it really should go: "public CustomAuthenticationStateProvider(ProtectedSessionStorage sessionStorage)". Notice that in the example number 1 I am expecting a "ClaimsPrincipal anonimous" and this is never used in the constructor, it is possible that inside the constructor the intellisense has autocompleted that code, so I recommend to copy the following code: "public CustomAuthenticationStateProvider(ProtectedSessionStorage sessionStorage)" And make that your constructor, in the class "CustomAuthenticationStateProvider.cs". It worked for me and here I leave you the comparison of my code and the tutorial. github.com/MaxwellTav/LoginAuth/commit/782295bcb29ee49add2ff2ef981e506a26200fbc Remember that to see the differences, in Github you must have the "Split" option to see the differences side by side. Best of luck.
Thank you for this video. I have a couple of questions: 1) Why create a CustomAuthenticationProvider for Authentication instead of using CookieAuthentication? 2) Is there a way to add "Remember Me?" functionality with this?
Thank you for watching the tutorial video and for your questions! I'm glad you found the content helpful. The choice between a Custom AuthenticationStateProvider and CookieAuthentication depends on your specific requirements and preferences. While the tutorial demonstrated a custom provider for educational purposes, you can indeed use CookieAuthentication for simpler scenarios. Custom AuthenticationStateProvider can give you more control over the authentication process, including integrating with external authentication systems, such as OAuth. You can implement a "Remember Me" functionality with Blazor's authentication. When using CookieAuthentication, you can configure the expiration time of the authentication cookie to determine how long a user's session remains active.
Thanks for a great video! I'm using it in my apps now and it works really good. Now, if I'd like a user to be logged in as two separate roles at the same time, how could I do that? Right now the UserSession would be overwritten. I could append the name of the UserRole to the UserSession string name, but that wouldn't work in the GetAuthenticationStateAsync, right?
Thank you for watching the video and leaving your comment! I'm glad to hear that you found it helpful for your applications. Regarding your question, if you want to allow a user to be logged in as two separate roles at the same time, you can add multiple roles to the ClaimsPrincipal of the user.
@@CodingDroplets Thank you for your response. Normally I could, but in this scenario I have Students and Teachers, which is two different accounts. Teachers sometimes creates a Student account for testing purposes and when they log in with that account, UserSession is overwritten and they're logged out as Teacher. I hoped that I could store a UserSessionStudent and UserSessionTeacher, but I can't see how the GetAuthenticationStateAsync should handle that?
You don't need to maintain two different sessions for that. You can add multiple roles to the ClaimPrinciple. Below is an example. var claimsPrincipal = new ClaimsPrincipal(new ClaimsIdentity(new List { new Claim(ClaimTypes.Name, userSession.UserName), new Claim(ClaimTypes.Role, "Teacher"), new Claim(ClaimTypes.Role, "Student") }, "CustomAuth"));
@@CodingDroplets Thanks again! I still don't get it. There's no relation between the Teacher and Student accounts. In the morning the Teacher logs in and do his work. Later he wants to se the work from a Student perspective and logs in with a Student account. Now the Teacher-login in erased/overwritten. I could ask for the UserSession and append the role to the claims, but because it's different accounts it's not necessarily the same claims values. That's why I think I must have different UserSessions stored.
I understand your concern. In this scenario, if you want to allow the same user to be logged in with two separate roles simultaneously, then you would need to have two separate UserSessions stored, one for each role. When the Teacher logs in with their account, a Teacher UserSession is created and stored. When the Teacher logs in with the Student account, a Student UserSession is created and stored. These sessions would contain the necessary claims for each role, allowing the Teacher to switch between roles without overwriting the UserSession. To implement this, you would need to modify your authentication and authorization logic to handle multiple UserSessions and ensure that the correct session is used depending on the current role of the user.
Hello, Will those custom authentications (as shown in Part 11 and Part 12) still work in Blazor .NET 8 ? What should be the approach for custom authentication if you have in the same Blazor Web application pages in different render modes ( Static, Interactive Server, interactive WebAssemby and especially Interactive Auto )
I did a Blazor Web App with .Net 8 RC2. [Interactivity type: Auto(Server and WebAssembly)], [Interactivity location: Per page/component] and followed your titorial on the Server project. When I click on login and log as admin, admin, I am redirected to the home page but I am still an anonymous user !
if user is logged in with admin, and some one copy the session key of admin, and then logged in as user and paste admin key in developer mode, and refresh, he is getting admin rights,,, how to protect from it
As the value is saved in the client side (in browser's session storage), it can be accessed by opening the developer options. But the session storage will clear the values when we close the tab.
This is really very helpful video. Thank you so much for your tutorial. just 1 thing that I had to specify builder.Services.AddScoped(); in Program.cs. I don't know why may be i am using .Net 7.0 or may be something else. But it's really very good and helpful video. Cheers :)
You are most welcome! Glad to know it helped. You don't need to add the ClaimsPrincipal as a scoped dependency. I doubt your CustomAuthenticationStateProvider class is having ClaimsPrincipal as a parameter in the constructor (placed by intellisense probably). You can just remove it and run the application without the ClaimsPrincipal scoped dependency.
Thanks for great tutorial. Just I have a question about login process and I want to know : Is this Method of custom username and password authentication secure? I mean, because in a Blazor server app, all proccessing is done server-side and on the login page, we just collect only credetials and send them to server to prove their validity. This protects sensitive data from malicious use?
Thank you for watching the tutorial and for your question. The method of custom username and password authentication shown in the tutorial is secure as long as it is implemented correctly. In the Blazor server app, all the processing is indeed done server-side and the credentials collected on the login page are sent to the server to prove their validity. This is a secure way to authenticate users and protect sensitive data from malicious use. However, it is important to note that you need to ensure that the authentication process is implemented securely and that the credentials are encrypted and stored securely on the server. I hope this answers your question. Let me know if you have any more questions or concerns.
@@CodingDroplets Thanks for your reply. Yes credentials are encrypted and stored securely on the server. My question is only about data that is collected on the login page and send to the server, and you claim that the method shown in the tutorial is secure. Did I get it right? As far as I know, this security is based on two components, ProtectedSessionStorage and AuthenticationStateProvider. Is that right?
In this specific video, we focused on demonstrating Blazor Server Authentication and Authorization. However, if you're interested in connecting UserAccount to a SQL database and avoiding hardcoded values, we have a separate video that explains database integration using Entity Framework. You can find the video on database integration using a product module here: th-cam.com/video/vi51RBc_TkY/w-d-xo.html The same principles apply, and you can adapt them to create a UserAccount module.
Hi! Thanks for the video! I need additional information about the logged user... public class UserSession { public string UserName { get; set; } public string Role { get; set; } public List Permissoes { get; set; } } Is this possible? How do access UserSession to get Permission on another pages?
Thank you for reaching out! To better assist you, could you please clarify if you are asking about accessing user permissions across different tabs in your Blazor Server application? If so, a more suitable approach might be to use LocalStorage instead of SessionStorage, as LocalStorage allows data to persist across different tabs or windows.
Thank you for watching the tutorial. Glad to hear that. Yes, we do have the source code available for download on GitHub. github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
Hi, Thank you very much for this clearly explained and useful video. You briefly but efficiently addressed the topic. I am facing a problem which says "Unable to cast object of type 'Microsoft.AspNetCore.Components.Server.ServerAuthenticationStateProvider' to type 'MyProject.Authentication.CustomAuthenticationStateProvider'". This happens at this line "var customAuthStateProvider = (CustomAuthenticationStateProvider)authStateProvider;" in Login.razor file. Probably I have missed something? Thank you
Thank you for your feedback and I'm glad to hear that you found the video useful! Regarding the issue you mentioned, it seems like there might be an incorrect cast in your code. To help you better, could you please confirm whether you have inherited the CustomAuthenticationStateProvider class from AuthenticationStateProvider in your project? Double-checking this inheritance is important to ensure that the casting works correctly. You can also explore the complete source code on our GitHub repository at github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization.
@@CodingDroplets yes it is solved. I removed builder.Services.AddIdentity(options => options.SignIn.RequireConfirmedAccount = true).AddEntityFrameworkStores().AddDefaultUI().AddDefaultTokenProviders(); from my program.cs and now is OK. Thanks
@@CodingDroplets Hi Sir, It is wonderful tutorial and can solve my problem in my new project, but I have implemented all code in my project but the same error unable "Unable to cast object of type 'Microsoft.AspNetCore.Components.Server.ServerAuthenticationStateProvider' to type 'MyProject.Authentication.CustomAuthenticationStateProvide" appearing on pressing Login Button, I have downloaded your source code from Git Repository and compare it with each and every file of my code with your code it is identical, but nevertheless the error is not disappearing, please guide me, Thanks in Advance
Thank you for this video. Its very helpful. Can you provide me the info how to get the login window displayed WITHOUT to see any other (sidebar, bar in the upper side, login button link in the upper right side, ...) element? I need only login window displayed first. No other elements and not to go to the upper right side on the page and click on the login link in order to get the login-window displayed. Can you provide the info me how to do that? Would be nice to: start the page and to see login window immediately after starting of the page and there are no other elements, nothing, really nothing except the login window for entering user and password. many many thx. -- add info: I was looking for that kind of custom login and: nobody, really nobody can provide the info how to get login window displayed in a custom managed authentication in blazor server. No one on stack overflow, no one in you tube, no one in GitHub, nowhere... many professional people are providing some info how to login on the blazor server but there are some elements to see before you logged in. Your tutorial is perfect man, no question about that and I am thankful that you took your time to write that way of custom login. But one small piece of code or advising how to get login window displayed first would be very n very nice. thank you very very much & nice evening & greetings from Vienna xD
Thank You Milan Malbasic. Glad to hear that it helped. You can redirect the user from the MainLayout if authenticationState.User.Identity.IsAuthenticated value is false. Make sure you use a different layout (other than MainLayout) for your login page. Below is a sample piece of code. var authenticationState = await AuthenticationState; // AuthenticationState is the cascading parameter if (!authenticationState.User.Identity.IsAuthenticated) { navManager.NavigateTo("/login"); return; }
@@CodingDroplets - Thank you again for that info. I just did that as you said and I have now a white login page showed first. yesss... -- 1000 thx! - 🙂 - The last thing what I need is: how to change the code / in which class ( there are 3 of them) should I implement the check of the user and password stored in my postgres database (as I don't want to use internal created user). I can remeber in your video was mentioned that we could ommit some class in case we want to use our own database for user/password. - I know how to connect to postgres and I know how to implement a connection to the database but I don't know what has to be modified in one of those 3 classes: "UserAccount.cs" / "UserAccountService.cs" / "UserSession.cs". I think "UserAccountService.cs" can be deleted from the project in case we will use a database stored credentials. But what exactly do I have to change in the other 2 classes so my user/password from my postgres database can be used for the authentication and authorization. Could you please be so kind and put some pieces of code here and a short info what & where needs to be changed in order to use database-stored user/password? Thank you in advance. greetings from Vienna (A) 🙂
@codingDroplets - Could you please be so kind and give me the info how the code has to be changed to use database stored user/password/role instead of hardcoded? thx
Sorry for the delayed response. You can implement fetching the user data from your database in UserAccountService class. In the current demo the GetByUserName method is fetching the data from hardcoded user list. Just remove the harcoded list and fetch the user data from your DB.
In the context of .NET Blazor Authentication, you can include the user's ID in the authentication claims. Something like below: new Claim(ClaimTypes.NameIdentifier, userId),
Hello, thanks for the great tutorial!!! However i am facing a problem. A user (admin1) logs in. So far everything works perfectly. If another user (user2) logs in, the first user (admin1) will lose his identity and will have access as the second user (user2). This could stack. For example, if 10 users are logged in, and another one logs in, then all 11 users will have the identity of the last one. I tried to tweek your code but nothing works. Any help would be highly appreciated. Thank you
its because you added singleton service singleton service means 1 global service for all users, that's the reason. you can fix it by changing from AddSingleton to AddScoped (user per user)...
@@renanmenezes8793 Thanks for you answer. Actually this wasn't the problem. I was using a static (😑) object to save the username so i could access it from other pages. I used dependency injection and it got fixed.
![Blazor Webassembly Custom Authentication [Blazor Tutorial C# - Part 12]](http://i.ytimg.com/vi/7P_eyz4mEmA/mqdefault.jpg)
![Blazor Webassembly Custom Authentication [Blazor Tutorial C# - Part 12]](/img/tr.png)
⭐ Join Us on Patreon: www.patreon.com/CodingDroplets
🔗Blazor Tutorial Series Playlist link:
th-cam.com/play/PLzewa6pjbr3IQEUfNiK2SROQC1NuKl6PV.html
🔗Blazor Web App Authentication: th-cam.com/video/GKvEuA80FAE/w-d-xo.html
Absolutely the best i have seen on the web for a "how to develop a custom authentication for blazor server!". you covered all bases and that is simply awesome!
Thank you so much for your valuable feedback. Glad to know you liked it.
I've completed all the parts and have successfully implemented CRUD operations and authentication with a local database, using Entity Framework. I have significantly improved. Great tutorial, many thanks!
That's fantastic to hear, and congratulations on your successful implementation of CRUD operations and authentication with a local database using Entity Framework! I'm thrilled that the tutorial was helpful in your journey to improve your skills. Keep up the great work, and happy coding! 🚀😊 .. Thank You So Much for the Support.
Hi, can u share the code with me I am working on authentication with local database. It will be helpful for me
Very nice tutorial. You briefly showed the final product without forcing audience to wait to the end of the video. Also you did not dive into irrelevant database details, useless jokes etc. Clear and fluent narrative. Thanks!
You're welcome! Thank you for sharing your thoughts.
This is the best video on youtube for this topic. Explains everything from the vanilla project, and it is quick, comprehensive and to the point, and it works. On top of that, for me the explanation about server render mode in conjunction with ProtectedSessionStorage at 21:32 explained exactly the problem I'd had with other attempts to use ProtectedSessionStorage, probably from following blazor wasm tutorials, and now I know why that was. Thank you!
Thank you so much for your incredibly positive feedback! Glad to hear that.
Excellent minimum Authentication Example. Straight to the topic and without any distraction.
Thank you so much for your positive feedback! Glad to hear that.
Absolutely outstanding! This is exactly what I have been looking for! You literally took me step by step through a perfectly rendered security implementation for my Blazer Server applications. Even your variable names and coding standards were exactly how I would have implemented them. Excellent video! Thank you so much!
Thanks a lot for sharing your thoughts. I'm glad to see your comment. Once again thank you for the support.
This is the first time I see a content creator answering comments and with a deep explanation indeed. Subscribed! Of course, the video is also superb, since there are very few videos in this topic. Blessings!
Thank you so much! We're delighted to have you as part of our community.
We believe in the importance of engaging with our viewers and providing thorough explanations to address any questions or concerns. Your feedback confirms that we're on the right track, and we'll continue to be responsive to our viewers' comments and provide in-depth explanations to support your learning journey.
Thank you! One of the clearer step by step tutorials I've seen on a subject I have struggled with. This is the first time I've actually understood what is going on. Appreciate that you kept the design simple and basic with clear steps.
Going to follow it through using minimal API I've developed for our product, which has a JWT based auth endpoint.
nb. It would be nice if you included your github code links in the summary, though I found them easily enough from your channel About page.
Thank you so much for your thoughtful feedback! Glad to hear that the step-by-step approach helped you grasp the subject more clearly and that you found the design and steps straightforward.
I appreciate your suggestion regarding GitHub code links in the video summary. Providing easy access to code resources is indeed important, and I'll certainly consider your feedback for my future videos.
Por fin un tutorial simple conciso, directo al punto, muchisimas gracias por el video!!!
Me alegra escuchar eso. Gracias
Yo llevaba meses buscando algo decente, y todos salían con las Razor Pages scaffoldeadas de MS Identity, incluso llegué a pensar que no se podía hacer nada si no era con eso. Fue desesperante hasta que encontré esta joya.
De todos modos me preocupa el tema del render mode por lo del SEO, luego investigaré más a fondo.
Muchas gracias por ver mi video y por tu comentario! Me alegra saber que mi video ha sido útil para ti en tu búsqueda de soluciones de autenticación y autorización con Blazor Server.
Es cierto que la mayoría de las soluciones que se encuentran en línea utilizan las páginas Razor Pages de MS Identity, pero hay muchas otras formas de implementar la autenticación y autorización en Blazor Server. Me complace que mi video haya sido una alternativa útil para ti.
@@CodingDroplets Jajaja esta respuesta parece sacada de ChatGPT.
Sí. no sé español Estoy traduciendo y respondiendo con ChatGPT. Ja ja
Great video, you helped me a lot.
For those who want to recreatte this:
Watch out VS sometimes suggests you code parts and the ifs are reversed e.g. instead of if(userSession != null) it suggests if(userSession == null), took me some time to realize that.
Thank You for sharing your thoughts.
El mejor de lo mejor de los tutoriales que he visto, y he buscado muchos por este tema. Gracias
De nada. Me alegra escucharlo. Gracias
Great video! I love this tutorial style, no waffle or over complication. Great work, thank you.
Thank you so much for taking the time to watch the video, and for your kind words! I'm glad to hear that you found the tutorial style helpful and easy to follow.
I always aim to make my tutorials clear and concise, without overwhelming viewers with unnecessary information. It's great to know that this approach resonated with you and helped you to understand about this important topic.
Thanks again for your feedback, and I hope you continue to find my content helpful in the future.
THANK YOU SO MUCH sir! This is exactly what I searched for. I searched through StackOverflow and I didn’t found it. I searched in other places also. You are my hero!
Thank you for your kind words and feedback! I'm glad to hear that the tutorial was exactly what you were looking for and that it helped you with your project.
💥Host Your Blazor App in Linux: th-cam.com/video/bXK-F-uL7Qo/w-d-xo.html
🔗Blazor Tutorial Series Playlist link:
th-cam.com/play/PLzewa6pjbr3IQEUfNiK2SROQC1NuKl6PV.html
Very good explanation. Thank you very much. I watched much login page on Blazor videos before this. But I found best answer at the end.
Thank you for watching the video and leaving your positive feedback. I'm delighted to hear that you found my explanations to be clear and helpful in your search for a solution to your Blazor login page needs. I'm always striving to provide the best possible content to my viewers, and your comment encourages me to continue creating informative and useful videos. If you have any further questions or topics you'd like me to cover, please don't hesitate to let me know. Thanks again!
it was excellent tutorial, most of the available resource are based on the bulky aspnet tables and db context, ef core type used, but this was the actual custom authentication tutorial, thanks and great. it will be great help if added a tutorial to add custom fields in user identity , that may need to show on different pages, .i.e like full name, and other related data, like picture etc..
Thanks a lot! Will create a video soon as you mentioned.
I really appreciate your clear explanations and work pace. Your tutorial provides an excellent foundation that can be easily applied to own projects :)
Thank you so much for your wonderful comment! Glad to hear that you found our explanations clear and the tutorial's pace helpful for your learning.
Really useful...have been looking for something like this for a while. Well explained and clearly coded. Thanks.
Great to hear!
This video is amazingly concise and helpful. Thank you!!!
You're so welcome!
Just the video that solves the problem, 100% effective! Great job!
Thank You! Glad to know it helped.
You're the GOAT.
Thank you so much, this is really underrated!
Thank you so much for your kind words and support, I'm thrilled to hear that you found my video helpful and consider me the GOAT (Greatest Of All Time), it means a lot to me! I appreciate you taking the time to leave a comment and for considering my content underrated, I'll continue to do my best to create more valuable videos for you and others to enjoy.
A very helpful video... I've seen many other ones and I've read some article, but this is the first time that I was able to implement a login logic, even if hard-coded data. My next step will be to use a microservice for authentication, I hope that all videos can help me as well.
Regards.
Thank you for your comment and support! I'm glad to hear that the video was helpful in implementing a login logic in your Blazor Server application, even with hard-coded data. It's great to see that you were able to apply the concepts from the tutorial successfully.
Using a microservice for authentication is a great next step, and I'm confident that the other videos in the series will provide valuable insights and guidance for your journey. Feel free to explore the rest of the videos, as they cover various aspects of Blazor applications.
If you have any questions or need further assistance along the way, don't hesitate to reach out. Best of luck with your authentication microservice implementation, and once again thank you for your kind regards and support!
Very precise and well explation on blazor authentication process.
Thanks a lot.
You are most welcome
Very useful. I needed to do custom login and other video's were not as helpful.
Great to hear!
Thanks! This was the most helpful video on this subject Thanks much
Most Welcome!!! Thanks a lot for the support.
Very cool tutorial, managed to follow all the way to the end, sometimes you go a bit too fast but it's all good. Also, I don't know if the new version of Blazor changed anything but you can't do custom NotAuthorized messages in App.Razor.
I hope you can expand on this and do one when you connect to a database and then authorise other stuff like product images, profile pictures etc. I would be grateful. Stay blessed and full of luck and thanks for the knowledge!
I'm glad to hear that you found the tutorial helpful, and I appreciate your input regarding the pace of the tutorial. I'll make sure to be mindful of the pace and provide more detailed explanations in future videos.
I'll definitely consider making a video addressing your queries including database connectivity.
Many thanks for you, this is a very simple and straight forward lesson in blazor custom authentication and authorization.
I was wondering if a user has more than one role, how to handle them, if you can do another tutorial for managing roles dynamically from the database, I mean the roles of the pages can be managed through the app not hard coded using @attribue.
Highly appreciated 👍
Most welcome. I would like thank you for sharing your thoughts.
For dynamic roles, we have to implement additional logics. We'll try to do a video soon.
@@CodingDroplets thanks for this great video 👍 and looking forward to dynamic roles
This works perfectly with Net 6 and 7. Unfortunately I have tried the same thing with a .Net 8 (RTM no longer RC2) Blazor Server application and it is no longer working . I've seen that in the standart .NET 8 Blazor Web App with 'Authentication type:individual accounts', 'Interactive render mode:Server', 'Interactivity location:Per page/component' template there is a RevalidatingServerAuthenticationStateProvider instead the AuthenticationStateProvider . I have not yet figured out how this is working !
Will you update your videos for Blazor Net 8 ?
Thank you for bringing this to my attention. I appreciate your feedback. I'll make sure to explore and create updated content for Blazor Web App in .NET 8, including any changes in authentication mechanisms. Stay tuned, and I'll cover the latest developments in upcoming tutorial videos.
I'm trying to figure that out too. Looks like right now there is no video or tutorial about that.
Coming soon.
@@CodingDroplets : Thank you very much
@@CodingDroplets Also looking forward to this, cant get it working with the new rendermodes, blazor just refuses to render
Very well explained for someone who is new to Blazor. One question, is there a tutorial to implement 2FA as part of authentication? Or any resources that are available?
Thank you for taking the time to watch my .NET Blazor Server Authentication & Authorization video and for your kind words! As for your question regarding 2FA (Two-Factor Authentication), there are definitely resources available to help you implement it as part of your authentication flow.
One resource that I recommend is the official Microsoft documentation on implementing Two-Factor Authentication in ASP.NET Core: docs.microsoft.com/en-us/aspnet/core/security/authentication/2fa?view=aspnetcore-6.0
Very useful thanks, now I will watch some more of your videos
Thank you for watching the tutorial and for your kind words! I'm delighted that you found the video useful and informative. 🎉
Very best practice!!! I have exactly search for this!!! 5 Stars!!!!
I'm glad to hear that you found the video helpful and that it aligned with your search for best practices! Thank you so much for your 5-star rating and positive feedback.
Exactly what I was looking for. Thank you.
You're welcome! We're glad the tutorial met your needs.
Really Useful... Helped me get off the block with my project.
Glad it helped!
Best tutorial out there 100%, simple and fast
Thank You so much. Glad to know you liked it.
Excelente, muy bien explicado paso a paso. Resulta. Gracias.
Thank You!
This is the best tutorial that i have ever seen.
Thank you so much for your wonderful comment! Glad to hear that.
Useful tutorial 👍👍 Thank you so much. However, how can I solve the issue where authenticated user open 2 different tabs in same browser? I noticed that the newly opened tab will not log user in.
You're most welcome! Thanks a lot for sharing your thoughts.
You can make use of local storage instead of session storage. Local storage is shared between all tabs and windows from the same origin. The data does not expire. It remains after the browser restart and even OS reboot.
Excellent and very help full video, can you Extend the same authentication to apply an idle timer and after a defined time say 30 Seconds user automatically logout from all the open tabs and/or windows of the same session
It can be done by providing some additional logic in GetAuthenticationStateAsync method of CustomAuthenticationStateProvider class. We'll try to do a video on this soon.
Hello,protectedsessionstate is not working in c# class could you please help me out?
I believe there might be a slight misunderstanding. In the tutorial, we used "ProtectedSessionStorage" instead of "protectedsessionstate" for managing session state securely.
The "ProtectedSessionStorage" is a part of Blazor's session state management system, which allows you to store and retrieve sensitive data securely in the user's session. It ensures that the data is encrypted and protected from tampering.
I followed this to a T but it has so many errors plus the variable names keep changing for the AuthStateProvider and it's CustomAuthStateProvider somewhere else
I'm sorry to hear that you encountered errors. You can find the source code for the tutorial on GitHub: github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
Hie there. I have followed the whole tutorial and I am using Mudblazor. Once I changed the rendering mode to prerender: false, nothing appears on the screen for all pages. Please help
Are you using the Blazor Web App template that came with .NET 8? If yes, you might find this video helpful: th-cam.com/video/GKvEuA80FAE/w-d-xo.html
Very informative and helpful. thank you
Thank you for watching the video and leaving your comment! I'm glad to hear that you found the video informative and helpful.
In the UserAccountService class if I want to populate the list with the properties of my databases, how should I approach it more or less? any ideas? Thank you
Thank you so much.
It was a feature that I was looking for perfectly.
I have a question, after logging in, go to the page you gave me permission and refresh (f5) and the page will be unauthenticated and the page will not be displayed (I got an error)
Is there any way to solve this problem?
I'd appreciate it if you could suggest a way to keep me logged in or something else even if I refresh.
(.net 8.0 blazor webapp)
Thank you so much, best explanation on custom authentication!!
Could you explain how to integrate an authentication from Google or from any other Authentication Provider? I would like the user to authenticate with Google, get the user's email, and then use the email to get the customer role from the database
Thank you for your comment! I'm glad to hear that you found my explanation helpful.
Integrating an authentication from Google or any other Authentication Provider is definitely possible with Blazor Server App. In fact, there are built-in authentication templates available for Google, Facebook, Twitter, and Microsoft accounts.
You can find more detailed instructions and code samples for integrating Google authentication in a Blazor Server App in the Microsoft documentation: docs.microsoft.com/en-us/aspnet/core/security/authentication/social/google-logins
I hope this helps!
Hmm, so the built-in Identity that uses razor pages (and different layout, etc) should be replaced with blazor dedicated identity. Too bad one needs to write it again and blazor server template includes identity based on razor pages rather than blazor
Thank you for your comment and feedback on the tutorial! You're correct that when using Blazor Server, the default template includes identity based on razor pages. However, it's important to note that the decision to use the built-in Identity with razor pages or a custom authentication approach like the one demonstrated in the tutorial depends on the specific requirements and preferences of your application.
The built-in Identity with razor pages provides a robust and feature-rich authentication system with pre-built UI components and functionality. If you're comfortable with razor pages and find that it meets your needs, there's no requirement to replace it with a Blazor-specific identity implementation.
On the other hand, if you prefer a more customized authentication experience or want to leverage Blazor-specific features and components, implementing a custom AuthenticationStateProvider class as shown in the tutorial can be a good option. It allows you to have fine-grained control over the authentication process and integrate it seamlessly with your Blazor components.
Hi, thank you so much for your tutorial. So simple and to the point!
In your github repository, I was able to get the code and tried it out. I found a commented out code //await Task.Delay(5000)
Was this to remedy the issue where calling protectedsessionstorage can throw an error when used with cascading authentication state component (because JSInterlop is not initialized)? I do have this issue right now- were you able to solve it? I am wondering if I should make my own cascading authentication state component and call GetAuthenticationStateAsync manually during onAfterRenderAsync call?
Thank you for your positive feedback on the tutorial and for taking the time to try out the code from the GitHub repository. Regarding the commented out code "//await Task.Delay(5000)", its purpose was to introduce a delay for displaying a message during the authorization process.
As for the JSInterop error you mentioned, in the tutorial video, we explained the option of changing the render mode to server-side rendering, which can help mitigate such issues. By utilizing server-side rendering, you can minimize the dependencies on JavaScript interop and ensure a smoother authentication process.
Thank you for the video, well explained and simple, I would like to know if you have some video on how to work with modals to performance CRUD.
There are videos in Microservice series in which CRUD procedures are implemented. You can see the series in playlist.
It is possible to use old identity mechanism with roles claims etc.?
I see posibilities in your code to split repository code to another project but I confiused how it can work with custom authenctitation by key.
Thank you for the great tutorial video. If I were to change it to Windows Authentication, how and where to use your CustomAuthenticationStateProvider to load all the claims for Roles from a database? Would it be the index.razor or the app.razor file? Thank you.
This video is to implement a custom authentication in a Blazor Server Application.
For implementing Windows Authentication, please refer the below URL.
docs.microsoft.com/en-us/aspnet/core/security/authentication/windowsauth?view=aspnetcore-6.0&tabs=visual-studio
This tutorial was exactly what I was looking for
Thanks 👍
Most welcome! Glad to know it helped.
I want to change user account service class so that accounts get retrieved from the database
What changes do I have to make
Otherwise thanks
You are welcome! Just implement the method to fetch user account data from database instead of hardcoding it. If you are using SQL Server database, just make use of EF Core to achieve the same
@@CodingDroplets I figured it out
@@anonymousug9648 - Could you please be so kind and give me here some code example how you did that? I need the same and not sure in which class/how to do that. My DB is a postgres DB. Thank you
@@CodingDropletsI am using sql server db and created a method to fetch the data from db in UserAccountService using entityframeworkcore. Will you please tell me what changes need to made in GetByUserName method
Great video and very informative. I wonder if you could help a little though? I have tried to implement what Milan has asked below about going straight to the login page. Which I have achieved, and when the user logs in, it takes them to the correct page, and displays the correct greeting, the problem I have is the side menu bar is "locked". If I manually enter the URL it takes me back to the login screen, which I am happy about, but can't get anywhere. Any idea as to why the sidebar is locked down?
Thank you for watching the video and leaving your comment. I'm glad to hear that you found the video informative.
Regarding your question, I'm not exactly sure who Milan is or what they asked for in their comment. However, I can try to address the issue you mentioned. It seems like you have implemented a login page and the user is able to log in successfully, but the side menu bar is not working as expected.
One possibility could be that you have implemented some authorization logic for the sidebar menu that prevents access until the user is authenticated. If this is the case, you may need to update your authorization logic to allow authenticated users to access the sidebar menu.
I also wanted to mention that the source code for the project in the video is available on GitHub at github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization. You may want to check that out to see if there are any differences between your implementation and the sample code.
I hope this helps! Let me know if you have any further questions or concerns.
@@CodingDroplets thanks very much for coming back to me. I had put an else statement in my Login statement on the MainLayout page, I removed that and now I can login and use the sidebar.
Glad to hear that you were able to resolve the issue!
Thank for this excellent tutorial and for the github code too. Do you have plan to make another video (or simple github repo) implementing localstorage (sql) , session timeout and dynamic role support? It woulde be super great! Thank you
Sure... Will do it soon.
Excelente contenido, justo lo que necesitaba, muchas gracias.
Glad to know you liked it. Thanks!
How reliable this is ? is this secure enough for a Production Application ?
Thank you for your comment and raising a valid concern about the security and reliability of the custom AuthenticationStateProvider approach in a production application.
The custom AuthenticationStateProvider demonstrated in the tutorial is a commonly used approach in Blazor Server applications and can be considered reliable and secure if implemented correctly. However, it is important to note that security is a complex topic, and there are additional factors to consider when deploying a production application.
To enhance the security of your application, it is recommended to follow best practices such as:
Secure Communication: Ensure that your application uses HTTPS for secure communication between the client and server. This helps protect sensitive data during transmission.
Secure Password Storage: Implement proper password hashing techniques to securely store user passwords in your application's database.
Input Validation: Validate and sanitize user input to prevent common security vulnerabilities like SQL injection and cross-site scripting (XSS) attacks.
Authorization and Access Control: Implement proper authorization mechanisms to control user access to different parts of your application. This can involve roles, claims, or other access control techniques.
Regular Updates and Security Patches: Stay updated with the latest security patches and updates for your application framework, libraries, and dependencies to address any known vulnerabilities.
Remember, security is an ongoing process, and it's crucial to stay informed about the latest security best practices and techniques. Additionally, conducting thorough security testing, including penetration testing and code reviews, can help identify and address any potential vulnerabilities.
By following these guidelines and adopting a proactive approach to security, you can build a production-ready application with a reliable and secure custom AuthenticationStateProvider.
Great tutorial. Easy to follow and understand.
Thank you so much for taking the time to watch the tutorial video. I'm delighted to hear that you found it helpful and easy to follow.
I like your technique, but I found that when I reload the application after logging in, an error is thrown.
System.InvalidOperationException: 'JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.'
Is it possible in pre-render server mode?
You can change the render mode in blazor project in _Host.cshtml. It is shown in the video itself .
Great video!!!, but I'm getting this error on the task UpdateAuthenticationState , await _sessionStorage.SetAsync("UserSession", userSession); when I call an api: JavaScript interop calls cannot be issued at this time. This is because the circuit has been disconnected and is being disposed of. I would appreciate any help
Please change the render mode as explained in the video. It is already discussed in the video.
Thank you for your quick response, but my error was not solved.
Have you tried changing the render mode?
Please verify your code. Source code is available in the below URL.
github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
21:50 for those who need to look for where it is discussed quickly
Thank you for this great Tutorial. I actually have three questions:
First: Is this the current best practice considering an implementation for authentication?
Second: Are the pasowrds hashed when stored?
and third: Can multiple users be logged on at the same time or will "UserSession" in the Storage get overwritten then?
Thanks in advance :)
Hi! I'd be happy to answer your questions.
The use of ProtectedSessionStorage to store user session details in Blazor Server-side applications is a common practice. However, the best approach for authentication implementation depends on various factors such as the size and complexity of the application, the security requirements, and user experience. As a general rule, it is always recommended to follow industry standards and guidelines, and to consult security experts for critical applications.
In the demonstration video, the passwords were not stored in a database. Instead, they were hardcoded directly into the code. It is crucial to store passwords securely by hashing and salting them before storing them in a database or any other storage medium. This helps protect user passwords in case of a data breach.
This implementation allows multiple users to log in concurrently without interfering with each other's sessions. The ProtectedSessionStorage used in the tutorial is user-specific and isolated, and each user's session data is stored in their browser. Therefore, multiple users can use the application simultaneously without any conflicts.
I hope this helps! Let me know if you have any further questions.
@@CodingDroplets Hello, Thank you for your fast response! Thats very good to know, about the Password hashing, is there a a function provided by Microsoft ASP which is recommended to use or do I need to implement this on my own?
Thanks in advance!
You can check out this link for more information:
learn.microsoft.com/en-us/aspnet/core/security/data-protection/consumer-apis/password-hashing
This page provides a detailed explanation of how to hash passwords and also covers other topics related to password security. Hope this helps!
@@CodingDroplets Thank you so much for the answers! Its helps a lot!
You are welcome 🙂
Thanks for the great turorial. Can you explain why you used Singleton for UserAccountService and not prefer Scoped.
Thank you for your comment and I'm glad to hear that you found the tutorial helpful! Regarding your question about using a Singleton lifetime for the UserAccountService, it's important to note that in the example shown in the video, the user account details were hardcoded. However, in a real application, the user account details would typically be fetched from a database or another data source.
In this scenario, using a Scoped lifetime for services that interact with a database is a good practice. Scoped lifetime means that a new instance of the service is created and shared only within the scope of a request or operation.
I hope this answers your question, and if you have any further queries or concerns, please feel free to let me know!
@@CodingDroplets Thank you for the prompt reply and it clarified my doubt.
Thank you for letting me know that my response was helpful and clarified your doubt!
Excellent tutorial, thank you. I am however getting the error below in program.cs (on the line 'var app = builder.Build();'). Could you please indicate how I can fix this?
Some services are not able to be constructed (Error while validating the service descriptor 'ServiceType: Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider Lifetime: Scoped ImplementationType: BlazorApp1.Authentication.CustomAuthenticationStateProvider': Unable to resolve service for type 'Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage.ProtectedBrowserStorage' while attempting to activate 'BlazorApp1.Authentication.CustomAuthenticationStateProvider'.)'
Thank You for sharing your feedback. You can find the source code of the project from the below URL.
github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
Please verify your source code with the demo project.
@@CodingDroplets I've cloned the source code and can confirm that it runs successfully for me. My code looks to be identical but there must be a difference somewhere - I'll keep hunting thanks!
Greetings, to those who have the error "Some services are not able to be constructed (Error while validating the service descriptor 'ServiceType: Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider Lifetime: Scoped ImplementationType: Unable to resolve service for type 'System.Security.Claims.ClaimsPrincipal' while attempting to activate."
I have a potential solution for you:
In the class: "CustomAuthenticationStateProvider.cs" be sure that the "constructor" part is not expecting a parameter which you will not use.
The itelliSense has put me the following:
"public CustomAuthenticationStateProvider(ProtectedSessionStorage sessionStorage, ClaimsPrincipal anonymous)".
This is something wrong, since it really should go:
"public CustomAuthenticationStateProvider(ProtectedSessionStorage sessionStorage)".
Notice that in the example number 1 I am expecting a "ClaimsPrincipal anonimous" and this is never used in the constructor, it is possible that inside the constructor the intellisense has autocompleted that code, so I recommend to copy the following code:
"public CustomAuthenticationStateProvider(ProtectedSessionStorage sessionStorage)"
And make that your constructor, in the class "CustomAuthenticationStateProvider.cs".
It worked for me and here I leave you the comparison of my code and the tutorial.
github.com/MaxwellTav/LoginAuth/commit/782295bcb29ee49add2ff2ef981e506a26200fbc
Remember that to see the differences, in Github you must have the "Split" option to see the differences side by side.
Best of luck.
It was really a very useful tutorial. I would like to thank you for this video. Also if you could help with, how to set the session time-out value? I have been searching for this long since. Please help me.
Will do a video about it soon.
unable to cast object of type
Microsoft.AspNetCore.Components.Server.ServerAuthenticationStateProvider' to type 'CustomAuthentication.Authentication.CustomAuthenticationStateProvider
here
var customAuthStateProvider = (CustomAuthenticationStateProvider)asp; on the login page UI
this error is showing to me what problem could be ??
Is your CustomAuthenticationStateProvider class inherited from AuthenticationStateProvider? Please find the project source code in our Github repo (URL below):
github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
@@CodingDroplets ye same as you code
Its working Thank you..
@@CodingDroplets drop repo link in description. very nice explanation .
@@Kiran.KillStreak github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
Protected Session Storage is now deprecated. What else can we use instead?? I saw Blazored is it fine?
Yes.. You can use Blazored
Thank you, great tutorial to understand auth in Blazor
You're welcome. Glad to know you liked it.
Hi, Thanks for your video. Just one question, is there any better way to use localstorage or cookie instead of ProtectedSessionStorage. Otherwise we lost our session in another tab.
You can make use of local storage.
@codingDroplets but there is no way to use localstorage in authstateprovider in server side. Only onafterrender method allows to use it
Please check the below project in which I've used Local Storage for saving User Session details. Inside CustomAuthenticationStateProvider, you can see a constant named SESSION_VALIDITY_MINS (for Session Duration). The constant value can be changed based on your need. Also I suggest you to implement some encryption while saving the data.
github.com/codingdroplets/BlazorServerAuthenticationAndAuthorizationWithLocalStorage
Hii Coding Droplets I wondering if once you implements this kind of Authetication on dev you wont pay anything to put it on production(after deploy and publish the app)? Thank you
Hi there! Thanks for your comment and for watching the video.
To answer your question, the authentication and authorization techniques that I covered in the video are built into Blazor Server and do not require any additional fees or services to be used in production. Once you have implemented the authentication and authorization on your development environment, you can publish your Blazor Server application to any hosting provider or server, and the authentication and authorization will continue to work as intended.
However, it's important to note that the hosting providers will charge you for the hosting itself or for additional features that you may need for your application. So be sure to check the pricing and features of your hosting provider before deploying your application.
@@CodingDroplets thank you very much for you answer I will care about that once I get hosting. Thank u again
You are welcome
Why you do not provide "CustomAuth" string parameter in Update method as you did in Get method?
Thank you for watching my video and for your question! In the GetAuthenticationStateAsync method, we need to provide the authentication type string parameter when creating the ClaimsPrincipal instance because that method is responsible for retrieving the current user's authentication information. The authentication type string specifies the type of authentication being used and is necessary to correctly create the ClaimsPrincipal instance.
On the other hand, the NotifyAuthenticationStateChanged method is used to notify the application that a change in the authentication state has occurred. In this method, the authentication type string is not necessary, since it is not used to create a new ClaimsPrincipal instance. Instead, it simply notifies the application that the authentication state has changed and that the UI should be re-rendered to reflect the new state.
I hope this clarifies your question. If you have further questions or need more information, please don't hesitate to let me know. Thank you again for watching my video and for your comment!
@@CodingDroplets thank you! Now it is clear. Thank you for your videos!
You're welcome! I'm glad that my explanation helped and that it's clear now. Thank you for watching my videos and for taking the time to leave a comment. If you have any other questions or topics you'd like me to cover, please feel free to let me know. Thanks again and have a great day!
Does this mean that we have to add that etc. approach in every single page (assuming they all need authorisation). Seems a lot of work?
While it might seem like a lot of work to add to each page, it's a powerful and flexible approach. However, if you want a more centralized solution, you can also create a layout or a component that includes the authorization logic, and then use that layout or component across multiple pages. This way, you can manage authorization in a more centralized manner. It all depends on the structure and requirements of your application. Hope this helps!
@@CodingDroplets thank you yes I'm a bit new to Blazor and indeed to the whole Microsoft .Net Core framework (an old multivalue Pick/Revelation programmer!). Been confused over the various authentication approaches but am finding these couple of videos very useful. They take a more measured approach than some I've seen which just dive into what seem overly complex approaches.Thanks.
That's fantastic to hear! Glad to hear that the videos are helping you.
Great video, this perfect example helped me a lot. Thanks!
You're very welcome!
A Question: when i logged in (in your example application) . i am opening a new tab and writing the adress and doing enter. But the page shows me i am not logged in. How to solve this problem ?
Thank you for your question! In the example application, I've used Protected Session Storage to save the user session, which is a type of storage that is specific to the current browsing session. When you open a new tab and navigate to the application, the session storage is not shared between tabs, which is why you appear as not logged in.
To address this issue and maintain user authentication across multiple tabs, you can switch to using Local Storage instead of Protected Session Storage. Local Storage is a type of web storage that persists even when you open a new tab.
To implement this change, you would need to modify the authentication logic and update the storage mechanism to use Local Storage. By doing so, the user's authentication state will be preserved across different tabs.
@@CodingDroplets Thank you very much. I used ProtectedLocalStorage instead of ProtectedSessionStorage and everything is seems works fine.
That's great to hear! I'm glad you were able to solve the issue. It's good to know that everything is working fine now. If you have any more questions or need further assistance, feel free to ask. Happy coding! 😊👍
hi ..! thanks for your tutorials .
I facing issue on my existing project build .net6 , when i implement your code .
unable to cast object of type
Microsoft.AspNetCore.Components.Server.ServerAuthenticationStateProvider' to type 'CustomAuthentication.Authentication.CustomAuthenticationStateProvider
here
var customAuthStateProvider = (CustomAuthenticationStateProvider)AuthenticationStateProvider
Make sure you've inherited AuthenticationStateProvider in the CustomAuthenticationStateProvider class. You can find the source code in the below URL.
github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
@@CodingDroplets Thanks for your code. there is no issue in your code its Perfectly work .
issue is on my existing project . now its working after changed on app.razor to
Great tutorial!!! How would one prevent a user logging into multiple instances using the same account Across multiple browsers?
Thank you for your positive feedback!
To prevent a user from logging into multiple instances using the same account across multiple browsers, you can implement a mechanism called "session management" or "single sign-on (SSO)". Here are a few approaches you can consider:
Limit Concurrent Logins: You can restrict users to a single active session at a time. When a user logs in from a new browser, you can invalidate the previous session and force a logout.
Unique Session Identifiers: Assign a unique identifier (e.g., session token) to each user session. Store these identifiers in a secure manner, such as in a database or cache. When a user attempts to log in from a different browser, you can check if the session identifier is already in use and handle the situation accordingly.
Token-based Authentication: Use token-based authentication mechanisms like JSON Web Tokens (JWT). Include additional information in the token, such as the user's browser details or IP address. When a new token is issued, you can compare this information to the existing token and take appropriate action if a mismatch is detected.
It's important to consider the specific requirements and security considerations of your application when implementing session management. You can explore these concepts further and adapt them to your needs.
this is the one tutorial i am searching for a long time, thanks, where i will get the source code for this
Most welcome! Glad to know you liked it. Source code available in the below link.
github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
I have a problem, the sidebar is not showing for no reason ? do you have any idea ? I verified the code X time. Thanks for the video !
Thank you for watching the tutorial and I'm glad to hear that you found it helpful. Regarding the issue you are facing with the sidebar not showing, it could be due to a variety of reasons. Without looking at the code, it's hard to pinpoint the exact issue. However, some common causes of this issue could be:
Missing CSS: The sidebar might be hidden due to missing CSS classes or styles. Double-check the CSS file and make sure all the necessary styles are present.
Incorrect placement: Make sure the sidebar component is placed in the right location within the layout. It's possible that the sidebar is not being rendered because it's not included in the correct location.
Browser caching: Try clearing your browser's cache and reloading the page. It's possible that the browser is caching an old version of the page that doesn't include the sidebar.
If none of these suggestions work, please provide more details or share your code on a platform like GitHub so I can take a closer look and provide a more specific solution.
Sometime many Dots in Blazor project name produces this side navigation bar hiding issue. For example "My.Sample.Demo.prj" -----> instead create project without Dots "MySampleDemo" and see. Seems like auto generated file referencing issue.
AuthenticationStateProvider doesn't work on Blazor Server, I have to use either ServerAuthenticationStateProvider or RevalidatingServerAuthenticationStateProvider.
Source code is available in the below github repo
github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
Please verify your code.
Greetings, to those who have the error "Some services are not able to be constructed (Error while validating the service descriptor 'ServiceType: Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider Lifetime: Scoped ImplementationType: Unable to resolve service for type 'System.Security.Claims.ClaimsPrincipal' while attempting to activate."
I have a potential solution for you:
In the class: "CustomAuthenticationStateProvider.cs" be sure that the "constructor" part is not expecting a parameter which you will not use.
The itelliSense has put me the following:
"public CustomAuthenticationStateProvider(ProtectedSessionStorage sessionStorage, ClaimsPrincipal anonymous)".
This is something wrong, since it really should go:
"public CustomAuthenticationStateProvider(ProtectedSessionStorage sessionStorage)".
Notice that in the example number 1 I am expecting a "ClaimsPrincipal anonimous" and this is never used in the constructor, it is possible that inside the constructor the intellisense has autocompleted that code, so I recommend to copy the following code:
"public CustomAuthenticationStateProvider(ProtectedSessionStorage sessionStorage)"
And make that your constructor, in the class "CustomAuthenticationStateProvider.cs".
It worked for me and here I leave you the comparison of my code and the tutorial.
github.com/MaxwellTav/LoginAuth/commit/782295bcb29ee49add2ff2ef981e506a26200fbc
Remember that to see the differences, in Github you must have the "Split" option to see the differences side by side.
Best of luck.
Thanks for you tutorial. Can you provide a tutorial to use cookie? Since localSessionStorage will not expired. Thanks!
Yes, soon
Thank you for this video. I have a couple of questions:
1) Why create a CustomAuthenticationProvider for Authentication instead of using CookieAuthentication?
2) Is there a way to add "Remember Me?" functionality with this?
Thank you for watching the tutorial video and for your questions! I'm glad you found the content helpful.
The choice between a Custom AuthenticationStateProvider and CookieAuthentication depends on your specific requirements and preferences. While the tutorial demonstrated a custom provider for educational purposes, you can indeed use CookieAuthentication for simpler scenarios. Custom AuthenticationStateProvider can give you more control over the authentication process, including integrating with external authentication systems, such as OAuth.
You can implement a "Remember Me" functionality with Blazor's authentication. When using CookieAuthentication, you can configure the expiration time of the authentication cookie to determine how long a user's session remains active.
Thanks for a great video! I'm using it in my apps now and it works really good. Now, if I'd like a user to be logged in as two separate roles at the same time, how could I do that? Right now the UserSession would be overwritten. I could append the name of the UserRole to the UserSession string name, but that wouldn't work in the GetAuthenticationStateAsync, right?
Thank you for watching the video and leaving your comment! I'm glad to hear that you found it helpful for your applications.
Regarding your question, if you want to allow a user to be logged in as two separate roles at the same time, you can add multiple roles to the ClaimsPrincipal of the user.
@@CodingDroplets Thank you for your response. Normally I could, but in this scenario I have Students and Teachers, which is two different accounts. Teachers sometimes creates a Student account for testing purposes and when they log in with that account, UserSession is overwritten and they're logged out as Teacher. I hoped that I could store a UserSessionStudent and UserSessionTeacher, but I can't see how the GetAuthenticationStateAsync should handle that?
You don't need to maintain two different sessions for that. You can add multiple roles to the ClaimPrinciple. Below is an example.
var claimsPrincipal = new ClaimsPrincipal(new ClaimsIdentity(new List
{
new Claim(ClaimTypes.Name, userSession.UserName),
new Claim(ClaimTypes.Role, "Teacher"),
new Claim(ClaimTypes.Role, "Student")
}, "CustomAuth"));
@@CodingDroplets Thanks again! I still don't get it. There's no relation between the Teacher and Student accounts. In the morning the Teacher logs in and do his work. Later he wants to se the work from a Student perspective and logs in with a Student account. Now the Teacher-login in erased/overwritten. I could ask for the UserSession and append the role to the claims, but because it's different accounts it's not necessarily the same claims values. That's why I think I must have different UserSessions stored.
I understand your concern. In this scenario, if you want to allow the same user to be logged in with two separate roles simultaneously, then you would need to have two separate UserSessions stored, one for each role.
When the Teacher logs in with their account, a Teacher UserSession is created and stored. When the Teacher logs in with the Student account, a Student UserSession is created and stored. These sessions would contain the necessary claims for each role, allowing the Teacher to switch between roles without overwriting the UserSession.
To implement this, you would need to modify your authentication and authorization logic to handle multiple UserSessions and ensure that the correct session is used depending on the current role of the user.
Hello,
Will those custom authentications (as shown in Part 11 and Part 12) still work in Blazor .NET 8 ? What should be the approach for custom authentication if you have in the same Blazor Web application pages in different render modes ( Static, Interactive Server, interactive WebAssemby and especially Interactive Auto )
I did a Blazor Web App with .Net 8 RC2. [Interactivity type: Auto(Server and WebAssembly)], [Interactivity location: Per page/component]
and followed your titorial on the Server project.
When I click on login and log as admin, admin, I am redirected to the home page but I am still an anonymous user !
if user is logged in with admin, and some one copy the session key of admin, and then logged in as user and paste admin key in developer mode, and refresh, he is getting admin rights,,,
how to protect from it
As the value is saved in the client side (in browser's session storage), it can be accessed by opening the developer options. But the session storage will clear the values when we close the tab.
This is really very helpful video. Thank you so much for your tutorial.
just 1 thing that I had to specify builder.Services.AddScoped(); in Program.cs. I don't know why may be i am using .Net 7.0 or may be something else.
But it's really very good and helpful video. Cheers :)
You are most welcome! Glad to know it helped.
You don't need to add the ClaimsPrincipal as a scoped dependency. I doubt your CustomAuthenticationStateProvider class is having ClaimsPrincipal as a parameter in the constructor (placed by intellisense probably). You can just remove it and run the application without the ClaimsPrincipal scoped dependency.
@@CodingDroplets Oh yeah! it was exactly the same. Thankyou so much for your help :)
You're most welcome! ❤
Great Expample, thank you very much!
Thank you for your kind words and I'm glad to hear that you found the video helpful!
Thanks for great tutorial. Just I have a question about login process and I want to know : Is this Method of custom username and password authentication secure? I mean, because in a Blazor server app, all proccessing is done server-side and on the login page, we just collect only credetials and send them to server to prove their validity. This protects sensitive data from malicious use?
Thank you for watching the tutorial and for your question. The method of custom username and password authentication shown in the tutorial is secure as long as it is implemented correctly. In the Blazor server app, all the processing is indeed done server-side and the credentials collected on the login page are sent to the server to prove their validity. This is a secure way to authenticate users and protect sensitive data from malicious use. However, it is important to note that you need to ensure that the authentication process is implemented securely and that the credentials are encrypted and stored securely on the server. I hope this answers your question. Let me know if you have any more questions or concerns.
@@CodingDroplets Thanks for your reply. Yes credentials are encrypted and stored securely on the server. My question is only about data that is collected on the login page and send to the server, and you claim that the method shown in the tutorial is secure. Did I get it right? As far as I know, this security is based on two components, ProtectedSessionStorage and AuthenticationStateProvider. Is that right?
Hello, how to connect UserAccountSettigs to sql database and do not use hardcoded values?
In this specific video, we focused on demonstrating Blazor Server Authentication and Authorization. However, if you're interested in connecting UserAccount to a SQL database and avoiding hardcoded values, we have a separate video that explains database integration using Entity Framework.
You can find the video on database integration using a product module here: th-cam.com/video/vi51RBc_TkY/w-d-xo.html
The same principles apply, and you can adapt them to create a UserAccount module.
I have connected UserAccount to a database, will you please explain how to use that in UserAccountService
Hi! Thanks for the video!
I need additional information about the logged user...
public class UserSession
{
public string UserName { get; set; }
public string Role { get; set; }
public List Permissoes { get; set; }
}
Is this possible? How do access UserSession to get Permission on another pages?
Thank you for reaching out! To better assist you, could you please clarify if you are asking about accessing user permissions across different tabs in your Blazor Server application? If so, a more suitable approach might be to use LocalStorage instead of SessionStorage, as LocalStorage allows data to persist across different tabs or windows.
Thank you so so much.
You are so welcome!
just amazing video - thank you so much!
Welcome
This is exactly what I was looking for. Thank you. Do you have the code saved somewhere to download by chance?
Thank you for watching the tutorial. Glad to hear that.
Yes, we do have the source code available for download on GitHub.
github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization
@@CodingDroplets Thank you very much. I was able to take what you showed here and adapt it to my Blazor dashboard application without issues.
Hi, Thank you very much for this clearly explained and useful video. You briefly but efficiently addressed the topic.
I am facing a problem which says "Unable to cast object of type 'Microsoft.AspNetCore.Components.Server.ServerAuthenticationStateProvider' to type 'MyProject.Authentication.CustomAuthenticationStateProvider'". This happens at this line "var customAuthStateProvider = (CustomAuthenticationStateProvider)authStateProvider;" in Login.razor file.
Probably I have missed something?
Thank you
Thank you for your feedback and I'm glad to hear that you found the video useful! Regarding the issue you mentioned, it seems like there might be an incorrect cast in your code.
To help you better, could you please confirm whether you have inherited the CustomAuthenticationStateProvider class from AuthenticationStateProvider in your project? Double-checking this inheritance is important to ensure that the casting works correctly.
You can also explore the complete source code on our GitHub repository at github.com/codingdroplets/BlazorServerAuthenticationAndAuthorization.
@@CodingDroplets yes it is solved. I removed builder.Services.AddIdentity(options => options.SignIn.RequireConfirmedAccount = true).AddEntityFrameworkStores().AddDefaultUI().AddDefaultTokenProviders(); from my program.cs and now is OK.
Thanks
@@CodingDroplets Hi Sir, It is wonderful tutorial and can solve my problem in my new project, but I have implemented all code in my project but the same error unable "Unable to cast object of type 'Microsoft.AspNetCore.Components.Server.ServerAuthenticationStateProvider' to type 'MyProject.Authentication.CustomAuthenticationStateProvide" appearing on pressing Login Button, I have downloaded your source code from Git Repository and compare it with each and every file of my code with your code it is identical, but nevertheless the error is not disappearing, please guide me, Thanks in Advance
Please confirm whether you have inherited the CustomAuthenticationStateProvider class from AuthenticationStateProvider
@@CodingDroplets Yes Sir, I checked the code is same as yours
You just saved me! haha
Great content, thank you ;)
Glad to hear it!
Congratulations for video! it helped a lot! Thank you!
Glad to hear that!
Thank you for this video. Its very helpful. Can you provide me the info how to get the login window displayed WITHOUT to see any other (sidebar, bar in the upper side, login button link in the upper right side, ...) element? I need only login window displayed first. No other elements and not to go to the upper right side on the page and click on the login link in order to get the login-window displayed. Can you provide the info me how to do that? Would be nice to: start the page and to see login window immediately after starting of the page and there are no other elements, nothing, really nothing except the login window for entering user and password. many many thx. -- add info: I was looking for that kind of custom login and: nobody, really nobody can provide the info how to get login window displayed in a custom managed authentication in blazor server. No one on stack overflow, no one in you tube, no one in GitHub, nowhere... many professional people are providing some info how to login on the blazor server but there are some elements to see before you logged in. Your tutorial is perfect man, no question about that and I am thankful that you took your time to write that way of custom login. But one small piece of code or advising how to get login window displayed first would be very n very nice. thank you very very much & nice evening & greetings from Vienna xD
Thank You Milan Malbasic. Glad to hear that it helped.
You can redirect the user from the MainLayout if authenticationState.User.Identity.IsAuthenticated value is false.
Make sure you use a different layout (other than MainLayout) for your login page.
Below is a sample piece of code.
var authenticationState = await AuthenticationState; // AuthenticationState is the cascading parameter
if (!authenticationState.User.Identity.IsAuthenticated)
{
navManager.NavigateTo("/login");
return;
}
@@CodingDroplets - Thank you again for that info. I just did that as you said and I have now a white login page showed first. yesss... -- 1000 thx! - 🙂 - The last thing what I need is: how to change the code / in which class ( there are 3 of them) should I implement the check of the user and password stored in my postgres database (as I don't want to use internal created user). I can remeber in your video was mentioned that we could ommit some class in case we want to use our own database for user/password. - I know how to connect to postgres and I know how to implement a connection to the database but I don't know what has to be modified in one of those 3 classes: "UserAccount.cs" / "UserAccountService.cs" / "UserSession.cs". I think "UserAccountService.cs" can be deleted from the project in case we will use a database stored credentials. But what exactly do I have to change in the other 2 classes so my user/password from my postgres database can be used for the authentication and authorization. Could you please be so kind and put some pieces of code here and a short info what & where needs to be changed in order to use database-stored user/password? Thank you in advance. greetings from Vienna (A) 🙂
@codingDroplets - Could you please be so kind and give me the info how the code has to be changed to use database stored user/password/role instead of hardcoded? thx
Sorry for the delayed response. You can implement fetching the user data from your database in UserAccountService class. In the current demo the GetByUserName method is fetching the data from hardcoded user list. Just remove the harcoded list and fetch the user data from your DB.
@@CodingDroplets thx man - will try that rn xDD, best, M
Hey, is it also possible to add an id to the session?
In the context of .NET Blazor Authentication, you can include the user's ID in the authentication claims. Something like below:
new Claim(ClaimTypes.NameIdentifier, userId),
okay thanks. Subscribed!
Excellent thank you!!!!!
You're welcome!
Perfect Job! Thank you
You are most welcome!
Perfect Video !!!!!
Thank You so much!
Hello, thanks for the great tutorial!!!
However i am facing a problem. A user (admin1) logs in. So far everything works perfectly. If another user (user2) logs in, the first user (admin1) will lose his identity and will have access as the second user (user2). This could stack. For example, if 10 users are logged in, and another one logs in, then all 11 users will have the identity of the last one. I tried to tweek your code but nothing works. Any help would be highly appreciated. Thank you
its because you added singleton service
singleton service means 1 global service for all users, that's the reason.
you can fix it by changing from AddSingleton to AddScoped (user per user)...
@@renanmenezes8793 Thanks for you answer. Actually this wasn't the problem. I was using a static (😑) object to save the username so i could access it from other pages. I used dependency injection and it got fixed.
@@stergiossym5018 Singleton means static, Scoped means sealed, yeah...
Great! Hope you got the answer