WEBVTT 00:00.000 --> 00:00.330 Okay. 00:00.360 --> 00:03.510 One last small task to go and let's clean things up here. 00:03.510 --> 00:07.920 And the goal of what we're going to do in this particular lesson is currently I'm logged in as admin. 00:07.920 --> 00:10.110 Let's log out of admin now. 00:10.140 --> 00:16.890 And I'll just log in as Bob at test.com with the password. 00:17.460 --> 00:23.070 And of course what we would not like Bob to be able to do is access the inventory. 00:23.070 --> 00:24.150 But Bob can. 00:24.180 --> 00:30.030 But Bob is not an admin and Bob does not have this kind of functionality. 00:30.030 --> 00:31.980 Bob cannot delete a product. 00:31.980 --> 00:37.620 And if I do try and delete a product as Bob, then actually we don't see the error because we never 00:37.620 --> 00:43.440 did create a toast for a 403 forbidden, because that is what would come back for that. 00:43.440 --> 00:52.080 So let's do that now and we'll go to our base API first of all, and we'll handle the case of a 403. 00:52.080 --> 00:56.370 And I'll just copy the 401 and paste it below here. 00:56.370 --> 01:03.090 And of course change the case to a 403, which is what we get if somebody is forbidden, and we'll just 01:03.090 --> 01:05.670 take a look and see what we get back for this. 01:06.960 --> 01:11.790 And maybe we'll need to update the title, because I didn't actually check the Chrome DevTools to see 01:11.790 --> 01:12.630 what we did get back. 01:12.630 --> 01:13.890 So we'll just see what happens. 01:13.890 --> 01:21.030 First of all, and if I try and do that again as Bob, I'll click on the delete button and still nothing. 01:21.030 --> 01:22.800 So let's check the Chrome DevTools. 01:22.830 --> 01:27.690 I don't think we get anything significant back for a 403. 01:27.720 --> 01:29.160 I'll try it again. 01:30.030 --> 01:32.220 And we've got the 403 forbidden. 01:32.220 --> 01:34.680 But if we take a look at the preview, it's just empty. 01:34.680 --> 01:39.480 So we need to specify a message ourselves for that. 01:39.480 --> 01:44.220 And I'll just come back and do we have a title in response data? 01:44.250 --> 01:48.090 I don't think we've got any response data from this one specifically. 01:48.090 --> 01:50.730 So I may just be checking the case here. 01:50.790 --> 01:54.660 Let's see what do we get in our response? 01:54.660 --> 01:56.550 I think we get nothing. 01:57.090 --> 01:58.380 Yeah, we get absolutely nothing. 01:58.380 --> 02:00.690 Just simply a 403 forbidden okay. 02:00.690 --> 02:04.030 So all we're going to check for is the response. 02:04.030 --> 02:07.750 Data will be an object, but we won't check for the title. 02:07.780 --> 02:16.510 And we will just say as the toast error forbidden. 02:18.700 --> 02:21.520 And we could put the case in here as well. 02:21.520 --> 02:23.650 Just say for a three forbidden for that one. 02:23.650 --> 02:26.860 Keep it simple and we'll go back and take another look. 02:26.890 --> 02:29.470 And let's try deleting a product again as Bob. 02:29.470 --> 02:31.600 And then we see the toast coming up. 02:31.600 --> 02:35.860 So Bob is not allowed to edit, create or delete products. 02:36.580 --> 02:40.240 So there's very little point in Bob having access to the inventory. 02:40.240 --> 02:45.100 So let's go and take a look at how we can prevent Bob from accessing this component. 02:45.100 --> 02:52.120 And let's go back to our require auth component which we put inside our routes folder. 02:52.270 --> 02:55.270 And if we take a look at our routes then we've got the require auth. 02:55.300 --> 03:02.290 This is our check to see if a user's authenticated and all of our authenticated or authentication required 03:02.340 --> 03:04.230 components are inside here. 03:04.260 --> 03:10.650 Let's make an update to the require auth so that we also check the user's roles if they're trying to 03:10.650 --> 03:12.450 get to an admin route. 03:12.930 --> 03:16.650 So we need to make sure if they're authenticated first that's going to come first. 03:16.650 --> 03:22.620 If they're not authenticated there's little point trying to check which role they're in as they're in 03:22.620 --> 03:23.490 no role. 03:23.520 --> 03:28.170 So after we've confirmed they're a user, they'll have to get through another check that we'll add here. 03:28.170 --> 03:33.900 But we'll declare some admin routes, even though I only have one, just to make it a bit more flexible 03:33.900 --> 03:36.330 than just a single admin route. 03:36.330 --> 03:38.520 But we're going to have one admin route for sure. 03:38.550 --> 03:44.220 That's our inventory route, and I'm just going to add one as an example. 03:44.220 --> 03:48.750 Maybe we've got an admin dashboard which we do not have and we're not going to create. 03:48.750 --> 03:54.930 This is really just an example of using an array so that if you did have many admin pages, then you 03:54.930 --> 03:57.180 could list them inside here. 03:57.180 --> 04:03.000 And then you just need one check to see if the location the user is trying to get to is included in 04:03.000 --> 04:04.290 this list of routes. 04:04.290 --> 04:13.110 So then we can check and say if admin routes includes and then we can use the location dot path name 04:13.110 --> 04:15.330 which we've already got inside this component. 04:15.420 --> 04:23.190 Use double ampersand and not user and roles and includes. 04:23.190 --> 04:26.220 And then in quotes we're going to specify admin. 04:26.340 --> 04:31.050 And if that is the case, we're not going to do anything significant with a user interface because they're 04:31.050 --> 04:31.950 trying to get somewhere. 04:31.980 --> 04:33.930 They're not allowed to go to you anyway. 04:34.110 --> 04:39.120 We'll just use the navigate component again, and we'll just send them back to the home page. 04:39.450 --> 04:43.320 And we'll specify replace in the URL instead of a push. 04:43.320 --> 04:46.950 So even if they click the back button they're not going to go back to the inventory. 04:46.980 --> 04:51.810 We're just replacing the URL with the home link. 04:52.500 --> 04:56.490 And if we take a look at the effect of that well Bob's been kicked back to the home page. 04:56.490 --> 04:57.870 Let's go to the catalog. 04:57.870 --> 05:01.350 And I've still got the link available of course to go to the inventory. 05:01.350 --> 05:08.260 If I click on this, then we're simply pushed back to the home page and there is no inventory access 05:08.260 --> 05:09.520 for Bob. 05:09.700 --> 05:13.900 Okay, so that's one thing, but I've also got the link inside the menu. 05:14.590 --> 05:19.630 Let's not tease Bob and give him an option that he thinks he has available. 05:19.630 --> 05:24.520 And you could argue I'm teasing him with my profile that we've also not created inside this training 05:24.520 --> 05:31.510 course, but the inventory is one he's not allowed to access, so we'll also go and adjust that as well. 05:31.900 --> 05:37.570 So in the user menu and this is not complicated code we're looking at here. 05:37.570 --> 05:41.830 We just need to bring our user in which we already have inside our user menu. 05:41.830 --> 05:47.410 And then all we'll do for this is where we've got our inventory link. 05:47.530 --> 05:51.700 We'll just check the user dot roles dot includes. 05:51.700 --> 05:54.010 And then we'll check for the admin role. 05:54.010 --> 06:01.450 And if the user is in the admin role, then we're simply going to use the ampersand and display that 06:01.450 --> 06:02.200 link. 06:02.800 --> 06:05.450 And if they're not in the admin role, they do not see that link. 06:05.480 --> 06:10.310 And if we go back and double check that, if I look at Bob's menu, then the inventory is gone. 06:10.310 --> 06:15.440 And if we just check the admin user is still functioning as we'd expect them to. 06:15.500 --> 06:20.150 And we'll go to the admin at test.com with the password. 06:20.150 --> 06:23.720 And we go to the inventory page. 06:23.720 --> 06:30.200 Then the admin still has the desired functionality and the admin would be able to update a product name. 06:30.200 --> 06:31.220 Click submit. 06:31.220 --> 06:37.370 And we're not going to see a 403 for that, because the protection and the authorization takes place 06:37.370 --> 06:39.350 on our API back end. 06:39.350 --> 06:45.140 So we've made it through the rather simple inventory that I wanted to demonstrate, so that we have 06:45.140 --> 06:51.770 something to do with our admin user and also demonstrate the Crud operations as well, which we've accomplished 06:51.770 --> 06:53.210 inside this section. 06:53.210 --> 06:56.780 So we're now ready to commit our changes into source control. 06:57.050 --> 07:02.570 And let's go and take a look at Source control because we're currently working inside our inventory 07:02.570 --> 07:03.530 branch. 07:03.630 --> 07:09.270 So I'm going to stage all of these changes for our inventory. 07:09.870 --> 07:17.850 And then I'm going to give it a commit message of inventory completes. 07:18.480 --> 07:20.310 And I'm going to commit. 07:20.400 --> 07:25.650 And I'm going to publish this branch to GitHub as inventory. 07:25.650 --> 07:30.720 So when we publish this branch, no workflow is going to kick off because we're not publishing it to 07:30.750 --> 07:31.500 our main branch. 07:31.500 --> 07:34.860 It's going to get published to a branch called inventory. 07:34.860 --> 07:37.110 So I'm going to use that option. 07:37.290 --> 07:39.540 And off that goes up to GitHub. 07:39.540 --> 07:46.290 And then we'll take a look at GitHub and see what we need to do to create a pull request and then merge 07:46.290 --> 07:49.800 what we've done with our main branch. 07:49.830 --> 07:54.420 So that that then kicks off the workflow and updates our published application. 07:54.450 --> 07:58.770 So let's head across to GitHub now and take a look at what's happened. 07:58.770 --> 08:03.000 So now we've got our new branch that's been published. 08:03.000 --> 08:08.860 And we can see the banner here Inventory had recent pushes 45 seconds ago or whatever it is in your 08:08.860 --> 08:09.910 case, of course. 08:09.910 --> 08:13.720 And then we've got the option to compare and pull request. 08:13.990 --> 08:21.220 So our goal is to merge this change into our main branch because we know that kicks off the workflow. 08:21.250 --> 08:23.680 So let's take a look at doing just that. 08:23.680 --> 08:25.210 So I'll click this button. 08:25.210 --> 08:30.670 And then we can open a pull request by comparing changes across two branches. 08:30.670 --> 08:33.430 So we need to compare this with our main branch. 08:33.430 --> 08:35.770 Because there could be conflicts. 08:36.580 --> 08:39.910 There won't be because I'm the only person that's been working on this. 08:39.910 --> 08:46.090 So there shouldn't be a conflict unless I've done something a bit silly with my git commits, which 08:46.090 --> 08:50.560 wouldn't be the first time it is possible, but there shouldn't be any conflicts with the code that 08:50.560 --> 08:51.580 I've changed here. 08:51.580 --> 08:52.870 So we can add a title. 08:52.900 --> 08:57.640 I'll keep it as inventory complete, and then we can describe the change for whoever is going to approve 08:57.640 --> 08:58.240 this. 08:58.240 --> 09:00.820 And then I'll create the pull request. 09:00.820 --> 09:09.080 So I'll click that button And then GitHub is going to check for the ability to merge and check for any 09:09.080 --> 09:09.620 conflicts. 09:09.620 --> 09:14.570 If there are any conflicts, then they have to be dealt with before we can merge this pull request, 09:14.570 --> 09:17.120 and then we can merge the pull request. 09:17.150 --> 09:21.080 So I'll click that button and I'll confirm the merge. 09:21.650 --> 09:28.280 And this has now been successful and it's closed I can delete the branch but I'm going to keep the branch 09:28.280 --> 09:30.230 present inside there. 09:30.230 --> 09:38.810 But what should have happened now is we've now got a commit into our main branch called inventory complete 09:39.080 --> 09:40.760 and we're on the main branch. 09:40.760 --> 09:47.570 I still have the inventory branch, but what that also means is inside our actions, we have our workflow 09:47.570 --> 09:48.740 triggered. 09:49.370 --> 09:52.880 And this is going to update our published application. 09:52.880 --> 09:55.880 So I'll click on the workflow and see how it gets on. 09:55.880 --> 10:01.400 I'm reasonably confident, although it's been a couple of days since I last looked at this, I'm still 10:01.400 --> 10:06.850 reasonably confident that it should just work because we haven't changed our workflow and it should 10:06.880 --> 10:09.070 build our react application and our. 10:09.250 --> 10:10.270 Net application. 10:10.270 --> 10:13.120 But last time I looked at this it took about five minutes. 10:13.810 --> 10:20.470 So now's a good opportunity to go and grab that tea or coffee, and I'll come back once it has either 10:20.500 --> 10:22.120 finished or failed. 10:22.150 --> 10:26.290 Okay, four minutes and 45 seconds, this time slightly quicker than last time. 10:26.290 --> 10:31.300 And we've got a handy link in our deploy option here, which I can right click on and open in a new 10:31.300 --> 10:37.090 tab, just to double check that the functionality has indeed been deployed to our website. 10:37.510 --> 10:39.130 And we're back in. 10:39.130 --> 10:43.930 I'll just log out of Bob and I don't see the inventory link there, which is fine because I wouldn't 10:43.960 --> 10:45.070 expect two for Bob. 10:45.070 --> 10:56.710 So I'll log in as the admin at test.com with the password and cloud name must be specified in account. 10:56.740 --> 10:58.360 Of course. 10:58.390 --> 11:07.600 We've now deployed our app with some additional settings, so we're going to need to update our Azure 11:07.630 --> 11:13.300 dashboard as well, or our Azure portal because this is coming from Cloudinary. 11:13.330 --> 11:18.580 I forgot we added Cloudinary to our application, so we of course need to update our portal. 11:18.610 --> 11:20.350 So let's go to Azure. 11:20.350 --> 11:25.480 And then we just need to update our environment variables once again of course. 11:25.480 --> 11:31.900 So we'll go to our app service and we'll go to our settings and our environment variables. 11:31.900 --> 11:37.390 And we're going to need to add the three clouds and everything's inside here. 11:37.390 --> 11:40.480 So inside the app settings I'm just going to click add. 11:40.510 --> 11:43.720 And then we need to specify Cloudinary. 11:43.750 --> 11:50.320 And really we're better off going to our app settings dot JSON here. 11:51.130 --> 11:57.160 And then copying and pasting them in one by one into Azure. 11:57.190 --> 12:03.550 So we've done this before, and I don't want to keep coming back and blurring out the API secrets inside 12:03.550 --> 12:03.820 here. 12:03.820 --> 12:10.970 So I'll just demonstrate the first one and cloudinary double underscore cloud name. 12:10.970 --> 12:12.260 That should be. 12:12.530 --> 12:18.230 And it will be easy to make mistakes at this stage of the course with what we're doing here. 12:18.230 --> 12:24.350 I think I see more questions from students at this stage with deployment than anything else. 12:24.350 --> 12:27.200 I think tiredness and weariness comes into it. 12:27.200 --> 12:30.170 So this is the part you're most likely to make mistakes in. 12:30.200 --> 12:33.830 So anyway, what we need is cloudinary double underscore cloud name. 12:33.860 --> 12:37.730 I'll apply that one and then I'll add another one. 12:37.730 --> 12:42.650 And this is going to be Cloudinary double underscore API key. 12:44.000 --> 12:47.150 And I'll just paste in the value for that one and click apply. 12:47.150 --> 12:54.260 And finally we need our cloudinary double underscore and then API secrets. 12:54.260 --> 12:57.440 And I'll just paste that in and click apply. 12:57.440 --> 13:02.180 And then once we've got our three cloudinary values inside here we can click apply again. 13:02.180 --> 13:04.190 And then we can confirm. 13:04.400 --> 13:09.420 And what should happen is this should automatically restart our app. 13:09.840 --> 13:11.280 We'll see. 13:11.790 --> 13:14.310 But that should in itself solve the problem. 13:14.310 --> 13:18.180 And if I go back and I'll just go back to the catalog and it was a bit slower. 13:18.180 --> 13:20.550 So I presume that restarting has taken place. 13:20.550 --> 13:22.920 I'll go to the admin at Test.com. 13:22.920 --> 13:24.270 I'll go to the inventory. 13:24.300 --> 13:25.740 Now we see the inventory. 13:25.740 --> 13:29.400 So just adding those environment variables solves that problem. 13:29.400 --> 13:32.250 We don't need to redeploy our app or do anything like that. 13:32.250 --> 13:34.410 And let's just do a quick test. 13:34.410 --> 13:41.640 I'll just edit one of the products, Angular Boots one again I'll click submit and boom, we have that 13:41.640 --> 13:42.810 in place. 13:43.110 --> 13:44.340 So that's it. 13:44.370 --> 13:46.680 We've now got our inventory deployed. 13:46.710 --> 13:47.940 Marvelous. 13:47.970 --> 13:50.970 Now what's coming up next is a challenge. 13:51.000 --> 13:54.840 An optional challenge is a big challenge, but it is optional. 13:54.870 --> 13:59.040 Following that will be the end of course summary because we've done the work now. 13:59.040 --> 14:03.330 So if you're not feeling ready for a big old challenge, come back to it whenever you feel like it. 14:03.330 --> 14:04.680 But that's what's coming up next. 14:04.680 --> 14:07.230 Following that will be the end, of course. 14:07.230 --> 14:07.920 Summary.