Blazor WebAssembly authentication with Azure AD

hey there and welcome to the cold wrinkles channel for a new video and this time i guess we'll do something very very interesting because what we're gonna do today is implement authentication in a blazer webassembly application and we'll do this with the help of azure active directory so in summary what we'll do today is just simply okay how can we authenticate users in a blazer webassembly application and it's really important to underline blazer web assembly because when we talk about authentication we have two different concepts or ways to handle authentication if we are in a blazer webassembly app or if we are in a blazer server app because blazerweb assembly is essentially a single page application framework just like angular for instance and therefore the way that we handle authentication is really different but before we get really going i just want to show you exactly what we will do today and if you watch the previous videos on this channel we have a video on implementing basic basic crowd operations with blazer web assembly where we have set up also a database and we do real api calls in order to get uh the data that we need into our application so what we're gonna do today is actually we will start from there and i just i really want to set up the scene here because this is really important i guess to understand exactly the goal that we want to achieve in this video so let's run the application and this is the application that we have right now so we have still this fetch data nav menu but in this case it's really loading the data from a database and if you didn't watch the previous video about blazer or about basic crowd operations with blazer web assembly i will leave the link to that video in the description of this one so you can go there and check it out and even we also have published this application to repository on github and you will find also the link to the repository also in the description of this video so coming back to this application the goal that we have for today is actually to implement something like a button or or anything here uh in this upper part of the menu where we have the option to log in and if we are logged in of course we should display for instance i don't know the username that is currently logged in or something like that and then we should also have a logout button for instance and last but not least the most important thing is to check then how can we actually uh make sure that our blazer components for instance this weather forecast component is only accessible for authenticated users so this is what we want to do today at the end of this video we should have here for instance if we try if we are on the homepage and we try to navigate to the fetch data and we are not authenticated then we should either be redirected uh to login or we should get a message that hey you should be authenticated for this so please go on and log in if you really want to do that but this is the gold now let's get started i said that what we want to do is achieve the authentication using azure active directory and here i really before we start writing code and doing things i think this is really important and i really and i want to stress this out since blazer webassembly is essentially a single page application framework what we have to do is actually to implement one of the i would call them standard authentication mechanisms that we have at our disposals and when we talk about single page applications and authentication there is a open id connect so any time that we actually want to do authentication in a blazer webassembly app what we need to do is actually to implement this open id connect flow or oidc flow now the good news is that we have some libraries uh that microsoft created that we can use so we don't have to really take care about really all the implementations of the oidc but we need actually to know the basics about what is an open id connect flow and how things should work i won't concentrate in this video on the technical part on how to really implement this open id connect flow but instead what we'll do we'll actually use the blazer libraries that we have and that actually help us a lot in configuring all the i would say oidc specific stuff but it still allows us to to have an overview about the entire authentication mechanism in our application so before we get going once again in summary what we want to do is implement authentication in a blazer webassembly application with azure active directory and of course using oidc or open id connect so let's get started to do that what we need to do here is since we want to implement authentication with azure active directory the first thing that we need to do of course is actually register the application that that we want uh to authenticate in our azure active directory so i'm logged i'm logged in here on my azure subscription so i will go on azure active directory and here it takes just a few seconds to load and here let me just make this little bit bigger here we have for instance uh here are a list here we have a list of our enterprise applications but what we really need here is to go here on this app on this app registration blade and here you'll see a bunch of applications that i have already registered with my azure active directory so let's go on and register a new one so what we have to do is first we have to give a name to this application and let's call this sweater forecast that would be the name and here what we want to do is choose uh how do we actually want our authentication to work and i would say we have here two very important options first of all is this single tenant option when we log in or when we authenticate users coming only from one specific azure active directory and we have the second option uh which is multi-tenant and in this case our application would be allowed to log in or to authenticate users that belong maybe to different azure active directories now we will go here with the first option and the primary reason why we do that is that i don't know i guess starting with june in order if you want to register an application uh and if you want to go for this for this multi-tenant flow you actually have to or need to have a registered domain and verify the account in order to be able to do that so i don't have this right now because this is only a demo a tenant or a demo subscription that i have here on azure so that's why we will go with this first option but if you can set up authentication for multi-tenant apps if you have a domain that is already registered to azure active directory and if you have verified it then you should be able to uh to actually also choose this and it should work exactly the same way so no big difference except maybe for the authority that we would need to use but i will show you that just a little bit later so right now i just wanted to explain why actually we choose this option and the outcome is that we will be able to only authenticate users coming from this azure active directory and then there is another thing that we have to provide here is it is this redirect url and here this redirect url is actually something that's very very important uh let me let me just run the application again because i'm not sure about the port that we actually have right now and i want to make sure that it is the correct one so we have here uh four four uh okay it's a little bit different to what i have here so let me let me go here once again and let's change the port number very very quick and that should be it now what we will do here is we will provide this url as a callback and as a part of the oidc flow how this is actually supposed to work and maybe uh that's uh that's something that uh that would be nice to explain but let me just first just paste here this callback and uh and we'll click here on register and then this will be saved we'll still have to do some settings here but we'll look into those settings settings just in just in a moment but right now i wanted to just explain how this is supposed to work so when you go to our blazer webassembly application you are initially let's say not logged in at all so what happens is that at a certain point you well click on a link or on a button whatever we have in our application and then this entire authentication flow this entire oidc flow will get started and in this flow what will happen is that we will actually be redirected to the identity provider in this case the identity provider is of course azure active directory because we have registered our application in azure active directory so what it will happen when when we click on login in our application is that as the first step will be redirected to uh azure active directory for authentication up in reality we'll see we'll have a pop-up it will not be a real redirect but that's really not important of course when we arrive there we have to authenticate ourselves so provide username password uh provide uh a two-factor authentication code if uh if we have that setup on our hdx directory and things like that and once we are authenticated or we have proved to azure active directory that we are really the persons that have all the rights to login with that account so when azure active directory is able to authenticate us it will actually redirect uh the user back to our application and it will use the this callback url in order to do that that we have uh set up earlier and if you take a look very quick here on this notepad that we have right here so actually we'll see a little bit later that this is uh i would say a setup that will create will have a route we'll make sure that we'll have a route that is called the authentication and login callback and we will have probably authentication login we'll have logout and other things like that uh but we'll see how we'll implement them just in a second let's go back now to our azure active directory because there are a few things that we still have to set up so first we should go here on this authentication blade now on this authentication blade um here actually i just noticed that uh i i registered the application uh the wrong way so let me let me go here back and let's let's just delete this sorry for that let's just delete this and we'll create a new application registration let's call this weather forecast again uh here we leave this option but then there is one other thing that we need and here we have to specify that we are in a scenario for a single page application because that's essentially laser web assembly so we could have changed this also from the authentication blade but just for your reference so that you know how to do it the right way i just wanted to redo this entire registration and and show you that you actually have to choose this single page app option that we have here in this drop down so let's click here on register once again and then we'll go on this authentication tab now then we see that we have this callback url if that we have provided we see that we are in a single page uh application scenario but then there is one other thing that we want to do we have to check here that okay we want an id token and this is essentially a part of the oidc specification because what happens is that when azure active directory will redirect the user to our app it will also provide the identity token for the specific user so it that would be essentially a jolt token it will contain information about the the user that's just authenticated to our application and this is some very very important stuff and we'll do some other videos uh especially on how to handle different type of tokens that that we could have in blazer web assembly and how can we actually use them or how can we actually use information from the tokens throughout our application but this is really out of scope for this specific video so once again it's important here that what we will receive here just for the authentication part so nothing else just to be able to authenticate user we want to receive an id token back when we get the callback from azure active directory so this is the first thing that we have to do here everything else uh can or should actually remain the same i guess let's click here very very quick on save and then there is one other important step that we would have to do and for that we would have to go here on this apr on this api permissions blade and here we have that we already have this user dot read permission on the microsoft graph it could be that this permission is actually sufficient but in order to be precise what we actually want to do right now is to authenticate user and for that we have a very specific permission uh on the microsoft graph api and let's choose the microsoft graph api and let's choose here delegated permissions and here we see that we have this open id permissions so these are permissions that are specific to this open id connect flow and what we would need for from here is of course we want to sign in users and let's maybe also check that we want to see the user's basic profile and let's click on add permissions and these permissions are actually very very important because what happens is that when you will get for the first time the redirection to azure active directory azure active directory will exactly tell you hey these are the permissions that this app needs from you and you have to give your consent to that this is a part of this flow and it's really it will need to be transparent and this is why it's important that you always add all the permissions or the needed permissions for the application uh here so that the user can exactly check or know what type of information will your application read from azure active directory and since we are here what we'll also do will go here on openid and we'll open that and we see here that uh we can copy here this uh this uh clipboard this is actually a uri that that identifies this code within azure active directory and will probably uh need that later and then uh sorry i didn't want to save that uh and before we really uh leave this uh azure portal we go back to this overview tab and there are two other important informations that we need first of all we need the directory or the tenant id uh let's copy this to clipboard and uh let's copy it here but i guess i'll move this to the other screen because i really don't want this ideas to remain visible for too long so i copied then the um then we need also the client id sorry so let's copy this class i need to quickbooks due to our notepad and then we should be able or we should good to go but it's important uh to get those type of information because we you would have to provide them in order to be able to get things working according to what we do here in this video so yeah that's it i guess uh from the part where we have to register the application in the azure portal and believe me this is a very very important part so it would be nice uh if you could pay a great attention to what we did because it's really really important and it's actually similar if you want to add some other type of applications maybe later you you can do that because it it's essentially the same thinking process behind that so let's go now back to visual studio i guess where we have this application that we have created earlier i said we have even a video on that and what we concentrate today since we want to implement authentication in blazer web assembly the only project that we will all actually work on today or in this video is actually this one this blazer uh crud client because we got we want to implement this in our client not on our server where we have the api okay so the first thing that we actually need to do here is install a package and if we go here manage nuget packages sorry we have this um if we go on browse i have here no i don't want that one so we need to search for a package it's called microsoft authentication webassembly and msrl this is for microsoft authentication library it's actually the authentication library that we need in order to connect or to work with the microsoft identity platform or azure active directory v2 it's exactly what we did or where we did register the application earlier what i will do however i will install the 5.0.1 version because i have tested this out with the 5.0.1 version and i don't want to have uh well surprises on things that maybe work just a little bit different in the 5.0.2 so i would install this five to zero dot one we would have to accept everything that we have here and uh in just a few seconds uh we should be able uh or we should actually be good to go with that if we go here on install we see that we have really installed that so that is actually very very cool now there is one other thing that we will need to do here is we need to go here in this imports.razer and here is essentially a part or the part of a blazer web assembly app where we actually import all the libraries actually that we will need in our in our blazer component and in order to to avoid having usings for this type of libraries in each component we can actually do this centrally here so i would go here just below system.net.http.json and i will add this using microsoft asp.net core components authorization so this is actually one important stuff or one one important thing that we would have to pay attention to now the next thing that we will need to do here of course is that we need to provide uh the settings or the azure active directory settings for uh this uh application and for the microsoft authentication library that we use in order to perform uh the steps or or to go through all the flow that we have in or or that is defined in the oidc standard so what we'll do here is we'll go to this www root folder and here we'll add a new file and let's click on new item and what we'll want to do here is go in uh i would say asp.net or let's go here on web um let's go on scripts because what we actually want here is a json file a json file do we have a json file here typescript uh javascript json configuration file yeah this is actually what we would need and let's call this app settings.json but let's not um app settings.json should be okay i guess and just to make sure that we won't have any surprises i will right click that file i will go on properties and here on copy to output i will set this to copy always because we want to make sure that this file is copied over uh when we build the application and when it is actually shipped to the browser and let's go and click on save all and we can then just close this properties here uh good so what we'll do here is we'll actually delete what we have here and we'll replace that with the following information and i all i already have it ready uh so we create an object uh the authority is essentially this url for loginmicrosoft.com and then the tenant id that we copied earlier from our azure portal and then the client id of course is the client id that we that we copied over and i have to update this client of course uh and let's uh let's just do that so that should be it and this validated authority is set to true this is an option that actually the library needs in order to create the authentication configuration for this entire oidc flow and then this being said uh this is everything that we need for this configuration then the next step is of course we should go here to program.cs and well we need to add the authentication service which is part of this microsoft authentication webassembly msrl library so in order to do that we'll simply go for a builder dot services and then we have add msrl authorization or sorry mslo authentication uh that should be it but of course we need to configure or to provide some options to that so uh it already it it accepts actually an options object but this options object well will contain a lot of information or well it could contain a lot of information in our case there won't be that much information but there are a few things that we need to do and first of them is of course we have to configure the application to read the information or read the azure id options that we have in the app settings.json file and of course use that information in order to perform the entire oidc authentication um and this is why we have to provide that and we can simply go for the builder uh then configuration and here on this configuration we can say bind we can say bind this configuration from the section that is called azure ad actually and bind that uh to options uh provider options options uh but it is not options we call this opt for options provider uh options okay and then of course uh authentication because this is actually what we want to do and this is of first thing that we have to do and then there is another thing that i really uh i guess it's not even in the official documentation but it seems that when i've worked with this and when i tested it if you try to do or if you try to perform on authentication using just this type of configuration it will throw you an error that you are missing some scopes so what we will do here is then we will add a default scope now and this is options okay it's not options this op is sorry for that opt.provider options and here we should have something like a guest default token scopes and here what we can do here oh sorry we can add of course to that and here we just we have just to provide a string for the scope that we want to have as default and if you remember we copied this from the azure ad portal so i will just go over and copy it right here and this is the open id scope that we need once again in order to be able to authenticate users so uh yeah this being said right now we have added the authentication service to our app and then before we start going into our blazer component and create the components that we need for authentication and modify the fetch data component to uh to actually require authentication there is one other important thing that we need to do so the fact is that basically what happens is that when you install this microsoft authentication web assembly msrl library it actually comes also with a javascript file uh that is called authentication service dot js because all the logic actually for implementing this uh authentication flow this open id flow is actually in that javascript file and probably the reason why uh microsoft does this in a javascript file is that well uh that that library actually can be used in several other type of apps that rely only on javascript and it really wouldn't make sense to create a brand new library for that or in c sharp if they already had one so we just need actually to also load that javascript file into our blazer webassembly app so if in order to do that we should go to this index.html part and you see that here in this index.html we already have a javascript file that is added so we'll just add a new script tag and i just paste it and the source so when you install razer class libraries and i guess that's something that we'll cover in a total separate video you can of course also include in those libraries static content like css files javascript files html files things like that so what happens that when the application gets built or when the application gets built uh what happens is that all those static files that come actually from uh the libraries or from the razer class libraries that you installed via nuget they will or they will actually always be placed in this content then the name of the library which is microsoft authentication web assembly msrl then we can specify the name of the file that we actually need in this case we need this javascript file so this is why we actually need to do that and now everything should theoretically be wired up correctly now right now we don't really have a way to really test that but uh we can do that in a second i would guess and right now we actually will start to create some new components so we will go here into this shared folder and the first component that we will create is a razer component and let's call this login display and this co dot no without yes sorry and this component what it will actually do is actually it will provide that login button uh and uh things similar to that and in order to not lose more time on this i will just copy over because i said i have already tested this out so uh not to waste a lot of time here is our login display component so just briefly let me explain what we have here so first of all we have this uh authorized view component so actually all visual elements here are placed in this uh authorized view component and will come to this back just a little bit later when we'll implement let's say in our fetch data component this concept of displaying that data only if the user is authenticated but if the user is authorized in this case if user is authenticated what we'll actually do here is we'll read the user's name and here i there is one important thing that i would like to dwell on just for a while we see that we have this context which is of type uh which is of type authentication state and this is really important because it's specific for blazer we have that we have this also in blazer server but here actually in in blazer web assembly this is totally important and i will tell you exactly why so if you are uh i would say accustomed to develop regular asp.net applications you know that basically all the applications uh heavily rely on this concept of having an http request that that comes in and of course a response that is generated to that request so what happens is that whenever a request comes in you can inject or you can get access if you want to a class that is called or that is of type http context and in the http context you have a lot of information about uh that specific uh http request including information about the authenticated user so if the user is or if the user that made a request was authenticated then you'll have in the http contact some information about that specific user now in blazer web assembly of course we don't work with the http contacts at all because we don't handle http requests so this is why in blazer we have actually this authentication state provider class that will uh that that is injected actually when uh or that you already have at your disposal i would say in your blazer apps and you can simply use that in order to uh well read for instance in this case the name of the user that it that is currently uh logged in and this is a very very important uh thing uh and of course if the user is not logged if the user is not logged in uh then we have this uh uh this very simple uh href that redirects to login and we will uh implement the login page just the in a while and here we just have this begin logout so if the user wants to log out of user clicks on that button and what is what we do here is that we have this sign out manager and we inject this actually here sign out session state manager so this is actually the service that you would have to inject in order to sign out users and actually the the authentication library uh behind the hoods or behind the hood uses exactly the same uh the same of i would say concept of course it doesn't use the sign of session state manager but uh there are some classics specific for the sign in for that but it's actually all of them are in a way or the other part of this uh entire authentication mechanisms that we have in in blazer so we just inject the sign out session state manager and we use uh this uh sign out um session state manager to just set sign out state and this actually will trigger the start of the sign out and uh the javascript file that implements the open id connect flow will actually then take it from there and perform uh the sign out according to the open id specification and then we just want and what we do then is we just navigate to another component which is actually called log out so this is actually what we need to do now there is another component that we would need to create and we'll see exactly how we will use that and we'll create it also in this shared folder so let's click here razer component once again and we'll call this redirect to login redirect to log in so it seems to be correct and once again for this one i will just uh copy over some markup and code behind but this is actually a very very easy one because it's actually a component that doesn't have a view so you don't have any visual elements on this component and this is also something very interesting because you can have components in blazer that don't necessarily have also visual elements and what actually uh what actually is the purpose of this component well of course we'll actually use it just uh to navigate to login when we need to do that uh and here we just get the string the or well where we are currently and then we just go to login and then we also set a query param to specify which should be the return url uh after the login occurs so this is is essentially what we actually uh do here and then there is one other very small component that we would have to create but we'll create that in this pages tab and here let's add once again eraser component and let's call this component uh let's call this authentication.razer okay let me just delete this very quick and this is actually the component that would also be routable and we'll see exactly it will also contain the actions that we will want to have so that would be login logout callback but what how we implement that is we use the route param we say that okay this page is always displayed when we go to uh this type of uh of url let's say it's authentication and slash and then we have a place folder for an action so this means then when whenever we navigate to somewhere whatever comes after this slash is actually taken as an incoming parameter and is actually set here and this is actually important because we have here this remote authenticator view which is essentially a component from a microsoft authentication.webassembly.msrl and this is the component itself the bazel component itself that handles everything that is related actually to this uh whole open id connect standard but this is uh how we implement this using this remote authenticator view of course we could create uh different components for login for logout or for callback but since we actually or or since all those components are essentially coming actually uh from the same parent we can just simply use this and just use this param and instead of having three components we just have only one which is always better because it's easier to understand what actually happens here good and now actually we should be ready with all uh the things that uh we need for authentication and now the only thing or just a few things that we still have to do is of course we need to go to this app dot raiser where is it here it is now in this app.tracer is actually where the routing is specified and where we specify how the routing works uh which assemblies should be considered for routing and things similar to that and what we would have to do here and believe me this is really really important is actually well of course we need to somehow actually state that hey in all of our routing whatever we need that the application also takes into consideration that we want to use authentication and to do that we have actually a cascading parameter and this is here it's called cascading authentication state and let's close this and essentially what we would have to do is that this entire uh router uh stuff actually should go there in this cascading authentication and this will cascade authentication to actually all of the routes that we have in this application now what we can do here is in this found content so we have this one here uh what we could do here here we have this router view route data and where the route should be looked at but what we could actually hear what what we could actually do here is we say that for uh not uh not uh authorized okay uh but i'm not sure uh sorry uh there's something else that we will need to do here it is uh we we need this authorized route view sorry for that we need this authorized route view component and in this authorized route view component well what we could do is actually uh we could actually move this entire route view in this authorized part so let's just do that so here we could just uh what or what we need here i guess with copy paste uh will not work that easy so it would be route data and this would be equal to uh route data and there is one other thing that uh we want to do here is we want to specify the default layout we will have default layout and sorry this would be uh type off and main layout because that is of course we have to type this correctly main layout and that should be it and here what we could do here is then we can say for instance that if it is not if the access to this view is not authorized we have this component this not a authorized component and what we see here is we check that context once again that is the the authentication state provider this provides us with information about the uh authenticated users and if the user is not signed in or or actually if this is authenticated property is actually false and what we'll show is actually we will do this redirect login so we'll actually go or show this component which will actually do this redirect to the to the login part and this is uh what we actually need to do now if uh it's not found we can leave things like that i guess it's it's really important however once again the very important stuff here is we need this cascading authentication state and this cascades authentication information to the entire router component that we have here and inside this router component what we can do here is we can use an authorized view and then uh basically in that view we show the route data or the components actually that that will come back actually uh from this routing process and we'll use here this default layout and if the user is not authenticated we just will redirect to login and this will happen actually as the routing occurs now uh there is one other thing i guess that we would need to do here is that in the main layout part and in this main layout uh where is that actually what we need to do here that's actually very very very easy is here in this box what we will do we just provide the login display component it's important because in this component we have the button for login for logout and the entire logic for signing out which is very very important because this will actually display the button uh on our application and let's rebuild the application because that's uh at least at this point we should be able uh to check if authentication really works as expected so let's wait just a few seconds that we do a rebuild okay we have here this morning i just uh so let me run this once again and see what happens oh okay we are redirected to our page which is cool um okay and here uh it's uh authorizing and here we have an exception uh so let's just close that and let's just check what type of exception did we have here uh it should be on output let me let me just just briefly go through this and see exactly what what we have microweb assembly diagnostics okay response something didn't went well there um a debug this is actually what what we need uh so what error do we have authentication state service in it uh was undefined so it's actually a problem with javascript so we just have to look into what the problem is right now so what i think is uh simply a problem that maybe things didn't really um get shipped correctly to the browser so i would just like to do a clean solution before that because i guess some things are not shipped correctly so let's just uh try once again right now after we did clean the this solution and hopefully this would work right now if not we will have to look actually in in the network to see if if the authentication server.js file gets served if the app settings.json file gets served and things like that uh so right now right now it works so we see that hey we have this hello world now we have this login here so uh let's see if that actually really uh works here check you see that with checking login state this is this comes actually from this remote remote authorization view and here of course we need to sign in and i'll use my azure id account that i have here hopefully i typed it correctly and i have a password for that hopefully it's the correct one uh no of course let me try again uh it should be this one come on uh okay um maybe your account password are incorrect i don't remember your password uh you know what let's let's reset it now but i was fairly uh sure that uh oh it's come with this with this capture thing i i really hate that uh so let's try again uh i'm not sure i hope that i'm using my correct account that i have in that azure active directory oh it's still not correct just just give me just a second uh sorry for for that uh let me i will go back to my azure active directory right now uh just um just give me a few a few seconds for that uh because i just want to check here on all my users and maybe i reset the password for that one uh okay and this should be this one but i don't want you to see this entire process so this is why i'm actually uh hiding this uh right now because well there are some there are some information about that that user that of course i don't want to be public but what i'm doing here i'm using the azure portal and the administration now features that it offers us and there is a reset password and it will generate actually a password that i would have to change on the login but then i can actually use this password right now it was generated automatically by azure so that should uh that should actually do it of course i will have to change right now my password again probably and i also need to get the multi-factor authentication code and hopefully it doesn't really take too long for it to arrive and i guess it should be there already and it should be i guess uh it's still not here okay now it arrived it's uh this one uh four zero eight and it should be okay so let's verify that and here of course okay current password uh then um let's create a new one and let's click here sign in okay and you see that here uh when i arrived to this uh sorry you can't see my screen right now let me change uh so i essentially what i did i did reset my password but and and once i did that you see that uh this pop-up actually uh informs me about some very very important things first of all it it gives the inf it shows me the name of the app that currently wants to uh authenticate me and then it says that uh this application is not published by microsoft of course because it's an application that we have created and it says here okay this uh is or these are the permissions that actually this applications would like from you is this view your basic profile and maintain access to data you have given uh it uh access to this would essentially mean it it can actually sign you in and sign you out so i have to consent this and to accept that and i have to do this only once of course for each app and then you see that i am logged in and it works because right now this login display just displays here my display name and i have here this logout button so this thing works right now we have implemented authentication with azure active directory so what we should do next is of course uh let me just look out first of course i will be redirected i would log out for from that account uh and i am redirected here to the logout callback and here it says you are logged out so even if i'm not logged in i can still have access to this uh to this type of uh of stuff and what we said earlier is that what we actually want to achieve right now is that we actually want to make this available only for authenticated users so let's stop this application right now and uh take a look uh into how we should actually do that and it is very very easy to do actually so the only thing that we would have to do is of course we need to go to the patch data component because this is where we want to implement this and as said once we have this entire authentication mechanism implemented uh giving access uh to certain components only to authenticated users is totally trivial easy in blazer in fact the only thing that you would have to do is simply use this authorized view component that we have in blazer and this this will actually check the entire authentication uh state that we have in the app for that specific user and here we have two sub components uh first of all uh for the case that we are authorized so that we are authenticated and then we have uh for not authorized so it's easy as that you just have to use this authorized view component then in authorized specify what user should see and not authorized you can then specify what user should see if the user is not authorized so in our case of course if user is authorized we want to actually show this entire stuff here so this means that we will take everything to the entire part but we'll have also to include this if uh because that's important so it actually ends here uh so we will gonna control x everything here but sorry we should also include that header uh so let's do this from scratch we should even include this one so all this stuff that we had previously on the page should only be displayed if the user is authorized so we put everything then inside this authorized part and then of course what we want to do here is in did not authorized we can just simply maybe uh say uh display a simple message you are not authorized to do this please login to access letter forecast and this is what we want to display if user is not authorized and i said that's easy so it's nothing too complicated so right now if we run the application again at first we shouldn't be authenticated of course and then if we go on this fetch data i would expect that i should see that text that i am not authorized to access that specific data and in fact is exactly it is exactly that one so you are not authorized to view this i have login to do that so if i go to login let me just log in again so it would be this user and hopefully this time i remember my password it should be this one i guess oh oh my god do i really always do typo typos hmm am i really using the correct user sorry for that one uh it should be this one it should be this one so it should be correct let me let me try again sorry for all this stuff let me know something something is wrong here just give me one second okay so right now my password is correct and here stay sign in i would say yes so right now as you can see uh i was logged in and if i go right now patch data patch data is displayed so previously you know that uh we couldn't or we could see this data even if we are not authenticated but as we did that change right now as you see if you go here let's let's go maybe on logout just to show it again it will go through this entire logout process it will redirect me to my application just in a second and right now if i go and fetch data i just see that i am not authorized to do that so instead if i go to login again uh this time i guess it should be authenticated because uh okay here we go again with the same fun with our password but in this case uh it was the correct one so i just have to wait once again for uh the message to to arrive but i guess it's really not important to do that because we have already seen that it actually works so we can actually close that so once again as a summary uh once we have implemented the entire authentication stuff with azure active directory in our blazer web assembly app when we want actually to make sure that we can have access to certain components only if we are authenticated then we have to place actually those components inside an authorized view and inside this uh this authorized view we can have a sub views i would say for the content that we want to display if the view is uh authorized and what we want to display if it is not authorized and here for instance what we could do is even instead of displaying this text we can just uh use our redirect login component and we will actually kick in the login process for the user just in that specific moment when the user navigates to a certain area of the app in our class or in our case to dispatch data component that we kick in already this entire open id connect flow so guys thank you very much for watching i know that this has been a very very long video but i think that this topic is very very important and i'm actually quite happy with what we managed to do today or in this video because we essentially took an application that had no authentication to it at all it was a blizzard webassembly application and we have implemented authentication in this blazer webassembly application with azure active directory and of course following this uh open id connect um standard uh by implementing the microsoft authentication webassembly.msl library uh and yeah that was actually it from now on we have enough we have an application uh that uses authentication and shows certain parts of the application only for the authenticated users so this being said thank you very much for watching if you found this content up useful to you and just don't be shy and share this with your friends with your peers through your social network email or whatsapp text messages whatever you want but just share that if you think that it might be also valuable for others and of course if you didn't subscribe to this channel so far please do that it would be really highly appreciated so you would also keep a track or would be notified whenever actually we post some new content and we try to really do this fairly often at least twice a week so once again just subscribe and if you have questions if you have some feedback if you just want to say something or if you have better ideas if you didn't understand something from this video just don't be shy use the comments we are here on youtube we have a nice community and i'm always happy to take the discussions and uh yeah maybe new new ideas come from those discussion and my my hunch is that discussions around this type of topics are always useful for all uh the involvement and of course for all the for all viewers that will actually read the comments afterwards so in summary just don't be shy and use the comments and get in touch with me once again thank you very much for watching and until the next time i wish you the very best

Channel: Codewrinkles

Views: 2,042

Rating: 4.9183674 out of 5

Keywords: Blazor, Blazor WebAssembly, Authentication, OIDC, OpenID Connect, Web Development, ASP.NET Core, C#, Microsoft Azure, Azure AD, Azure Active Directory, .NET Core

Id: 6_whkHfg5bo

Length: 59min 52sec (3592 seconds)

Published: Sun Jan 17 2021