Authentication using MSAL Auth Code Flow with PKCE in 10 mins!

hi everyone uh today we will be building a single page application uh using amstel earth code flow with pixi and we will be also covering how pixy works and uh we'll also get into details why authorization code flow is not secure so this is the application which we will be building and this application will have two options sign in using the pop-up and sign in using the redirect method okay let's get started so i'll first cover the basics how authorization code flow works okay and what extra steps pixi is adding all right okay let's get started so here is my user who wants to access his resource okay and this is my authorization server and user wants to access to this resource and user sends a login request to the application and say see i want to get to my resource okay and application issues the http redirect request to the authorization server okay and the authorization server issue redirect and sends a authorization code and says hey here is my authorization here is your authorization code you can use this code to get access to this resource okay so now applications is okay and it issue a http post call and pass the authorization code to the authorization server and says hey here is my auth code can you get me access to this resource so authorization server validates auth code and uh sensor access token back all good uh looks good right uh application validate authorization server validates the auth code before sending the access token so this looks fine till the point hacker comes up and what hacker does is hacker somehow managed to get the auth code from the authorization server which was uh intended for this application right now hacker says to authorization server he uh here is my authorization code can you get me access to this resource right and authorization server validates the auth code and it gives the access token so uh this is how like it's unsecured right so now um let's see authorization code flow with pixi and pixi adds couple of extra steps okay here is again the same user comes and says to the application that i want access to this resource and what application does is it it its application is more intelligent this time what it does is it generate a code verifier you can assume it as is some random string okay and it also generate a code challenge which is hash of code verifier like it's a sha 256 hash of code verifier which comes to this spring okay so now what application does is it issue a redirect to the authorization server or same like before but this time it passed two extra things like code challenge and challenge method it says that okay this is my code challenge and this is my challenge method the url will look like this like along with the client id and scope response type other basic details what application does is it pass the code challenge right and code challenge method 256 basically this hashed value application passed to the authorization server so what authorization server does is it process this information code challenge and challenge method temporarily and it issue a auth code so now application what application does is application says okay here is my auth code and here is my code verifier so previously application passed the code challenge right now this time it passed a code verified it says that hey here is my auth code and here is my code verifier can you give me the access to this resource so what authorization server does is it generate a sha 256 hash of this code verifier right and it matches it with the code challenge which was sent previously if both code verifier and code challenge matches then only it gives the access token so once application sends a request it validates it has this value and validate with the code challenge and see if there is matched and it says hey there is uh here is your access token all right so what happens when the hacker comes right so again hacker managed to get auth code somehow right and it says to the authorization server he here is my auth code and it generates some random code verifier because a hacker doesn't have this information right or the code verifier information because this is with the application okay and uh so again authorization server generate the hash of this code verifier and matches with the code challenge right which was generated previously obviously both will not match and this code this call will be rejected okay so i hope you understood uh let's move to the code like how to code this part so microsoft provides a pretty good documentation on this one so you can just search in google amsa lot code flow with pixi you will land into some samples link uh i'll also add this link into my video description so you can just go to the parent and download the zip file okay so i have extracted this zip file here so this is how it looks like and application which is running right that i have uh build a vanilla application there are a couple of options like uh typescript one or with the angular and bunch of bunch of stuff is there in this zip file so i am interested in only in vanilla javascript application so uh uh here are the important files like if you expand the default folder so this has four or five important files so first one is definitely the html of this page which you are saying right is coming from this index.html so when you run this application first time just notice if your amsah browser library doesn't load right so what you can do is uh you can just uh fix the path accordingly so for example here from like i have copied the library into the same folder so you can see if that helps okay so this was all about html which we are seeing and now is the auth con config right so when user clicks on sign in using the popup so this redirection and which ad app to use for authentication so all these details are configured in the auth config file so as a prerequisite what you have to do is you have to configure the ad app right into the azure portal and then you have to configure the authority url okay so i have created all those right and next is uh when you actually click on the sign in button so if you open the index.html right so on click of this button it calls the sign in method of this javascript which is in our.js so it calls the sign in method let's say sign in type is popup right what it does is it just called the amsells existing out of the box method login popup and if that call succeeds and then call back it calls this method handle response so what it does is it just checks if response is not null it just shows the welcome message let's see how it looks like so signing using popup so i if you see in this url right so i had copied this into the notepad so it passes the code challenge and um code um challenge method which we discussed in the ppt right so let's let me log in quickly so what i'm doing is i'm trying to log in into the application sticking couple of seconds yeah there you go so i am logged in it displays correctly welcome sheetal so i use the sign in pop-up method so you can use uh the redirect to so let's see look at the calls network traces right so here is the token call where uh application passes the code verifier which is this step it pass the code verifier and authorization code you can see the authorization code right here right and then um this authorization server validates that code verifier and code challenge and then it sends a bearer token into the response this is how it works so um there are there are like uh it's two three more methods like same existing uh method m cell methods that call for redirect and for sign out and for logouts it's pretty easy so you can go through that and for the welcome message some of the stuff like this welcome message and the things like that which you see on the ur ui right on this code is into this file ui.gs like show welcome message and stuff like that all right uh and there are a couple of important things because you are using the amstel auth code flow with pixie right it's a single page application so you have to configure uh the redirect uri so if you go to the assured portal so i've taken the screenshot so what you have to do is you can go to the authentication tab and here in the section single page application section you can add the redirect url of the local host or to the your app wherever like whatever you are using and to run this sample uh what you can do is you can just uh use localhost one three three seven port yeah so this application is running on the local host now and that's pretty much it if you have any questions do let me know in the comments i'll try to help out thanks for watching if you like my video don't forget to subscribe to see more such videos thank you

Channel: Sheetal Chhabra

Views: 622

Rating: 5 out of 5

Keywords:

Id: -q_XBsyYzrM

Length: 11min 26sec (686 seconds)

Published: Tue Jun 22 2021