Tour the Application
You can find the repo here: https://github.com/chenkie/orbit
Ryan Chenkie: [0:00] Let's take a quick tour of the application in its unfinished state. Right now, the application is not secure. We don't have any authentication or authorization happening in the React app. The same goes for the express API. There's nothing enforcing, any kind of auth there either.
[0:16] Our goal is to get this application to a state where we have all of those features in place. Let's take a look at what we've got in this app. First of all, we've got this Home page. This is the marketing landing page.
[0:28] Once we have everything in place -- depending on whether the user is logged in or not -- they'll either see this page or they'll go straight to the dashboard. Likewise, clicking any of these buttons will either take them to the dashboard if they're already logged in or to the login route if they are not.
[0:43] If you have a login route, we've also got a signup route, if you need to sign up for a new account. Then we can flip over to the dashboard itself. Right here, we can see the dashboard for the application. This is just some static data from the API to power this fake dashboard here. The Search bar right now doesn't do anything. The drop-down here just has one item, which is to log the user out.
[1:07] We've got a number of links over here on the left. We've got inventory and this is going to be where we demo how to do authorization. Eventually, we'll have users that have a role of admin be able to access this area and add new items in. We've got this Account area which allows us to set a role for ourselves, either user or admin.
[1:27] It's likely that for your application, you're not going to have users be able to toggle their role themselves. This is just a quick little UI to allow us to toggle for ourselves easily so that we can see the difference between these two roles.
[1:41] We've got the settings area over here. This is just a spot to fill in a bio, and this will be the place where we demo a cross-site scripting attack. We'll be able to add some content here, which is going to include a cross-site scripting attack, which will then be rendered over here in the users' area eventually. We'll see how to defend against that.
[2:00] All of the routes that we have include this auth debugger, which gives us information that is particular to the logged-in user. Right now, there's no info here because we don't have a logged-in user quite yet.
[2:11] Once we do, we'll be able to see the JSON Web Token for the user. We'll see its expiry time, and then also the information for that particular user. Things like their name and their email address.
Ryan Chenkie: [0:00] Let's take a quick tour of the application in its unfinished state. Right now, the application is not secure. We don't have any authentication or authorization happening in the React app. The same goes for the express API. There's nothing enforcing, any kind of auth there either.
[0:16] Our goal is to get this application to a state where we have all of those features in place. Let's take a look at what we've got in this app. First of all, we've got this Home page. This is the marketing landing page.
[0:28] Once we have everything in place -- depending on whether the user is logged in or not -- they'll either see this page or they'll go straight to the dashboard. Likewise, clicking any of these buttons will either take them to the dashboard if they're already logged in or to the login route if they are not.
[0:43] If you have a login route, we've also got a signup route, if you need to sign up for a new account. Then we can flip over to the dashboard itself. Right here, we can see the dashboard for the application. This is just some static data from the API to power this fake dashboard here. The Search bar right now doesn't do anything. The drop-down here just has one item, which is to log the user out.
[1:07] We've got a number of links over here on the left. We've got inventory and this is going to be where we demo how to do authorization. Eventually, we'll have users that have a role of admin be able to access this area and add new items in. We've got this Account area which allows us to set a role for ourselves, either user or admin.
[1:27] It's likely that for your application, you're not going to have users be able to toggle their role themselves. This is just a quick little UI to allow us to toggle for ourselves easily so that we can see the difference between these two roles.
[1:41] We've got the settings area over here. This is just a spot to fill in a bio, and this will be the place where we demo a cross-site scripting attack. We'll be able to add some content here, which is going to include a cross-site scripting attack, which will then be rendered over here in the users' area eventually. We'll see how to defend against that.
[2:00] All of the routes that we have include this auth debugger, which gives us information that is particular to the logged-in user. Right now, there's no info here because we don't have a logged-in user quite yet.
[2:11] Once we do, we'll be able to see the JSON Web Token for the user. We'll see its expiry time, and then also the information for that particular user. Things like their name and their email address.