React Authentication App With Okta

[Music] hey what's going on guys in this project we'll be building a react app location that uses authentication from a platform called ACTA I've also heard it pronounced okay des but it's similar to auth0 where it's a user management system that has authentication authorization you can use it across multiple apps and you can even have the apps built on different languages and platforms it's compatible with like ten different languages so what will be building is this react app called Acme staff portal and the idea here is that you're a business owner and you have staff members that you want to be able to access certain parts of the website or application and it's very easy to protect these these routes or these these paths so you can see I have a staff area here if I click on it shows me this nice sign-in widget which is actually a package we'll be installing along with the octo react package and if I log in here you'll see that it'll now allow me to access the staff area okay now this is just basically a welcome page but you could have this be anything you want I'm actually plucking the name the email from the token because once we authenticate we get this token in local storage this octa token storage and then if we look at ID token there's a bunch of stuff here but there's a claims object and this has the email of the user and it has the the name of the user so I took that out and put that in the page and if I go back to home you'll see that the login button is now a log out button this text has changed if I go ahead and log out you'll see it'll change back and now I can't access the staff page and again it's really easy to to add routes and protect them and then on the back end of octa so this is like the dashboard you have all kinds of metrics you have a really nice log of everything that happens with every user and you can see all the different platforms you can develop on and use these this user base across you can see all your users here so we just logging in with this guy and you can see the applications that he's assigned to so in this case Acme staff portal is the only one I have but I could create something else in like let's say c-sharp net and we could we could add him to that application as well all right in under applications you'll see the the app we're gonna go through this and create it get the client ID and all that stuff alright we will kind of be following this documentation page I'm gonna put the link in the description it's a good resource and it'll help us move things along a little quicker alright so that's pretty much it guys you will have to create an account at developer talk to calm and I'll explain more of that as we move along but that's it let's get started alright so the first thing you want to do is create an account at developer talk to calm okay make sure it's the developer sub-domain and just go ahead and click sign up and it'll just take you through a process where you fill in this information you'll get an activation email follow the link in that email and log in and you should see something like this okay so this is your octa dashboard now I'm not going to go through all the the the areas of this dashboard just basically the the ones that we need so one thing I want you to notice is the the org URL which is in my case dev - this number dot octa preview com so yours will be different the number will be different but it should have this octa preview com domain so we will need that in our application and it just shows you some metrics so your total user is the the authentications failed logins gives you a nice little system log of everything that's happened if we click on and by the way these are all the different platforms that you can use octa with so react PHP node dot net Java iOS and Android and angular so if we go to users this will show you a list of all of your users I only have the one user but you know you can add them and I will show you how to do this later on and you can have an email get sent to them so that and then this would be for instance staff member and then they can follow that and create their own octa account and then they'll be able to log into your react application or whatever type of application you create and then we can manage the user we can assign them to different applications we can even have groups we can put users into groups and so on so it's pretty cool what we want to do now though is we want to register an application okay so we want to register our react application that we're about to build so if we click on the applications link and click add application we want to choose a single page app okay you can see it says angular react etc so we want to choose that and we want to name it so I'm gonna call it Acme staff portal and we want to change the number here of the ports okay we're using create react app which has a dev server that runs on port 3,000 so we want to change this 8080 to 3,000 same thing right here this is the login redirect URI which is the callback so it's implicit slash callback but we want to make sure we change this to 3,000 all right and then the rest of the stuff we can leave and we'll just click done so now our application is registered and down here you can see it has its own client ID so now we're ready to start building our app so let's open up vs code or whatever text editor you're using and you're also going to need a terminal I'm going to be using the integrated terminal and we want to create a react app so I'm going to use the create react app CLI tool if you don't have that you can install it if you're on a Mac you want to do sudo npm install - g4 global and then create - react - app ok if you don't have it installed already go ahead and run that I already do so I'm not gonna run it but once you do that and by the way I'm in an empty folder called react octa staff portal okay so that's the empty folder that I'm in and I want to generate the application here so I'm going to say create react app and then dot that'll bring all the files into this this particular folder all right so now that that's done we can actually run our dev server by doing NPM start and we just get our default layout for the create react app boilerplate and then what I'll do is I'm gonna keep the server running and just open up a new terminal so I'll click the plus sign here and open up a new terminal and we want to install a couple dependencies so I'm gonna say npm i or install and we need to react router because we want to be able to create routes and we want to be able to protect certain routes so that they have to login so let's say react - router - dom so we're using version 4 of the router we also need to octa packages one is octa react which is the main package to kind of bind them together and then we also want the sign-in widget package which allows us to have that really nice-looking sign-in form and all the functionality that it comes with so this is going to be at you want to use the @ symbol octa slash octa - react okay that's one of them and then we want at octa slash octa - sign in - widget okay so we'll run that and those are the three dependencies we need let's look at our package dot JSON file and they should get at it as dependency okay so there we go that should be all set we'll close that file up now what we want to do is start to create our components before we do that though I do want to use bootstrap so there's a few ways we could use it we could install it as a package but I'm gonna take the easy way out and use the CDN so let's go to get bootstrap comm and go to get started and just let's grab the CSS file okay so I'm gonna grab that we'll go back to vs code and we want to go to our public folder and then index.html and I'm going to just get rid of these comments here I hate these comments and we're going to put this right here it'll change the title as well let's change it ooh Acme staff portal and then down here is where we want to put all the the JavaScript references for bootstrap so let's grab those from the same page here so we need jQuery we also need popper and we need the main bootstrap j/s file so let's grab those and let's go back to vias code and paste that and right above the body tag and by the way I'm using the prettier extension which is why you'll see that at Auto formats on save something that I would recommend if you're using vs code so that should be it for this page we don't have to touch this anymore and now if we were to go to our application you'll see that some things have changed such as the font and so on so it is using bootstrap now I'm going to kind of clean this up a little bit we don't need like the logo so let's get rid of logo dot SVG I'm not a fan of just keeping things around that we're not going to use in the app j/s will remove the reference to the logo so we'll get rid of that and the app dot CSS which is like the global CSS I'm going to just get rid of all of it but I am gonna keep the app CSS file in case you want to add some some of your own styling and then in the app j/s as far as the content goes let's get rid of everything that's in the main div for now so we'll get rid of all that clips in that just the div and let's just put an h1 here we'll just say hello okay so now let's go back to our application and it should look like this just a Hello so now that we cleaned things up a little bit let's create our components folder so we're gonna go in the source let's close up public and in the source we're going to create a folder called components okay and we're gonna have we might as well create all the different folders and files we need in here so one folder I want is called layout so this is where things like the navbar will go if you wanted a footer or sidebar stuff like that but all we're gonna need in here for this application is a nav bar so we want nav bar dot Jas okay another folder that I want in components is off and that's where anything to do with the authentication will go with octa so I'm going to create two files one is going to be called logon J s and then one is going to be called sign-in them using camelcase here sign-in widget dot J s okay so sign-in widget will be that actual login form with the functionality and stuff but login J s will be its wrapper okay now a third folder that I want to create inside components is pages okay so any pages that we want to create so we're gonna basically going to have two pages one it's going to be the home page so we'll say home dot J s and then we're also going to have the staff page so staff dot j s okay so that's basically the structure of our components now next thing I want to do is let's just add our navbar since that's a pretty simple component so I'm going to just close all these up except navbar and app J s and when it comes to creating components in react you can have stateless functional components or class-based components so you can have like smart and dumb components in our case navbar is going to be a dumb component because it's not going to have its own State or anything like that but I do want to use a class just just to keep it just in case we want to add something to it later in case you want to add state to it later or anything like that so what we're going to do is I actually use a an extension in vs code that I would highly suggest called es7 react Redux graph QL react native snippets and it gives you a whole bunch of snippets to create just about anything with those technologies so to create react components to to add prop types even console commands to do console logs and clears and so on but to create a react component we can just do our CC tab if we wanted a functional component we could do our FC tab which is right here our FC and there's a bunch of them so if you want if you want to format them different ways and stuff react native stuff graph QL it's a really really nice extension one of my favorites so what I'm gonna do here is I'm just gonna do our CC tab and wow it actually named it navbar that's weird it usually doesn't do that maybe there was an update or something but if it doesn't give you the class name of navbar just go ahead and put it in and then the export default I like to move to the bottom so we're just gonna say explore default and then the class name like that alright so now we're gonna have some links in this navbar obviously so we're gonna bring in the link component from react router so let's say import link and basically we use this instead of a tags okay I know a lot of you guys that work with react you're gonna know some of this stuff but I want to explain it for those of you that don't so we're bringing in link and then instead of typing all this out I'm gonna just grab it and paste it in and just go over it it's basically just bootstrap markup so let's paste this in alright so and if you don't want to type all this out you can look at the repository in the description which has all the code so basically we're returning one main element of nav has the class name of navbar we want nav are expand small which if you know anything about bootstrap you know that this basically means that we want the responsive navbar to kick in at ends on small screens okay we're going to give it a background of dark we're gonna do margin bottom four just to push things under it down a little bit then we have a container then we have the branding navbar brand and remember we're using link instead of an a tag so link takes an attribute or a property of two which is basically where the link is going to go so it's going to go to the home page under that we just have the responsive button which has the data toggle data target class our attribute then we have our ul here which we're gonna align everything to the right by putting a margin-left:auto class then we have two Li tags with two links inside of them one is the home goes to the slash one is staff goes to slash staff and ultimately staff is going to be a protected page or protected row so that should be it for the navbar so let's save it and then let's go to our app.js file and let's bring it in so we'll say import so important a VAR from and remember it's in components slash layout slash navbar now if I go down here into our main div and put in navbar you may think it's going to show but we're actually going to get an error so let's see what that error is so basically it's saying you should not use link outside a router so we're using the link component that comes with react router but we haven't set up our actual router we're just still displaying just a div on our main app J s we just have a div with the navbar and this h1 so we actually need to set up the router which is which is pretty easy so to do that we need to bring some stuff in from the router so let's say up here import and we want to bring we're going to be using browser router jeez I can't spell today or any day really so browser out it but I want to use it as router so don't actually have to use a browser router tag and then we also want route okay and we want to say we want this from the reactor router DOM and then what we'll do is go down to our render and this div this parent div has to be wrapped in the router for it to work so we're just going to put a router and down here we're gonna put a router okay so we want to wrap that now let's we have our navbar and then the navbar we want on every page but underneath that is where we want to put our routes so let's put in our first route so we'll say route path equals slash and then we just want to set exact equal to true because we want it to match exactly and then we want to define the component that should load when we reach this path okay so the component that we want to load actually we don't want quotes here we want home now I'm gonna just copy this down and put one for staff so this will be slash staff and the component will be staff now right now react does or the component doesn't know what home and staff is so we need to actually bring those in so let's go up here and let's bring those in so we have home and that's going to be and remember we put that in pages pages folder and let's say home and then this one here is gonna be staff and also in the pages folder okay and we just want to change the the import to staff all right so I can save this but there's nothing in home and staff so let's do that it needs it actually needs some content in there so let's go to home and ultimately this is this is gonna have quite a few stuff in it to do with octa and to do with like checking authentication we're gonna have our log in log out button but just for now I'm just to get the routing and the pages working I'm gonna put a functional component so RFC tab and then let's just put an h1 in here that says home okay so we're just exporting a default arrow function and just returning a div with the h1 of home and then for staff we'll do the same thing I'll just copy this will go here and we'll put in staff all right so let's save that and if we go back to our application it should look like this now one thing I want to do is I want to put the main content in a container so it doesn't go away over here I want it to end like right here so in app dot Jas let's wrap our routes not the navbar we don't want the navbar in the container but let's wrap our routes inside of a container div okay so we'll go down here and end that and now if we look now it's in the middle and if I click staff we can now directly we can get directed to the staff component our staff page alright good so let's see I just want to quickly initialize a git repository and just commit this so I'm just gonna and you guys don't have to do this but let's see let's go down here and clear this up I'm just gonna say gets an it and let's say get add all and let's do a git commit and and let's see we'll just say basic set up and say router basic set up and router whatever it doesn't really matter alright so next thing we want to do here is we want to start to implement Octus so I'm gonna go to that documentation page which is this here and I'll put the link in the description but we're gonna be using a ton of this code okay so I want to start with a pas and like many like like most documentation you know its laid out in a weird way it doesn't give you like a nice a nice put together tutorial to build something so I mean and that's that's kind of what I try to do with my videos is take complicated vague documentation and show you a way to actually build a project with it but what I want to look at here is their app KS so basically in order to use this octa react package we need to bring in a couple things security secure route implicit callback we need to wrap everything that is inside the router in this security tag okay are the security component and then we need to apply a bunch of properties to it including our issuer which is our basically our domain our octave domain /o OAuth 2 slash default we also need the client ID and so on so let's go ahead and let's bring in that stuff into AB j/s so we're gonna go up to the top right under where we have the router and let's import some stuff so we'll say import and we want security we want secure route ok so key route is used to just to do just that create secure routes that are protected and then implicit call back and those are gonna all be from the ATS octa react package all right now down here like I said in the router we want to wrap everything inside of that security tag so we'll say security and let's end it right here and then this security this takes in a bunch of stuff so if we go back to the documentation actually what I'll do is just copy this whole the security tag with all the attributes again you can type this out or you can copy it and paste whatever you want to do so in here the issuer like I said is your domain /o auth slash default now your domain as I think I showed you is in your dashboard it's gonna be if you go to dashboard it's going to be right in the corner here so we want to grab this yours is different please use yours not mine I'll actually be deleting this account anyway and we're gonna just replace the whole domain right here okay make sure you keep the the OAuth to default but just change the domain and then for the client ID we want to go to our applications go to our act it's actually right there as well but if we click here and go to general you can grab the client ID here okay so we'll go ahead and do that and you don't want to put it in between the curly brace yeah the curly brace is just paste it in and then the redirect URI is just gonna be this window location origin and then they're adding on this implicit slash callback which you can see is this right here log and redirect URI and then this on author quired basically we need a function that's going to redirect to somewhere if if they're the they're not authenticated and they're supposed to be so we're going to go right above the class of app and create a function called on/off required okay and that's going to take in we're gonna put in some curly braces and put in history and then all we want to do here is take that history object which has a push method so this is basically just like a redirect and we want it to go to slash login okay and now this on author quired is set to that function on author quired now the staff page i actually want this to be private or secure so all we have to do is use secure route instead of route so I'm gonna go ahead and just do secure route and then for the login page it's a little weird but if we look at the docs and look at login we want to set it to not just component equals login but we need to use the render render attribute or render property set it to an arrow function that points to the login page or the login component and we want to add in our base URL as well okay and then route under that we want the implicit call back now we don't have to actually create this octa hand off the react Hanzel handles this on its own by putting in its own implicit callback function which is brought in right here so i'm going to copy these two lines and we're gonna just put those in here okay now you want to make sure you change your domain so my domain is this right here so I'm gonna grab that and just put that in here and that'll get passed in as the base URL because this logging component is gonna need this and I think that's it guys as far as app J s goes so we can go ahead and save this one thing we're gonna do we're probably going to get an error because the login page let's just check real quick yeah log in is not defined so we need to bring that in as a component as well just like we did with the rest of these so let's go ahead and that so login it's gonna be in off and it's gonna be slash login all right so if we look at it now if I go to staff you'll see it redirects us to login ok now login isn't showing anything because we haven't we haven't added anything let me just check something on what time yeah so if we and if we type in staff yeah so it redirects so so that part of it is working now what we want to do is go to let's see we're actually going to create our sign-in widget first the login page is basically like a wrapper for the the sign-in widget ok the sign-in widget is going to be a child component of the login so let's um let's actually grab this from the the documentation so I think it's way up at the top yeah right here so they actually called it octa sign-in widget but we're just going to call it sign-in widget so let's grab that and in sign-in widget let's paste that in let's just change it from octa sign-in widget to just sign-in widget and I'm also going to export it down at the bottom ok and let's see so we're bringing in we're actually bringing in react Dom because we need that to find the Dom node to put this in and then we're bringing in octa sign in from the octa sign-in widget package and then these are brought in these CSS is this is brought in to actually style the the form the widget you could use a CDN and you're in your h2 index.html but this is a clean away do it so then we have our class in the render it's just a div and then in component did mount it's gonna find the element to insert this in by using react Dom find dom node and then actually passing in this component and then what we need to do is initialize an acht assign an object and we're assigning that to this dot widget and then this octave sign-in takes in some options one of which is the base URL okay and this base URL is actually available to us through the props and then finally we want to render the element so we're calling this dot widget dot render l passing in the element which is this here and then it's going to have a callback of on success and on error and these callbacks we're gonna handle these functions within login Jes not within this file because remember this is a child of login and then on component will unmount so basically when it unmount it's just gonna call the remove method on this dot widget okay and that should be it for this component so let's go ahead and save this and then let's head over to login dot J s now if we look at the docs and we look at the login page which is that's home let's see so if we look at login and I'll just copy this and paste it in and then kind of go through it okay now we're bringing in redirect from reactor router Daum we're bringing in the sign-in widget that we created which is not called octa sign-in widget it's just sign-in widget so let's change that and then we're bringing in with auth from octo react so this is basically a wrapper and it's it's similar to if you've if you've ever used Redux it's similar to connect you know how you pass city passes your stuff into Connect and then you export connect so what we're doing is exporting with auth and passing our class a component class inside of with off like that okay and it's class login and then we have a constructor where we're binding this to some of the methods and basically to explain this real quick for those of you that are kind of new to react in a class in a component class we have something called lifecycle methods so render is one render is actually one that's needed we also have like component did mount component will mount things like that which this is gonna work inside of okay and this refers to the actual class or the actual component when you create your own custom methods in the class this isn't automatically available to those methods if you do it this way so that's why they're saying this dot onsuccess equals this dot onsuccess dot bind and then passing in this that way they can use that this keyword inside of these methods but you don't have to actually do this if you if you'd make these arrow functions so what we can do is get rid of this these two lines here and if we go down to on success and on error we can simply now just change it to an arrow function by putting an equal sign here and then an arrow here okay we can do the same thing with this like that okay so now there's no need to actually bind this now in the constructor we have a piece of state which is a state is just an object and we have this authenticated value which is going to be set to null and then it's going to run that this the check authentication function so this check authentication is basically going to do just that now notice that it's asynchronous okay because this is this right here will return a promise and instead of using dot then and so on we're just labeling the function asynchronous and then we're using a wait to get the response okay so it it basically looks like it's a synchronous operation so this will this will tell us if we're authenticated everything is going to be put into this auth object inside the props because we have that wrapper that octa react wrapper around everything so that'll check and then we'll say if we're if authenticated is not equal to this dot state dot authenticated then we want to set the state to whatever it is so basically the state will tell us this will tell us if it's null if we're not authenticated or if we are and we want to run this on the component did update okay we want to run we want to check on ten ocation on the onsuccess it's just gonna basically redirect us to whatever's in this res session token' value if there's an error it'll just log it and then if we look at the render we're gonna say if the the authenticated value is equal to null then just return null and then we want to return a conditional okay so this is basically a conditional we're using the ternary operator and we're saying if this dot state dot authenticated then we want to redirect okay we want to redirect if if we are authenticated I'm sorry if we're not authenticated then it's gonna load the sign-in widget which should just be signed in widget and this takes in the base URL which is located in the props and then it takes the on success and the on error callbacks which are right here okay so hopefully that kind of explained what's going on it's just gonna display the widget and it's gonna add its functionality so let's now at least make sure that our staff route is is protected so if we go to Chrome we go to our application so this is our home page if I click staff there we go ok so now it's showing our sign-in page and if we try to log in here actually I don't want to log in yet because we don't have our logout button or anything what I do want to do is add our little custom logo so I created a very simple logo in Photoshop it's a PNG file you can get it in the github repository it's it's right in the public folder called logo.png so let me just bring that in let's see I'm gonna go to our project which I believe is in code prod and react where is it this is that's the old one where the heck is it all right let me just search for it let's see react acht right here staff portal alright so this is our application and I'm gonna bring this into the public folder let me just grab it real quick let's see code one second just doing this off-screen and if I can find this wine one all right don't that's not it where is it one second guys I can't find the logo where are you all right there it is got it all right so I'm gonna bring this over so it's just a logo PNG it's just something quick I made in Photoshop but now that that's in there what we can do is go back to vs code and go to our sign-in widget and right here where we initialize octa sign-in we can pass in an additional value of logo and I'm just gonna say logo dot PNG since it's right in the public folder we can just that should work so now let's go back and there we go we have our little nice-looking logo all right so now we're gonna go and we're gonna work on the home page okay because right now if we look at home it's just a functional component that just has an h1 if we look at the documentation and we look at home dot Jas basically we're doing kind of the same stuff that we did in the in the login okay so we want to bring in with off and then wrap the home class inside of it so rather than type all this out I'm gonna just copy it and let's just replace this ok so again I'm bringing in with auth we're wrapping it and then you can see that for the the custom methods here they're using buying this again so we can clean this up quite a bit I'm going to get rid of these three lines where they bind this to check authentication log in and log out so we can get rid of those and let's go to check authentication now this isn't a synchronous function so going like this isn't gonna work you can see there's actually an error here it says async can only be used in a TS file which is weird and false but that's the arrow vs code gives us but what we want to do is use this async here in front of the function like that okay and that should work let's do the same for login and logout so say login equals a sync and then put our arrow here same thing with logout so log out equals an async function an async arrow function alright we can clean this up a little more because now that we're not binding this we don't even need a constructor because we can set our state without the constructor by simply saying state equals and then our state objects so I'm going to completely replace the constructor with that and that will clean this up a little bit okay now let's go down here and see what they have for the actual render so basically they're putting their navigation inside the home page which obviously we don't want we created a nav bar and so on and then this button variable is just basically saying if they're authenticated then put a logout button if not put a login button now we're going to change this up quite a bit we're gonna use a nice-looking Jumbotron and you know we'll have our login logout button we'll also have some text that'll change based on if we're logged in or logged out so what I'm gonna do is completely get rid of all this in the return except for the div and then the div I'm gonna give this a class or a class name of Jumbotron okay and inside this Jumbotron we're gonna have an h1 with the class of display - for make it nice and big and we're just gonna say Acme staff portal now the content I want to put under here is going to be based on if we're authenticated or not so just like they did here let's see just like they did here instead of calling this button I'm gonna call it main content and then we do want conditional so if they're authenticated but we don't want this so I'm going to get rid of that and get rid of this okay so this block here will be if we are authenticated this one will be if we're not so we need to wrap we need one parent element which will do a div so we'll do that here in here so if we are authenticated then I'm going to have a paragraph with the class of lead and we're gonna say you have entered the staff portal click here and this click here I just want it to go to the staff page which is that protected route so we're gonna use a link to equals stat slash staff slash staff and let's end that here okay and then under the paragraph will have our log out button because remember this is if we're law if we're authenticated so we are logged in so we want it to be a log out so I'm going to give this a couple bootstrap classes BTN BTN - let's do light and let's make it a large button so BTN LG and then we'll say log out now this needs an event because we need to call this log out here which then calls the log out attached to this earth objects stored in the props which comes from octo react so let's see where are we right here let's add on click equals on click equals this dot log out okay and then if we're not logged in it's gonna be very similar we're just gonna have a div with the paragraph and a button so I'm going to grab this paste that in here and we're just going to change the content of the paragraph basically telling them that I will say if you are a staff member please please get say please get your credentials from your supervisor okay and then we need a login button I'm gonna just change this from BTN light - BTN dark and then it's gonna call this dot log in and then we want this to be login all right now last thing we want to do is take this main content variable and insert it into our return so it actually displays so let's say main content and let's save it and let's go back to our application let's go to the home page and there we go so Acme staff portal if you are staffing but please get your credentials from your supervisor so the idea is that you know when you get hired you'll get you'll either get credentials or you'll get an email sent to you to set up an account so that you can access stuff now let's go ahead and try to login because we haven't done that yet so we can either click on login or staff it's going to take us to the same place and let's let's do a login that doesn't work so it'll it'll do all the validation for you and stuff but let's do our account that we created so this is your initial account you created in the backend of octa and there we go so now we have access to the staff page okay and if I click log out you can see the logout changes to login if I go to staff it doesn't work okay but I do want to be logged in because now I want to work on the actual staff page so let's go back to vs code and let's go to our staff page so basically the staff page I just I want it to be a welcome message but I want to actually pull out the email and the name from the ID token because if we look if I go to my chrome tools here and we go to application and then under local storage you'll see ID token okay so we have ID token and then and claims we have the email and the we have a lot of stuff we have the email and the name which is what I want to grab so let's see how we gonna format this let's we don't want a functional component because we are gonna have some states so I'm gonna get rid of that and just put in a class-based component and let's see I'm just gonna just fall explore default down here okay so for State let's go up here and say States equals and we're gonna have current user name which will be nothing by default and then current user email which will be nothing and then what we want to do is in when the component mounts we want to grab that information from local storage so I'm going to say component did mount which is a lifecycle function our method and I'm gonna create a variable called ID token and we can get this basically there's a the parent item that's in local storage is called octa token storage so we can say local storage dot gets item and it's called octa - token - storage but what this is going to give us is a stringify adjacent object so it's going to be a string so we need this to actually be adjacent object we can work with in JavaScript so let's do Jason dot parse and wrap that okay so that way we can get values using like the dot syntax and so on and then we want to set our state so we're gonna say this dot set state and we want to pass in our object and we want the current user email to be equal to ID token which is our variable and then then there's a value or I'm sorry a key in there called ID token so we want that again and then remember that claims object I showed you and then the email all right we're gonna do the same thing for name so we'll just change email to name and we'll change this to custom current user name like that all right so now we should get that data if we go to our render and if we want to just check that real quick we can do a console dot log of this dot state and if we go back to staff and open up our console here there it is so we get this object and we get the current user email and the current user name so what we want to do now is we want to insert that into our page so let's get rid of that now instead of doing like this dot state dot current user email and so on I'm just going to use a little bit of destructuring and just create a couple variables so to use destructuring we want to use curly braces and we'll say current use email and current username and we basically want to suck that out of this dot state okay so that's what this is doing with the curly braces that way we can just use these variable names and then in the return so return is going to be pretty easy we're just gonna do a div wise m and not work there we go so we're gonna have a div with an h1 and we're just gonna say welcome and then we can put in here current username then we'll put a power graph and I'm just going to put email colon and then we can put currents user email and then a paragraph and we're just gonna say you have reached the authorized staff area of the portal and that's it let's save it let's go back and there we go cool so that's that's pretty much it guys if we logout yeah go to staff we can't access it now our application is pretty much finished so let's say you want to you hire somebody you want them to have access to the staff area so you go to your octa back-end and we can go to users and let's add a person ok so first name we'll say John last name Doe and then you're gonna want their email address so you would just ask for their email address and I'm gonna use I'm just going to use supports at traversing mediacom and then you could add them to groups but we don't have any groups password now you could set the password or you can so if you wanted to set it you do set by admin but you want them to be able to choose their password what will happen though we're gonna check this send user activation email and they'll get an email with a temporary password once they add that once they say it's login with that they'll be able to change it so let's go ahead and save this let me just make sure emails correct all right now notice that it says pending user action so they actually haven't went through and did what they're supposed to yet so what I'm gonna do is is go on to I'm gonna go outside of the screen here and go to my email and I don't want to show my email on-screen so what I'll do is just show you what the message say or tell you what it says it gives you the name of your basically your your unit or whatever this is Travis immediate dev and then the ID and it says welcome to octa hi John your organization is using octa to manage your web applications this means you can conveniently access all the applications you normally use through a single secure home page and it gives you like a link to a video and so on and it has a big green button that says activate octa account this link expires in 7 days so I'm gonna click that link and then this is where it takes me okay so basically it's asking me to create a new password and you can have like a security question what's the foody lease like does a child or just say carrots and you can choose a security image and create a count all right so now we have an octa account and there's a ton there's a ton of things you can do there's all types of apps that you can use that that you also use octa but we're not going to really get into this we're just using this for our react app but now they should be able to actually log in and if we go to our dashboard and reload the users page you'll see that John is now active ok and if we click on his page here you can see he is part of or assigned to the Acme staff portal and you could unassign them and if you had other applications you could assign him to those as well so let's try to login with John so we'll go log and I used support at traversing mediacom let's login with John okay and then we'll go to staff and there we go welcome John Doe and it has John's email address okay so it's it's working if we log out okay logs are so we can no longer access the staff portal so that's pretty much it guys and you can see how powerful this is because you can go and create another app let's say in I don't know c-sharp net or Java or a mobile app with iOS and you have this user base that's that can login to your applications and just the metrics and all the the the logs that they give you it's just I think it's really powerful and again this it's pretty similar to how off notto auth0 works as well and there's a lot of different ways you can implement this you could also implement your own server and make JWT JSON web tokens requests using octa as well so really powerful stuff but hopefully you guys enjoyed this little project here and yeah so that's it if you liked it please don't forget to Like and I will see you next time

Channel: Traversy Media

Views: 73,783

Rating: 4.9301186 out of 5

Keywords: react, react okta, okta, react authentication, react login

Id: 5j4FXMQBzmg

Length: 56min 22sec (3382 seconds)

Published: Sat Jun 16 2018