WEBVTT 0 00:00.540 --> 00:07.260 So now that we've gone through all of the various different types of increasing security for our users 1 00:07.740 --> 00:16.400 we've looked at encryption, hashing, salting, using OAuth and other services to login our users. 2 00:16.410 --> 00:22.530 There's just one thing that our website needs, some actual functionality. Because at the moment when you 3 00:22.530 --> 00:29.880 log into the service, it takes you to a static page that just shows one secret which is the one that 4 00:29.880 --> 00:32.330 we've hardcoded on our secrets. 5 00:32.340 --> 00:34.290 ejs page. 6 00:34.290 --> 00:37.980 Now that's probably not what we want right? 7 00:37.980 --> 00:44.550 Instead we'd want the user to be able to submit a secret and see all of the secrets that other users 8 00:44.550 --> 00:46.000 have submitted. 9 00:46.050 --> 00:48.070 So we need to fix this. 10 00:48.120 --> 00:56.130 So let's go into our app.js and firstly set up a get route for going to /submit. 11 00:56.130 --> 01:04.540 So let's put a app.get for the /submit route and here we should check to see if the 12 01:04.540 --> 01:09.730 user is logged in i.e. see if req.isAuthenticated is true. 13 01:10.030 --> 01:16.360 And if they are then they should be taken to the submit page over here and we should render it so that 14 01:16.360 --> 01:18.340 the user can submit a secret. 15 01:18.940 --> 01:27.010 So I'm simply going to copy this and paste it inside here and change the render to submit. 16 01:27.250 --> 01:32.890 Now it's the same if they were not logged in we would also redirect them to log in. 17 01:33.370 --> 01:42.370 So now if we check out what it looks like when we go to submit a secret and log in as our local user 18 01:42.460 --> 01:45.050 with their password 123456, 19 01:45.190 --> 01:49.060 at the moment it still redirects to the secrets page after we log in. 20 01:49.180 --> 01:55.030 But if we click on submit a secret now because we have our login session saved, then it takes us to 21 01:55.030 --> 01:56.410 the submit page. 22 01:56.410 --> 01:59.240 So here we're supposed to write a secret, 23 01:59.320 --> 02:00.330 I don't know, 24 02:00.760 --> 02:04.260 "My favorite color is blue." 25 02:04.290 --> 02:06.310 It's not much of a secret but here we go. 26 02:06.310 --> 02:13.270 And always click submit it will post to the /submit route where we can pick up the secret 27 02:13.270 --> 02:19.920 that the user typed in, save that into their account and then take them back to the secrets page. 28 02:20.020 --> 02:23.660 So the next thing we should do is to set up that app.post route. 29 02:23.800 --> 02:30.880 And the reason why the submit page is making an app.post to this route is because we have a submit 30 02:30.880 --> 02:37.320 button here that completes the form, makes a post request to the /submit route. 31 02:37.540 --> 02:39.670 And now we're going to handle that right here. 32 02:41.110 --> 02:46.220 So inside here is where we're going to save the secret that the user typed in. 33 02:46.330 --> 02:50.340 So let's create a new concconst ept called submittedSecret 34 02:50.340 --> 02:58.540 and let's set this to equal req.body.secret because when we look in here the input that 35 02:58.540 --> 03:03.670 has a type of text for the users secret has the name of secret. 36 03:03.820 --> 03:08.160 So that means we can happen to it when this form gets submitted through req. 37 03:08.180 --> 03:15.010 .body.secret. And that is what we're going to save into this new constant right here. 38 03:15.860 --> 03:22.790 So the next thing we want to do is to find the current user in our database and then save the secret 39 03:23.090 --> 03:24.930 into their file. 40 03:24.950 --> 03:28.510 So how do we know who the current user is? 41 03:28.520 --> 03:36.650 Well, passport very handily actually saves the users details because when we initiate a new login session 42 03:36.800 --> 03:41.840 it will say that users details into the request variable. 43 03:41.840 --> 03:49.640 So that means if I go ahead and console.log req.user, I'll actually be able to see what's 44 03:49.640 --> 03:52.300 saved for my current session. 45 03:52.370 --> 03:55.920 So let's hit save and let's go back to our home page, 46 03:56.090 --> 04:03.000 let's log in our user through our local strategy, hit login and we now get to the secrets page. 47 04:03.020 --> 04:08.870 So if I go ahead and click on submit a secret and type the same thing as before, click submit, 48 04:08.900 --> 04:15.680 now that should trigger my console log and you can see it now posts everything that we have saved about 49 04:15.680 --> 04:17.150 this current user. 50 04:17.150 --> 04:20.770 We can access their id and also their username, 51 04:21.170 --> 04:26.180 so basically everything that exists inside here other than their salt and hash. 52 04:26.180 --> 04:32.930 So that means we can now find this user using their id in the database and save the secret that they 53 04:32.930 --> 04:35.780 created to this document. 54 04:35.780 --> 04:39.350 But in order to do that, we first have to amend our schema. 55 04:39.740 --> 04:45.620 So in addition to everything else that's inside the schema, I'm going to add one more field and this 56 04:45.620 --> 04:48.140 is going to be their secret. 57 04:48.170 --> 04:50.630 So it's also going to be a string. 58 04:50.690 --> 05:00.350 And now when the user makes that post request, I'm going to find the user using that req.user. 59 05:00.830 --> 05:06.950 because that refers to the id that we have for them in our database.id 60 05:06.950 --> 05:13.370 And then I'm going to add that secret that they submitted to that secret field that I created in the 61 05:13.370 --> 05:14.340 schema. 62 05:14.420 --> 05:17.520 So let's go ahead and tap into the user model. 63 05:17.540 --> 05:26.810 I'm going to findById where the id is req.user.id. And once that's completed, we might 64 05:26.900 --> 05:34.880 either get an error or we might get a foundUser if they do indeed exist. And if there were any errors 65 05:35.540 --> 05:37.900 we're simply going to console log it 66 05:39.080 --> 05:48.170 but if there were no errors and if the foundUser did indeed exist then we're going to set the found 67 05:48.170 --> 05:53.210 user's secret field to equal the submittedSecret. 68 05:54.320 --> 05:59.820 And then we're going to save this found user with their newly updated secret. 69 06:00.050 --> 06:08.720 And once that save has completed, then we can res.redirect them to the secrets page so that they can 70 06:08.720 --> 06:11.660 see their own secret alongside everybody else's. 71 06:12.320 --> 06:20.960 So let's close off these lines of code and let's hit save and let's go back to our home page, login 72 06:21.020 --> 06:26.690 our user so remember because every time our server restarts our sessions and cookies gets wiped out. 73 06:27.200 --> 06:29.540 So now we're ready to submit a secret. 74 06:29.900 --> 06:35.740 And I'm going to add the same secret here to that user which is the local mongoose user. 75 06:36.170 --> 06:43.040 And now if I go into my Robo 3T, update my database, I should be able to see a secret field that's 76 06:43.040 --> 06:44.960 filled in for this user. 77 06:45.830 --> 06:52.100 So now that we've added in the secret, it's time to be able to render it on the secret page 78 06:52.100 --> 06:52.420 right? 79 06:52.430 --> 06:58.850 I want to be able to find all the users that have a secret posted and be able to render them on the secrets 80 06:58.850 --> 06:59.380 page. 81 06:59.510 --> 07:04.390 So that way it's no longer just a static page with only a single secret. 82 07:04.430 --> 07:09.880 So to do that we have to update the app.get for our secrets route. 83 07:10.070 --> 07:15.530 We're no longer just going to check to see if they're authenticated or if they're not, redirect them 84 07:15.530 --> 07:20.030 to login, because this is no longer going to be a privileged page. 85 07:20.030 --> 07:25.070 Anybody with a logged in or not logged in should be able to see the secrets that have been submitted 86 07:25.160 --> 07:25.990 anonymously. 87 07:26.390 --> 07:31.760 So we don't need to check to see if they're authenticated but instead we're going to trawl through our 88 07:31.760 --> 07:37.250 database and find all of the secret that have been submitted on the database. 89 07:37.910 --> 07:45.650 So to do that we're going to use our model of users and we're going to use find and we're going to look 90 07:45.650 --> 07:54.270 through this collection and find all the places where the field secret actually has a value. 91 07:54.320 --> 08:03.620 Now how do we do this? If we were to search Google for say MongoDB field not null i.e. it contains some 92 08:03.680 --> 08:09.800 data, then we can see that other people already asked about this. And there's several ways that you can 93 08:09.800 --> 08:14.870 do this. You can either do it through checking whether if it exists 94 08:14.870 --> 08:23.630 so this means that there is a field called IMAGE URL but you can also check to see that it's not 95 08:23.690 --> 08:25.400 equal to null. 96 08:25.400 --> 08:32.340 So it means it actually has a value so in this case there actually is an image URL in this collection. 97 08:32.360 --> 08:33.620 So this is what we want. 98 08:33.680 --> 08:39.920 So in our case we're going to check through our collection of users and look through the secret field 99 08:40.340 --> 08:48.800 and then let's add in this not equal to null part that's enclosed in curly braces into this find condition. 100 08:48.800 --> 08:50.650 So we're going to put it inside here. 101 08:50.870 --> 08:54.690 So we're going to make sure that we open up a set of curly braces. 102 08:54.800 --> 08:58.130 So notice how this is one set of curly braces 103 08:58.130 --> 09:01.910 and this defines the condition that we're going to look through our database with. 104 09:01.910 --> 09:07.820 And then this is another set of curly braces which is going to be the condition for actually which documents 105 09:07.820 --> 09:10.580 to pick out based on the secret field. 106 09:10.610 --> 09:18.890 And here we're going to type in what we saw over here which is a $ not equals to or 'ne' 107 09:18.890 --> 09:19.810 : 108 09:19.820 --> 09:25.820 so this code should now look through all of our users in our users collection, 109 09:25.820 --> 09:33.710 look through the secret fields and pick out the users where the secret field is not equal to null. 110 09:33.860 --> 09:36.720 So all of these conditions end right here 111 09:36.740 --> 09:42.590 so make sure that you add the comma there and all of these curly braces are one set of here. 112 09:42.590 --> 09:45.170 It's really really easy to mess this part up 113 09:45.170 --> 09:51.350 and I do it very often because there's so many curly braces. So here after all of those curly braces 114 09:51.350 --> 09:58.580 and after the colon and after the comma, we're going to add our callback function with our error or any 115 09:58.580 --> 10:00.820 of the foundUsers. 116 10:01.210 --> 10:06.160 So if there were any errors then we're going to simply log it 117 10:07.600 --> 10:15.970 but otherwise if indeed we actually did find some users, so foundUsers is not equal to nil, then we're 118 10:15.970 --> 10:24.700 going to res.render our secrets.ejs page and we're going to pass in a variable. Let's call 119 10:24.700 --> 10:25.330 that variable 120 10:25.330 --> 10:29.680 usersWithSecrets because that's essentially what we're searching for 121 10:29.680 --> 10:29.990 right? 122 10:30.010 --> 10:37.090 We're trying to find all the users which have a filled secret field. And we're going to pass in these 123 10:37.180 --> 10:41.760 foundUsers as the value for this variable. 124 10:41.800 --> 10:48.840 So let's go ahead and close off these lines of code and we can now pick this up inside our secret. 125 10:48.980 --> 10:49.930 ejs. 126 10:50.020 --> 10:56.680 So at the moment the secret text is a single hard coded value, it's "Jack Bauer is my hero." 127 10:56.680 --> 11:03.550 So let's go ahead and delete that secret text and instead replace it using the secrets that we actually 128 11:03.550 --> 11:05.230 have in our database. 129 11:05.230 --> 11:11.860 So we know that we get access inside secrets.ejs to a variable called usersWithSecrets. 130 11:11.860 --> 11:21.400 So inside here we can run a forEach loop. So we can happen to usersWithSecrets and we can call for 131 11:21.400 --> 11:28.900 each on this variable to loop through that array and then we're going to add in a callback function 132 11:28.900 --> 11:34.500 in here to pick up all of those users inside the usersWithSecrets array. 133 11:35.080 --> 11:43.630 And for each of those users, we're going to render the value of the user.secrets field inside a paragraph 134 11:43.690 --> 11:44.770 element. 135 11:44.770 --> 11:51.130 So inside here between the two p tags is where we're going to add our special EJS tag, so angle 136 11:51.130 --> 11:53.440 bracket percentage sign equals 137 11:53.440 --> 11:59.980 and then it ends with percentage sign closing angle bracket. And in between right here just after the 138 11:59.980 --> 12:03.820 equals sign is where we're going to tap into user.secret. 139 12:04.960 --> 12:11.190 So this will loop through all the users with secrets. For each user that has a secret 140 12:11.200 --> 12:18.040 we're going to render it inside a paragraph tag and all we need to do now is to mark out the part of 141 12:18.040 --> 12:21.760 this file that is actually Javascript rather than HTML. 142 12:22.150 --> 12:27.110 And we do that of course using this angle and percentage signs, percentage sign angle. 143 12:27.550 --> 12:32.140 So now let's save everything and let's go ahead and test it out. 144 12:32.140 --> 12:34.030 I'm going to go and register. 145 12:34.060 --> 12:39.850 Let's say that I sign up with Google again. And you can see that I get taken to the secrets page and 146 12:39.850 --> 12:45.070 it shows that previous secret that I submitted as the other user. 147 12:45.130 --> 12:49.030 So let's say that I submit a secret under this other account as well. 148 12:49.030 --> 12:58.020 Let's add that "Jack Bauer is my hero." again and let's click submit. And you can see we now have two secrets. 149 12:58.030 --> 13:04.520 So the more users we have, the more secrets they submit the more that gets shown up over here. 150 13:04.540 --> 13:13.120 So this is a very very basic and minimalist version of the Whisper app because the users usernames or 151 13:13.120 --> 13:17.440 passwords or emails, none of that is associated with their secret. 152 13:17.440 --> 13:24.010 So users can sign up, submit their secrets for all the world to see but they don't have to tell the world 153 13:24.040 --> 13:25.040 who they are. 154 13:25.120 --> 13:30.970 And we keep their secret secret using all of our advanced authentication methods. 155 13:31.240 --> 13:36.220 So I hope you had fun learning all of the aspects of authentication. 156 13:36.220 --> 13:37.720 So until next time. 157 13:37.720 --> 13:39.910 That's all from me, Angela at the App brewery.