React SAML Authentication with Typescript

[Music] so the purpose of this video is to show you how to use octa's saml integration with react or any sample integration for that matter the reason that i found myself doing this is because i have an octa dashboard and i needed to have a way where i would click the tile and it would automatically authenticate me into my website without having me log in again so octa does provide a sdk for react and i'm pretty sure they have it for other javascript frameworks as well but the problem with that is even if i clicked the tile in my octa dashboard and got redirected to my website it would still ask me to log in again and that's very inconvenient and being lazy as programmers we don't want that to happen so in order to get single sign-on with saml to work which in this case would be i go to my website if i'm not authenticated it redirects me to octa as octave as my sign in provider and then once i sign in it redirects me back with my credentials you actually need a backend to help you do this with react as it's very very hard to get saml to work with react on its own so i'm going to show you in this video how to actually use react and then use node.js express back end with something called passport and i'm going to show you how to actually authenticate with octa so that it react detects if you're logged in or not redirects you to octa and then when you get redirected back you'll actually have those credentials that you wouldn't normally have when you're trying something like this with react you can think of the octa login as sort of a blanket protecting your application but also supplying you with the information you need so if you try and access this and you're not authenticated to octa you're going to get redirected to octa every single time and i should point out what i mean by redirected it actually takes you away from your website and then redirects you back with the credentials that it needs the last thing that i should point out to you is that i am by no means a professional when it comes to integrating saml with react i've just found a nice little way around it and it served my purpose and i hope this serves your purpose as well all right let's get into it all right so if you already have a base project set up you can skip this section but i did set up this project uh at its most basic form for you if you needed a starting point so what i have here is i have a client side and a server side the client side is react with typescript with just the application uh file being the also serving the page that's it and then the server side just being node.js typescript and express with a little bit of logging setting up the body parsing the access control a simple route that's just a health check where you just type in hello and some error handling that's it it's the most absolute basic react and node.js projects you can make so i'm going to start them up for you really quick too just to show you uh how basic they are so you can see here that just it renders the page and says hello i'm not authenticated with octa and then if i go to my back end type in my hello route you'll see that the server is running and it is returning my routes properly so again i don't have any fancy route setup or anything i'm just showing you the most basic things that i can and if you take a look at the console logging here you'll see that the logging is working and that's pretty much it for the base project so if you're integrating this into your own project as long as it looks something like this you should be totally fine and as long as you have insight of react one page you know serving all your routes and whatnot this is where you're gonna wanna put that authentication check okay let's move on to the next step the next thing we're going to do is we're going to go to our octa dashboard now mine may look a little bit different from yours this dashboard actually just recently updated for me so you just have to make sure you find wherever it is that you create a new application so for me on the left hand side here i'm going to go to the applications tab and i'm going to go ahead and click add application after i click that at the top right i'm going to click create a new app and i'm going to select saml 2.0 now you're going to have this little dialog here where you can edit a few things i'm going to enter my app name just i'm going to put like react saml integration or something like that here you also have the option to change your logo upload one check the little app visibility settings at the bottom i'm just going to hit next my single sign-on url is going to actually go to my back end which is going to be my logo host at one three three seven and then i'm gonna do slash login slash callback this is gonna be a post request endpoint and octa is gonna hit that with the proper credentials for my audience i'm just gonna put localhost one through three seven and then i'm going to leave everything else in its default format except for the name id format i am going to select email address because i do want the email address returned and confirmed by octa i'm going to go ahead and hit next and i'm going to say this is an internal app and then you don't have to click this option at the bottom but i will i'm going to finish that up and now you're going to see this part right here that says view setup instructions go ahead and click that it's going to take you to a page and it's going to have a couple urls for you and this this certificate make sure you keep this page open as we're going to need these urls and the certificate for when we actually configure our server side while we're on the server side here inside of the console let's go ahead and run an npm install for express session passport and passport saml and once you've done that make sure you run an npm install dash dash save dev and install the types for all the ones i just mentioned these are the three extra packages we're going to need on top of already having express in my base project once we've done that we can change directory to our client and then we can run an npm install axios and you don't have to install types for this because they are already installed for you automatically with the axios package one of the few packages that includes them for you already which is nice now that we've done that let's start off by adding two state variables to our application a loading that is a bool and an email that is a string the loading is basically just going to be for authenticating purposes and the email is going to be for actually grabbing the email from the octa-saml integration on the back end so it's gonna actually i'll have it rendering your email so you can see that we're actually pulling credentials from octa next we're going to add a use effect and let's go ahead and program out this use effect and then i'll explain the workflow to you after so first i'm going to go ahead and put in a little logging statement here i have a little logging library i included for you you can use console log though if you want and i'm just going to say checking to see if we are authenticated with express and octa or n passport whatever you want to put here next i'm going to be making a call to axios and i'm going to make my method get and the url i'm going to be picking it's going to be my back end and it's going to be to localhost at 1337 as my port and then for the route name i'm just going to put who am i because i want the back end to tell me who i am i don't want to actually provide any credentials from the front end after you put the url we're going to add one more statement here and it's going to be a setting called with credentials equal to true this is going to allow axios to tell the back end that we do want the credentials section of this to be activated so that passport and express authenticate us on the back end so it's going to be passing around our information as long as this is switched to true and it does this by recognizing where the request is coming from so we're actually going to be keeping track of this at the back end next let's go ahead and add a response function inside of a then block and first i'm going to go ahead and log myresponse.data.user because in axios as long as the request returns with a 200 or 300 or something in that range it will always go to the then block but if you are unauthorized it'll go to the catch block so here i'm expecting my response.data.user being passed in from my backend if that exists the response.data.user is going to have something on it called the name id which is actually going to hold my email and i'm not altering the object as it's sent from request from express i'm just using the object as it is if that doesn't work let's go ahead and put an else block and i'm just going to put a little placeholder here called redirect to login because i'm just going to make a function for this because i'm going to need to call it in two different spots in my catch block if there's an error i'm going to also put here redirect to login and you can also lock the error here if you want which is what i'm going to do the second part i'm passing to my logging functions is actually a namespace so i can differenti differentiate where the logging message came from now i can do a function called redirect to login and all this is going to do is run a window.location.replace and then i'm going to link it to my backend forward slash login so what this is going to do is check to see if i'm authenticated or not if not it's gonna hit this function and actually redirect me to my back end and then the back end is going to try and authenticate me with octa and this is how we get around using saml with the front end by tricking it through the back end next let's go ahead and check to see if we're loading if we are just return a paragraph that says you're loading with like dot dot finally we can go to the return and it says hello i'm not authenticated with octa change that to hello i'm and then pass in the email which we'll be receiving from the back end lastly replace the comments redirect the login with the actual redirect to login function and that should be pretty much it for the client side that's everything we're going to need because when we call the back and the back end's going to be doing all the authenticating for us i'm going to go ahead and run this npm start and just test this out really quick to see what happens so you can see that the page is loading and then eventually because the backend's not even running you're going to get some sort of error here but you'll see at the top that we actually did redirect to our localhost 1337 slash login so what's going to actually happen once we get that working is that link is going to be protected by passport in our backend and passport will actually redirect us to octa to sign in if we're not authenticated if we are authenticated it's actually just going to shoot us back to our front end and we'll have the credentials when we call that who am i route a second time now that we're done with that let's go ahead and move on to the back end for the back end let's go ahead and open up our config.ts file and start adding some configurations so the first set of configurations here i'm going to make is going to be in a saml code block and inside of it i'm going to have a few things that we're going to need for passport so the first thing i'm going to have is a cert followed by an entry point followed by an issuer and then followed by some options inside of the options block let's go ahead and put failure redirect and just have that to our login and then we can put a setting for failure flash to be true these are settings that are going to be used by our saml setup i'm going to go ahead and leave those blank for now those other settings and let's go ahead and create our express session settings so below the server block let's make a session block and we're going to pass in a few more variables we're going to have our resave variable equal to false for secret you could put anything you like i'm just going to put super awesome secret and then for save uninitialized we're going to want to make that equal to true so that it saves the saves you the first time that you try and log in now for the cert we're going to go ahead and make that equal to our source config folder and then we're going to have it linking to the sample.pem file which we haven't created yet now when you run an npm build on this this directory is going to change to your source uh instead of source config sam will be something like build config sample so make sure that you have this variable updated when you run a build for our issuer we're going to go ahead and just put our http localhost like we did inside of our octa config now for our entry point what we're going to want to do is we're going to want to copy that first link on this page that i told you to save and that's going to be the actual entry point link that our saml authentication is going to use and now that we have all these settings done let's go ahead and create a new file called saml.pem and then you're just going to go ahead and copy and paste that x.509 certificate into here and that's all you need for the sample.pen file so that's all taken care of too i haven't checked if you needed the permission set properly or not but if you do have to change the permissions on it just make sure you make sure you chmod it to either 600 or 400 as far as the configuration goes that's pretty much all we need for that so now we can go ahead and set up our passport library configuration so again passport is what's going to help us with the saml authentication so inside of our config folder go ahead and make a new file called passport.ts inside of that we're going to throw in some imports at the top we're going to start by importing fs from fs we're going to import passport from passport we're going to import a module strategy from our passport-saml we're going to import our config from our config file and we're going to import the logging from our logging file again i'm using a login library that i created you can use console.log now we're going to have a variable called savedusers and it's going to be an array of express.users the reason we're using the express.user interface is because that's what's provided to us by express session we're going to go ahead and passport.serialize user we're going to define the serialize user function we're going to pass in express.user into the chevrons this returns a callback with our express user and a done function inside of it i'm just going to log the express user that's being serialized and then i'm going to call the done function by passing in null and then the express user itself next i'm going to copy and paste this and we're going to use this for our deserialized user because it's going to look exactly the same we're going to pass the serialized user into the comment and change the function to match it accordingly now these serialize and deserialize is what helps passport and our express backend take care of the variables that are being passed around when your browser is authenticating with the back end this is also what we're going to be using to extract our email later in the function now we're going to do a passport.use and we're going to be passing in a new strategy inside of that strategy we're going to have an object block that's going to pass in some options those options are going to be our issuer which is just going to be our config.saml.issuer we're going to pass in our protocol which is just going to be http uh colon forward slash forward slash this would be https if you do have ssl enabled our path is going to be our forward slash login forward slash callback that's what octa is going to hit when it authenticates us our entry point is going to be our config.sample.entry point and then our cert is going to be in fs.readfilesync and then we're going to pass in the cert and it's going to be of the utf-8 encoding once we're finished with that pass in a callback function inside of it we're going to have our express user undone however since we're using typescript we're going to have to attach the any interface into this in order to get it to work properly check the save users array to see if it includes the express user and if it doesn't push them into this array so now if the user is inside of this array we're going to know that they're authenticated and we don't have to keep redirecting them to octa after that go ahead and return done once again by passing in null and our express user so that's pretty much all we need for our passport authentication once you've done this go ahead and open your server.ts file and we're going to go ahead and just import our config passport at the top we don't actually have to import it as a module we just want to import the file itself so passport initializes everything we just wrote next at the top of our server file we can import session from express session and we can go ahead and import passport from passport now we're just going to add a few extra things inside of the server file in order to hook up the integration fully so where i pop parse the body of the request let's go ahead and add a few more things here i'm going to type in a router.use session and inside of the session pass in the config.session then i'm going to use a router use and i'm going to do a passport.initialize and a passport.session next inside of the rules of our api we have to actually add one more rule to allow us to pass the with credentials from our client side so what we're going to do is do an access control allow credentials and have that equal to true that way we can pass the credentials back and forth now we're going to add a couple of routes to finish off the octa integration so the first route that we're going to add is a router.get the path is going to be login we're going to add our passport.authenticate the type is going to be a string that says saml and we're going to pass in our config.saml.options then we're going to have a callback function with our request response and next functions inside of it we're just going to go ahead and redirect the user back to our front end or back to the client side which is going to be a response.redirect to our localhost 3000. the reason that we're doing this here is that if they get by the passport authentication we know they're authenticated and then we can just return them back to the front end now when they get returned back to the front end it's actually going to call that who am i route we're about to write and actually pass the credentials to them but before we do that we're going to copy and paste our login and we're going to change it to a login. forward slash callback and this is actually going to be a router.post function so this is what octa is going to call to help log us in so if we're not authenticate with octa then this route will be used when octa does sign us in last but not least we can do our router.get forward slash who am i and then we can have our callback function and right here we can check that if our request dot is authenticated is false so that with the exclamation mark there we're just going to go ahead and return you can return a 401 on authorize or a 404 or whatever you want here but i'm going to do a 401 and i'm going to go ahead and log first that the user is not authenticated i'm going to pass into my response that a message may be saying unauthorized you don't actually have to return any json here as long as you have it returning the 401 so axios knows to boot it to the login page if we are authenticated let's go ahead and log it and say that the user is authenticated and maybe we can log the user as well and then we can return a status of 200 and we can return our user inside of a json return so that pretty much does it for the server side uh there is one more thing i do want to take a look at and that is making sure that you have a user assigned so make sure that inside of your octa application when you go to your actual application if you go to the sign on tab make sure that you've actually assigned this to somebody inside of your octa organization or they won't be able to log into the page so now that we have everything running it's time to test let's go ahead and start our client and our server and what i'm going to do is i'm going to open up a blank page here in a private browser and i'm going to make sure my logging is persistent and the reason that i'm doing this is just so we can see everything happen from beginning to end so let's go ahead and type in localhost 3000 and let's see what happens so right away you'll notice that in the url address above it happened pretty quick but we got redirected to our back end and now we're actually redirected to our octa entry point so we're going to go ahead and log in with one of our assigned users and once i hit sign in what should happen is it should post to the login callback and then that will in turn return us to our front end and then our front end should call the who am i one more time and when it does that we should actually get a nice little object with our user information inside of it now you can see that it navigated us to that login callback and we got our who am i called one more time we actually got a response this time with all our user information and you can see inside of the main page it says hello i'm and then the email i entered for my octu user and also you can see here in the console side everything that was logged you can see how everything works in order to better understand the saml integration and how i've done it again i'm not a professional but this was the easiest way and by easiest i mean insanely hard to actually get working but once you get this working the first time you don't ever have to do it again and it looks like that's a wrap guys uh thank you so much for tuning in to this video this one hit close to home as this was an issue i was trying to solve using octa's react library and i was trying all sorts of different login methods but uh the support for it just wasn't there and i figured that if i could get the sample log in to work with octo you get it to work anywhere so there you have it i hope you guys enjoyed it please like and subscribe and we'll see you in the next video [Music] you

Channel: The Nerdy Canuck

Views: 5,223

Keywords: react, saml, okta, sso, nodejs, express, typescript

Id: xUL59SKiwmE

Length: 23min 40sec (1420 seconds)

Published: Wed Feb 10 2021