Learn C# with CSharpFritz: Authentication with Blazor

[Music] see [Music] [Music] [Music] [Music] [Music] [Music] [Music] I think I got it I think that's the thing in that one and then there's a thing over here uh right and then it's this one I think it's this one do I have that is it and then and then a thing happens hey there friends good morning good afternoon good evening whatever time it might be in your part of the world welcome back to the live stream this is C with C Fritz it's bright and sunny here in Philadelphia look at it we're looking out out the window things are beautiful out there I hope you're having a fantastic day wherever you might be this is of course our discussion focused educational session where we're going to learn all about authentication in Blazer I've got the security hat on literally I've I've pivoted and I've put my security hat on so so we can thought think about security we can add this into our application and have a good time learning together if you're watching the recording a reminder first 40 minutes here are discussion focused lots of Q&A we'll get into the the actual lesson in about 40 minutes go ahead and go ahead and Skip ahead give put your thumbs down in the video below because that's what you're going to do anyway but if you're here for the discussion if you're here to have a good time and learn and hear from other folks enjoy the chat and watch the responses give us a thumbs up thumbs up on YouTube give us a like if you're watching on Twitch if you're watching us live let me know where you're where you're dialed in from and there in chat we're going to bring up tags up here Tag app here and answer your questions talk to you a little bit about some of the cool things that are going on let's let's get right to it here let let me let me get into the thing right here there we go you see we're broadcasting live on Twitch on YouTube let's let's have a little bit of fun with this shall we and uh there's my timer so that we can we can talk through things for a little bit let me scroll down through the list here ducas off is here uh fail to connect is here on Twitch heck radar hello hello David Lind on YouTube how you doing there Beno chry hello deox on YouTube as well with a big hello Alper Tunga says hello to the Blazer devs out there good to see you Dr Cox 1911 on Twitch says hello Jeff and chat still working but we'll watch alongside absolutely right I I try to keep things very descriptive here so that as we're as we're talking about things as we even get into code if you're not watching if you're walking the dog walking the kids to school if you're even driving don't watch if you're driving I'll be descriptive enough so that you'll pick up a little bit of what's going on and you'll know what you need to come back and actually take a look at afterwards all right I try to be very descriptive in the code that we write here together uh Hey There ragel Is Here on YouTube Alper hello hello uh I am having a fantastic day got I've I've got a nice cup of coffee here a little Good Morning America for me and getting right into it how you doing there Barry on YouTube Hello to to you time Benders here on Twitch dialed in from Calgary gasbar says hello uh deepo has a question fire away let us know I've got tags app running here so that we can queue up our questions we can get through it we've been we've been tinkering with and using tags app to to kind of organize and and queue up questions here on these streams and it's worked out well tags apppp is an application that we build on my live coding streams on Tuesdays and Thursdays typically during the week and and we're building this Blazer application that Aggregates content across several different social media sites particularly twitch and YouTube we're going to be using here today how you doing there Peter in Germany hello hello um is it okay to follow the session absolutely yeah AB absolutely it's just fine to follow along if you have just basic knowledge for sure this is intended to be a little bit more basic um we we are on I believe this is episode five of of the series episode five or episode four I the tag was episode four um in the source code as I was working through it last night um something like that so we're we're a little bit further into the series that's okay I'll be descriptive and show things along the way that should get you somewhere somewhere interesting that you can pay attention at um and certainly we'll have pointers throughout the way if you have questions for where you can learn more about the different things that are going on let me get some music playing in the background here um I use stream Beats by Harris heler this is dmca free music this is royaltyfree music you can listen to anywhere you'd like twitch YouTube Facebook doesn't matter you can listen to it online when you're broadcasting um and I like to use this synthwave playlist CU it's kind of groovy to just have in the background to fill in the gaps while we're talking big thanks to Harris heler and his team of creators you can learn more about this music at streams.com there's a whole bunch of different genres available and um you can find links to the Apple music playlist the Amazon music playlist and Spotify like I'm listening to right here big thanks and I hope you check out stream beats.com um catching up here a Albuquerque good morning to you Albuquerque from Portugal all right uh Marcelo is here from Brazil hello love seeing the Brazilians wandering in great stuff Hello uh who do we have there Assan from Iran welcome great to see you um I I spent a bit of time last night the the original security module that goes with the Blazing Pizza Workshop uh for those of you that don't know security significantly changed inet 8 there was a a significant update upgrade replacement new features that that actually eliminate the need to do some of the things that were in older versions of um Blazer security so this is going to be a lot easier for us to do walk through and interact with so we'll we'll see how that goes today and uh and and talk through it uh through today's session I want to make sure I also call out um I have another podcast that gets released on Fridays called Blazer puzzle with our friend Carl Franklin um you might know him fromet rocks um it's a 5 to 10 minute episode that you will find here on YouTube that that shows a little a little brain teaser a little puzzle uh around how to build applications with blazer typically it's something that we've simplified so it's just sitting on top of the base templates we've made it as simple as possible so to to demonstrate here's exactly what the puzzle is and there's source code made available take a look investigate and if you can find the solution to the puzzle to fix the problem or complete a piece of functionality send us in your solution and uh you could win a prize really cool stuff uh he also publishes the Blazer train podcast yes yes yes so um let me uh respond to something here real quick uh one second there we go got to take care of responding to some of the family that needs help here uh Ukraine hello hello to our friends in Ukraine Andy Walters here on YouTube deepo asks have I posted any series onnet net MVC or net web API yes yes and yes this video series that you're watching on YouTube this the if if you take a look on the channel youtube.com. net walk up to the playlist and look at learn C from C Fritz and you'll see this entire playlist featuring this guy walking through and discussing and showing all of those features I have another video series that I've been working on that that I need to to get back to and I'm hopefully going to be recording later today called C in the cards that teaches all about the C programming language using a deck of cards as an example um deepo on YouTube asks this series will be daily live or some timings this series that you're watching is uh weekly on Wednesdays that that we tune in here um I I'm intending to do a couple other YouTube videos and things that I want to get out on a two to three times a week basis um I've been traveling and and speaking at a couple of events and it's kept me distracted and kept me away from doing some of those things recently um oh love some of the questions coming in now let me get these queued up I I do have Tag app running here we're going to be on AMA for the next 32 minutes answering your questions talking to you about things in it might be Blazer Donnet C could be anything about Azure development um working with Visual Studio Visual Studio code happy to talk to you about that but we're going to get things queued up um over here on the waterfall with tagap so that we can answer some of your questions as we're going along here let me head over to uh to tagap and we'll take a look and discuss a little bit here so here comes the first question coming up here there we go hello uh let me zoom in just a smidge so uh um we'll start here with this question is there currently a solution for the new blazer. net8 web template to off against intra ID with blazer server yes there absolutely is it does authenticate um any kind of authentication you're going to see this today uh any kind of authentication that you want to do with blazer you can't do with just web assembly we've been learning about the three different places that your Blazer code can run can run in the browser with web assembly can run on the server interactively and it can run statically on the server in order to do any kind of authentication we're going to need some some secret Keys some some private information that you don't want to put into the browser so in order to do that and and authenticate you need to uh host that on the server so Blazer server with enter ID there's documentation how to do that and this is this is going to be one of the caveats about today's session there's there are literally millions of ways to set up security I'm going to show you the basics of it and give you some jump off points because you may want to set up with entra you may want to set up with with open ID you may want to set up with your own local storage you may want to set up with all kinds of different authentication changes and and capabilities password require requirements no password requirements two Factor authentication all of these things I'm going to show you the entry point where you can get more documentation about that and learn more about it entra is very easy to set up um and there is documentation for it for today's session I'm going to be focusing though on individual accounts stored in a local database but there is a solution for this it's pretty straightforward to do one lion with a comment here um early question since I have a meeting shortly I upgraded a project from net 6 by creating a new net 8 Blazer web app project and move the code over okay I think I know where this is going uh but kept the net8 templates off setup good okay good the project uses automapper which is significant because I'm getting warnings that there is an automapper nouet version conflict with the one dend identity server is using no you don't need to use dend with net 8 identity server is not needed for it does this mean the net8 template no it is not nope did you bring over something that is referencing dend the dend identity server I am guessing you didn't and you it's not something that you will need here so uh hello trong good to see you um let's go to this question uh come on I queued that up oh why didn't it pop out there we go um here we go this is create code digital design saying hello from Portugal today's topic about authentication with blazer will it only be using Entity framework or will we be able to see other possibilities with for example Dapper I'm going to focus on see here's another configuration thing I'm going to focus on Entity framework with this there are other ways that you can interact and use different configur ation provider so that you don't use Entity framework the easiest on ramp the configuration that we give you in the base templates is using Entity framework there are ways to to swap that out and use other database providers besides Entity framework Entity framework for this though really easy to do and quite frankly you can keep things isolated um with Entity framework so that maybe you have an Entity framework that just does your security stuff it's pretty easy to do but um once again I will show you where there's documentation if you want to provide your own database storage um apis for this okay so good questions today and and I I like the um the the dip into this why isn't it refreshing and sending my my content through when I approve things here um we're going to have to check that the signal R pushing through properly there Bari Duty on YouTube asks are we going to check basic cookie authentication on Blazer today in different render modes yes yes um I'm not sure if any render mode makes off more complicated or not um good good questions authentication with web assembly is a little bit more complicated because you're going to store information about the user in in memory in the browser and that we kind of do that at times when when we build our our spa applications and and we're interacting with things with JavaScript right we're still going to do we we might do some roll checks or something claim checks in the browser to investigate and see if folks have access to various features but we can't trust that right even when even though we we decided to hide uh an admin menu well if you decided to hide the admin menu using JavaScript somebody could still come through and and undo that code because it's all visible in the browser make that menu available and click through to it so we still need to enforce those things on the server so it's a little bit of both and you need to be able to do a little bit of both in order for that to be effective uh let's see what else do we have here um let me grab a message here and here we go the signal R isn't pushing through for some reason it tells me there's a JavaScript errow on this page um I'm reading the German there I convinced my company to use blazer with net8 however we tried to implement off with enter ID but the process seems way too complicated and now they want to switch back no it's not complicated um let's take this discussion offline and see what you're running into there it's not complicated um anybody who tells you that security implementation is too complicated hasn't done security implementation in other Frameworks like I'm I'm just going to get right to it like they haven't okay um security implementation in.net is a breeze compared to other Frameworks okay um please post the schedule one week ahead on the Community page which Community page are you talking about and um quite frankly I I try to post the next uh edition of this uh on about Friday each week um scheduling this completely out for weeks in advance is something that I just I cannot do because I react and respond to chat and things change and shift based on what we complete each episode ah there's a good one about anti-forgery see I don't know why it's not refreshing here um this question if an app is using antiforgery do we need use authentication and use authorization it's it it's the other way around if you use authentication it will it or no if you add antiforgery it will force the use antiforgery but if you use antiforgery do you need authentication and authorization using authentication and authorization is a SE is a separate issue compared to the anti-forgery tokens that's that's something separate that uh um you can decide on your own whether you need right you might have a public website that allows folks to to submit content to respond to a form well you're not necessarily having folks authenticate for that you're not necessarily right authorization says are folks allowed to use is this user allowed to perform this task right that's the can I do versus am I allowed to log in am I right so authorization sometimes you'll see off z um different concept you might not actually use authorization in this application we're not going to use authorization today that's just a little bit further that we're not going to cover we do a lot with authorization in the Tag app streams on Tuesdays and Thursdays if you want to learn and see more about that but this is just introducing topics so I I will say the the demo app we're using here does use antiforgery um if you're doing authentication you you do want to turn on um anti-forgery as well authorization you can't do authorization without authentication but um if you are doing authentication you should do anti-forgery as well let's take a look see more questions here um here we go see my I'm seeing signal R errors coming through I'm going to have to investigate and see if there's a bug we introduced uh Allan on YouTube asks I have the same problem with blazer web app Auto is as Ms identity isn't available on individual account won't be supported till net9 when adding entra it stops WM from downloading um I was literally looking at this last night I I'm not sure um what issue you're running into but there's a tutorial out there that shows you exactly how to do it and no February 13 2024 but it talks about doet 7 [Music] um I'm like 90 95% positive that you can do this and I was looking at documentation for how to do it and security ASP net core server side Blazer apps [Music] yeah and additional security scenarios yeah passing tokens which we don't need to [Music] do um I'm not seeing the intro articles that I thought I found yesterday let me follow up on that I see I see a bunch of folks reporting this issue with with entra and Blazer let me let me follow up on that um entra isn't something that I use in my applications so I just trust that it works um so I will take a note back on that [Music] um but I yeah well there's my notes there we go um also confused with entro off because the GitHub issue in the post from Dan Roth there's a GitHub issue tell me more and I I need to see what's going on with that before I go too much further we don't currently support identity platform off option right it's not an off option but I thought there was a configuration that they could put in there [Music] um just looking at the notes here yeah um yeah I thought there was a s a way that to kind of force it to work I'm going to need to Circle back on that and update later um continuing here uh yes you can post links [Music] um let me grab a couple more of these um um yeah I don't know why it's not the signal or isn't pushing through uh Allan has the same problem with blazer web app Auto as Ms identity isn't available on individual account uh when you add entra it stops WM from downloading yeah I'm going to have to take a look um Stallone here can I please explain that tags microservice just roughly on how each project works and how the micro mic service I'm I help me out here tags M tags app tags app doesn't have microservices um give me a little bit more context what you're what you're requesting here I'm not quite sure I follow what you're asking um Auto uh says I'm using the blazer. net8 template with static server rendering I use cascading parameter for all things works but after render mode interactive server info is lost so this is this is where we see a little bit of a challenge with persisting and sending information um across the circuits and and how some of these pieces work um there's the I I'm not sure how to how to go through and explain this it should Cascade down and and make it make the context available in interactive server you may need to wait until on parameter set to get the authentication information that's what I'm seeing and we saw we we we walked through and we tested and and fixed as part of this app tags app yesterday on my stream um let's let's talk about that a little bit more offline there's the there's some interesting things with that that we can run into what what when we get into the lesson um what I'm going to describe and show when you mix and match render modes passing through the security information not just security information but any cascading parameter can be tricky at best uh Coto melon um on Twitch it says I'm implementing authentication within a Blazer web assembly app is it necessary to store the token in Blazer's local store storage no and override the authentication State provider no not anymore additionally for a similar secure implementation within a Maui application well hang on now you're now you're getting outside the scope of what we're going to be talking about today but instead of relying on third party tools the built-in store Secure Storage you can use I believe that's what you can use you're going to store the the header token and you'll be able to pass it back and forth with blazer in.net 8 when you add HTTP client and you interact Blazer automatically adds the um Header information and cookies to authenticate back and forth to the server it takes care of all of that for you so that makes it a little bit easier to understand run through and and uh be successful with quite frankly so uh we got about 5 minutes left in the AMA yeah I'm I'm kind of annoyed that the uh it looks like the websocket here isn't sending information um back and forth not the images I want to see the web sockets so there's the messages and it looks like it's connected and it should be sure looks like it's sending messages but something's happening and they're not painting on the screen there's the keep alive but the only error is hey I don't have a favorite icon so we'll do some digging and find it later um hey good morning Robson good to see you manage authentication State and Blazer web apps um yeah that's a little bit what we're going to be doing but turns out you don't really need to it's it's handled For You on YouTube Chris Gomez here with a comment the biggest challenge I had was to recognize that individual accounts is a sample and that you're authentication authorization needs may not be as ACC comp totally here this is Chris is right on spot on here the individual authentication capabilities that ship with the templates are are a starting point most folks have much much more complex scenarios or or significantly different scenarios that they're going through building and working on and when you when you look at all the different ways that folks can figure authentication yeah this is this is not a trivial lesson like we could literally post dozens of hours of various security configuration authentication authorization videos and and posts and we I mean we wouldn't cover half of the various scenarios that are out there that folks have so it's a starting point there's pointers the documentation so you can customize to meet your needs uh Survivor 28 persisting revalidating authentication State provider for Blazer web apps that adopt interactive server side rendering and client side rendering um this comes by default in the web assembly application and should be configured and we're going to get this configured and you'll see that it uh does Main conin some of that information for you so um yeah it's not refreshing there and uh Chris with a question what if I want an internal site just for my internal intra ID based colleagues I don't need most of the sample but I need different things totally totally right and that's where in in previous versions of ASP net templates um you were able bble to change the authentication and it would drop in uh the authentication in the drop down right in visual studio and it would insert for you automatically here's the configuration code for that type of authentication you want that's nice that that's a a good entry point um quite frankly the the team made so many updates to Blazer authentication and authorization to make it easier to do um across the board that setting up and and providing sample code for these different providers just didn't happen before the release that's so um yeah I'm going to end up coming through and doing some debugging there on on tags app later so we're going to go through and we're going to talk more about all these different things um to get us started with building see I did the reset on my timer there to to get us started with building and introducing authentication the concepts that I'm going to that I'm going to show today are around authorization around authentication the concepts are the same the implementation for different providers is different there are different things that um that you're going to want to choose and pick up documentation is out there that will help you with all of those things um time Bender asks about a Blazer web assembly Standalone app what are the best practices to store and retrieve the jot token or a cookie keep it in in state keep it in your inmemory state there's there's also um State providers authentication State providers that you can use or one of the things that we're going to do today we're going to store stuff in in browser session storage the trick with using browser session storage though is um folks have declined allowing you to use cookies in the browser you're not going to be able to do any of that um Diego asks beo Blazer authentication or Azure API management what's better they're two different things those are two different things they do do two different things so Blazer authentication is hey let me log in and use a website Azure API management is hey here's a series of apis that machines can use to communicate to other machines that you want to interact with different right authentication let me log in and and use a website so which then would give you access to other authentic authentication protected apis on that website so um yeah two different things that that we're talking about there um let me get my GitHub up here so I can refer to the website that's come on now where did I put it where did I put that GitHub um I was just working in the repository there it is uh there we go the link for today is there we go that's the workshop there are several different tags in there for the various um the various steps that we've gone through in this series we're going to be talking about and building more we're going to start from uh tag three validation and we're going to move forward and add capabilities for authentication there is script that I started writing it's not committed into the um repository yet but it will get in there um over the next few weeks Robson asks is it possible to use entra without having to create a Microsoft account no that's the whole point entra is a Microsoft account so not necessarily the public Microsoft account but it's a Microsoft managed account on Azure so we used to call them Azure active directory so you you can use entra to manage interactions with both uh pel asks will I touch on different user levels and authorization to different resources based on this with identity server don't need identity server for for this um I'm not going to touch on on roles but I will show authorization to various um parts of the application so yeah you don't thank you Chris you don't have to use a personal Microsoft account right we call an MSA however entra accounts that are issued from it we used to call Active Directory accounts same thing except your organization manages it instead of Microsoft so um all right let me let me get a couple things I think we can stop Tag app for for today and I'm going to take a uh I'm going to take an issue to take a to investigate the signal R loading on um uh on the waterfall there and I'm going to mark that as a bug so if you want to see little bit of investigation and Bug fixing we'll be looking at this tomorrow um sure I'll mark this as Help Wanted um we'll be looking at this tomorrow on my stream if you want to take a look at the issue I just Creet there it is out there on um on the GitHub cuz we love the GitHub um I'm going to be working in visual studio today but I do like working at the command line um for is that the one no wrong brand wrong folder let me get this um yeah there we go fantastic um I'm going to back up to the validation tag good um the GitHub issue using enter ID with net 8 yeah I was I was reading through this and it's a priority zero oh boy okay yeah um I'll have to read through and and see what's going on there um if that is truly not supported and not available uh that there's definitely something that needs to be should be patched to be updated there um all right let's dive in let's let's get the website open and start talking a little bit about about today's project and what we're going to work on what we're going to learn about adding authentication into our application so um I I have a bunch of notes that I'm going to be following today because I've I I have scripted a bit of this I want to make sure that I land things appropriately how you doing there Carl codes hello let me get the application open here I'm going to open Visual Studio today we'll use full Visual Studio 2022 there there was a uh an update to net Aspire release yesterday um thanks really really okay um yeah open a project and I'm going to go grab um blazing Pizza Workshop here we go and I'll start the app where it is is right now we'll talk about the features that are currently there before we move forward and start adding new features so this is the Blazing Pizza Workshop we're building a uh a storefront for a a a pizza shop right for place that that uh you can order pizza from for you your friends your family your pets uh yeah the dog eats Pizza um better not be a rat like in New York City anyways so we have this website that allows you to take a look at the various types of pizza that pizza specials that are available there and I can click through and choose a a base Pizza special specify the size that I want and choose the various toppings you know what let's uh let's put some bell peppers on this and uh a little bit of extra cheese um let me see uh pepperoni I love some pepperoni on a pizza here um let me see here what that's good enough order it and it gets added to to my cart you see here just above me and uh I can click through and place that order it lets me review the order I can key in where I'd like that to be delivered to and um and it there's validation we learned how to put validation on the deliver 2 form here because if I click without submitting anything it says well these fields are required and we get little red border around these fields to with a little bit of message to show hey you need to fill in this information and as I start to fill in some of this information it properly comes back and we even learned how to customize the messages here so I can specify the various things here and everything goes away and for those of you who are able to see color difference the the borders here change from red to Green as well as the messages going away so it's important if you do want to show a status change just by changing the color of something also put some text with it so that folks who might not be able to see the various color changes can um Can perceive that their code they the content that they've keyed in that they're ready to submit is proper and acceptable as well uh a New York jab that's right you better believe it here in Philadelphia I can make fun of New York City as much as I want so it's is is that kind of like I'm trying to think of is that kind of like uh londoners making fun of Paris is that a thing is that a thing or or anybody picking on the Irish is that that's another thing as well right as somebody who is Irish I'm I yeah as long as it's not Pittsburgh well we can pick on Pittsburgh too and when I click through and I choose to place order it shows me here's the order that was placed and I get a little status update that's listed here and it does some polling in the background that we learned about disposing of components because this is just a thread that's running in the background and pulling from an API to present this information and we've been learning how to do this and present information about your Ord about your content using Blazer and rendering and delivering the content on the different platforms so that we learn how to use these various features across not just Blazer server side or server side rendering or web assembly but we learn how to use all of that together because those are options that are available to you you can combine and use these things together to deliver the best experience that's needed for your customers for the folks that are visiting and using your application did you hear some UK versus French banter I think that's what I tried to do I think that's as as an American I don't think I'm entirely qualified for the UK France banter but I think there's something there certainly the there's there's uh right we can we can discuss uh PSG versus uh Man City that's a thing right um as somebody from Philadelphia I I knew about uh rexam before the uh before the series the documentary documentary series uh came out I knew about the acquisition of the rexam um football club by Rob meleny one of Philadelphia's uh luminaries here in town and um so we in town we thought it was kind of weird hey why is why is this actor buying a a soccer team a football team sorry sorry um and uh really happy to see their progress and last night they they won again they're they're within five points now of promotion to to League one great to see uh great to see folks investing and growing the town even if they are bringing Hollywood dollars and folks are not too thrilled about it there we go we see it's delivered it finished updating it it automatically in the browser I didn't have to touch anything I can click back into the my orders list and it shows the list of all the orders that I've placed and I can click through and get right back to that Details page what's interesting what's compelling about this is that it it was very easy for me to get to this point and and show this very simple single user I can click through and interact with ordering pizza and see what what pizzas are available and customize the pizza that's great as as demo code as a sample good job I feel good about that there's just one small problem see when when Skippy across the street wants to order pizza also and when Skippy comes through and takes a look at their orders I don't want them to see my orders Skippy should see their orders on this page right and Skippy their orders because they're going to put some weird stuff on their Pizza I don't trust Skippy and their family down the street there let me tell you I don't want to see their orders either so clearly we need to do something to constrain the list of orders so that I only see my orders and Skippy only sees their family's orders and that's right that that kind of makes sense right same thing when and you see this when you go to Door Dash or GrubHub when you go there it's going to present you hey last time you were at you went to uh Panera last time you went to whatever to Chipotle this is the uh this is the burrito that you ordered this is the sandwich that you order would you like to reorder it's not going to show me what Skippy ordered and it does that because it allows you to log in and it remembers yourself settings so we have to start introducing a little bit of security to our application little bit of little bit of constraints cuz we want to authenticate right we want to identify who we are to the application so that it can customize the content for what's appropriate for me here's the fritz family orders I don't want to see Skippy's orders Chris I think you're right Chris on YouTube says Skippy puts peanut butter on Pizza look one of the times we gave this this demo some of our Swedish friends out there and I know there's some of you out there from Sweden we're sharing some of the things that that the Swedish folks like to put on their Pizza it's it's not pineapple but they like to put some interesting things on their Pizza hi and sweeten not going to lie like it's not entirely my palette but if that's what you enjoy that's great pizza is a is a gosh it is a a fantastic food canvas for us to customize for whatever our taste might be and I don't want to hear anything about putting M&M's on Pizza folks in Hawaii like putting pineapple on Pizza folks on the west coast here in the states like putting pineapple on Pizza it's not bad try it I I wouldn't say that it's my favorite topping on pizza but it's a canvas and you can put all kinds of things there there you go Marcus says they that they they that they use pineapple in their Pizza there you go sweet pork and in in is a win that sounds good too that sounds good too there you go peanut butter feels like the eighth deadly S no don't go there dessert pizzas contain M&M's um see that's that's you're you're stepping into the weird Zone here friends is this demo on GitHub yes I I shared the link for it little bit earlier I'll share the link again um there you go there's the workshop and that link should flow through there it is on YouTube as well there you go um Alper says when I started learning Blazer I struggled to find Reliable tutorials and project examples what was available often lacked Clarity or didn't cover the specific scenarios I needed that comes with folks more and more folks using and diving into um a tool right angular view react didn't get really big until almost 51 years on because folks started building things and and showing other ways to use it banana pizza I've heard of this that's why you decided to create a community space focused on knowledge sharing nice there you go most popular in Sweden is Kebab pizza that's the one I heard about that's the one I heard about so let's talk about starting to add authentication into our application here okay so I've got a bunch of code that we're going to go through and add that's going to start to constrain things start to make it a little bit clearer that exactly what we need to do um to be authenticated to allow folks to interact log in and work with the website so couple things that that we should do first here we need to recognize that enforcement of security and i' mentioned this in the AMA section happens on the server you can't enforce Security in the browser because folks can change that any code that's sent into the browser is running on the client it's running outside of your full control folks can decompile it change it and make other things happen so we need to enforce our security first and foremost on the server Windows antivirus prevents you from downloading this project on GitHub [Music] um I've never seen that before can you can you send me a screenshot on Twitter uh C Fritz on Twitter drop me a screenshot mention me and drop a screenshot there you absolutely should be able to there is no binary code as part of this and you're an admin on your own device and you can't download it because of Windows antivirus give me a screenshot of that that let me see that I'll follow up with that afterwards but um you absolutely should be able to um to get to that uh blazing Pizza Workshop yeah you should be able to download you can either clone or download the zip open it in the code space if you want and you should be able to get to it so um so let's start enforcing a little bit of what you can and cannot do inside of this application right first and foremost we have an orders controller that sits out here that does the the interactions with getting retrieving and showing data as an API that the web assembly application can use so let's let's add authorization requirements into this so that we can start checking and enforcing whether or not folks are able to in to whether or not folks are able to um get specific data here and the first thing that we're going to do is we're going to add back in this authorized attribute here so authorize comes from the authorization namespace ASP netcore authorization and what it does is it enables the controller to be able to get in its HTTP context right within the context of the request that each one of these methods is handling it enables us to get a reference to the user that's currently logged in okay sure you can send me in Discord as well um what's this um kasperski Internet Security is not internet security I'm sorry to say Google Chrome says virus detected are you kidding let me know what you're seeing because there is th this is straight C code that's in that repository [Music] um you should not be getting any kind of I mean it's just text in that repository there there is no code sitting out there no no binary code that it should be rejecting download a code and zip Vivaldi no issues okay I'm going to continue on here so adding authorization all it does is allow you to reach in it doesn't constrain and say you're not allowed to do this yeah you might I gave the links directly you should be running without an issue um what I'm able to do then when I reach in and say get Ord I can now where I would be just querying the database and saying well go get orders include the delivery location get the pizza information um including information about the special and the toppings and order by when it was submitted right I want the most recent pizza orders at the top well now I can also say well also only get me the orders for the current user so I wrote a little extension here called get user ID that reaches into that HTTP context gets the user and finds the first name that's in there right and the name is going to be in this case we're going to be storing an email address so we can reach in and get that and now inside of my orders controller when I go to say get orders I'm limiting to just your orders right I'm going to do the same thing with getting a specific order with status I'm going to update this API so we only get the order if it's your order okay and if it doesn't find an order we'll return a not found um when we place the order we need to make sure that we tag the order with your user ID right we want to make sure that we only get that that we save the order as your order right so place order comes in from outside so those are the three apis that we need to update to make sure that they work now some of this stuff runs server side runs inside of and we we started building and adding an i repository to show a little bit of repository pattern here um and how you can interact with that so down in the shared folder I have I repository and I want to be able to take the um the get orders and get order with status here I want to enhance these so that it only gets for the user specified so I'm going to update this so that we get for this user ID so now I need to go back to my other yeah see look at this uhoh we we broken a couple places here that's fine so let's go find where this is implemented and fix it so first place is EF repository where I have almost the exact same thing um built where thank you and I'm going to jump in here and say come on give me that give me that wear Clause no thank you where the user ID matches same thing here I'll add the string user ID thank you co-pilot helping me out here today appreciate the GitHub co-pilot and here I'll also add uh no not going to do it for me no not going to finish that one for me there we go um and place order isn't implemented here because it's actually being handled somewhere else that somewhere else is in my HTTP repository the other version of this that runs in the browser that I could could Implement these but I'm not using them right now from the browser um so place order here um right I need to I actually don't need to update this one because it's going to do this HTTP client post and it'll have the information appropriately for that but I do need to update the signature here for these so that it matches the um the update that I just made to the interface so there we go all right so all my interfaces are satisfied and we can continue and move on and now we're including and querying with user ID information um on each one of our interfaces to save and interact with that user ID information okay so um next thing that we need to do is start bringing in the account configuration for the application now previously in older versions uh in in Net 7 and earlier there was a package that you would install that had all the user interface all the things that you needed in order to build and work with um the uh uh the security configuration all of the user interface and whatnot and it it allowed you to um recreate that as needed and customize that is not available right now in net so what I've done to kind of make this easier for myself um I put I believe I put it on I believe I put it on my Dev drive over here uh nope oh wait I did I did I uh no that's not it where did I put it I put a copy of let me take a quick look because I forget where I put it um I put another instance called blazing Pizza out there and I don't see it that was designed with the same configuration so that I could just jump through and add it yeah there it is um I put it in uh blazer off so I just did a net new and and copied this in and generated another version of the application um so that I can copy these files here so I'm just going to open this in vs code so that you can see exactly what's here um so there's a components account page here uh series of content here that includes a whole bunch of pages for managing login and all that stuff um user interface capabilities here I'm going to grab all of this underneath components and go back over to visual studio uh not under components I'm sorry under account I'm just contrl C on that and up here in the server version um no it's not going to let me paste bummer um can I open that in reveal and folder Explorer there we go so there it is right there I'm going to copy that and I should be able to paste that now into here there it is so because I gave it the same namespace it has the exact same stuff that it laid down over here for us to be able to work with there are other pieces here that we still need to bring over not just the account but there's security configuration including this persistent authentication State provider on the client side we'll take a look at that in a minute but in program we need to add configuration in order to activate the various capabilities for um the the authentication so cascading authentication State this makes that HTTP context available in all of our components if we want to receive it we learned about cascading parameters it'll be available as a cascading parameter for us identity user accessor so we can get our identity user redirect manager so we can redirect to log in and log out appropriately the authentication State provider there's the persisting server authentication State provider so it persists information about your authentication we're going to add authorization let me copy those first couple of lines we're going to add authentication and we're going to say um this is the default scheme is an application scheme um and the default signin scheme external and we're going to add identity cookies let me bring all of these over into our program program CS for the server and I'll add them right here there we go um I'm I have a DB context out here called Pizza Store context it was originally using this API authorization um I believe it's supposed it's identity DB context there we go and this should just be base options and I can get rid of that there we go all right continuing over here so because I now have that capability with um allowing folks to sign in I now need to add the information about enforcing about the application user and there's a bit here that allows you to send emails to folks based on um information around their login hey you reset your password so on and so forth so I will add that after the DB context right here it is not application user we call it uh Pizza Store user and here this is pizza store context now there was a question earlier about how to do this without Entity framework there is another API that you can use instead of add Entity framework stores that will allow you to specify your own repository pattern for interacting with it um there's an interface you have to implement to get through there I don't know the stuff off the top of my head right now but there is documentation about how to swap that out that's the piece where you're going to be changing over from Entity framework to something else that said though to stand up and use Entity framework for that interaction easy to do for just that um here I need what am I missing building Builder blah blah blah um I've got an extra in there and it should be down there right no what did I do what did I screw up Pizza Store user yeah email sender Pizza Store user what doesn't it like there [Music] um I email sender identity Ma and it doesn't like this one either uh oh that should be Pizza Store context Pizza context [Music] um yeah that was uh double checking double checking double checking my code here make sure identity be context Pizza Store user uh let's do this I'm going to cheat a little bit take this out of here delete this put that on there and I should be able to say like that um oh shoot what did I do wrong no and this is one of the ones that I didn't include because um because I had the code all working let me review my notes Here one second because that should work right there pardon me for one second while I go back to my notes um it's in here [Music] and yeah identity DB context Pizza Store user Y and I'm okay with that let me just take a quick peek over here and program mhm we did add DB context Pizza Store context add identity core Pizza Store user yeah um that should be Pizza Store context wrong context and then down here I email add Singleton I email sender Pizza Store user identity know up yeah um that should work if I close and reopen yeah there we go no why are you still giving me that add Singleton I email sender Pizza Store user identity no op email sender yeah I didn't have this problem with the code when I tested it let's see what we got um oh yeah there's other things over here we need to to clear up I bet you that's uh there's where it is all right so there's application user that's available throughout the application that came over from that initial startup code we need to change that over to our pizza store user so I'm just going to do a find across the entire project and replace that replace all of those 81 occurrences and that takes care of a bunch of that at this point um blazing Pizza data doesn't exist [Music] um I have a mismatch in versions here so I don't need identity server that was a leftover from previous version we can get rid of that and there it goes good all right continuing here there's a couple other places that we need to update [Music] um so now I need to go back in and I believe there is a another reference that I'm missing now um yeah ASP net core ID uh identity Entity framework core needs to be added into the project as well so let me go grab that so this adds the ability for identity to work with Entity framework core to connect to the database retrieve and work with that um there we go so that's built that works and had no issues there there's a bunch of places where I've got some extra usings that we don't need anymore I'll get rid of those um I will I see a couple of uh questions coming through there um I'll come back to those in just a minute I'll make sure that I want to answer this one though up front from Boer rusi on YouTube is their plan to talk about using Federated identity manager with blazer in the future like off zero or entra sounds like there's an issue with entra off zero that's an external product that the off zero folks can can speak towards so um all right continuing here um if I do a build at this point inside of orders controller there's going to be a couple things that we still need to clean up yeah look at this referencing data all over the place right so here's what I'm going to do to get rid of this I'm just going to highlight that and every place that you find that using statement not in the current document I want to search in the current project go get rid of all those uh really there was only one I don't think there was only one because it's all over the place here nope that is gone all right show me some more in that error list go somewhere else so this one need to do the same thing replace and get rid of all those goodbye 24 occurrences of that that's fine um I'll build again and see what else we have um typ or name space Pizza Store user so here Pizza Store user lives inside the Blazing pizza namespace so here's what I'm going to do to solve this and make it real easy I'm going to add a global global using for that and now it knows how to find that I'll build again um okay good the so these are those other places inside my my orders page and Order Details page where we need to wire some things up um yes I didn't bring those couple items over all right so the things that we copied over from Identity they work at this point there are inside the client application so the stuff that runs in web assembly there's other parts that we need so that we know information about the user we can persist and carry that information around and we're going to look at the persistent authentication State provider here which gets loaded right here and allows us to have information um available inside our application about the logged in user right and cascading authentication state so it brings that authentication information through to all of our um components inside of web assembly if we need to check for the ability to uh interact so I'll add those couple items here and we're going to need to there's a there's another using statement that uh not using statement I'm sorry there's another um package that we need to include for this and it is I'm going to copy it in from my source code because I could do the the ad package updates but this is going to to be just easier to do like this aspnet core components web assembly authentication right you're adding authentication capabilities you better have the packages that reference it so this is restoring packages in the background that completed we're adding a single tin for authentication State provider I need a using statement for that but the persistent authentication State provider that's a mouthful um I'm just going to run over to the version that's generated for me and user info grab both of those and copy them into blazing Pizza client so this is what's getting the claims principle the current person that's logged in and is going to capture and make that information available to us and it makes it available as a user info object that has an email and a user ID you can extend this if there are other user significant security significant pieces of information that you want available to you in your application um Eddie asks will be will we be touching based on Social account authentication or better yet Social account linking in Blazer with. net8 um I'll show you where that is but I'm not going to do it as part of this stream you can see how to do that in tagap and the code that we write over in um my other streams you would add that here in add authentication you would add the ability for it to connect and work with those other providers so out of the box I think Microsoft uh Google Twitter I think are the ones that are in the box that you can use you and quite frankly here in April 2024 you don't want to use Twitter unless you are a paid uh API user with Twitter you they will not let you just authenticate with Twitter unless you pay for that authentication so you're going to add it right in this space here um and heck I can I can bring up Tag app and show what that looks like um so this is in the fritz and Friends repositor uh organization and [Music] um you can see uh if we go into Source uh tag at Blazer external off [Music] providers so um we added this add external provider so that we can make it real easy to configure with all these options so add external you add external provider you specify the name of the provider and um add Microsoft account add GitHub add LinkedIn and it will add those appropriately and configure all the endpoints for those there's a second half of that that you need to configure on those services so that when folks log in it knows where to redirect back to your website so you have plans for twitch and YouTube in your personal project yeah you should be able to do twitch and YouTube very easily there's an external off providers um GitHub repository that has a bunch of that information [Music] um it has providers for literally everything um is it the ooth providers or is it no it's the open ID providers [Music] um and there's a huge list of these um no it must be the O off yeah it's this one so this is the aspnet security oth providers repository and it has all kinds of libraries here and instructions so you can hook up to things like like Discord uh uh GitHub gitlab Instagram you want folks to log on to your app with Instagram um octo is up there Salesforce slack twitch Twitter Vimeo right Yahoo Yahoo so I will share that link there's instructions samples in this repository that show you how to hook up all of those providers I think LinkedIn is in there too okay so I've got um I've got the authentic bits copied in here I believe I copied in the persistent that so I should be able to build now let me see build couple things here so in my orders and Order details it doesn't know the user ID to pass into these um let's wire that up a little bit so inside of each one of these you saw we added inside program we added the cost cascading authentication State well in order to have that cascading authentication State we need to do a couple things we need to update our router so that it sends through information appropriately and blocks and allows folks to access those various pages so we have our router here it routes for this application assembly it looks inside of our client for other pages that we might want to route to if we find a page that we we're going to appropriately route to well instead of saying just route it to that view we're going to change this and we're going to make this in uh authorize route view okay and uh the route data sure uh default layout you know we can add a using statement for this to simplify that tag a little bit right just do a little bit of that um route data default layout yeah that looks good and it's not going to just close right there so now instead of just hey route things over there we're going to add a not authorized right and I'll just put some text here that say text here thank you uh that says not authorized okay and um while we are authorizing I can put another template of content here and I'll just put a little bit of text that says uh authorizing please wait okay easy pretty straightforward focus on navigate that looks good right there and found so now if you are if you're accessing a page that you're not logged in you're not allowed to access we're going to get routed appropriately and we're going to see messages that say you're not authorized here okay let's go over now that we have that in there and it's the the authorized route view is going to pass through that cascading uh that context and it's going to Cascade all the way through now I can go over to Pages like uh like my orders over here and I can add in um a cascading parameter for my HTTP context and when I say repository get orders sync well I can say HTTP context for the current user um find the first value of uh claim types name identifier right find me that first name that goes with this and I'm going to get my using statement in there for that so now it's going to try and go get those orders to present for me and I'm going to do something similar also in um order detail s which runs on the server right so down here on parameter set um well first I need to bring in my cascading parameter so there's that so now get orders with status for that order ID I don't want to pass in just the order ID I also need to pass in who that user is Right user uh find I'll get it right find First value and it is claim types name identifier because we're right I'll add that there's my using statement that looks good I need the exact same thing down here when we do polling for updates sure right here I'll just add that in as well and and we're good that's all I need on that page the other page where I want to enforce that you're properly logged in and you you have that information I believe is on my checkout page um I'm actually okay on this one because place order will carry through the information for me okay now need to give you a way to log in so let's let's create a login button for you right so I'm going to go into my components on the server and I'm going to add a component here uh let's put it in layout sure and I'll call this login view login display. Razer and uh let me just copy in the text for this so that you don't have to sit here watching me type you know what I mean because that's that's kind of boring right so here we go and uh it puts some Extra Spaces in there that's that's friendly thanks I I enjoy that so this uses that same authorized view component authorized view checks to see if you're authorized if you are authorized and and we can add checks on a rooll or check if um right check I believe there's a policy well certainly there's Ro I thought there was a policy there as well um and we can check to see if you're authorized and if you're allowed access to this now actually I'm missing a using statement for that there we go yeah there's policy and there is a role roles that you can specify hey does this person belong to these roles they're not allowed into the admin area unless they're an admin right or a policy hey you're not allowed to look at the the Northeast Region's sales reports unless you're an employee in the Northeast region these types of things so I've got little bit of code down here that remembers the current URL um and uses the navig navigation manager to remember and show you exactly which page you're on and Route you appropriately around the application so my login display I want to put in my layout so that we can we can have that login button out there right we have a a login button well now let's actually put it in the login so I'm going to put it right here after my orders I'll just add login display and if I save that and I go over and we we run the website I'm going to run the website at the command line because I'm funny like that I think it restarts and and gives a nice experience when we do net watch here at the command line uh hey there Bullseye hello we're doing well what happens when the token expires you'll get you'll get blocked and logged out um I've got two different user info objects here um let's fix that let's fix [Music] that in this [Music] one uh let's see where did user info go it is complaining on line 56 what persisting authentication State provider yeah there is no line 56 components account oh uh up in here blazing Pizza components account this one [Music] um I'll just make this a complete name space here thank you thank you and let that rebuild there we go and there's our website um question from Robson if I'm logged out is it possible to automatically refresh the token that's a JWT feature um and quite frankly you don't want to refresh the token if somebody's logged out they're logged out you don't want to refresh it right that's that's creating a an attack Vector don't do [Music] that but right giving somebody a a countdown that says hey your token's going to expire in 2 minutes click here to to stay logged in you can do that because you're still logged in and you're you're forcing them to take an action to do that that's the better security practice there um let me um be well hang on stop stop the website for a second and um let me clear out let me remove the pizza database because it still has stuff in it from when I was building in testing last night and I want a fresh database here for us to work with so it'll scaffold and rebuild the content in that database for us there we go so there's my list of specials me go and register as a new user here now I didn't format and do anything with the CSS on the default Pages here I'll update them uh before we come back to our next episode so it looks a little bit better um so I'm going to register as Jeff at jeffre fritz. comom I will use a super secret default password register there if there was an email thing configured it would route you through and there's documentation to allow you to configure your email sender but for right now click to confirm thank you for confirming so I'll go and log back in and I will log in as Jeff at Jeffrey Fritz there's my password and now I'm Jeff Jeffrey fritz. comom up there fantastic right bie of cake um there's something with the login display that feels off there am I missing a div or something no that's okay and it's right there next to the other no that's fine that's not quite laid out right something that you may have noticed as we're going through here by attacking the pizza portal can we get free pizza asks mcnets uh maybe no no no free pizza for you um so if I sign out it should take me to a logout page which should then redirect me to the login well it's not doing that right now H right that isn't quite working let me go back to login view let's look at the log it's login display did I yeah login display let's look at that so when we this is doing a post on to account SL logout and it should log us out um Why didn't it log us out it should have done that let's go take a look at the log out page um right accounts um redirect to redirect [Music] to where the heck is it there it is map post receive log out sign in manager and it should sign out asynchronously and return you to the return URL that was passed in so the return URL should be the current URL which is captured right there and it should pass everything through for us let me just start the application just just to make sure that I've got this right [Music] and right no so why isn't it redirecting me um all right let's do a little debugging here I'm not sure why I'm not sure why because we should hit right here maybe there's something that I missed yeah I was going to slac accountlogout this is under the account group so it should hit that right so there we go and I click sign out and it's not getting there H here we go what did I miss did I miss adding that in to program I did I did it should there 's a bit to be added down at the bottom that that I forgot to copy over let's go back and make sure we have that um in the server version of the application after mapping the Razer components we need to make sure that we have the identity components I forgot to bring that in so right and this includes things like the logout capabilities so um stop that debugging and we'll rerun that at the command line and we'll get into this so here we go and now when I click sign out it logs me out and I go back to my login screen my my login buttons there now what's missing here and I need to pick up speed a little bit um um I shouldn't be able to click through to my orders and see content here this should be constrained and protected and shouldn't allow me to do that so first things first I don't want you to get to the my orders page unless you're logged in so we added those checks to only go get content for the current user we can add the authorization check by adding an attribute using the at attribute directive up here and say authorize I'll add a using statement for that so you need but by adding this you must be logged in in order to access this page now to the folks that were asking questions about further authorization capabilities you can specify you see it there you can specify a policy or roles that folks must belong to um in order to access this page authorize without any of that information says You must be logged in to access this page I want the same thing on order details you're not allowed to look at orders unless you are logged in because I don't want you seeing what Skippy ordered I don't think you want to see what Skippy ordered and I'll also put in checkout razor the exact same thing here I'll add and authorize even though it's running in the web browser we're going to force you to be logged in before you can get there so it already did the hot reload so now when I click through it should have done the hot reload we'll Force the rebuild click back over here and and click into that and it's not blocking me out uh use static files use antiforgery am I missing did I forget to bring over use authentication because it should do that automatically use authentication and it should have blocked me out of those pages from being able to get there [Music] um um you can also see the routes in here and where it does those uh there's a redirect a login that they use let me bring that in maybe that's what I forgot if you're not authorized redirect to login put that in there right um and let that rebuild so it loads up that attribute in web assembly is only for UI side you still have to protect your endpoint that's correct Robson yep um so there that [Music] loads right so I'll refresh try to click into my orders it should not be letting me into that um if I log in right of course I can get into my orders but if I sign out it should have kicked me out of there something's missing in my implementation that we're going through here um and it's it's not standing out to me well I didn't save it that's why now it I didn't save the file so now when I click through to my orders it blocks me and says well you need to be logged in well quite frankly I probably shouldn't even show the my orders if you're not logged in right so let me add a authorized view around that as well so that we can hide that appropriately so I'm going to go back into my main layout and here we have this nav link I'm just going to add an uh authorize View around this we delete that we'll get a using statement and I'll move that down here so um if you are authorized if you are logged in you're allowed to see my orders so when that refreshes we get the hot reload kicking in I'm waiting for it I'm expecting it yes go ahead so it's going to rebuild refresh and this is server side it's doing this and there it is hidden and now we're we can't get through we can't click a menu to get there if you know the address you could try and navigate there right if somebody sent you a link oh check out what I ordered from blazing pizza and they go to my orders directly you still get forced to log in but this also we put it on the checkout page so if I go and start putting together what I want on my pizza and let's just order a plain pizza a pepperoni pizza um oh sure we'll get the Brit place that order well now I have to log in all right well fine I'll go and log in and it doesn't remember my pizza if I go back and and I preorder those right put them back into my cart place the order now it does remember it what's going on there that that we're not seeing this here's the deal this page the the checkout page right and this is an important concept I wanted to show the the checkout page is inside of our web assembly so if it runs in the browser the login page is up here and runs on the server we're changing context and our home and checkout page run in the browser because you navigated away from those pages they're out of memory they they've been lost the browser memory doesn't have that information anymore because you went somewhere else so how do we remember that information persistent and bring it back now there's a couple ways to do this and there's things that you can do around sending information to the server putting stuff in in memory on the server and getting it back and a couple other things you're doing this all within the browser you're in the browser you're working in the browser you might as well in just save it into browser session State while you're going to log in and when you come back on the checkout page paint that information on the screen let's get it at that point and show it so I'm going to I'm going to take a step slightly out of order here and I'm going to update our order State information that is inside the client we learned about State previously but I'm going to update this and one of the questions that we got from a number of folks in that session was about saving things into the browser and using application state or session state in the browser we're going to do that right now because this is really the easiest and and quite frankly I think um most compelling way to interact with that so I'm going to receive and I'm I'm skipping ahead a little bit I'm going to receive a JavaScript runtime into mynet component here I'm say that again myet component is going to receive a JavaScript runtime we can then execute methods inside of JavaScript with that okay so what we're going to do is a little bit further down here I'm going to add some methods to be able to fetch and interact with um session state for that content to to get the the state of my pizza order so let me copy in these two methods here we go get from local storage so I'm going to use the JavaScript runtime right if there's one passed in we're going to use that um and we're going to call the JavaScript method session storage get item and we're going to get some string out of that we're going to deserialize it as an order State object set the current order set the information about showing the configure Pizza dialogue or the current Pizza that we're acting on we're also adding a method here to save that state to storage and we're going to call sess session storage set item and we're going to set just like we got up here I forgot to show that part blazing pizza or State and we're going to pass in a Json serialization of the contents of this class all right so now inside of my homepage right so I'm injecting order State down here on initialized right I'm also going to specify uh order state. JS runtime equals I need a need to bring in the JavaScript runtime here so let me inject that as well so Blazer is going to hand off to me information about the JavaScript runtime for me to work with here so it's going to pass that in so that I can work with it later um additionally I think I also wanted to update um when reset order happens right when we clear out the order um we should save that state to storage as well right um and after we're done with the confirm of the pizza dialogue and we added that pizza we hide the pizza dialogue we should also save that state so you finished configuring a pizza hey that's great um save the about that pizza into session state so that we have it when we're ready to continue um okay so that's in the homepage in the checkout page then I need to update this so that it gets um so I'm going to inject the JavaScript runtime as well and down here um before the place order button I'm going to add an a method yeah I'm going to add a event handler for on after render um y there we go so it's got the Extra Spaces in there just to make clear up some of these um and this was using edit context that we did previously um I don't need edit context I can say uh I don't I actually don't need to even do anything with those yeah we're good all right so go get the state from local storage after render we need to wait till after render because that's when JavaScript is available to us and state is changed I think I need to um oh no because I'm passing into the JavaScript one time we're good so now if I did everything right let's see if I got it right and right as we're hitting the end of the session perfect timing perfect timing so I'll go go back over here to my blazing Pizza I'm going to put a couple things in the cart right cuz uh I want to get pizza for some of my friends here in chat room don't what I'm saying um let me go over to storage and I will show you in session storage here there is my session State being persistent right I'll go ahead and place that order and it didn't bring back it didn't load my order oh I missed something oh I missed something here [Music] um it should have loaded that um it should have done that get from local storage Let's uh let's run the debugger and see if it actually got it just to be to double check and we'll wrap up here I have a pretty good feeling I know where this is so we'll go add some pizzas place the order and it never called that it never called on after render what how did it never call that this is in the browser I'm not hooked up to the looking over there um take a look at one or two things here no oh man stuff that I had working and now it isn't uh what did I miss what did I miss see if I can find it real quick [Music] um get from local storage where's what's it doing with that it should be setting the order and all that information right there um let's just take a quick peek at what it's outputting console right line uh no um deserialized State order pizzas count we should be getting that information that says it refreshed back over here I want one of those one of those I should get a two no it's not finding it there was something funny with this that I had to do it's not SSR this is web assembly this is web assembly no on after render is not being called it's the interactive web assembly um I'm going to double check my checkout page that I wrote last night because I had it working there um interactive web assembly order State IGS runtime [Music] repository um get from local storage yeah that should have well the deserialize isn't loading it um [Music] um that should have brought it back in um D serialized State order pizz count it's not let's make sure I've got the locally storage State coming back there it is so it has it it's just not deserializing it all the way um yeah why isn't it that should have no um I am perplexed let me look at my order State one more time the content's there I don't I don't know what to tell you it's not doing the deserialization properly right this yeah that system text Jon serializer and it should get that information [Music] I wow I am stumped no it's that's that's something completely different yeah Joy of live demos right um let me see where am I going here so why won't it deserialize into order state it doesn't have a Constructor so I don't have to worry about that I put the Json ignore on the JS runtime ijs run time JS runtime so it ignores that I mean it's I'm just going to copy in the final content that I had which I think is the same oh [Music] really [Music] um sure that should hit and we should get it that does what need get set um sure yes go and if we have 12 look at storage session there it is order pizzas there's three pizzas in the array good place the order there they are [Music] um I don't see the difference that I had here but they're coming back now which also means if I sign out right oh now I hit my break point hey look hit my break point um right so if I go through the process of wanting to order pizza place the order up you need to log in oh sure I'll log in there we go and it remembers my order now because it's pulling it out of the browser and displaying it fantastic all right all of the code that I showed you here today is available it's out there in that GitHub repository let me drop the link in chat one more time C Fritz blazing Pizza Workshop is where you can find that I'm going to do some more edits some updates on this and we're going to have lots more to talk about on this because there we've just scratched the surface on being able to create save and have authenticated information behind there there are um there is more to come in this series as we um right as we uh yeah as we get ready to do more with blazer oh come on now I'm trying to look at the list of the other sessions here so that I can bring up and tell you what's coming up next [Music] um I thought it was no it's not um do I have the no it's not in there either I can't find the docks I can't find my docks that's annoying stand by give me one second here there okay so we did authentication and authorization we're going to talk about JavaScript interrup a little bit more next time we'll probably get into templated components as well there's some requests out there for us to get this into Aspire there's some requests for us to talk about how we would localize some things and there's also um coming up we're going to talk about publishing and deploying how you go through that process and what it looks like to publish and deploy a Blazer application but that's all for me for right now we've covered a ton we even did a little bug fixing on the Fly here all the code that you saw here is available all the code that I wrote is available in that in that GitHub link right there take a look under the tag 4 authentication all right you'll find it out there so that you can catch up review Tinker with it break it you'll learn some things um that we think it's very valuable for folks to experiment with that those of you that are watching on YouTube we have lots of other great videos available for you check out the other videos in the C with C Fritz playlist it's over here or down here or somewhere depending on which YouTube app you're working on there's other videos here not just in the C with C Fritz playlist but on the net Channel if you're watching us on YouTube let's set up for a raid let's find another one of our friends out there that's talking about tech that we can get you connected to and uh have a good time this morning learning more about um software development and you know what I think I want to go I want to go to somebody different somebody that I want to support who's another Philadelphia based streamer developer we're going to go visit cren Stein who's working on a game that they've built called world of grim and they built it with Donnet all right nope not going to go there um I I have to go to safe for work channels and he's not safe for work sorry um so I'm going to take us over to cren Stein thank you so much for tuning in you can find me tomorrow over on my channel C Fritz both on YouTube and on Twitch same time we'll be talking through and working on Advanced Blazer applications with Tag app and we're even going to be taking our Blazer application and putting it inside of a native app to run on Windows and Mac all right thank you so much for tuning in I will see you next time until then I wish you good health and good coding take care

Channel: dotnet

Views: 5,170

Keywords: csharp, blazor, web, authentication

Id: fRDZBTxMiQs

Length: 125min 55sec (7555 seconds)

Published: Wed Apr 10 2024