Blazor & Identity Endpoints in C# .NET 8 RC2

I was coincidentally watching the aset community standup when they go to to rc2 and explain the changes in Blazer uh while my pipelines broke and while push publishing to Azure and I didn't really change anything so yeah so I upgraded to rc2 you can find the documentation if you just Google not 8 rc2 and all the new things are explained in here rc2 is supposed to be the last release candidate so after this one I assume it's going to be the official net 8 so the first thing you do of course is install the rc2 SDK and you might have to restart and then you can do net list sdks and double check if the rc2 is there the SDK and and let's apply these changes to our brand website project we'll start with Blazer and then we'll go over to the identity endpoints so the email sending specifically so the first thing would be they renamed something so the render mode server web assembly auto they renamed it to tell you that these are the interactive render modes so interactive server interactive web assembly interactive Auto interactive just means that if you click that counter button on the demo project that actually the count goes up thanks to the websockets or thanks to the Blazer web assembly if you wouldn't use any of these render modes then you're assumed to be statically rendering if You' click any button the counter button specifically then nothing would happen because you're not using any interactivity so then they talk about the global interactivity for Blazer web apps they kind of uh give an example of each of the web app templates so you've got yeah interactivity type so that's the non is that static rendering without any interactivity then you have server interactivity web assembly interactivity or Auto which is also interactive so the renaming would look more like this uh at render mode interactive Auto or interactive web assembly or interactive server and in the video they also mention that that render mode dot will also go away and then you can just specify interactive Auto interactive web sembly of our interactive server instead of the old thing what's important about this Blazer web apps templates that is not the Blazer web assembly template and that is also not the bler server template this is actually a template that will contain mostly contain two projects out of the box a server compo uh project and a client project unless of course you only choose the server if I'm not mistaken if you choose we assembly you're going to get a server project and a client project if you choose Auto you're you're going to get also that server project and the client project and pre-rendering will be enabled by default so let's take a look at these templates I don't have Vis Studio installed I think if I say now new list then you see the blers server app so that's just only the Blazer server project with the websockets and with that weather forecast page and counter then you have the Blazer server empty which shouldn't contain those example components like the counter and the weather forecast then you have that Blazer web app so that's what's displayed here with the interactivity types that's the special one so just BL template and then below you have the Blazer web assembly so that's going to be only the client project and then what they also mentioned is you can kind of specify your own render mode if you want interactive web render mode but you don't want pre-rendering for example then you can fine tune that and use this custom render mode at the top using the add render mode so no no longer these attributes they're going to be removed in the net 8 official version and we're going to have to use it like at render mode interactive server if you choose to uh specify the interactivity type on a component individually if you're not going to do that I don't think you have to bother with all of these things and this is actually also really cool the identity UI for Blazer so if you use this yeah if you specify Das individual so authentication individual you're also going to get these Blazer pages so this Blazer template that's the web app template that we just saw in the terminal and then you also get these Pages login registered and then they protected page forgot your password register as new user recent confirmation email and it has validation inside and all of that but note register in account it's email password password so I don't think you can really customize it to have the user's name or language or address or whatever that's not yet supported I and they did say something about some known issues something with the if you generate that web app template from blazer with the server on the client project for some reason the error. Riser page ended up in the client project and the server project can't find it so then you simply move that over to the server project components folder so I went to my brand implementation project I I started with the single page application the web assembly client since that one was complaining in the host. Riser I had to apply that renaming of web assembly to interactive web assembly so a few lines I had to change here and the pre-render server program CS so the server side project and I had to add that use and forgery middleware and then I changed this from ad web assembly render mode to add interactive web assembly render mode and the same for at the top add interactive web assembly components instead of the web assembly components y of course don't forget to upgrade all of your nit packages before you can apply these changes so I do that with this useful tool upgrade packages in solution I did that already of course and then let's go to the authentication I was already trying these things out so if we go to the extensions where we register instead of using the email sender interface from the identity UI services package we use it from just from ASP net core um do identity so that the the interface moved and we can specify the type of the user so yeah pass along that user which is just our custom user model inheriting from Identity user and that makes possible that we can address the user by name or use some other user information in these emails that we're sending so the same here you're inheriting from email sender you with that uh user type past and you use the email sender interface from the as notore identity not the from the UI doservices and then if we take a look at the email sender then we'll see instead of one method we now get three methods and we get that user info as the first parameter so we can access the name Al or the username at least um then we just get the email and the confirmation link so they remove the subject and they altered that HTML message since yeah chances are you you are going to change that subject anyway translate it in your native language or just change it to something else so that was good as an example but not really useful I think but then so we have got three confirmation link so we're getting this link I assume that's still going to go to the back end I at least the book is going to be fixed but we'll probably have to extract the yeah useful information out then we have the send password reset link and I think either this one is for the reset password endpoint and the other one is probably going to be for the forgot password and points so we'll have to see which is which so this send email sync is the the old one I'll remove it in in a bit but we got that email subject and HTML message which we then had to extract the info from the HTML message and patch. URL to go to our yeah first fix it and make it go to our front end so now we're getting these three new methods I went ahead and pasted the same code in there and I altered the warning messages could not send confirmation could not send password reset mail could not send password reset Mill yeah with code or whatever so I did make an API proposal for these as well because currently so I'm already using these um that was the previous proposal from someone else that got accepted that's kind of what you see what you just saw but my proposal is to also add an optional call back URL because make that those links go to the front end but I might also have multiple applications multiple web apps I'm going to need to specify for each web app individually it's going to be really awkward if uh they go to the wrong front end so I hope they at least take a look at it but I not counting on it and yeah I asked them so what I just said I kind of ask them to just pass the parameters separately so we can make our own links instead of them trying to form these backend links for us so that's the usage example front end confirmation link then I can choose first I can choose to make it go to my front front end and then I can also to which front end as well and I could choose to use route parameters instead of the query string parameters since Blazer front ends don't like that and then I merged that reset link and reset code method into one y anyway I'm not getting my hopes up I might do a video on J WT authentication again if this does not evolve and if there is the need of course for multiple front ends using that same authentication API let's try that and see what we get out of these links I assume it's just the link to the yeah it's going to be my API which is not really useful I don't really want uh people going from their email inbox to my API okay so what we're getting now is indeed that back end endp point well with the user ID a query string parameter and the code yeah I removed the long code and I just passed along the link and then that goes to my API yeah I could but I'm not willing to apply redirection logic to my front end now okay so we can get rid of this previous sent email a sync this patch box I'm going to keep but uh just to form that front end URL so it should look more like this but of course now we have separate endpoint confirmation and reset so we don't really need to do this check anymore so I'm going to simplify this code a bit more all we'll still need to do is yeah replace those those query string parameters with uh yeah reformat it to the front end URL format which is going to be more like slil slash code or something now right they just give you the reset code so they expect the user to go to the email copy the code over somewhere in the field likely in the front end so I hope they take a look at my API proposal to have that call back URL okay so this is the result I'm getting a nice link of course we'll want a better message but that's not the thingy okay that looks pretty good one down two to go account confirmation also works then just the reset password link to test so reset password is what is where you end up after getting that email for forgot password if I'm not mistaken and I'm handling that in the front end form so then from the front end form I'm just posting to this endpoint with the the email reset code coming from the email and then the new password thanks to the form submit um but how do we Traer this reset link I have no idea the docks don't say much so that's the form I was talking about and can say t one three four five oops one two can press reset and then that should post to reset password endpoint okay I'm going to leave it at that for now uh just add a comment send password foret link async yeah not to my knowledge it never gets hit confirmation link does and I updated this uh patbur code so now that should be good and the L statement yeah should should cover this reset link but yeah can't really test it and set password reset code works as well should of course have a bit better message don't forget to leave a like And subscribe if you haven't already see you in the next one

Channel: Keep it simple, stupid.

Views: 1,560

Keywords: web, app, development, dotnet, pwa, ml, ai, frontend, backend, cloud, azure, fullstack, .NET, C#, machine learning, artificial intelligence

Id: QRE_nMcbo8A

Length: 18min 20sec (1100 seconds)

Published: Tue Oct 10 2023