Trying to add Blazor Authentication After New Project - Part 1 (Server Side)

[Music] uh so hey it looks like we're live good [Laughter] morning I don't know if you meant to run music or not that's okay I actually can't hear you right now no because I muted because I was running music okay I got you so good morning everybody um I was checking to see if the stream went live and then I saw us and I said oh that's not that wasn't what I expected I hit the button and forgot to switch the scene that's my bad that's all right um I'm not sure if twitch figured it out but maybe it did looks like it did all right everybody Welcome to the talk show it's it's March 20th uh is March 20th the first day of spring this year actually that was yesterday was it yesterday wow is the 19th like is that like super early it feels early but e Easter's early too right I mean Easter is two weeks away or another week when we get to the weekend but um yeah it's the so if I understand Celestial Le spring start of spring is defined by the equal amounts of day and night which is what we had yesterday right I guess so and it says here 11:06 PM there you go March 19th and and like you said I don't I don't know how you calculate the date but yes nearly equal portions of day and night okay sure and locally we see it by the long line of people outside um one of the big water ice places because they give away free Water Ice on the first day of spring so that's how I knew that's how you knew interesting yeah yeah yeah you know I I I guess I just didn't go by a place uh but you're right I I forgotten that uh when they open everybody gets free water ice which yeah that's definitely you know I don't know how East Coast that is definitely a Philly thing AB yeah I never heard the term um until I came out here water ice yeah I mean to me it looked like a snow cone but I I know it's not a snow cone so nobody yes from Philly don't worry I understand very different I understand the difference but the first time you see it you go oh that's kind of like a snow cone yeah and then you find out that no it's not I think the the more Universal term is Italian eyes okay yeah possibly maybe yeah i' I have Al that might have local connotations as well I don't know but so uh uh I thought of it when I saw the 19th like I saw people talking about oh first day of spring I said really it's the 19th and it's not tomorrow but but here we are it is spring it is in uh and we're live on the de talk show so yeah as the title suggests we're going to um talk about uh authentication and Blazer and there there's the authentication story in in Blazer eight is component based so when you create a new project and you say you want the individual accounts type you get all this code we've covered that before yep um it might even be interesting to cover it again but sure we've covered all of that before uh I don't remember what time frame that we did it I don't remember if it was a preview or if it was like right when it came out and that gets a lot of attention because this is a really important part of people's projects that I think um diving into is is kind of tough but before we get started today so folks uh who are watching in the future um there is a news item we're g to cover right and then we'll we'll take a look at this uh let's see come on ah there we go um there we are so sorry I've been playing around with oh I can't do this here so I have a a little teleprompter here that has our pictures in it so I can kind of see what's going on and when I want to do funny things like share my screen it I'm actually looking across my uh my space at it so that's kind of interesting um uh and it's being challenging sorry I should have done this beforehand let's share that awesome oh yeah that's interesting cuz I was I hadn't mentioned it to you but I said I figured we would talk about this sooner or later yeah and you could so you you saw it it's public right this is the thing that kind of you know um because this was something that uh we saw as a result of uh um during Summit last week I I heard about this and um I talked to people internally about it but this is a video up on the net Channel um and it is a video by I'm going to turn the volume down here because you video won't come across sh shades of the Blazer United video of last year here is Steve Sanderson saying I've got something else yep and what's really cool is um you know you can certainly go we'll put a link to the video in the chat and you can watch it it's an awesome video that shows something that he is describing here and there's a GitHub repo as well which is also public right I'm doing this in a private browser we can see this I'm just covering my butt that's all so I understand for people who don't understand like uh you know Rich you you're a Microsoft employee and I'm a Microsoft MVP which means I'm not an employee so the term is confusing sure so I'm not an employee but but still I'm very grateful that Microsoft has recognized uh what are called Community contributions you working at the user group doing this show just kind of spreading the word about things and sometimes and some of people watching may know this sometimes when you work at Microsoft or you're or for variety of reasons you may hear about something and you are under a non-disclosure not to talk about it until it's until you're told that it's okay right the other the other way that it can kind of be okay is well not kind of the other way that it could be okay is like it's been publicly announced yeah and so uh I totally where you're coming from is I just want to make sure that everyone saw this right and it's not my imagination because when I'm logged into things that login can basically say oh well you're allowed to see this yes but does that mean everyone else is allowed to see it so yeah just want to be careful but yeah I saw this video publicly it's on YouTube on the net Channel this is as public as can be so I was I was absolutely just said here we go this really feels like again here's Steve who how many times does he show up and say I've got something for you exactly he's so interesting so I'm sure he loves where you froze as well yeah but uh but even zooming ahead you know you'll see what this is I figured we might try to bring this down on a on a show very soon yeah definitely repo we can bring down and work with right yep and so the video's out there we'll put a link in the chat but the important thing with what this is is and we've done you know the hello do app has done a number uh you know we've connected to AI essentially large language models generative Ai and built an application that surfaces that up to the end user what Steve and his team have put together here is a collection of things called a smart component and what's really awesome is that all of the work that we did on the show to kind of make the connection even though we were using something that helped us with the framework of semantic kernel it was still challenging to understand what's going on when it came to token size and uh the right type of models to be using and all of those things and then how to wire that all up and put and show it in the UI what this is is essentially a way to kind of even abstract some of that capability and just provide some components or some controls that you can bring into your application so and this works for Blazer uh there they are working on some MVC and some rager Pages for this too um but essentially there's three main control uh components controls in these components there's a smart paste so being able to take a copy of uh username and or user and an email like we see here in this uh um or user and an address as we see in this email that uh Steve's doing here and basically dropping that in and have it go into the right locations which is pretty awesome right instead of having to tediously either manually type those in or go back and forth between uh copying and pasting for each individual field so that right off the bat is is kind of worth the you know all the worth the weight of pulling down the repository essentially uh Smart Text area is a way of you know based on you know a business role where you're typing information or responding to people about in this case vacation it pulls information from in this case your vacation policy about how many uh how many vacation days you get as a full-time employee and then helps you get the link to that policy so it does a lot of text suggestion as you're going through this instead of just giving you a blank text area and let you come up with those on your own um and then the last one that's in here is uh smart combo box and it's funny I was doing this yesterday for our expense system where I was trying to figure out as in this thing I was submitting it was you know um uh related to you know cell phone charges and I was trying to figure out well which categories does this go into and I could you know couldn't find the the one that was mobile charges and it took forever to I had to go back to a previous expense report and figure out where it was and that's what the smart combo Box gives you is essentially theity you start typing in your uh nomenclature what it is you're trying to do and it gives suggestions for what might be the appropriate category here that you want to include in the drop down list so I think that's I all of these are are you know really awesome when it comes to making your application smarter and making it much easier for your end user to just get data entry done so I said a lot there I'm sure there are questions yeah it'll be interesting to walk through it um yeah the video is there like I said I don't know that it's in any chats right now but it certainly it can be and then I know we'll get it added to the YouTube video but um it's it it's really interesting I think and uh that'll be kind of fun to play with so yeah I don't I don't remember if the price of admission was like a an open AI key which you probably I think you just get from their website but you know what I don't want to speculate too much without having really jumped into it so yeah so here's the you know a section here on how to configure the open AI back end so you know kind of running through those steps there so yeah you do need some kind of generative AI to help you through the uh uh through the working of this yeah I think it's important the last thing that's important to add is that this is it says it right there in the title right I'm pretty sure that it's an experiment yeah absolutely much like other things that uh um come out early so it's just a and that's why it's it's open source GitHub repo give it a look throw your comments in there there are already some issues that are starting to drop in place here you know um use this as an opportunity to maybe you know jump in and do some open source type work yeah but I mean it like there like in other situations features like this have been announced as experiments where the team is saying we'll see how this goes don't you know Blazer itself was one of these experiments we'll see how it goes maybe it'll ship maybe it won't just depends on what the feedback is depends on if it meets people's needs does it actually help and if it does then great so cool um so yeah that's that is pretty cool I'm glad we talked about that because I thought it was interesting and I knew it would come up sooner or later I just didn't know if you'd seen it we haven't gotten a chance to catch up rich and I haven't at least offline uh you would think that you know with the the obvious the obvious polished production quality of the show that we must be behind the scenes for hours every day planning every moment of it right but now especially given the way we started yeah and if and I everybody who knows the show knows that that quite frankly it really is quite often just hitting the live button and saying we'll either figure it out together as developers or we'll figure out that we couldn't figure it out today which I know for people watching uh we try to be very transparent about what we know is going to work that day um some days I think more prepared than others and uh that way you know your time is valuable but the other people have told us they like they like watching the experimentation so you know you get a different point of view so um what I am going to do I was I was debating whether to do this uh command line or in visual studio and and and when I say command line I mean you know essentially everything but the visual studio IDE right that could mean developing in in in Linux with with Visual Studio code or um even on windows with Visual Studio code and and there's other idees other editors I think it would be fascinating to kind of get Neo going just to see it work um and for me it's just to drive the point home that unlike previous iterations of of Frameworks that we've had in the Microsoft space for years I can go all the way back go I mean go to go to early. net to heck even later. net VB6 go back to visual C++ you were married to to an ecosystem of operating system tooling it was all it all integrated and it's the opposite now where certainly the integration is great but frankly under the hood Visual Studio is using the same tools you do if you're doing this on with the net CLI or if you're in Linux or something like that so what I have let's see there we go that worked nice and then uh maybe get I don't I feel like I'm not I don't remember if we get slightly more screen real estate I don't know that we do maybe we don't it's hard to say well there we get a lot look at that yeah there you go so that's one way to do it so in any case here's uh visual studio um it's happening to tell me that it's it's 17.9 and the reason why we're going to start with this is we are going to create a new project and um purposely purposely uh call it laser off from scratch and it's because I want I want everyone to see the choices so we are going to choose authentication type none mhm uh we'll go ahead and configure for https I don't think that's too much of a problem and then interactive render mode is also going to be none so we we're going to have to add in an interactive render mode but for now this is the serers side rendered Blazer which um I think one of the biggest transitions for Blazer in my opinion is that server side rering is now the foundation I don't know that that's really the case for prior blazer because I mean we could have a lot of we could probably really break that down and have a long conversation about it but previously you always picked whether you were web assembly hosted or what was called Blazer server hosted the signal R based round tripping and now while you can choose that you're no longer Lo locked in and to me the base the foundation is serers side rendering So when you say interactive render mode none authenication type none I'm getting a project that quite frankly I think it could be confusing to a lot of viewers because they say here are some things they might say I thought Blazer was web assembly well I mean it can be right but even to this day as we went through through 567 I would often hear well Blazer's web assembly right it's like well it can be if that's the hosting model you choose um I don't hosting model might not be the exact correct term but you always in Prior versions of Blazer you had to pick am I Blazer web assembly am I Blazer server and now as we've talked about on the show you don't have to pick you can and it actually good there are many scenarios where it makes good sense to make that choice and just say like listen I love I love what I'm doing here in Blazer but I I know I'm a Blazer server app and that's what I am that's fine that's that's great and I think it just points out that there's flexibility that we might not be used to right and that Blazer has always been more than just how it's hosted it is it is first and foremost a component framework rather than a page based framework or a controller based framework which is what we've had in ASP net core until now well until Blazer so because I created what you might consider a barebones looking project um my program CS is very short and it adds razor components and then it builds that and then uh we've got some stuff here just in case we're in development so that way the error page comes up and and we're kind of we're basically almost there I mean we we can serve static files we can redirect to http and then antiforgery this antiforgery pattern will help us with our forms if we create forms in our app those forms will use the anti forgery token pattern which is to prevent uh cross- site request forgery that's pretty common web pattern so you just get it all right um we I mean you have the you have the flexibility to bring in what you want which is cool I can right which I which I don't know that we will do today but maybe maybe so homepage is pretty Bare Bones I did say to include uh I did not say to include the sample pages so I don't have the counter app the little counter piece oh yeah yeah you know what did I say the sample page just maybe I did I I don't remember now I don't remember but the point is is that this particular we've got two quick Pages here when I just run it you get that default looking feel that comes with the Blazer templates which you had worked to strip out in Hello Dolly right yeah definitely um yeah I I I think when I dropped mine in I did not include any of those pages in there and then continued to pull some of the things out I knew I didn't need right and so if you haven't seen this before this sample there's not a whole lot going on here this weather page it looks like it's loading from an API it turns out that it's not but it is simulating it they simulate that in the code behind basically so it is not actually going to get weather data but it it pretends that it did and that is to demonstrate stream rendering which we used on the last show we were together uh to reduce both kind of that flicker feel and that that double was it it was grabbing data like twice for you right it was yeah and I think I think part of that so streaming was part of that but I think there's also and we didn't touch on this but there's also that pre-rendering pre-rendering yeah yeah right which I don't think we turned off but yeah we might have I don't remember um so this is that's something that really confuses people too sure Blazer at its core at the foundation uh is a server rendered framework now that's kind of an okay statement to make I think and what that means is that even when you choose interactive server or interactive web assembly uh BL laser will still try to get HTML and CSS without interactive hookup without interactive links linking or the code that drives that stuff um it just wants to get it out there and it can create a situation where if in your component especially in the early methods of the life cycle if you are doing a lot of work for example you're calling an API and it's not super instant and you can get this flickering feel because it'll call it and then it'll render and then it'll call it again because now it's setting up the circuitry for web assembly or signal R right so the way to get around that is no pre we're not dealing with any of that right now we have a server side page so in a server side page we still have access authentication wise uh and if I I think that's just I don't know if my screen if the page flickers when I no it's been looking good well that do okay because I'm wondering if so what happens there is and I don't know if there's a way to shut this off because for streaming I might want to do it but when you go down to your toolbar in Windows and you you pick a window it like wants to preview that window for you and it shuts every it turns off all the other windows and so it looks like oh what happened to the screen H so I understand okay kind of you know that's kind of a kind of a mess I suppose but let's see now um one of the things that we can do let me just uh is we haven't added any code yet like at all right for any kind of authentication like nothing so um part of what we're trying to do is see if we can add this stuff back in a little bit at a time and that way that we all get a better understanding of how this actually works so right on the normally I don't think you know nobody is saying that normally this is how things would work but but on the homepage what I'm going to do now the homepage is a component just like any other component but it's a page component so um in a way it's already kind of this this can only be used as something that you navigate to so I'm going to inject this authentication State provider and as you can see it immediately said like hold on a second you're not able to do that and the reason is is because it says well wait a second are you missing uh assembly reference and I think I think we're going to get some help here if I just say quick actions of refactoring yes we got the help that I was expecting where it says this is probably the using statement you're looking for okay and that's true they were it was right so the authentication State provider um this is a it's it's in the component Nam space Microsoft aspet core um let's see I'm trying to get I'm trying to get better at using Zoom it here ah nice so it's in Microsoft aspnet core components now if you've ever tried diving into the aspet core uh open source project out on GitHub maybe just because you want to build it yourself or you're thinking about contributing which we certainly have um components is the name space where Blazer lives kind of like that's that's pretty close enough for our purposes so this is uh this is clearly the the Blazer folks saying well we're going to need a way to go get authentication state of the current user because um previously what I think people are used to doing is is using the HTTP context and so let's go ahead and open a code block and uh oh I love how it's already trying to uh to guess at what I want next it's actually it's actually not all that far off um but in the server side parts of Blazer you are still allowed to use HTTP context but I kind of don't want to jump into that just yet instead I think uh I think what I want to do here is say Okay um I I I want to I want to to look at the current user principle and so let's uh let's try this uh that's interesting why is it because trying to think if I need in order for intellisense not to completely uh fight me mhm let me think for a second don't know that this needs to be asynchronous just yet but we'll create an oninitialized and I don't think it's going to fight me anymore now because the VAR keyword outside of a method like it isn't valid so Intellis in and tries to help you right it says oh maybe you mean you want this class so but this is what I really wanted to to get to is that now that we have an injected authentication State provider we can say what's the current user's authentication state so why do we need to do this and the main reason is because we're in a component-based framework now components can be ignorant of the page that they're living in the context they're living in it's not like our previous Frameworks where well other Frameworks because they're not previous they still work razor pages and NBC they are server side Frameworks MH so no matter where you're writing code in razor pages and MVC that code is getting executed on the server and therefore HTTP context is valid right but what if you're in web assembly is HTTP context valid when you are client side code running in the client and is it valid when you're a component so yeah those are good those are good questions and things to think and frame your thought process as you're laying out your application and and figuring out you know where which side of those uh um render modes you're you're you're running in that's interesting why I'm not sure why it's uh oh I know why I know the I know the reason why so what's the bug that I just created here which is great this is some good async A8 um thinking so aate has a user and I'm like why can't I just reach user and first of all why did intellisense say to get the result that sounds like a t ask it's like oh I know why this is an async method and I didn't await it yeah now if I'm going to await it now I've got this whole new issue where hold on a second I overrode I overrode the non async version of this yeah so uh this returns a task is that right yes maybe I got to do more uh you still got to do the weight right that's what I did wrong so and then I think this has to be async there you go the async part yes all right so these are all the things that has to happen and that changed a few things instead of just simply calling on initialized the base method now that's also a way to so this has to be called correctly yeah don't know call it at all do I actually maybe what I really want to do is this so I'll give two comments I did not so we did something very similar in the Hello doly app if um I did not call back to base okay for whatever reason and then the other thing line 12 for some reason something comes down later on where it actually needed to be protected override async okay instead of async override I'm sure there's oops so yeah we may not we may not really need this so the point is if if we don't do anything else but just run this we we really shouldn't expect a whole lot here because well we're not we're not logged in nothing's authenticated yeah yeah so I need to uh oh okay well this is good actually so this blows up and it says no but you didn't there's no Authentication State provider registered which is a good point because we didn't we didn't register one y so let's um now the trick is figuring out what do you actually register so and this is where it gets a little tricky uh this isn't the same thing as when you're using MVC and you you're doing the identity components and you haven't read you haven't done like the add authentication extension method this isn't quite the same thing okay we need a service of some kind like for example see it's even trying to say well you must want add authentication right this is to say we need a we need a component-based authentication State service okay one one that will allow when you inject uh when you use dependency injection and components on your own you had to register a service for dependency injection which you did in the Hello Dolly app yep absolutely did a couple we need something like that because we're sitting over here in home. raiser saying hey go inject this authentication State provider and then dependency injection looked at this stuff and said you never registered one but instead of having to register it in like a very the very like uh base foundational way where we would actually add and say hey resolve this to this there is an extension method already out there add cascading authentication State and if I hit F12 it Dives us it moves us into it now this might look a little familiar I don't know where this this might look like uh when you do register services using the services get service or ad service here it's saying hey um your authentication State provider is a required service of type authentication State provider and then they have this way uh where they return a cascading value source which is a a cascading value source is is something in Blazer that you can create that basically tells Blazer I have a value source that I want components underneath me to be able to inject and and and and um and receive value from so that when I update that Source they get updated as well yep so you know creating your own cascading value source is certainly a topic of a show but we can kind of take a look at what's Happening Here I I am not going to pretend that I understand all of this yet but certainly have been working on it um and yeah and just to take a step back when we think about cascading value Source in your application I mean the the number of times or I guess the the the context of when you might do something like that is something that's more Global to your application like a user or like an authentication piece right you wouldn't necessarily do it for you know like we were doing we passing the answers of a question right that's not you know the the the the scope of what you're trying to accomplish is very different in a cascading value versus maintaining something in state right exactly so the cascading value and the cascading parameter Concept in Blazer as it says here is provide a convenient way to flow data down a component hierarchy from an ancestor to any number of descendants in this case what's happening is a is a a cascading value is being added to the root component it's it's uh and that's what that extension method is is essentially doing is it's saying I'm putting this at the top of the hierarchy so everything benefits from it yep um to your point like it says here you can create something at a at a root level uh and then they they have all kinds of examples in this particular um piece of documentation where they say uh uh okay so now you can see that other um The Descendant components they get to just basically say hey I I what's the cascading parameter and it picks it up for it and then they even go on to talk about what what we're not going to really jump into is creating cascading value sources and so that's that's what is happening here is they are creating a they're they're essentially saying we're going to create a top level cascading value everybody gets the benefit from it and it happens to be the authentication State provider if the authentication State changes then they have events that deal with that and what happens is uh there's a Handler that basically calls notify change to sync and that's that is essentially what tells that's what's going to trigger in Blazer calling down to the components and saying hey guess what that that off changed so it go ahead it's almost like a pub sub without having to wire all that up right you get it for free because you're doing a cascading value right right so the tricky part is understanding that this extension method is doing more than just registering the service that you need here so that you can use dependency injection it's doing a little bit more it's setting it up as a as a cascading value Source at the very top so that you just don't have to really think about it that's the idea okay and with with that convenience um unfortunately you also have the issue of like well I don't I don't understand what it's doing so let's see is there anything else that we need to do because if I run it now I'm not 100% sure if we're completely done so we're g to find out though so last time I think we got a different exception no service for type ASP net core components authorization authentication State provider has been registered it's like [Music] okay and that's that sounds similar to what we got the last time right okay but it's a little different but it's different yeah yeah and so now the trick is saying okay so what now is it looking for um so that it will it'll say Okay I I mean we have ADD cascading authentication state but what I have had trouble figuring out next is what what do you add here so that this is registered for purposes of being picked up in a uh an underlying call right um right let's see did I do this wrong no that's the name is that right so that's correct this is not a class name which can be very confusing because this looks like a class name sure but it's not and probably the best way to demonstrate that is is what if I change this to say oth State provider now it's not happy because it's like wait a second you can't call that method from a class name you need an instance it just so happened that the instance was named identically so you change that a little bit maybe that provides a little more clarity I I actually kind of like this I understand if not everyone does but I like that for clarity's sake um so the next place that I want to double check here is I'm wondering if there are Imports that are missing and there just really aren't because if you uh create this on your own if you basically say hey I I just want I want to do the same exact thing but um I just don't see any trying to figure out what is exactly missing here it's not that I don't know if we are missing new get packages okay I feel like we would get a different error if it was new getet though you you would have issues with it compiling even I think so right so I don't think that that's it either so we have program CS ands we we did say add cascading authentication State and then builder. build okay uh use anti forgery use static files use HP directions so I'm a little bit at a loss as to why this did not register that add razor components we don't need to do anything else let me see is it here in home. Riser we don't need to change the render mode we don't need to change yeah so this is where I I'm at a loss as to why uh we can't go any further because I feel like that's it that I feel like there isn't anything more sorry let me come off mute let's take a step back um when we look at your programs. Cs and what we're wiring up over there because that's going to set the stage for what we can call in here we have cascading cascading authentication State we don't have anything that tells and maybe this is the path we need to good there's nothing that tells Blazer or the your application regardless of laser how do I do authentication am I talking to you know a local collection of user and password am I using some kind of an identity provider there's nothing that really wires that up and I think that's kind of what we're missing here yep yep unfortunately the project that I'm copying it off of doesn't have anything else so I don't know I don't know where it comes from um and that's been a lot of the struggle is trying to figure out where what's the missing piece now this happens to be an interactive server app and I certainly hope that that's not the case that you cascading authentication state I'm not quite sure why that wouldn't work with server side rendering because you still have components in server side rendering so I don't feel like that's it um I I believe that because we're on server side I think you can do things like get HTTP context right definitely and you can even have it injected yep as a because you can get that as a cascading parameter essentially yeah the problem I have with this method is this only works server side yeah so it's it's a limited architecture use case right um meaning that if we create I think if we create a web assembly component this stops working y yeah because it's uh it comes back null right yes because it has no context it's it's not running in the in the browser per se is it worth so is it does it make sense maybe to go down the path of hey how do we wire up client side um or maybe just server side Blazer authentication and or since we know there's a limitation because of the context do we focus on doing you know maybe the client side part and just look at the docs to kind of wire that out and what we're trying to do here just to kind of give a sense of you know yes we could as Chris kind of kicked off we could do file new project and say hey let's bring in authentication boom but what if you've got an application that you know and think about what we did with h Hello Dolly we didn't start off with any authentication but I want to get it in there how do we go ahead and do that so we're kind of walking through those steps based on the type of app we got and the type of authentication we want to include and this is just some of the thought process that we're going through kind of live here because we're figuring it out as we go um so we don't necessarily have a direct answer we've got some thoughts but and we've got some docs and I think that's kind of the path we're heading down and just to kind of level set we might you know might get a good ways for the next 20 minutes and we might get to a point where hey this is as far as we can get today and we'll come back tomorrow but um so I'm going to try adding something um because I I don't know if this I've got a funny feeling about this though so this is interesting is this really huh see this all like a component so so authorized view is a built-in component that you get in Blazer okay and this is how this is the the um probably the foundational way that in your components in this case a page but in your components you can decide what gets rendered if the user is authorized to view this page which is different from authenticated and what gets rendered if the user is not authorized okay okay little conditional so this is not code that we wrote right in fact you can see right there that it it comes and but what's interesting about it is that the authorized view is it's directly referring to a context interesting but we haven't declared this context anywhere true true true and uh and yet it's still wired up and still works so I still feel like like that's not as far as we want to go though because I believe it was complaining yeah see what it complains about is that authentication State provider authorization authentication State provider has been registered no service for type then in case State provider has been registered but what I thought was is I said okay is it possible that like that doesn't make any sense that it would go back and register something that doesn't make any sense to me at all right but uh was kind of hoping there that maybe so so when we asked where when we added that cascading value was that an authentication service provider or state provider that we added or no okay well let's go take a look I think I can leave that code since this builds of course can always remove it later if we think it's a problem but let's go back here and now when you dive into ad cascading authentication State yeah this is now their method and it says it adds to the service collection okay and then line 24 get required Services trying to find an authentication State provider right be okay right and it's just saying well where is it now that makes feel like there is some subtle difference between an app where you uh where you get this added and you don't but I mean I'm not sure I don't think this has anything to do with it but just for the heck of it I'm going to add support for Blazer server okay which we believe after having dissected this that that's how you add that that's it all you have to do uh and oh you got to get your semicolons right okay so now we got a different value so that now it's complaining about when I tried to inject HTTP context so let's take that back out let's take this out so this is interesting so we added the authentication State provider yep the authentication State provider this could be a clue the authentication State provider didn't seem to do anything but then we said well let's add in support for Blazer server let's add that in and then and now the app comes up what so with that so and I will show you so for people that are wondering what I keep looking at previously I tried to do a Blazer eight from scratch just on my own and it was went successful but notice the big difference between when I tried it before is this is interactive uh Auto essentially yeah right because it's add everything it's got both yeah so that's telling me that add interactive server components that is is adding let's go check this out if we dive into add interactive server components okay first of all it's a it's a extension method so you got to click again you got to basically F12 through this as well to basically say go to this definition and now we find out what it's really doing and when you add interactive server components it add serers side Blazer okay and nothing else that really helps us too much here I don't think but we we're going to find out what ad server side Blazer does because it might do a lot more than we realize adds protected storage protected storage add Hub options this is all to get the signal R stuff going Annie forgery State provider okay and I'm just here we go look at this nice line 85 right so the authentication state provider is an interactive component itself is what it's telling me MH see that is that for serers side Blazer use the authentication State provider and it's setting it up here it's setting it up by figuring out here's here's how I know you know I don't know what this does from here on down but like they say here intended for use in server side Blazers so you don't get an authentication State provider unless you've picked either Blazer server or Blazer web assembly and and I think that's actually extremely helpful so when you're trying to do and I when you're trying to do blazer from scratch this does not help you the purpose of this I believe is to help you in interactive components and maybe isn't even necessary if you're purely server based but I I'm going to tell you I'm going to tell you I'm not sure and that's why we're tearing this apart for folks who are wondering is I mean I'm tearing it apart partially because I'm naturally curious about things but I I don't I don't want to make it look like I mean I really do try to do things with a purpose which is to say like this is actually gonna help me if I figure this out yeah this is good to know it's not just it's not it's not superflous knowledge right this is important to understand what's going on and why that control might work or might not work depending on how you've defined your render mode right so let's since the since the beginning of this our plan was to not use uh I mean I think we were coming back to this this was all layering MH but to say the server side rendered Blazer let's take all this out we already know now that we can't use that authentication State provider which is going to be useful in a second but it's not useful yet so we can we don't even need this yet I wonder if you can have an empty code block yeah um I mean I guess right we don't need this yet and we don't need this okay so instead let's try remember we're server side only so now my question question is can I do can I do this can I say can I create a cast grading parameter and we'll make it public although I don't know that it needs to be maybe it does and it's a nullable HTTP context and look all this stuff is lighting up yeah all that stuff lit up now how the heck did it light up well maybe we go to the global usings and am I going to spot it real quick I don't know maybe not I don't I mean I guess here is is I mean is it system net HTTP um no it's aspnet core HTTP which is I don't it's maybe it's one of these okay so that builds m but does it run I think it's going to run but it we're not going to get a whole lot out of it just yet but that's okay yeah so we've actually this is pretty much back to scratch we did not end up touching this because I took out the cascading authentication provider support and so here's the app runs welcome to your new app yep I want to investigate the user that's logged in though which should shouldn't be anybody like I I I'm fine with that if it's nobody so the question now is for me is because I'm purely server side and I don't I don't know this is I don't necessarily know if I expect this to work but but who cares I suppose can I add this back now there's a little bit of trouble here but I wonder you just got to change that HP context right or other way around yeah saying it could be possibly null sure sure and if it is null I think we've dis we've discussed that if that the Blazer markup is smart enough to deal with null and be like yeah it's not going to what what are you complaining about here oh interesting found markup element with unexpected name add a using directive okay so we have to bring this back which might have been here before I think I think we got when we added the authentication State provider this came in okay I can see that so this component is in the same name space so now what my hope Here My Hope here is that we're actually not authorized because yeah that's what you would expect right so but the idea is to is to get the foundation going and look at this no registered service of type authentication policy provider so that must mean that the interactive server components is is doing us another favor and getting an authoriz authorization policy provider in place yep so that it has something to figure out like it says okay you're not authenticated but that I don't know what that means like like MVC doesn't know what that means so let's not just for now since we've only got about 10 minutes left I think figuring out how to wire this up with an authorized view isn't the worst it would be interesting to figure out yeah um let's see but let's just get rid of this and let's interrogate that well actually I don't want to get rid of all of it let's interrogate that directly and say okay I I'm I actually don't know if that if that's going to render hello or if it's going to skip the whole tag we're about to find out okay so it did something funny it rendered it um but the yeah that's not what I would expected I think it's because actually I don't know why I suppose we could set one of these and find out let's refresh this and we get here context so there is a context huh users not authenticated okay and so identity name is null so that's kind of what's Happening Here is authenticated as false right so the name is null that makes but there is a user object there is a user object right and an identity right it's just that the name is null so what we could do is we could say but then why didn't they just give us null [Music] um I think this might be the reason okay I think this might be the reason because the exclamation yeah yeah the C the C little exclamation thing which I don't know a lot of people are using um let's see it's got know I thought I thought that was just going to be a text exclamation I didn't realize it had code implications yes the null forgiving operator wow and not a lot of people use this and and I'm not even one of them who uses it really all that much okay so a lot of people I think are aware of the of this one right oh you know what I think I did this wrong I think that's how you're supposed to do that right then the Elvis operator no I guess not I thought that was right though is that if context okay so let's get rid of this I may have done this incorrectly where this is supposed to say uh I believe what this is saying if context is null then just return null if user user we're not protecting ourselves if identity is null just return null but if name is null there's you get to the very end the null forgiving operator um just a not yeah is testing like let's see let's see what they talk about here uh so they're doing doing an example where they're saying you could create this test but without the null forgiving operator you can't convert the null literal to a non-nullable reference type and so um when you definitely know that an expression can't be null but the compiler doesn't recognize that you can put the exclamation mark when mad's uh torgenson described this operator he used to call it the dam it operator like I know that this is not going to be null compiler oh that's what he called it he said he said he said you could also call this the dam it operator which I think is is funny because without it you're going to get this warning that says well look this might be null now many people will ignore warnings but what if you're the type of developer that enables warnings as errors now you're stuck and so using the null forgiving operator you're basically telling uh to you're basically saying suppress nullable warnings for that particular expression it doesn't do anything at runtime it can still blow up it's just that you are suppressing warnings at compile time and I honestly think the reason for it is because there are developers and I I'm actually kind of one of them I like to turn on warnings as errors and it drives to get warnings out of there because early in the project you have one and then two and then three and then a year in you have 257 yes yeah so we've all been there okay uh I'm I'm there right now yeah so let's see now that I've done that let's see if that changes things at all I'm just curious okay so this actually did a little bit more of what I wanted I made a mistake in my Razor syntax and I did not put I did not completely so another little joke about the question mark period is it's the Elvis operator because it looks like Elvis's little hairdo if you okay and uh and and this is the null the percent uh I mean I'm sorry the question mark here we go the N cesing oper nope wrong one sorry there's these operators are all this is the one I want no I'm not right about that there's a null forgiving operator this is not it I want the Elvis operator so we're going to say oh I was hoping we'd find it it's not the N kesing operator it's got a name and um oh I didn't even search for it correctly yeah maybe I'm maybe I'm wrong anyways let's go back to the docs and see that's not what I wanted at all we were here on the null forgiving operator list all C operators uh I don't know that that's going to make it easy to find well I don't think it's in here but it's when you are oh look at that they do show it here no conditional operators oh the naming okay so this is the infamous Elvis operator which when you are accessing a member you're dotting along from object to something to something to something that's probably the term we it could have been called like the null dotting along operator when you're dotting along if along your path some of these things could be null you can use the Elvis operator to say if it's null instead of trying to continue to to access which is going to be a null reference exception just send null back up the stream stop here and send null back up okay that's what that does it can also be applied to elements of an array like I've got an object and I and if that object isn't null it has elements so I could access those elements with square braces but if it is null we're going to blow up so therefore use the Elis it's not really an Elvis one now use the null conditional version of this and you're not going to blow up you're just going to send null back back up the string okay I don't know if you use those a whole lot I do not but that helps so in this context we actually have two right so it's saying if context is null then that's fine we're we're covered yep if the user object is null we've got a problem if the identity property is null we're okay because it'll handle that okay yep so I think what we've discovered is user can't be null yeah um and I think that's true and then because even when you don't have a user you still have a user they're just not authenticated you have an object so what's happening is we talked about how at runtime that exclamation mark doesn't have any effect so I think if I take this out is it going to warn me it's not going to warn me okay so once again let's just go ahead and run this and what happens is Blazer steps in for us it gets null back and instead of blowing up it just does no markup yeah I mean it's not great but it you know that's how it so what I think we can do instead now is we can say if uh context and maybe this isn't I we're in like the last couple minutes here so who knows if this is the exact best way to do this but if I say user. identity and then there was an is authenticated right yep yep and we could just kind of do um H you know what's interesting here is you see how it suggested Double Double Y yeah I feel like what it's saying is if this turns out if the the problem is is authenticated isn't going to be null but the identity could be yeah which means you have to put the question mark there question period yep okay so I guess what it's telling you is is is we are testing to see if you're authenticated but if you're not if if this comes back null then and return false no it would be no so that's true so you're just checking if that's true or not right if that statement is true so if it's authenticated is false right do this this not that not that we know for a fact this isn't going to work anyway why are you fighting me here oh I know let's put a P tag um and then we could theoretically do this y we're not going to be logged in today however I think next time we can talk about how we can what we want to get to is real logins but next time we can also talk about about how to fake it too because you can do that I feel pretty confident that we're going to get back uh to did I not need to did I not need to do that okay I didn't need to put razor syntax there yeah we're going to get you are not authorized all right and then there's some dangling some dangling thing there so you could argue in some sense that this is working uh I find it interesting here ah an X there it is there's an extra one of those You could argue that this is working I'm not going to say that this is the most useful thing because and there's two reasons why one is that I I get the sense that like using the using the cascading authentication State provider is probably very helpful but it doesn't help you server side right so it just depends on if it depends on where you want to take this authentication logic and if you want that to be an interactive component even though you're running serers side yeah that's interesting I don't have the answer to that question yet because where I want to land is where we have this about link I want that experience that you get on a lot of web pages of user information in the upper right and if you're not logged in it says sign in and you click there and you sign in right there to me that's a component I would agree I was thinking the same thing what I don't know is does it have to be an interactive component and I think the answer is is it doesn't have to be if you're willing to be serers side because we've had serers side apps that do authentication for Generations so yeah it doesn't have to be so does this mean our final component that we end up building here may have to be like a little smarter than the average bear and go it it almost would have to know and figure out let me check the HTTP context oh that's null then I must be an interactive component so let me check the authentication State provider I wonder I don't know and would you do two controls or two components right right and load the right component depending on whether you've got the context or not yeah that's interesting right that's that's even probably a better way to do it is instead of it being smart you can stay kind of dumb but or just more naive and we'll have a host component that figures out which one to use well I mean that's probably markup on the page markup in the header yeah yeah so I would understand if you watched today and felt like wow we didn't really get very far but the the deconstruction of authentication I think for a lot of people is really confusing and and I was even confused that I thought well let's add this cascading authentication provider but then when you start going down the rabbit hole of what's really happening under the covers as much as I I really do love the model of extension methods uh that are written that you write you might write an extension method to make things easy for your users or maybe we just use the ones that are built in like that ad cascading cascading authentication there was a little bit of fool's gold with it in that without really deeply thinking about it you ask yourself why doesn't this work why didn't this line of code right here just work yeah and it's like oh well the reason it didn't work is because you need an authentication State provider it's like well wait a second how do I get one of those oh well it turns out that our friend here here added one for you that that kind of magic can be infuriating if you just don't know what's going on because you're just yeah like I was here going like wow I don't know are we stuck um but it had to be something yeah and especially if you just jump in the docks right because the docs say Hey you need that um authentication State provider but you really don't do it directly right it just kind of happens that you know so there's some digging into what yeah that section there right above that yep yep and like it says here this is very helpful we tried to use the authorized view component without it didn't work so they're telling you listen authorized view uses authentication State provider so um that's interesting and I have to wonder what does this mean uh like they talk about you know how do you implement an authentication State provider in server side BL apps okay fine that just feels like it's time to read this article so um it's very interesting so yeah we're already a few minutes past nine but we are yeah and I gotta I do have a customer thing I got to run to okay sounds good sounds good well listen if you were watching um oh we got a great we got a great I'm sorry that I did not look at edson's comment here while we were working but he was helping us out with uh with the null one of the versions of the N cesing operator so really appreciate that input um but as you can see this is it's hard for me to know if this is super useful pragmatically and as we start to build this up I think we'll come to some conclusion but I really have personally wanted to get to the bottom of how this works mainly because we are in a component world now not in the in a page World a serers side page world so that's it hope you all enjoyed it I don't know if you were gonna if you're gonna lead us out then then I was going to turn it over to you no go for it I will just hit the music all right well everybody thanks for joining us really appreciate feedback um if you like this show or if you have comments please let us know in the comments down below if you want see more deconstruction like this let us know but it's something that I'm very interested in but if you're kind of the person that says like ah can you just build an app that's fine we've got some apps to build too so for Rich I'm Chris and thank you all for joining us and we'll see you next time on the dev talk [Music] show [Music] [Applause] [Music]

Channel: The Dev Talk Show

Views: 709

Keywords:

Id: XAgkLf1q0uc

Length: 77min 52sec (4672 seconds)

Published: Thu Mar 21 2024