First look at Blazor Authentication and Authorization in .NET 8

and that should make us live everybody so welcome to the dev talk show in December December 5th of 2023 I'm here with Rich Ross how are you doing Rich doing well Chris I think uh feeling better I think we're uh we're all kind of in that recovery mode uh having caught something with the family getting together over the holidays oh yeah so it's why we've taken some time away to kind of get ourselves right and uh and it's been busy I think people want to get stuff done before the end of the year so yeah it's been a busy couple of weeks that's true and then at the same time I definitely was down last week to where um I could not talk for long stretches without really getting into this huge coughing fit and still kind of recovering from that a little bit um so kind of makes it hard to do what we're doing yeah kind of makes it hard to talk to everybody so welcome everyone thank you for joining us hopefully you are having a great Tuesday I almost said it was Monday that's terrible that I was even going back a day um we in some earlier shows we took a look at uh at the Blazer identity uh platform and I think we might have been in rc2 I think and there were some known bugs at the time so we struggled a little bit to um to kind of even I think we actually did struggle through it and and got uh a login page working but what we want to do now is is we eventually want to add authentication and authorization to the dev talk show website and allow ourselves to log in and maybe have some administrative features that we really haven't really dreamed up yet but part of this part of the purpose of that site is to to let us have a place to use these Technologies too it's not it doesn't necessarily have to be perfect I suppose um but we uh there is there are some really interesting things in my opinion about Blazer authentication and authorization beginning in net 8 we'll I think we're going to recap those and then we are going to take a look at what it's like to using the template set it up what's the code you get dive into that code a little bit but there's no doubt that today is not going to be a tutorial from beginning to end there's there's too much to look at and explore so um I think in a future show we will be closer to hey everyone here's here's a complete begin to end pattern of how you might do this because it turns out there's a lot of things you can do but there's some special things you have to know about Blazer yeah uh the idea of being in a Blazer component instead of of if you're in razor Pages or MVC the whole page is kind of delivered that's kind of your deliver Y and so traditionally in ASP net core we've had like HTTP contexts that you could look at and you kind of have that but also Imagine now instead of writing a controller with a view and the view yes you might have partial views and you might have some nested stuff but in the end there's a view and that view is the page and you're going to you do your HTTP context stuff in there or in Razer Pages you're going to do it in the Razer page in Blazer your your page is a component itself everything's a component yeah so it changes the uh the dynamic a little bit because in net7 we even explored this ourselves in Net 7 when you add identity to a Blazer project you don't get routed Blazer components you get razor pages okay it gets added to your project as a set of Razor pages and then basically what happens is you're kind of moving back and forth between Both Worlds if you choose to do it that way um and what I mean by that is is that asp.net core is far more flexible than the templates really show us if I want to have an MVC app and I want to have Blazer components in it that works if I want to have a razor Pages app and I want to have Blazer components in the razor pages that works if I want to have some controllers and some razor pages and some routed Blazer components that are like pages and then I want to have components in all three of those I could make that work I just don't know that a lot of us do except for those of you watching that are saying but I at work we kind of did that stuff because we've been on the journey from the beginning that I could see sure if you said like hey we were on the journey back in ASP net NBC uh NET Framework days so when we moved to core we we were able to move our code over relatively easy it wasn't just it wasn't just recompile it was like okay controllers are slightly different hold on we can copy this code we can copy this code then razor Pages comes out and maybe you really like it and so you say okay well we'll do a couple razor Pages then Blazer comes so I can see how like in an Enterprise you might have you know the the leg I don't want to call it Legacy it's the working code is what it is it working code yeah I mean you're assembling what you need from the parts you're that make sense at the time right so you've got stuff that hey that code just works we're just going to bring that along but I want to take advantage of this new thing here so yeah it's yeah it almost becomes you know it's it's not the term I can't get out of my head is that you know the Frankenstein monster right you assemble all these pieces and it's really not that bad right you don't want to say that because it's yeah it's like you said it's good code but it's working code and so you run into this more at work than you do at home mainly because at home we have the luxury of just file new project maybe our project's small enough that we just move stuff over and if but if you're small enough in what you're doing yeah the flip side is that you just don't move and so that's that's a show we definitely want to do in the future of like hey I'm still on web forms I'm stuck what do I do and it happens this is real there's more people in that space than than anyone really knows even though we roll our eyes and we go oh my gosh there are more projects in that space than I think anybody realizes yeah and that's why I still have support so yeah yeah right so let me see if I can get our overlay up here and move us over and uh then I have to present my screen [Music] so that's going so hopefully everybody if you were in the US hopefully you had a great Thanksgiving holiday and uh even if you're not then it's winter where we are in the Northern Hemisphere and boy wouldn't it be cool if someone in the southern hemisphere was watching that would just be cool in general and uh summer over there right so yeah I have Visual Studio 2022 open and what I want to do is very quickly uh you do not have to use visual stud studio for this by the way um for anybody watching that isn't super familiar with uh maybe you're not familiar with Visual Studio maybe you just um like using Linux you're on your Mac you just like VSS code we do have I like doing netlist sdks to see what I've got and let me make this bigger so that everyone can see it I've got a lot of sdks on this machine some of which I probably need to remove some of these older ones we always talk about how one of these days we'll use the net uninstall tool but what I do have is 80100 which I believe is still the latest I don't think there's been any kind of security patch um so 80100 is here which means you're if if you've got that far you could even sayn net new uh list and we've got all kinds of different projects we can start with in here um some of these I've added myself I don't believe you know these are not in the uh the these are not these don't come with the SDK but they were added because I um I installed these templates from the dend website and then I think the other day we were doing beun right so we installed yeah this template so that's great that this is extensible but the one I want is right here Blazer web app so I could I could say let's make a new directory the easiest way to do this is make a new directory and today I think it's it's just going to be it's not going to have it's not going to have a I don't plan on keeping this right so we're just going to call it Blazer identity demo I those are famous last words I try to use things like Blazer identity demo Blazer identity test so that later when I'm looking in my massive Source folder I feel safe to delete it and then you know what actually happens I worry that I really need this so I don't know how to get out of that yeah I mean yeah you almost need to include need this in the name so if I say net new blazer help what I'm going to get is these options very much mirror what you see in Visual Studio yeah um you could pick your framework if you want if you don't you're going to start with with net 8 because that's the latest installed on this machine um that's the general reason why that happens um what we get in Blazer now is we get the choice between whether we want authentication individual authentication which or individual accounts or no don't put authentication into the app that you can always add it later but if you do individual what you get kind of in my opinion is you sort of get a um you get a working demonstration but it is kind of a demonstration of how you can do this with components it does look like code that you can lift so okay when you are in uh you could if you have SQL Server installed it's going to use local DB in fact I think it does that even if you don't have SQL Server installed on Windows and in visual studio um the default here that's kind of interesting is the default is false to use local DB when you say net new instead they use SQL life okay I think the reason for this is because more people using net new you in fact it's the only way if you are on a Mac or Linux so therefore it is more likely it's actually not that it's more likely plenty of people on Windows do net new right but if you if your only option is net new because you're Mac or Linux you can't use SQL Server easily or more accurately you can't use local DB like it's just not there it's just not ready to go like it is in visual studio so therefore filebase SQL light it's G to work it's the path of lease resistance yeah I mean yeah yeah it's a common denominator across the wall right yeah yeah so even here on Windows it's going to be local DB um sorry I said that wrong it's going to be cql light when using this from uh the command line um not that you can't use SQL Server because we have it in a container now you could use it however you want um so you know you can say net new blazer and then you could say they're saying that the default is that they don't add all of the uh all of the um what you're going to see is all the different components and so you say off I could also say Au and then I could say individual and perhaps I would leave the SQL light stuff just as it is and then I would decide whether or not I want the sample Pages they they in the in the net command line that default is false um so I could run it from here and that would be a way to get started and I think in a future episode we'll do this all from Linux yeah just so we can see that but today I'm going to I'm going to start in Visual Studio okay and the template that we want is Blazer web app I know there's a lot of other templates but we want blazer web app which is the modern Blazer template that supports serers side rendering but it also supports interactivity and that interactivity is either with what we what we would call Blazer server or Blazer web assembly so um Blazer app one is probably okay I don't necessarily want to put it there I don't know if I already have a Blazer app one I guess we're about to find out no probably yell at me if I do no didn't yell at me okay and then on this screen here we have some choices since we're interested in net 8 we're going to stay there authentication type I'm going to change to individual so let's do that and now um I'm going to go ahead and include the sample pages and we will say interactivity is uh let's say it's Global I'm trying to decide here what we should put for render mode um I mean I suppose we could do auto and then we would see it all is is that going to make it too complex to understand what's going on if we do that well I think I think the first pass through what it'll show us is everything okay and then I do kind of want to back out because what I think is interesting is setting these options where you get very little and to just look at that difference was actually kind of interesting to me I thought it was a little Illuminating so yeah okay so it's going to create and then you say you get a solution Explorer and here is what the world looks like if you say you want Auto interactive auto mode which means you're this is this is what we used to call what was called for a little while it was called Blazer United but it's the it was the code I don't want to call code name but it was what they were trying to get across the idea that your um components that you want to be able to have Blazer choose the render mode on the Fly they have to be in this client project that's the first thing so it's not that you can't have serveron components it's not that you can't H and Blazer server only components and it's not that you can't have components that are serers side rendered only and they can live up in Ser in the other project somebody came the door oh no are you gonna be good my dog says well I got to go see who it is I think he still has to see who it is no worries he'll figured out now nobody actually rang the doorbell but oh they said he can hear the little motion alarm okay and so he's like I gotta go see I gotta go see and my door was closed so now so now he's on his way so okay so let's see what happens let's run this real quick this might feel a little bit like like a getting started with blazer thing but but we're going to move into identity as quickly as we can so if you run this where what did we do we selected individual accounts we want the sample pages and we wanted interactive Auto kind of like we're saying we want it all uh Pages up and that's interesting um the browser chose like a funny profile and I think we've looked at this several times before this hello world yeah where uh the counter is not an authenticated page so I can use it and the weather is not an authenticated page so I can use it but this page off required you have to be authorized to use it okay so when you click on it it redirects you we even saw it happen redirects you to login um if I go back to weather and we look up here we've got a weather we've got our weather URL when I switch to auth required it's trying to go to a component called off but it doesn't instead you get redirected gotcha okay compon doing that for us yeah go ahead yeah and spot on so it's components here you know this is similar Behavior to when we had authentication in MVC right you would have a a control method that would get a decoration around it say you need to be authenticated and if you ever hit that you got to go to the off page first if you didn't have a a token or whatever it was it was looking for right and and what's interesting to me is that it turns out that ASP net identity and I'm pretty sure about this even still inet 8 because like I said this is going to be something we build through um has some defaults already in place so that if so that if you if you name if you route uh pages that are accountlogin or account slash log off or log out I can't remember which one it is then you don't have to configure anything whenever the code says I need to log out now it just automatically routes there but what a lot of people may or may not know is that you can configure all of that you could say I don't want it to be SL account login want it to be slash like Eed it Joe's well fine if that's what you really want you can you can configure that in your program CS or wherever you want to it's the options pattern that we use all throughout program CS um and if you've done Blazer before in net sub and you might look at this and say I've seen this before I've already done this this is no big deal in fact uh in order for me to start to customize the pages what I have to do is I have to come over here and I have to scaffold those pages and that's where I go no that was net7 in a Blazer app in net7 identity was still done by razor Pages which was this which is one of the server side exclusive server side Frameworks it's there's no Blazer or anything so your identity was being handled 100% server side here instead identity is living and this is because we chose interactive Auto I want to be clear um identity is living here it's living in the server app and now that makes um the server project I shouldn't have said app it's living in what we kind of know of as the server project under components under account and then here are some components but then here are some other components well I'm sorry I take it back here are some support C files and we're going to look through some of those today today and then we're going to have to look through some of those another time okay here are some shared components that are used in the pages you actually end up getting a lot of code kind of dumped on you and this is your code frankly like I mean we could say well Microsoft did all this sure but who owns it now right it's yours now so login. Riser is what we got moved to we got switched to and this will look familiar it's saying use a local account to log in here's the input and form fields for the email the password and whether you want to be remembered and then uh there's a link to head maybe I don't remember my password okay well I've got a routable page for you ready to go we can head over there if that's what you need um and if you haven't registered in our SQL Server our local DB or our sqlite database then we have a way to get over to registration and finally because this happens to me a lot I don't know if this happens to you a lot rich is I sign up for something or and because and I think this is partially because it's the first Contact the email never gets to me yeah this happens to me a lot and I think there are some junk filters in all the major web email providers these days that are saying hold on you don't get email from this uh group ever right and they're asking you to click a link I don't know sounds funny yeah so then I often have to come back and say resend email and I think what happens on the second email is they're like well okay may they might even be aware of the resent of this problem so like well okay we'll let it through this time and if they call it junk then we're really going to be on top of it so the other thing that you don't see here and and actually I should probably run the app so that we can compare is um we're going to see this code but we're but it's not going to be like sitting here in this this page when I go to login I think we could kind of if you if we all squinted we could see this this uh this left side of the page right but they use another service to log in with external authentication like where's this stuff and I'm going to go back to the code now so we can see yeah that that isn't here now we're in the code block but there is something that is here this external login picker ah okay so a component right component yeah so use another service to log in we saw that that's right here but you are given but we have an external login picker and here's what's nice if you're if that concerns you because you say oh great how am I going to customize the external login picker well you can it's because in that shared folder that I talked about earlier here's where we're going to find those components that are they're doing a little bit of extra work but they're not the routable like login is routable lockout of routable all of these things up here these are all routable all the Pages for you to confirm your email to confirm your email changed logging in from an external Source everything all of this stuff these are routed pages and then we even have an we have even more in the manage section because now I'm a user and I want to manage my accounts maybe I want to link new external accounts maybe I want to change some of my personal data I want to change my password I want to set up two Factor authentication we have samples for all of this now m M um so there is a lot to dig through this is not yeah an hour no and well two things there doing authentication it's not there's a lot of things to think about when you're saying Hey I want someone to sign into my site right yeah yeah and some of that you have to control if you're going to roll you know this individual uh identity um you've got to have take some responsibility for that if you start using external identity providers like you know Microsoft account Google account whatever it is then some of those things won't be needed because changing your password is over there changing your email is over there right yeah it's but we don't know so when you say hey we want to include individual identity okay here's right here's everything you might need and then you can back off from that right other thing to if you were to go back to that control the external um I haven't even opened it yet oh okay when you that was kind of where I was going so yeah it's kind of I was wondering if you go back to the original page if you just hit the F12 will you get there right you should be able to oh I see what you're saying you're talking about we're here in the code yeah yeah yeah yeah so let's uh just because you're going through it's in in it's in this place in the share like I won't remember that but you see the control you can always hit F12 and get there I agree with you so you figure that login it would be easy for uh I would like to think if you have a little familiarity with blazer that you can at least kind of stum we can I mean this is what I did I stumbled my way to Pages account Pages login okay let's start looking at the code and then yes when I get to external login picker and I'm just going to go ahead and F12 it then here I am in exteral linp picker. raiser I don't know just in case people don't know this is one of my favorite buttons in the IDE this one right here sync with active document because then when I click it it shows me oh I see it's down here yep so it's one of my that's a nice new recent Edition yeah I mean it's been yeah it's been there a while I've used it a long time it's but the point is is I don't know how long a while so in any case yeah in any case the other thing about opening this tab is Visual Studio has opened it on the right not on the left right it calls this a preview window okay so if I continue to start like let's say I go ahead and pick application user which happens to be code in our app that was generated for us oh wait what happened to external login picker because this is just it's previewing along if you go back many moons in Visual Studio it would have open tab after tab after Tab and after you start going down an F12 Rabbit Hole you'll look up and you'll go ah so now it's a little bit of like well let me open it here and I'm going to use the back button like whoever uses the back button inv visual Visual Studio but that takes me back to external login picker if I click on this thing here this little thing it's there it's it's it looks like it looks like it's it's trying to make you feel like it's opening a screen keep tab open is what it's called then fine now you've been promoted so this message might look familiar there are no external authentication Services configured H that's interesting like how does it know right how does it know because here's the rest of that form and so what they're saying is is that if we if we configure an external login Source it's going to detect that and it's going to say oh okay well you actually want to show each of the providers then right which I think like well that's kind of cool and how does it figure that stuff out well we look at the code um one of the things that you might have started noticing on these pages is these Pages have more these aren't the only two managers but they have these managers injected in them the signin manager the identity redirect manager so um these things are around to help us since we're components we inject this into the component and now we're starting to get functionality that we only got at the page level uh back in razor Pages or MVC see we can sign users in and out based on their identity we can redirect them somewhere there's a couple others too there's a navigation one that lets us move to a different identity uh component so now the interesting thing is well what if I F12 on signin manager and here's where I end up in uh here's where I I I am not in code for my project anymore now I'm in ASP net core identity 80 I'm getting a hint of that up here um it's the kind of thing where if you didn't know or maybe you hadn't experienced this enough you wouldn't just look at this and recognize it and say like oh this isn't my code anymore now I'm in the net source and so that's kind I kind of wanted to show you that here are the signs how you know you're in the D net source for one thing I'm in ASP net core identity as a namespace well that's not that's not my project yeah um the uh the link that you're going to is they've basically downloaded The Source on the Fly and thrown it in a temp space in your appd Source server section where that's where they're throwing this Source these are hints that let you know like hey you're not in Kansas anymore this is now now you're in ASP net core the signin manager um it has access to the HTTP context and here is where it can start to figure things out in fact it it it tells you things uh if I if I if you look through this long enough you will find the code that basically says okay here's how they know how many providers you've configured because they they know that we haven't configured any so um let's see I think you can come here and again signin manager get external authentication schemes so this is uh again this is something inet this is not our code net core identity but they have an extension method that said actually is this an extension method no this is not an extension method um get Au external authentication schemes and they they basically look through and they say Are any are there any external schemes no well then that's how the external login picker knows what to display so cool this is an interesting case of when you're working on this this none of this kind of feels like your code because this was generated for us mhm but this is your code and you actually might find yourself heading out to the aspnet source code to know what happens next um that's what I did and yeah I mean that's that that compiled code that you're basically have as part of your project that's that's common being able to dive into that right dive into to the point that you can see it but not necessarily change it although you potentially could extend it right if you have a use case where that is or because it's all open source you could go that route and say hey this really should be a change or feature and go down that path but for the most part you're just seeing how it runs and that can help you in understanding what do I got to do in my code to work better with that yeah so let's say you aren't in Visual Studio okay we do have source. dot.net which is only mildly mildly entertaining to say and I can come to I can come here and I can type signin manager I can actually type much deeper than that I could put the method name in but if I say signin manager then here is the sign-in manager and I can click on it and what's nice is that uh or or it's also telling me that hey do you want the file do you want the class do you want a property called signin manager that's being used somewhere else so now I once again we're talking about I can look through the code again same place that we were before um let's see I want to find something to click on here that's kind of interesting like signin manager uses HTTP context and you might have noticed that my pointer changed to a finger when I click on that now I'm in HTTP so I'm able to browse the aspet source code nice make this bigger I didn't real I forgot that it wasn't bigger so I'm back at signin manager and I say HTTP context and now I'm in HTTP context and I can browse this source code that's pretty cool yeah the other thing that you could do is you could just go get the source code which is this is it this is aspet core I I checked it out from GitHub write at 80 that tag that that is supposed to be what was released now when you work with the aspet source code there's two ways to work with it one is you can just get it all and you can open the solution at the root you got you got to wait if your computer's a little slow on iO or maybe doesn't have the fastest processor it's going to take a little while but in order to work on this code we've even done a show on this in the past in order to work on this code there's more set up to do but if you just want to look at it then you can do that and but now here's the problem though where is it so for me the answer is there's a couple ways to figure out where it is I actually like this way to figure out where it is is to say okay well where is identity exactly oh I see identity is in Source identity core then it's under identity CS PR okay so maybe I can go find it now um and I go watch let's hope that this works out for me so I say it was Source then identity then core here's the project and so now here I am in the project and what was I looking for specifically I'm looking for signin manager which is right here nice so you can find these things um and I think the reason why we're opening up with this is to say trying to help give everybody watching the tools and also explain how is it that we're learning what really happens it's not that there isn't documentation because there is um you know I can come and say I can say Blazer identity and the first place you get to is right in the docs ASP net core Blazer authentication and authorization and I think what you're going to see is we're essentially going through this except we're just not doing it we're just not doing it by reading it but we're starting off at the top by saying hey you know there's different ways to do this they talk about how there's client and server side your security scenarios differ so you know there's a lot to to go through and um that's kind of what we're working through except that for me because I can't help it I'm saying okay so if I go all the way back to the code and the code says let's ask the sign-in manager for external authentication schemes the first thing that goes through my head is well how does it know and it's not so much because I want to change the code or own the code it's because I want to know what is it that I do to affect that um and why is that important because once I take the step and you know maybe maybe this isn't totally true oh did I actually stop the project I did okay so I got to fire it up again once I take the step of starting to eliminate all the stuff I don't need what happens when either a I need it or B I say hold on I I want to work through this page hold on I just want to see the login page here oh it's thinking why is it thinking oh I I know why it's thinking because I have a break point and actually I clicked that a couple times so it's sitting here going okay once I say to myself now I want this to be my page and I start deleting stuff I kind of have to know what the right way is for this to to work correctly um I'm not going to try and tell everybody here that that you have to dive in as far as we are maybe it'll be comforting just see okay well I saw what they did I don't really need to dive in that that's perfectly fine I don't have a problem with that sure but but that's kind of the point is that we are we're trying to dive in so that you can see uh what's really going on so let's see yeah cuz like any wizard type functionality right because that's kind of what that is right it's saying you want you want identity included in your project here I'll give you all this stuff you kind of need to know what what's going on under the covers right because I'm sure you know you you're going to want to get rid of the things you're not using as part of your project if you're using an external identity provider so knowing all of this is kind of important right I'm trying to see if I can get Azure data Studio running I do have it running so here it is and the interesting thing though is I think we've done this a couple times before because I have definitely not done any and framework migrations yet and yet I have these uh I'm going to dump these databases I actually don't need them uh do I mind taking a survey well maybe not right now let's complete that on air that' be fun oh do I want to restart a DAT Studio maybe not right now okay so um because the next step is is that what if we go ahead and and try to log in if I try to register a new user then and again I don't actually need that right now then what happens is it says well let's register a new account I don't think this is going to work because I believe the problem is going to be um let's see let's say pdps problem is going to be it should it should not work here it should say uh I'm TR remember what the requirements are but we're about to find out yep yep okay exactly so here's what happens this is I actually wanted I wanted this to happen so yep by default uh like you know from the template you are set up everything's working except that it says hold on a second they used inorder order to to store the authentication uh information they're using EF core and they're saying but you didn't apply the first migration to create your database so it blew up basically what they do is they're like they they go to see if they can open the database they expect when they create your app they use a GD to differentiate it just in case this isn't the first time you've called it Blazer app one or what if you what if I checked this in I committed this and then you check it out and you're like but I have blaz app one to and it would all blow up right so the idea is unique database you can change this this is not set in stone they uh they they recognize that nobody ever created the schema for the default identity and they're like if you want you can use package manager console to update the database and apply the migration I mean you can update the database from package manager you could do it using the netf tool which we have done before or they're so helpful with will apply it for you so you just click the button and now they're like give it another I love it give it another try right so let's go take a look at what's happened now that I've applied that migration and sure enough I have an identity database now here's the thing again if you're watching all this and you're saying but I don't want to use that database this is not set in stone and that's why it's so important to be able to take apart these components and do what you want so let's back up to just uh just the homepage and then we'll go to register again and and I'll go ahead and use our example and uh see if I can get a password that it likes which I think I think it's it has to have a number an uppercase letter a lowercase letter and a symbol I'm pretty sure that's what they want so now that's registered now here's the second thing you have to do in your code what you have to do there's documentation here that says here's how you you configure an email sender if you want to do email confirmation another thing that you can turn off but since you're probably exploring you can click right here to confirm your account so I say we need to go find this component account register confirmation let's go find that in our code because remember we own this code now register confirmation and and what happens we have if email confirmation link is not null then they say um what you can do is is you can go straight to this email confirmation link which I think where is this code here it is here's the code you really want so I want to show this up here first the first thing you're going to do is you're going to take this out very likely you're gonna have to replace it with your own right message but the second thing you have to do is you have to go to the code you do have to come down here and you now have to stop using the identity noop email sender which is a component that uh that they give you they give us this identity U not I kept saying component I'm sorry if it's a class that they give you and they basically say okay what you need to do and they're trying to tell you you need to go remove this else if so that this code doesn't work anymore after you use a real implementation I imagine you could also throw this code out sure like just delete it from your app but um oh look I made the same mistake myself so so the what happens is you uh oh i' I've lost it let me go back to register confirmation is you will have to come to the register confirmation page component and you will will have to get rid of this and you'll have to basically have your own implementation um which you can do what you what you do is let me see I'm pretty sure that if I search for identity noop email sender we're going to see it here it is right here okay so we we've already found in program CS this is what I wanted to show everybody on line 38 in program CS there is an I email sender interface that you implement and when you implement it you're going to give a real implementation that's not a noop that's that's what we're being asked to do so for today it's fine though so so today I'm going to go ahead and click to confirm the account it says oh you've confirmed so now let me go back to auth required and it's still which makes sense it's like well you you're still not logged in so okay fine we're finally going to get there after all this and uh and why don't you remember me and oh I see I got it wrong anyway okay you are authenticated yay and the only thing the auth required page does is tell us who we are that's it okay so the homepage doesn't have anything the counter page doesn't have anything the weather page doesn't have anything I kind of want to get to a place to where when you're logged in we see that in say the upper right hand corner that's where I'd like to get to so that means that every page is even though you're allowed to use what's going to happen is you're going to see that every page will actually be an authorized page in some respect it's just that what we're going to say is is if you're not authorized you can see all of it and and if you are then oh you can also see the upper right hand corner that's what really is going to happen in an authenticated uh component but right now they don't do that they basically say you've got the homepage the counter page but off is required here I'm sorry off oh that's interesting that it did I accidentally log out I'm not sure how I would have because it uh even though I said remember me it didn't remember me I don't I don't really want to check sa this password okay I think I can come yeah I'm authenticated it might oh you know what I did is I think I might have clicked log out when I was running through here I might have done that oh all right I might have done that I might have been like ha somebody can tell this in the comments this is now the manage your account page on this particular app and these are all those other components we were looking at earlier nice manage your email manage your password manage two Factor manage personal data so there's a lot of code that you've been handed um you've also been handed this database schema and uh and and it should already have me in here now now if I go ahead and say select top 100 there here it is there we go password hash is there security is there it's all there so you know oh phone number I didn't put in a phone number so I suppose if I head back and I say personal data or no profile oh here we go phone number all right two and we will save that profile has been updated now I'm kind of I just want to see it I'll run this again and there we go so you have like like you have the start of of of um of what you can use you have a scheme but it doesn't mean you have to stick with it we can go into program Cs and we can start pulling stuff out we can say you know uh I don't want to use SQL server or I um let's see where is it for identity core in I I don't even want the nty framework stores maybe I want something else so there there's a lot here after I add identity core we can add roles that we want to be authenticated different endpoint there's all kinds of extension methods here I can add a custom password validator uh you know there's there's a lot or other properties on that profile the settings that you're keeping right yeah there's a lot that we certainly will have to cover in in future shows but by default you get an enity framework store signin manager and then the default token providers which just means that they have a default plan in place for how they're going to handle access tokens refresh tokens whatever you use to generate password emails you know all those different things um so then the trick becomes do you dive into this code to figure out what it's doing because maybe I want to change this you know maybe I don't want the default email provider I don't want the default PR provider so you know there's definitely some work to do there um we also just to to see the difference let's see what's in the client so the counter component the off component is a client component so this is what's interesting all of the stuff we've been doing so far has been on the server level and that actually makes sense because you can't authenticate anybody with a client component um okay there there has to be a call back to a server because when you think about it just clo running on the client like how how could you possibly how could I possibly validate your password unless I do something really dangerous like send it down in the web assembly or something so even though the off required page the page that requires off is a component that will run in web assembly it still requires server components to get logged in so that's kind of a lesson for any even if you embark on making massive changes to this code you've been given or write some of your own there's no scenario I can think of and I'd love to hear what people think where that can't be server side I'm G to throw that steak in the ground with 15 minutes to go now we're just gonna live with that I think so and and I have to do some exploring on this but the one thought that comes into mind when you say that is a device authentication so something like um Windows off which uses you know uh either a pin or a a thumbprint reader or something on the machine that's stored on the TPM chip to say you are who you say you are and I pretty sure they were hooks for applications to be able to take advantage of that authentication hook to get the person who signed into the machine I could be wrong on that I to kind of research that a little bit but that's one of the I guess an edge case in this case where you've got the thing on the client can we take advantage of that the other thing that I was just thinking of is um so the components that you've been given the sample setup that you've been given which is just as important as anything you've been given a sample setup where your application is going to have its own login accounts its own emails its own passwords and also maybe some external off in order to manage all of that here that's got to end up somewhere some data store it doesn't have to be SQL server but let's say it is um so at that point there has to be a call to a server side something that goes and checks your database you're not going to hand the keys to that to client code but now let's say you aren't using any uh authentication like that what if you want to use like an Azure B to C an off zero yeah maybe in that case you could write a client component maybe it might be interesting to try a client component that is able to communicate what I don't know about what I'm concerned about is secrets that that client component might have to have in order but I don't know I don't know we that would be an interesting implementation um yeah and it might be something that would be worthwhile doing because that way it helps us once again not feel trapped by what comes in the box right um as a last thing to do because again I we mostly just explored today and I hope that people watching get a sense of like okay I'm not really I'm less afraid maybe I'm Not Afraid at all now because it looks like I can navigate around I can see what the code does but um just demystify some of what's happening I tried a different tactic I created a new blazer web app and this time it'll be app two okay and this time I said no sample pages and but I do want authentication and I want no interactivity because I was curious how does the template handle this I just wanted to know so when you click create on this one I I just I thought this was interesting um I'm first I'm just going to run it we're not even going to look at code not yet and you get you get this we haven't done a lot of time we haven't spent a lot of time making templates with no sample pages right but when you do you get that and that's it so now let's go take a look at what what code were we given well we are still given an account section we're still given a Pages section it only has one component home it has the error component which is used by the framework um and here it shared section yeah yeah the shared section uh is actually it's all in account so we still have all the account stuff we still have all of this this is all still here and it's ready to be worked through but so then you say okay well hold on none of the routes are set up there isn't a a page with the off um with a with an authorized view that's redirecting so I think we can see 850 we should be able to add that so let's go take a look at what they did in o. Riser so in o. raiser in the com the the first project that we made today it's actually a very simple page it's simply saying it requires you to be authorized to get in here no matter what you're going to see the oth attribute and uh and if you can actually get into this page then you're going to see you are authenticated and then uh they they go and they ask they basically say so what's what's this user identity's name so we can just show it to them so easy enough let's take this component and bring it over and we will add a razor component very quickly and we'll call it the same exact thing and we will use the same exact code but we need a route so just so that it's not magical to everybody let's go look at um route Razer no I'm sorry that wasn't what I really wanted oh I'm in The Client app that's why I want it's not app actually no I guess it does have to be in the client side doesn't it I want the nav menu I need to I need to Route maybe I don't have to Route it because there's no menu yeah actually I don't have to Route it you know what this is this is too too long doing using the sample project the routes this whole nav menu was what we used so that we could click well we don't we don't have that ability right uh but it is routed it is routed because I have the page directive there yes exactly I spent I spent too much time using the other one so let's see if I'm wrong now we're gonna find out so if I just do off okay I got redirected yeah but that's what you expect right that's what you expect um you get redirected to a very plain looking page because once again we we have no sample Pages we have no CSS you might actually like this as a starting point um when you're saying okay it's we're going to sit down we're going to do our app now using this as your starting point code might be less distracting um even though it's just visual the code over here hasn't changed all that much except that uh it's still still has bootstrap classes in it you may or may not like that you may still want to strip all those out and and I get that um I think it would have been interesting perhaps if um if if there was a way to have the template and strip out the styling as well so all the functionality still works but it's really Bare Bones and yeah the reason for that is just either it's your starting point or it just takes all the distraction out of the way and you can focus on what the code's doing yep you know people saying should the button be blue yeah yeah but you can see this code looks the same this is still the same login page it's still asking if you've configured an external login yep have you have you not um and so that all still works the same way so we didn't get too far into changing this code just to give people a preview of what I think we want to do we definitely want to configure an external off provider um I personally at this point don't see a need for database based logins so we could work on stripping that out that doesn't mean that you watching don't want that but what it might do is at least say like oh I'm not stuck with this you know I can make changes that's the important the important thing to consider or keep in mind yeah and then there's a couple other things that I'd like to do where we didn't get to look at these very much at all the sign-in manager the redirect manager is that these components are what you need to inject into your pages so that you can start asking questions about who is logged in um or control the signin for example um when somebody logs in you want to you might want to control that sign in you might want to exam if you're using a uh a product a claims based product maybe you want to examine the claims and then decide what roles they go in what what are their permissions what is the policy for that particular user that's activated and then you could have policy based Access Control throughout your app instead of relying so directly on roles and claims there are a lot of different ways to do things role-based security claims-based authentic authorization policy based authorization where you kind of you kind of decide for yourself based on information that you have about the user so one thing that I think we'll do next time is we can actually throw all this away and start writing by hand the very simplest of login uh capability that's a total hack job like it's basically saying well if the user is Rich and the password is Ross then it must be Rich Ross Like You would never ship this code right but at least it lets you say okay I've Stripped Away all the rest now I can see how authentication works okay so I think that's something we can we can do and we can do it in Blazer yeah I think that'll be fun yeah so hopefully let's see I I got distracted for a little bit and I missed a great question here scaffolding so we got a question what about scaffolding and razor files that's a great question yep so this tells me that this that that user and I'm just going to guess here that you've used a Blazer in net7 and then you you you basically said I want identity and all the identity showed up in razor pages and then what happened in that case was you would look around saying like well where's the actual page where's the actual page and there was UI in visual studio and and elsewhere where you would click and scaffold the page you would say hey I need the login page now I'm going to change it and it would come up and now you could change it that's not what the template that was actually really the whole point of what we did today right is that's not what happened in Blazer instead when you say when you pick individual accounts this code here is part of your template now this is essentially all the scaffolding from here's the log this is the login page this is the register page this is the register confirmation page here's uh uh somebody's locked out they're an invalid user this stuff was all stuff that you would scaffold one by one in the old model in the net 7 model because Blazer didn't have that built in these were razor pages that you were scaffolding now I don't want to say that it's built in like it's really hard for me to to to to decide how I want to how I want to kind of present it um it's your code but you know what it was your code before even in the scaffolding system because once you scaffolded it now it's in your project and now you got to work with it yeah I mean it's still in there it's just done in a more Blazer friendly way or Blazer componentized way right now instead of having to use a second asp framework the razor Pages framework to handle all your identity it's all Blazer now a lot of support code um that that yes we're going to we're going to go through the support code shared components that help you some of them you may be able to pick up and use with not a whole lot of changes but some of them you're going to say hey I got to match my look and feel that's really not that different all that different than it was before it's just that instead of you having to go pick the pages out to scaffold it's here you go and then go from there but you you know if you really really got good at this stuff you actually could build it all from scratch so I don't know y we'll not that I'm saying I want to do that but I do think we should explore it a little bit so in any in any case it's almost nine that is a great question I really appreciate you joining us and asking that question thank you so much because it really did it really did bring up that point um we got it working the template basically did it for us and I think next time we're going to say okay let's start seeing what we can do backing away from the templates it's going to be an interesting Journey so yeah over many shows it'll be fun yeah yeah all right well it's just about time for stand up right so that means we both got to go yeah and hopefully you all have a great day watching uh please absolutely leave us some comments don't hesitate to like And subscribe on YouTube and wherever you are watching thank you for joining us and we'll see you all next time on the dev talk show

Channel: The Dev Talk Show

Views: 1,946

Keywords:

Id: JMVjLXE-7YY

Length: 64min 57sec (3897 seconds)

Published: Wed Dec 06 2023