Burke Learns Blazor - Authentication and Login

[Music] w [Music] m [Music] all right what's up everybody back I have to share this Burke and I were both at netc this week up in beautiful sunny Redmond and then ignite and ignite too I did not make it to ignite I was all. NETCOM all week and Burke runs into me we're both grabbing a coffee or a Coke or something and he's like hey we streaming Friday and I'm like I can't even begin to think about that he's like come on let's do it and so here we are like I got it yeah actually did some work like in the last two weeks on it so I don't think you have to watch us struggle less this week I think than normal which is the normal amount of struggle is like it's it's an intense amount of struggle it is there's some struggling happening there was a lot of Blazer at dinet comp yeah yeah there was so I mean this they talked about the the new net 8 Blazer model which is pretty neat it was the first announce is Blazer United but this is the server side rendering with the magical transport the web assembly bits over websocket in the behind the scenes like yeah so it's it's the best of both like up until now with with blazer you had to choose you had to go either I'm gonna do a web assembly but I've got like a larger download right I've got to download all the binary stuff and I've got the loading thing and all that or I do server side and then server side gives you some benefits because number one it's it's really quick download it's like you just download a shell and then everything is really running on the server but you you have have some tra and you also have the benefit of your code's running on the server so it's local to the database it's really easy to you don't need apis and stuff like that right but the tradeoffs to it are like number one you're doing all the all the processing on the server so you've got your scale issues and then then um you know you you trade off some local performance because you know everything's going over the wire it's all running on the server where um so the benefit ofet 8 version is that it does both so the first load it loads on the server you know it does server side rendering and then it it has a webop connection sends all the binaries down and then when it's like got it on the client it's like I got it and it switches over so very cool I've noticed in chat what's up chat uh computus what's going on what's up om yeah hey everybody uh I did notice that like even in the JavaScript World chat if you're into JavaScript I don't know if you've seen this but things are like moving back to the server okay so I guess we're just gonna do this every so often but htx HDMX is a big deal right there's a lot of controversy about HTM X if you haven't heard of that it's essentially a small JavaScript library that does everything on the on the server essentially right they're they're encouraging you to do everything on the server so you return fragments of HTML into your page instead of having the JavaScript do all that yeah um and of course there's tons of benefits the one huge drawback that has for me though chat is that the cost of deploying static web apps is literally free right like once you move to a serers side model you need like an app service you need a uh a p right I don't think anybody says that anym but platform as service maybe but not you know it's kind of a it's kind of a balance and like if you're if you're doing depending on your past like setup it can still be pretty cheap you know like yeah but static hosting is so fast and it's it's basically free like everywhere and that's just really hard to walk away from but I did you know when we first started this I really wished we could have used Blazer server because even I could see the performance differences just like right off the bat right like it just yeah well it's a trade-off right because it's the first load the first load is what you're waiting on right yeah it's so yeah that first load from the server is like boom it's instantaneous man so so there's a good question whoops from Nathan here on will we upgrade toet 8 I'm sure we will um I was actually tempted to try and do it for today and I was like I would mess it up so bad but um but but uh the one thing is we can't take advantage of all the new net8 hosting model stuff because we're using static web apps and some of what I was talking about relies on both a client and server hosting and we we're not doing serers side hosting so we can take advantage of a lot of new features in the net 8 stuff but not all of it so um there are also some cool new things in Azure functions so and we're using Azure functions a lot so I got chat with that functions folks backstage before they did their presentation I'm excited and I don't know if you remember early on I was like we got to do this isolated model sometimes you know and it's like sometimes some of the docs are like this integrated and some are isolated and when I talk to them they're like all in on isolated like just do it that's the that's where we're going all our investments are there like you know so anyways I I'm glad that I you know went with that because that was kind of what I was reading from the docs but from talking to them personally they're like absolutely you need to be honest thank goodness because I don't want to refactor those apis man that was not fun yeah there definitely now that it's like the code runs that's part of why I wanted to get testing going I still want to do that I want to mess with the testing a bit more so that we can do some more refactoring without breaking too much but yeah all right I'm gonna present my screen well it's good to have all our friends here we got 126 people on I'm pretty pretty impressed yeah so we got uh question on Aspire you know I'm not sure how much we can directly use Aspire in this because so I don't know if you saw much about Aspire bur it's just kind of like some of it learns from what would used to be called project Thai it's great for building like microservices for stitching things together um it does a lot of like um it can pull a lot of different Services uh and like uh hosting types and and you know like you so you can wire things together really easily um and then it also gives you things like project dashboards observability open cemetry um a lot of stuff I think we are some levels down from that though you know we're we're not building at the level where we're going to be directly able to use any of that I don't think because we're kind of running under Azure functions and stuff okay yeah I don't know anything that's all over my head I honestly I was so I've been working on setting up all these sessions and like scheduling everybody I like every single session that was at netc I had at least two or three emails or chats or whatever with the speaker to get it all lined up we had over a hundred sessions I was looking teams it's just ridiculous you know David Fowler talking about perf is it's so brain is just way bigger than mine man like I'm struggling just to to understand like the simple stuff and he's just in there like that's that's nuts these people that can understand the stuff on that level I love it too when David gets like really into something and he goes deep like he gets a little pissed off about it right he's like shouldn't be this hard or I why isnet harder than this other language to do it this way or why aren't we faster you know and then he like really he's like I'm gonna solve this and he just gets in there can I share your screen yet yeah let's do it sorry what's up Simon up love from Nigeria thank you what's up jisu yeah we got aot all all the regulars here fuel snab Hey listen Fuel and jisu since you're the regulars were y'all at ignite are y'all coming out to events we want to meet y'all have you met these these folks before I've met Janis in person in Finland and I'm pretty sure correct me if I'm wrong j I'm pretty sure and because I did an like an AI this was a long time ago I did an an AI like Workshop thing at their reactor space when they first opened it um which was pretty cool and then um and and Janis was there and then fol snabel I honestly I it's just an icon I believe I'm not sure if we've met in person yeah I know travel some we'll come to you we'll come to you we got to take the show yesterday John somebody saw you ising yesterday yeah funny story I was actually yesterday morning cuz I was up I was up late with the we do the around the world 24-hour stream I was up late with that coordinating with our our hosts in China and Korea and uh Dubai and stuff and then all of a sudden I was like oh shoot I don't know if our host in the morning Maddie knows that she's supposed to be hosting I'm like I don't know if she signed her we had to sign up for him I'm like I don't know if she signed herself up or I did so anyway I'm like this this sucks and so I I got up super early went in open the studio before anyone was there and was all set up to host and then Maddie walks in I'm like you got it yeah get have more faith in Maddie yeah all right cool today so we're working on for people that don't know we're working on this site the URL list which is a site for sharing a list of links and so you can put a bunch of links in and then you can pick a URL for it and then you can share it out it does some really cool stuff like create a QR code um you can manage it and update it later um but you originally built this fiveish years ago with view Azure uh Azure storage Azure front front door like it was kind of cobbled together and like now we're rebuilding it with the newest Azure static web apps with laser that's right and actually use this at net I think you are officially a net developer really you can't pretend anymore can I get like a shirt or something you you're a very FY you will get you won't get a shirt but you'll get a bucket hat I believe as a really chat is that true do you accept me I mean we ask is this a democracy video evidence developer I I think you can put that on your LinkedIn I'll endorse you oh really okay did I know.net all right then you'll be responsible for all the terrible code I write somewhere all right hello to Nigeria it's so cool to see people from all around the world oh I know I love it that's awesome okay local conf that that works that's all right loal yeah let's so let's jump over to so what we're doing today is we're going to handle all this because this doesn't currently do anything and the desired behavior is this and then you log in okay so we're going to wire all of that up today so the first thing that we need to do is we need to make some changes to how this application runs and the reason why is because we're about to get into some very static web apps specific features and as we do that it's going to be very difficult for us to build the parts of our application that rely on these specific features those is authentication and login and so because of that we need to change the way that our app runs and incorporate What's called the static web apps CLI which is going to mock for us the environment that our application will run it in production which allows us to do things like test authentication which is that's a big deal amazing yeah it's so cool and so what we need to do let's talk about so our authentication is API like there's the server side authentic because we're host with static web apps it'll handle authentication for us we can basically turn on I forget if it's still called easy off but we we can basically click a thing and say make it authenticated right but then to test we don't have to turn anything on actually there's nothing to turn on yeah you just hit the end points and you can log in with social providers now and we'll talk about this but in the case of our app chat we actually don't care what role people are right all we want to do is authenticate them so that we can store their data along their data their lists along with their username so when they come back they have their lists right so for us it's pretty simple we don't have an admin dashboard or anything like that we could we could and it does handle roles but we don't need to do that at this moment which makes this easier yeah so if we go into so first of all the static web app CLI open up so I have the front end in the API running the CLI is this right here it's this just squa you can install it I think it's like it's from npm and it's like Azure static web apps CLI literally like that uh and so how do you clear in Powershell how do you clear the line it's not contr L I don't know honestly what does that work no it does not work it does wow chat how do I clear the line in Powershell yeah and while that while we're taking that here's I want to take this real quick question here so with net8 it feels like Microsoft wants to push blazer for everything web um what's the future progressively move to Blazer stay on MVC or Razer and so this is a really good question and I feel like um this was something where I we intentionally lined up a session on the second day called in net 8 aspet 8 and it was like um all the other ASP net stuff like all the middleware and all the performance and all the stuff but I think my take on this generally is that MVC and razor pages are kind of like the model is like kind of here it is like there's some new things they're adding in for like binding and authentication and stuff like that but the the general like hosting model is kind of like solved you know and stuff doesn't need to be change around too much so I feel like it's um if you're doing serers side rendering which a lot of web apps should be if you're like rendering HTML on the server then razor Pages or MVC like they work great yeah okay so that's that's the answer there yeah it's Escape or control a control a I haven't seen that no that just highlights it yeah okay so control backspace and Es Escape is probably the easiest yeah okay okay so blah blah blah blah blah let's funny once you said that I'm like oh yeah it's Escape like I do that all the time I just don't know my fingers do it I don't think about it you know yeah subconscious that's how good you are all right so we're gonna we're gonna change the API prefix here and the reason why is because we want to go through we want to let the uh CLI handle all of this for us we don't want the application to do that so to change this we need to go to our development settings and change this to the to the CLI which will run on on Port 4280 now you wouldn't know that unless you ran the CLI but I've done it enough times that I just know that off the top of my head so what we want to do now is we want to start the clients we're going to restart it and then we're going to go I'm not actually not going to start the CLI I'm I'm the API rather I'm going to let the CLI handle that so we're do s start and then we're going to give it the location of our front end which is 5,000 and then we're going to give it the location of the API folder in our project it will automatically start and manage the functions for us now we don't have to do that we could start the API I'm just doing it that way because that's how I do it yeah well it's nice that you can run them separately like it's a it's a it's an like a functions project and you can just run it but running this is like this kind of like an higher level right you're able to yeah exactly it's managing things so you can see here it's running at 4280 so let's visit that wow and we should get our Blazer app Okay C we're on 4280 now so if we wanted to log in here we could just do off login Twitter okay and when I do that it's going to send us to this emulated login page which is what people will actually see uh in when they go to static web apps actually so cool because this is running locally on your machine right exactly right and so we can you didn't know better you think oh this is an Azure hosted page yeah right and so here right we can choose our username want to log in here and then you can see though nothing has really changed but now if we hit this endpoint this . o slme we're going to get back this thing here okay so this is called the client principle so we can see that we're logged in now right we're logged in and it gives us this is the information we have is that the provider and the user details that's really it right and if we building a role-based authentication like a dashboard or something we could use this now one thing you are now a certified. net developer but nothing you're doing right here is net specific right it's not you've used this before on JavaScript script apps or whatever yeah it's the same it's the same run that command and it does this for you exactly so what we need to do here is we need to call this this me endpoint which will tell us whether or not we're logged in right and we need to do that every single time the application is called so we know if we're logged in so the best place to do this is probably in our main layout because this main layout is going to get hit every single time the application is loaded doesn't matter what page people go to so here um we're going to do it on initialized but I don't think we're going to do it like that but we do need a class for our user because we're going to reuse this on the server side so let's do a new user here and then we need the properties from uh and actually okay can you let's try co-piloting it in the in the user class yeah I'm just gonna create the file from here so I can get like the C dev kit help go yeah I just like saying create a a user with the following properties and it just like does it oh yeah yeah so we could uh try that let's see here know what those are um so they are user ID user roles are the user roles just going to be stored as strings or like a enum or something I I don't remember how I did it before we'll refer to that here in a second let's see what co-pilot gives us here okay I like the kind of yep so it's got getter Setters all that yeah name space but I don't I want to do the name space yeah I think it's I don't think it's Blazer app is it Blazer app I forget now it is okay is okay so that last brace on line 14 oh I can yeah thank you so user ID is definitely a string user rolls is definitely a list of strings claims it there's nothing there so I need to go back here and cheat a little bit and see how I did this so give me a second I'm gonna go while you're doing that we have a a question here we could also have given it Jason and created a class I feel like in this case co-pilot did it pretty quick that's what I've done in the past so I'll take a big pce to and the I know in Visual Studio there's pce convert Jason to C class and I've also used some websites that have some other options I I'm sure there's some pretty good VSS code uh extensions for that too or add in right yeah absolutely so when I did it before user roles was an I enumerable which I don't think this matters it doesn't matter right it doesn't really matter but yeah I might as well and when you can CLS we just completely left off because we're not using it and then the other things were string string string okay yeah however what I did was I called this client principle Po and then we have another class so we're going to proceed down this route and then we have another class called user can I interrupt you with an opinion question here yes would you manage users in an Enterprise application the same way with static web apps yeah I mean I guess here part of the answer is we're using social off to log in right yes so in the case of an Enterprise app I would use active directory authentication which is something that you have to configure in static web apps and I'm pretty sure that's not a free feature but I would point it at my active directory yeah that's more enterpris but then you're managing a user and you can at a higher level you can say this user has rights to all all of our accounting applications or whatever right and you w to you want to handle that that login from active directory but it still is fairly simple you just point into your active directory instance and and rock on cool all right so our client principle here we've got this and then our user file we want to have our client principle uh okay think that's yeah there's a lot of good once you get in off there's so many options key cloaks another thing yeah I'll I'll show you how I did this and there's probably better ways but I wanted this like um Fields because I need a Boolean that's kind of interesting there if you work okay so we need one more class and that class is if in order to serialize this Jason correctly client principle is actually the first property right it's not the top level item because it's Jason so we actually need like a wrapper here yeah I don't know if there's a better way to do this yeah I end so there's a few different apis for this I mean again this is this is another thing I would lean on last time I had to D serialize Jason I just was like co-pilot please do serialize this Jason file okay so then let's we're now ready to call this thing let's go to our main layout what we want to do is just we're just before we implement the actual login flow we're just going to check the mean endpoint which will return the client principal if the user is logged in if they are not logged in it will just return an empty client principle yeah so let's do um call the off the endpoint and endpoint and serialize result to user to client principal rapper class we [Music] got return result all right so we need to call this call the get client principal meth async method get user details on initialized is that what it [Music] is and then the results going to give us a client principal wer so then we want to say is like our user equals [Music] where's the doesn't know know about this class oh do you have oh it still doesn't know why not it's class right right you have the tab open yeah it's like the intelligence doesn't know uh oh what we doing this yeah well you're doing that uh I have to give a plug here so Howard being very awesome trying out Aspire just now if you get any crashes please let us like file an issue ping us even like bug Fowler on Twitter whatever it is but like let us know because that's the only way we get this stuff fixed like you may have some different thing set up on your machine some different build or whatever that we don't is this technology using any cookies it does set a cook is it an off yes it is yes it is um this it's great question yeah there's funny story I got to share by the way while you're doing this the people with the Aspire demos were working on the Aspire demos then I was talking to Scott Hunter and he was telling me the night before his demo nothing was working and he was like what's wrong all these n get feeds are failing he talked to the devs and they're like everything's working for us and then they troubleshoot it and basically the devs had cashed n get packages on their machines from when the feeds were working like a week earlier and so all the build still worked but when Hunter tried to go out and run it like the Nate package was like no longer available because it switched over from internal to public feeds or whatever the hardest thing is in computer science computer thing yes exactly so he's like clear your new get cash and and do a build and tell me how well it's working they're like oh all right so here's your cookie there you go it's literally called Static web off cookie all right so what is this oh uh we need to inject but I don't want it to be called not called that in other places what's it called in like yeah it's just that so copilot's not quite right it's not quite right Chase here so here we want to do I think it just be HTTP right is that what your client's called does not contain a definition forg Jason async well what does it contain a definition for is it it's a is it h she be client or factory is get async no it's get Jason async right there's get and D sterilized Jason async oh it is um yeah this is weird though that you're not getting the intellisense on that get from Jason async from from seems redundant there really it's like get yeah okay there we go now result that the result is a client principal rapper which has a client principal oh no wait a minute what is this result going to be Cent principal rapper yeah so now you got to get the result done do did you expose the I did right let's see oh I'm missing a very important AR I gets me every time there we go it's inaccessible I did it again come on man okay I changed that I fixed that Sal possibly could be null so let's check it is right about that so um you could do question dot or oh yeah you could yeah easy easy question on the cookie thing so then because it's using cookies if you open the tab if you open a second browser tab you're going to be logged in there right which is kind of a nice feature you can open the app in a few tabs I'm sorry say it again because it's using a cookie you can open it in more than one tab correct yeah yes correct and if you come back in a different tab different browser session right it still knows it doesn't validate after a while though right and so at some point it will just return null because your login no longer valid you'll have to log in again yeah it's true for every site yeah all right we don't want this we just want to set wait a minute we don't want to do any of this here do we we do user client principal we just don't want to actually return anything there's no point in this right here he simple right all right you need to say do I need to do like this or something that's just barking at me yeah no well no it's um if you do VAR it's like what I would do instead is that result. client principle you can do result question dot the line below line 23 there we go and we don't actually want to return anything I think it's just like this right we don't want so if it's a you can do public async void no task okay and then here what's wrong with you cannot AIT avoid so since you're doing yeah I don't know we don't want to await it anyway right you just get all the async bubbling issues you could do async and then instead of a task you you're supposed to return something else which my brain is not working for today instead of public async void you should do public I don't know embarrassing like I don't want it to hold up the rendering of the page will that happen here no it won't I mean that's the point of async but it's it's not oh it is async here yeah so you let's let's fix it the right way I I took you down the wrong path instead of async void I think you're supposed to do um chat what what are we what are we missing here I'm like my brain is not working today I think you do want to do public async on the uninitialized okay yeah and then get get client principal should return task so you were you were right and I was taking down the wrong task and then you will wait on line 15 there we're back thanks everybody all right so assuming this works yeah [Music] okay we didn't get an error that's good let's check our Network here line 13 should be I not t well um I think we may have to yeah it's not calling this so I think we may have to restart the client oh yeah another victim of a rude edit rude edit now we're calling it okay look at that okay cool cool we're close so then what we want to do here is pass this user object to our navbar so we could actually we should probably store this in the state okay because we're going to use this user another yeah this is one place where store in the state makes sense to me so we're going to have a bundle app is busy app is I must have done this and check this in because we haven't done this yet ignore that uh private [Music] um user user I do user user does that work can I do like is this a thing do this in C should you do this I was muted I always do lowercase like uppercase is the type and lower case is the instance so I've got these backwards because in in the state we need to have the we need to split the variable in the setter and the getter because oh because oh we need to do this need a need to set the user and then we do need to do notify State changed and it's not on it there we go thank [Music] you all right so assuming this works we're going to set our [Music] user we need our state container don't [Music] we music too loud chatous it's a little loud but it's it's py okay then here actually need this what we want to do is sending the state container value and then I'm pretty sure because we're doing this async mhm we have to do this I kind of feel like state has changed is like going way back to my VB days do events like it doesn't really hurt if you call it too much you know what I mean like yeah just sprinkle it in there just in case I don't never know when to call it and let me see how I did this for just to save us some pain but I did it's not a page it's a it's not a page it's [Music] a oh so I pass logged in because the problem that I ran into is that it wasn't updating and I couldn't figure out why and so I passed logged in and then in the Navar I think I referenced the state container I [Music] do [Music] yeah okay so let's get a a uh we have a we have a good question here we have a will there be a GitHub link for this I'm happy to say yes we've been doing this all up Source we're still happy any poll requests any issues try it out we're we're pushing the code every week usually okay logged in uh so you've got private string logged in equals Boolean false do you mean that to be a Bo or a string o sorry thank [Music] you and then we're going to [Music] pass [Music] how did I determine this before what we're going to do is we're going to do so I checked the client principal and if it's null I just return otherwise I set the state container and then logged into true okay so that's how we're going to do it so here rer at client principal equals null which is the same reverse it H Goa among the questions I have is if we're abusing the state container I don't think we are I think that's I think this is how you build client site I just like to me it feels like Global state that you're like is I've been told is bad but it's not really necessarily I mean I don't know I mean in JavaScript applications this is exactly how you do this right you have yes that is the pattern now we could argue about whether or not it's a good pattern I think some people would but if you don't do this what you're going to have is all of your state and like a top level component and you're just gonna have it all cascading down and that's a real nightmare okay however I can tell you that BS code like as an application which is written in typescript does not do this I'm not saying it doesn't have a global state but it doesn't components don't communicate this way they pass events right so they just commit an event and then components listen to that event and they take action which I actually think is a better pattern we might call that like a pub sub publish subscribe yep but yeah have different religious use and a lot of that is scale right there's a lot of code in vs code and so it's like you know what I mean like the patterns that work in one app are different yeah your state container would just be can you even imagine what that would look like all right na bar Navar we need a parameter for is logged in a that's [Music] exciting P do you know do you know I no does that be I think does have to be public uh logged in okay and then we need to decide you let me go back commented out thing in the nav below do I yeah that's the login modal so we're not we're not actually there yet we'll get there in a second um so here we have to conditionally show some stuff and so just to make this easier I'm going to copy this in and then we're going to talk about it we're we're gonna do this did we get the Moto login we don't have the Moto loging okay so we we'll hold that tight for a second so what we're doing here is we're saying that if if the user is logged in then we want to show this thing that has their profile we want to show the log out right if it's not then we don't want to show the log out does it and does the login stuff handle the profile image for them too like that's part of the social login stuff or do we need to pass that stuff around I'm sorry say that again the profile image is that provided by oh no so that's that's one of the things that we're gonna have to deal with is that there's no longer a profile image that used to be passed by the Off from Twitter and it's not it's not pass anymore so toggle toggle menu not there toggle menu is there what's your problem this does it's not lying to me is it PRI is the [Music] private reload nothing to reload won't fix is it gonna come back maybe all right parse the page please come [Music] on all right I assume it likes this so let's do this toggle menu does not exist it does exist what private void toggle menu it's a literally the same code is is a capitalization you have upper case oh yeah dang that was a good catch man I saw it exactly the same time Jacob and Nathan did so nice job three of us nice job uh okay so all of this is done are we still running over here we're running okay so now now we're going to refresh and we're still [Music] seeing happened [Music] here you call me call me you should be logged in though shouldn't we we are logged in so what's the [Music] deal this is the problem that I had before where it just like just wasn't updating why why am I doing this you don't have to do that right on what is that on yeah so we do have to call this see see ah state has changed I like somebody earlier was saying they just sprinkle a bunch of status changed in and then remove them until the app breaks I hate I hate it so much you know that's something there's uh analyzers in C and I wish that it had analyzers that would tell me this state has changed is unnecessary or this one is necessary or something exactly although it's still not updating uh Jacob said you didn't set logged into to true I didn't well man how does he do it how does he do it there we go okay so okay yeah and we have a log out so now we just need to handle some of this login stuff here yeah the magic happens part yes and you can see I changed this because we don't have a we don't have a profile image anymore so I just made it like I don't know what else to do here well yeah some Pro some providers will provide an image right well get like GitHub and and we're we're going to handle off from a few providers not just right no they won't provide it okay you you just don't get it anymore uh so I mean there's a lot of things we can do here we can do we could show so here's the profile image profile image so we could show I think we can [Applause] do St con kener is not a thing am I not injecting the St container I'm not let's do that we're going to need that so gravitar we don't have an email address for a person do we don't right that's gdpr stuff we don't want to touch that it's this is like a eventually someday you could allow a user to set their image or we could do some hacky but really all I need to know is on I logged in or not you know what I mean I know what I look like I think we can do this right and so we could mess with this WOW to get this right but I don't know that we want to see this I would show that I would show that more as like a tool tip on hover or something because if it's that's a good idea yeah so we we're just going to take this out for now we're just not going to show this at all so let's handle our I mean it would be super easy right on the image just do an ALT alt equals that exact thing right I mean you did all the work to to pull the data as well I mean this is true delete something for me tired of typing come on man we go nice oh Ray is right we could say like high Ray or something like that too it shows cu the image is BR there's no image so instead I'm doing so we can actually we can do the alt it's not alt it's uh title or um I think it's title but titles in browsers are not great actually I just want to that image be gotten rid of then we get rid of this all together yeah so work right yeah and then we Mouse over yeah it tells us there I mean that's kind of nice we could tweak it more but I mean that's that's good we can we can also put it in the log out menu you know like uh you have log out here and then we could do the username log out whatever yeah you can just do [Music] like like an HR it doesn't look good but we can fix anyway let's let's not messing with this doesn't matter um all right so now we want to log out so log out's pretty easy you can see it here we just go to SL logout you can only log with one provider at a time so it doesn't really matter right there's no like log me out of Twitter it's just log me out it just logs you out of the whole app right it doesn't matter what provider you used and that handles clear cookie and all that stuff right exactly so now when it reloads we just see login right we don't actually because we're no Lo we're not logged in anymore when we call me when do we get back null and when it does that it doesn't lose all your state like the state container is still good right or it well what do you mean like well no the user's gone okay the user's gone but does it re does it reset the whole state container it does yeah because you've reloaded the application okay okay so at some point in the future what we want to do is save that state container to local storage and rehydrate it yeah but we're not we're not quite there yet I'm gonna log an issue right now let's do we're gonna create a new component here for the login under shared add new file aaser component modal login and then because we've already ported this we're just going to steal it so it it looks like a lot we'll copy this in and then we'll talk about it doing things the easy way today o some Unicode came in there that was weird did y'all see that so what we're doing here is let close this is that we have a parameter that we pass called is open and then if that is true then the mode will get showed that's how we open it is just by passing this Boolean value and then it get this onclick here just closes it right so it it sets here that it's closed now in order to do that we have to set that variable remember to true or false and where is that variable passed it's passed from the Navar so you can see right here show menu right so we actually call toggle menu to close it because if it's open and we call toggle menu then it's going to set it to false and it's going to close it okay wow all right right and so to open it what do we do we call toggle menu because it's set to false by default right so we're just on clicks do you want to have so there's two ways to do this one is you call toggle the other is where you say like toggle menu and pass on so I I tried this I did that initially and then I just I guess I just decided that the toggle is what you want right it's either on or off if I'm opening it I'm saying toggle it guess it's to pass the perimeter I think I think you're right I mean obviously it works the only time that I like there's two ways to do it one is have a a toggle that doesn't take a parameter and the other that does if you call it twice accidentally somehow then it toggles on and off or some weird sort of thing whereas if you're always explicit that's true that's but the thing is like toggle menu and then you pass what true or false or yeah but then toggle menu true toggle menu false if it's true if you did that then I would rename it to show menu true or show menu false show menu false yeah I don't think it's a problem now I'm just saying that's when I've written this bug before it's been from having one that doesn't take a parameter and just you know yeah fair enough so let's go back to our login here um the current URL why do I need this give me a second here's why when we call the login the other thing that the login is going to want that we don't have to pass is this post login redirect URI and we're getting all this is is the the URL of the current page and the reason why we want to do this is that when we return from the login flow we want to go back to the page where we did it from right so for instance like we could be at any point in the application say okay now I want to log in and we don't want to take people back to the index page after they log in so that's all this is doing that's you always hate that when you log into a site and it takes you back to the homepage and you're like I right no one right just take me back to what I was doing yeah um I don't think there's anything else to really explain here the rest of this is just a port of the HTML and I didn't really make any changes I think I did add some classes here uh this is not right yeah so all of this comes from again this is not new this is justed from the existing application CSS it's not even an option okay let's go gotta be honest I really like the CSS isolation the way blade it's huge it's very cool why isn't it nesting I thought it some maybe that's just oh why isn't it nesting oh you're not in solution Explorer does it nest in solution Explorer we can make it Nest here yeah check it out in solution Explorer oh yeah they nest it automatically yeah all right interesting want to take a discussion question yeah let's do it all right J James is saying are server side generated web apps considered more secure than client side so it's Blazer server more secured than web assembly I would say it always my do you want you go you go you want me to to take that one so first of all let me just say that my understanding of security extends about as far as implementing it with whatever provider is I'm working with in other words like I trust that static web apps is going to be secure when I Implement their off does that make sense so like the answer is I don't know yeah I'm just trusting the provider so I feel like in general if you just yes or no question or whatever I mean it always depends like you're saying server server side apps are always to me going to be a little bit more like if if I had to just pick between you say here's a server app and here's a client side app server side app is going to be a little less likely to share thing to accidentally share information on the client for two reasons one is you're downloading resources to the client like for instance our Blazer app the binaries are running on the client people can look at what the you can disassemble the code or if it's a Javascript app you can look so you can see what the logic is and you can try and understand the other thing is your API calls like and I'm constantly doing this when I'm using the web I'm like going in my network tool and I'm looking and saying oh you're calling this API what if I did this instead you know and so whereas if you're running a server side app I'm not making as many API or my API calls are server to server and there's no way on the client to get in there I'm not saying that server or client side apps aren't secure or can't be secure I'm just saying you have to think about some other security questions that you don't have to on when you're writing a more server side out yeah I think that's certainly true maybe in the API you have to be cognizant of security challenges that you don't have to be on the server yeah y so in a good question yeah it was a really good question okay so I think that's all we got to do provided everything is still running wow you got Facebook what all logins are we doing then we've got Twitter do yeah so we'll go to static web apps here in a second and see what we've got available so yeah that's not the one we want we want this one say log in and it should open our modal now which it does not I think maybe because I haven't imple yeah so let's go back to our navbar here for a second I'm saying toggle menu oh you know what it is it'll work better if we uncom make sure we didn't get a rude edit a modal it does exist do you need an at sign show log I think I need a show menu I show menu what is happening your do it said show login model toggle modal toggle menu show menu show login modal show Lo yeah okay so we need a oh uh what was it private void PR private bu just to go back to something Anthony has a great point if you're doing serers side apps you can get complacent and you can think you don't necessarily think about things you know what I mean when you're writing client side apps you're constantly like all this stuff is down on the client you can accidentally share State you can accidentally leave an endpoint open there's a lot of stuff you can do on the server you know what I mean because you're like you think oh nobody can see my code that's a good point could make you complacent yep I don't know why it's mad about this close modal toggle modal oh you know what it is I bet you no that's not right uh nope [Music] nope you let's see here get the parameter we get the close modal what why it does exist eyes modal login current URL that's right nowar error toggle modal tole mod toggle menu it is missing it's just completely missing compiler's trying to help me it's like pleas to please just look at your code you know that's an area where I think AI could help in the future like because because uh errors you know like compiler errors or things like that give you just a you missed this thing it would be neat if there was like a layer on top of that where it's like you missed this thing and then it could like say a little better you have a very similarly named thing or you know what I mean yeah if you catch these little errors that take so long now it's still not working why is that [Music] John is it are you writing to the console so you have some errors there I do oh it's there 404s on trying to find images yeah all right uh maybe console WR business so we pass is open little login get set to active is is open let's console write out the values of some of those things yeah I mean that's my answer to everything either that or co-pilot it's like nothing is happening when I click this oh do you not have a hooked up this we're not calling it yeah onclick is toggle menu that's not what we want we want toggle this is the navbar where is the button to log in I got to find it log in here so we need to click here let just double check that I'm not doing anything funky there in terms of preventing a default I'm not so Google toggle okay yay so we got some broken links that's okay okay we'll fix those images but now so does login with Facebook do the thing okay so we're fake it yeah so now we're logged in okay so log out we're logging in it's time with Facebook and now we're logged in with Facebook and now we can see this my lists menu item doesn't go anywhere but this my list item is not there when you're logged out so we're conditionally showing that if you're logged in or logged out so we've let's just fix these URLs and then we're about I me these images and then we're about done here in terms of implementing login I mean yeah but I still want to throw in GitHub just because that we that was promised GitHub do that okay yeah yeah yeah you can do that um Co I I trust co-pilot to write this whole thing for us probably will uh where is there's the log out oh it's in the modal login sorry sorry okay so Facebook button and we need like a break between these two things okay and then what and then uh actually to be like semantically correct there we go and then go co-pilot go yeah see it gets it all it gets it all um um provided it didn't write a bunch of like markup I didn't want odd okay well never mind that's not what I would but I do there is like um like you know that's part of why that like thing where it does the like diff view is cool but sometimes I just like to write the have it auto complete okay that's nice hey loose nice to see you we got one so we do need to add a class uh or excuse me we need to add a the coloring to the button so we're gonna do that in the the CSS here yeah and I think it's gonna do it for us so yeah oh that was GitHub though or Google so look at what's nuts is that like it knows what the background color of the GitHub button should be do you see that is that crazy all right what about um should we do Google while we're at it and there we go yeah does it know it knows okay so then wonder if I can do this I'm ready for the day when llms are a little faster uh yeah that seems good right I think that is right and then paste back in the Google the get yeah what is this icon modal modal content I'm just making sure because I'm seeing some markup that I don't recognize okay does it work well [Laughter] uh what the heck happened I broke it what on Earth happened did the layout did the brakes push it off the side no they shouldn't it seems like something made the width too wide now well I don't know what this image is this is not a thing oh so it kind of messed this up a whole lot oh okay so this would be Fab fa Google just copying the an icon like these classes aren't actually used this GitHub icon this is not used Facebook icon not used okay h Oh weird what happened this is this is fascinating it's like none of the none of these classes are Twitter button Facebook Buton button so those are ID they're class so those are ID based ID yeah because each one of them is a different color there's only one yeah yeah yeah okay GitHub icon are they spelled right see the the top one say get Twitter icon the lower one say Facebook button it says Twitter button oh okay yeah you're right button button button button why is this happening to us uh let's let's look at the um CSS let's inspect the elements ID is Twitter button you have GitHub button and code oh so Capital H and hub for GitHub is different between the CSS and the code oh yeah that is true but it shouldn't what about the rest of these like this fine and it's like the CSS is just gone did the CSS get messed up somehow no I mean you can delete that and see what happens this is fascinating it's not updating we have 12 minutes should we stop and start it is the is it the yeah let's try that it's not rebuilding CSS yeah I bet you that's what it is course I do want this stuff in here now yeah yeah it's interesting where's background color white being set oh uh boom there it is okay so it's where's it being set it's being set in uh that's a Bulma class that's our CSS framework so let's fix line nine in the CSS it should be duu yep okay I just got to get my images this will be quick just bear with me like uh no Burke my day is flying by it's amazing first of all I'm watching you code and you're doing amazing things secondly I thought I was going to be chopping up a 45 gigabyte 24 hour day three nightc file Studios was like no we got it D yeah thanks Studio they're pretty great now we need the the devil studio is just so amazing they just do so much they're so Pro and they like roll with things they're I can't say enough good stuff about them so now in my downloads yeah W route in the images pull all this in yeah mimo was saying sometimes hot reload doesn't update CSS or JavaScript I think you know it's just complicated I think it's it's all file Watchers and knowing when to restart and rebuild and sometimes it doesn't catch stuff keeps getting better but yeah there's some complicated things okay get those images on Wow we done look if we click on the on the well like okay so not is it gonna work in production what do you mean it's gonna work in production I don't know I don't know you're asking too much of me yeah yeah it works here look the providers work okay come on chat don't act like you're not impressed so the next step would be we should create a poll request because then the will oh I don't know if the poll request environment will work for all this crazy stuff for the login it should I should huh yeah I think so um all right all right co-pilot what did I do you tell me wow okay request publish Branch publish that Branch oh yeah I gotta publish thank you request so like that's weird I don't know why it does that I'm gonna have to do this again yeah BR are you a turkey cooking person wow look at that Implement user authentication update you are okay nice for introduces user Au including a login modal State Management for user information have been updated to reflect these changes new images have been added and app settings updated the CSS for the login model has also been created man that's pretty good that's an insta merge for me okay so what's cool then is it's going to create the staging environment once you create the PO oh no don't merge that poll request don't trust me I merge away I don't care but it is really cool that it does this it creates that staging environment for us and deploys it out builds man I have not been to the production environment quite some time it'll it should put it in the um static web app CI thing the build and deploy it's been building just fine so yeah yeah I love that about being able to like and it it's it's similar to like Azure um oh like slots feature in Azure static or Azure websites or apps whatever it's called app service but it's like um does some special stuff here like the way it kind of deploys everything out it's really nice how it integrates with the bull requests yeah I didn't even know how this works I mean I know it's in the action but yeah all that gets created for you when you initialize the it's all here let's put you don't have to worry about this which you shouldn't it's just magic build build build the other thing you can do if you're getting bored you can click on it and you can watch the status it's very exciting if you're like why isn't it working hard then you can see it's actually doing things let's go speed it up here we go here I'll put us in the upper right there we go progress polling finished upload says it's ready okay let's production Moment of Truth Grant consent will it take me back yes oh my God I told you I look at that the emulator Mouse over yourself I want to see your username Mouse over that little image there it is oh my goodness this is this is a great way to wrap up a pretty amazing week so we do there um we can actually let's go into our project board because we have some stuff to move along okay I think we can merge this PLL request right oh yeah this is the best PLL request of all PLL request yeah originate and then we can go into the project and we can cross some items off so reminder to people this is out on GitHub you get a little bored you want to write some code Jump On In poll requests definitely welcome so I think that Implement off login you can move from up next to done sorry look upgrade to D Ed is you this is done also we finished the edit page UI pretty much yep I do want to finish up my test I took a I took a I'm gonna have to roll back what I did before but I'm happy to do it I've learned some lessons so what we also so let me add some items here we need to implement my lists page what else so there's the link item and Link details component are those done those are at the top of that to-do list there yes yes they are all right so we need we need to also um this isn't done save lists this is like I feel like I should prefix this too with like edit this thing you click on the thing oh you click on it uh so like we should do like this oh yeah or we can add labels to them too oh okay whatever yeah that works like this is some of the API stuff I need you to work on over Christmas yeah I know right uh how do you add a label to the thing you this is not a I don't like this it's a little confusing up next stat we need to make new lab you convert to an issue if you want to do more stuff with it these are not technically issu they're like project things I don't know all right well we have done quite a bit I think we can celebrate some success there that login thing was a big deal now we've got or I don't know if we added it to it but we do need to now Implement that off on the server side too right we do yeah so we need to and this is not that hard to do because we've already created that client principal class and so what we're going to basically do is just pass that HTTP request from the client into that class and see if it's there and a static web apps is going to handle that on the server side of Translating that and actually making sure that works it'll be a header that we pass and so that'll work I have one question for you because I I do actually intend to write some of this code on the server now at the user level how are what is the user that we're associating because you can log in with multiple different things right you can you have a username or do you have a what are we associating you with that's going to be a question to solve too right I mean the easiest thing would be the username but it's a little confusing because I could go register B Holland on GitHub if you didn't have one or I could you know what I mean like so then there's a provider and username it's provider and username maybe yeah it's a it's a thing to think about yeah it is all right this is wonderful uh H for those who have next week off which is Mini have a great next week we will not be streaming next week um but uh have some fun catch up we've got lots of videos ignite.com lots of stuff thanks for thanks for watching thanks chat have a good [Music] weekend [Music] what

Channel: dotnet

Views: 4,385

Keywords: blazor, vscode, dotnet, livecodeing, code

Id: dzN5XIUOUZc

Length: 90min 15sec (5415 seconds)

Published: Fri Nov 17 2023