Blazor Tutorial : Layouts | Login Pages - EP13

[@CuriousDrive]

Code - github.com/CuriousDrive/BookStores Thanks for watching, please share with your friends :)

[@jsorglez]

the code is not update with course

[@Vinc3n7]

I was fortunate to stumble onto your channel today. I love it! I've got to go back and start from the beginning. I love that you pack a lot of information into short little bites. Subscribing now. Thank you!

[@CuriousDrive]

Your comment is music to my ears. Please share with your friends too :)

[@Vinc3n7]

@@CuriousDrive Will do. Funny thing... I was just watching Ed Charbeneau's State Has Changed on mixing Razor and Blazor. I believe you were giving suggestions while he was troubleshooting the button @onclick. Small world.

[@CuriousDrive]

Ohh yeah? I am still watching. Ed is awesome.

[@Vinc3n7]

@@CuriousDrive I'm not on the stream. I'm watching the episode from yesterday. kzbin.info/www/bejne/jZOviGeZZt58l8U

[@CuriousDrive]

www.twitch.tv/edcharbeneau If you are interested. He is going to show how to test blazor apps at 3 EST with Egil Hansen.

[@hongkyuchung5769]

It's the best Instruction video I've ever seen. Awesome!

[@CuriousDrive]

Thanks for watching HongKyou. :)

[@nichodemusomedo4]

This is what I have been looking for, thank you, man !!

[@CuriousDrive]

I am glad that this was helpful. Thanks for watching and please share it with others.

[@VarunKumar-qd5wl]

This guy is Awesome!! Thanks for teaching us so nicely.

[@CuriousDrive]

Nohhhh you all are awesome. Thanks for watching. please share with your friends :)

[@talkathiriify]

Awesome You are a great trainer. Thank you very much for all your efforts.

[@CuriousDrive]

Tarik, I like your comments. Please keep them coming. Also share videos with your friends. Thanks!!

[@talkathiriify]

@@CuriousDrive Thank you very much It is really less than what you really deserve. Please please keep on the great episodes and god bless you.

[@payman5581]

You have very helpful videos and the way you teach is really good. Keep up the good work. Just subscribed to your channel.

[@CuriousDrive]

Thanks for subscribing and I am glad that videos are helping you out. Please share with your friends, it helps a lot.

[@aaronauman7292]

I noticed that your main layout is flickering in the background just before it redirects to the login page. I tried on my own and it does the same thing. I've tried various ways to suppress it, such as checking authentication state prior to rendering, but no luck so far. The only thing that seems to hide the layout is to enclose it (the layout) in an AuthorizeView/Authorized section of code. It still flickers, but it's not as noticeable. Any thoughts?

[@CuriousDrive]

Yes. I noticed that too when I was preparing the demo. How about passing LoginLayout as default layout in App.razor and then change it when user is authenticated?

[@pablodemono6831]

​Do you know how to change the default layout when user is authenticated [based on your code]? I am new into Blazor. BTW - great tutorial! Thanks for all efforts making it!

[@pablodemono6831]

I managed to remove the flickering issue. I changed MainLayout.razor: Logout @Body Login

[@payman5581]

@@pablodemono6831 Let me test this and see what happens.

[@payman5581]

@@pablodemono6831 Worked. Thanks

[@shabanelmogy7912]

Thank You We Wait New Tutorial About Blazor 8

[@testuser988]

Thanks for your effort. Your Tutorials helps me a lot. Greets from Austria :)

[@CuriousDrive]

My pleasure. Thanks for watching the videos I love it when people mention where they are from. Greets from USA.

[@agustinherrera8775]

thanks friend, I'm using your instructions, bye.

[@CuriousDrive]

You are welcome :)

[@coolwaterdvr]

Thank you Curious Drive. 🙏🙏🙏🙏🙏

[@sureshnarasinge]

Hey there !!! This is what I was looking for. Can you please show us how to use our custom database for registering user and authenticating user login with the same login layouts ? With using connection string, interface, services and inject them in to the code ?

[@CuriousDrive]

Hello Suresh, I have a made a series on it. You can watch it here - kzbin.info/aero/PL4WEkbdagHIQVbiTwos0E38VghMJA06OT

[@anshuljain4484]

Nice content May you please let me know how to remove flickering on first load of login screen.

[@CuriousDrive]

Hello Anshul, yes I was facing that issue too. The best way would be to use different MainLayout as DefaultLayout and change that after user is authenticated.

[@asifjamal-m8g]

Thanks @CuriousDrive

[@SonAltesseShow]

great video

[@marcosphs]

Dear what would be a possible solution to create a layout similar to .Net Core MVC?

[@CuriousDrive]

Hello Marcos, you can actually run your whole blazor app as Razor or asp.net core MVC app. I have run a Blazor WASM app in Razor Pages in below video. You can follow the same steps to do the same for MVC app too. kzbin.info/www/bejne/jaaVeJWhnMeKZsU

[@agustinmolina5170]

Hello, and thanks for the video. I was trying to change body style between login and index pages, so in the login i have a background gradient style but when i access to index, the style keeps on. Did u know how to change the body class between that pages? I also tried to do some JS code but it not worked, maybe i dont implemented it as has to be. Also the class must be in the body, if is implemented in other mark, doesnt work as has to be.

[@CuriousDrive]

I recommend using different Layouts for app pages versus login pages

[@agustinmolina5170]

@@CuriousDrive Thanks for answer! I'll try that

[@thebig9720]

Great tutorial...thanks!

[@bmwxestesi]

Many thanks for such helpful videos! Just one question: I tried to separate Component and HTML parts for Login. Component constructor: public LoginBase(ILocalStorageService localStorageService, IUserInfoService userInfoService) { _LocalStorageService = localStorageService; _UserInfoService = userInfoService; } public ILocalStorageService _LocalStorageService { get; set; } public IUserInfoService _UserInfoService { get; set; } It does not compile: rror CS7036 There is no argument given that corresponds to the required formal parameter 'localStorageService' of 'LoginBase.LoginBase(ILocalStorageService, IUserInfoService)' Any ideas pls? Thanks again.

[@harrisonwell1719]

great stuff

[@yapziqing1858]

Hi, is it possible to do login with separate API? I mean do login with WebAssembly without hosted as client side, and .netcore API as server side. But both is different project, not at the same solution location.

[@CuriousDrive]

Yes. that's totally possible. You can even have your web API services running in Java, Python, JavaScript.... as long as you are getting the responses back in JSON you should be good.

[@yapziqing1858]

@@CuriousDrive Hi, I had tried to do, but don't know how to retrieve the response from API, can you guide me please.

[@aqkhana2002]

may i know how your browser run 1st login page ? have you used redirect page etc ? i just want to redirect to my custom login page i do not want to use Authorisation and Authentication

[@CuriousDrive]

By default, blazor visits the route "/". If you want your app to visit that location you can use that route for that page. That way blazor will take you on that page.

[@massimopaone91]

Nice!

[@MianG321]

How we can use stylesheets and javascript static files in layouts other than _host.cshtml file like we do in master pages in ASP?

[@CuriousDrive]

Razor components are combination of HTML and C#. You can add style sheet by adding line like below in your HTML and it should work. But for JS you will have to do JS interop in order to call Javascript functions.

[@umair_me]

​@@CuriousDrive And using JSInterop you can add js file dynamically to the page by creating the script tag and initializing the js in it...

[@MianG321]

@@CuriousDrive Thanks. If you please make a tutorial on it, it will be very helpful for many. The query is, different modules to have different JS files and StyleSheets.

[@khana.713]

Why are you not using Identities? Doesn't it generate verything you need for you instead of having to go through the process you've outlined in this video? It even goes as far as to generate a DB for you. All you'd have left to do is to edit fields

[@CuriousDrive]

Hello Khan, very good question. Not everyone likes to use the ASP.NET Identity table structure provided by .NET. Some people like to have their own login pages in razor components instead of using razor pages. I recommend you to watch this video to have better understanding of custom authentication. kzbin.info/www/bejne/eJ6kn4aEm6t6qcU

[@LimbaniAkash]

What about page title ?

[@CuriousDrive]

What about it?

[@dotnetdevni]

Why role ur own this is very dangerous

[@alisalamat9501]

Thank you for such a perfect tutorial. If we want to use @page "/LoginX" for the login page and @page "/" for the main layout (Index. razor) then what do we have to do? I have this code in my MainLayout: protected override async Task OnParametersSetAsync() { if (!(await AuthenticationState).User.Identity.IsAuthenticated) { NavigationManager.NavigateTo("/loginX"); } } and it works good but if I click on the "Signup" on the login page then sends me back again to the Login Page.