WEBVTT 0 00:01.190 --> 00:01.870 All right. 1 00:01.900 --> 00:03.390 Onwards and upwards. 2 00:03.400 --> 00:06.550 We're now on level 5 authentication 3 00:06.550 --> 00:10.660 and in this lesson we're going to talk all about cookies and sessions. 4 00:10.660 --> 00:14.830 Now just a word of warning here, during the lesson 5 00:14.830 --> 00:20.080 if you continue watching you may start to feel that you get a little bit hungry. 6 00:20.080 --> 00:26.170 So don't blame me if I've just completely derailed your diet plan because in this lesson we're going 7 00:26.170 --> 00:30.910 to talk all about cookies and their yummy goodness. 8 00:31.030 --> 00:36.730 Not really. The type of cookies that we're talking about that relate the Web Development are more similar 9 00:36.910 --> 00:44.770 to fortune cookies because they have a message that's packaged inside and you can pass these around 10 00:44.890 --> 00:47.450 and they can be broken to reveal the message. 11 00:47.470 --> 00:51.250 So you've probably come across cookies before. But if you haven't, 12 00:51.430 --> 00:54.100 I just want to show you how it works in practice. 13 00:54.100 --> 00:59.030 So let's say we go onto Amazon and we search for the switch 14 00:59.050 --> 00:59.370 right? 15 00:59.380 --> 01:06.140 The Nintendo switch. And we decide to go ahead and add it to basket. 16 01:06.280 --> 01:11.770 So now when we look inside our basket you can see we have one item, the switch right? 17 01:11.920 --> 01:16.410 And then we're going to do something that all e-commerce sites hate. 18 01:16.450 --> 01:21.760 We're going to go and navigate away and abandon our shopping cart. 19 01:21.760 --> 01:30.170 Now this to any e-commerce website is a real crime because the user obviously wanted to buy something 20 01:30.280 --> 01:35.800 but then at some point they got distracted by something else abandoning their cart without checking 21 01:35.800 --> 01:36.340 out. 22 01:36.340 --> 01:38.560 So what does Amazon do? 23 01:38.560 --> 01:47.260 Well as soon as you added that item to the cart, Amazon has created a cookie and it stored that cookie 24 01:47.380 --> 01:48.410 on your browser. 25 01:48.430 --> 01:50.970 So how do we go and view that cookie? 26 01:51.040 --> 01:58.680 Well inside chrome if you go to settings and you search for "cookie", if you scroll right to the bottom 27 01:59.040 --> 02:03.650 it shows you that there's something relating to cookies inside content settings. 28 02:03.720 --> 02:09.900 So if we go over there and we click on cookies, you can see there's this option to see all cookies and 29 02:09.900 --> 02:18.000 site data. And now you can see that Amazon has not added just one cookie just by doing that very small 30 02:18.000 --> 02:22.110 act of adding a Nintendo switch to an Amazon basket 31 02:22.110 --> 02:29.370 Amazon has told our browser to save all sorts of information about ourselves. And if we click on amazon. 32 02:29.370 --> 02:36.240 co.uk, you can see there's the session-token the session-id, and these cookies don't necessarily 33 02:36.240 --> 02:38.460 contain any actual information 34 02:38.460 --> 02:46.170 say this user wanted to buy a Nintendo switch but what they do contain is an ID number. And this ID 35 02:46.200 --> 02:53.460 will be used to fetch all of those things that you added to your cart during this browsing session on 36 02:53.520 --> 02:54.720 Amazon. 37 02:54.720 --> 03:03.330 And this is why if you decide to go and close down your browser and you open it back up and let's head 38 03:03.330 --> 03:09.930 back to amazon.co.uk you can see that my switch is still inside the basket. 39 03:09.930 --> 03:12.070 So they haven't forgotten this. 40 03:12.120 --> 03:17.940 So that means the next time I go on to Amazon that Nintendo switch is still going to be in my shopping 41 03:17.940 --> 03:18.470 basket. 42 03:18.880 --> 03:28.050 However if we go into those cookies for Amazon and we go ahead and delete it. 43 03:28.100 --> 03:29.840 So let's go back to see all 44 03:29.840 --> 03:31.530 cookies and site data 45 03:31.670 --> 03:37.770 we find the one that is directly related to Amazon and we remove all of these. 46 03:37.850 --> 03:45.080 Now if we go and refresh this website you can see we forced it to forget our last browsing session 47 03:45.110 --> 03:48.640 and it doesn't know about that Nintendo switch anymore. 48 03:48.740 --> 03:53.240 Now on the internet cookies are used widely to save these browsing sessions 49 03:53.360 --> 03:58.100 and it goes beyond just saving your last actions on the website. 50 03:58.190 --> 04:06.050 When Amazon adds those cookies to my browser it also means that when I go and visit another website say 51 04:06.050 --> 04:14.810 if I go onto Facebook then it knows who I am and what items I wanted to buy on Amazon. And it'll try to 52 04:14.810 --> 04:19.050 remind me of that thing that I wanted to buy on Amazon. 53 04:19.310 --> 04:24.660 And it's kind of creepy but this is essentially how retargeting ads work. 54 04:24.710 --> 04:31.910 Once a user comes your website initiates some sort of buying behavior and then they decide to abandon 55 04:31.910 --> 04:38.570 cart, you save what it is that they wanted and then on other websites or when they come back onto your 56 04:38.570 --> 04:42.410 website you remind them about that thing that they wanted to buy. 57 04:42.800 --> 04:45.710 And this is all done through cookies and sessions. 58 04:46.130 --> 04:52.760 So if we review this from a web development point of view it means that say on day 1 when I go into 59 04:52.760 --> 05:01.310 Chrome and I type in amazon.com, my browser will make a get request to Amazon server requesting for 60 05:01.310 --> 05:09.440 their home page. Amazon server will then respond to that request and send over the HTML, CSS and JavaScript 61 05:09.440 --> 05:13.820 files that are needed for my browser to be able to render the Amazon website. 62 05:14.000 --> 05:17.570 And then let's say that we decided to add a computer to our cart, 63 05:17.600 --> 05:24.950 well that is equivalent to making a post request to Amazon server saying that I would like to buy a 64 05:24.950 --> 05:25.810 computer 65 05:25.850 --> 05:26.550 right? 66 05:26.630 --> 05:33.240 And it's at this moment in time when Amazon servers will create a cookie that contains that data, 67 05:33.260 --> 05:41.390 "This user wanted to buy a computer." And when it responds to the post request that cookie gets sent along 68 05:41.600 --> 05:45.140 and the browser gets told to save that cookie. 69 05:45.140 --> 05:51.330 So that means that if I now get distracted and I decide to go onto Facebook or whatever it may be. 70 05:51.440 --> 05:53.530 But if I come back tomorrow 71 05:53.870 --> 05:57.290 that cookie is still saved on my browser. 72 05:57.740 --> 06:04.730 So the next time that I make a get request to Amazon server, that cookie gets sent along with my get 73 06:04.730 --> 06:12.920 request to allow the server to be able to identify who I am and see if I had any previous sessions on 74 06:13.010 --> 06:13.820 Amazon. 75 06:13.820 --> 06:18.190 And it's the equivalent of cracking open that fortune cookie revealing 76 06:18.260 --> 06:20.920 what were the previous things that I wanted to buy, 77 06:20.930 --> 06:26.540 so in this case it was a computer. And then they could respond with the HTML, CSS, Javascript 78 06:26.840 --> 06:33.250 and also render my cart so that the computer is already added in the cart. 79 06:33.260 --> 06:38.090 So there are lots of different types of cookies but the types of cookies that we're going to be looking 80 06:38.090 --> 06:42.840 at are the ones that are used to establish and maintain a session. 81 06:42.860 --> 06:48.500 Now a session is a period of time when a browser interacts with a server. 82 06:48.980 --> 06:54.650 So usually when you log into a website that's when your session starts and that's when your fortune 83 06:54.650 --> 06:55.880 cookie gets created. 84 06:56.260 --> 07:01.550 And inside that fortune cookie you'll have your user credentials that says this user is logged in and 85 07:01.550 --> 07:03.870 has been successfully authenticated. 86 07:03.890 --> 07:09.630 So that means as you continue to browse the website you won't be asked to login again when you try 87 07:09.630 --> 07:15.410 to access a page that requires authentication because they can always check against that active cookie 88 07:15.410 --> 07:22.160 that you have on your browser and it maintains your authentication for this browsing session until 89 07:22.160 --> 07:29.360 the point when you log out which is when this session ends and the cookie that's related to the session 90 07:29.570 --> 07:30.810 gets destroyed. 91 07:30.830 --> 07:37.970 So we're going to be implementing cookies and sessions into our website and we're going to be doing 92 07:37.970 --> 07:40.880 it using something called Passport. 93 07:40.880 --> 07:47.520 Now if you're good on Node.js and authentication it's almost impossible to not mention Passport. 94 07:47.600 --> 07:54.560 And it's something that's very very flexible and allows you to authenticate your users using either 95 07:54.560 --> 08:00.770 a local strategy like what we're doing right now which is username and password or use a whole bunch 96 08:00.770 --> 08:04.530 of other services such as Google, Facebook, LinkedIn Twitter. 97 08:04.700 --> 08:10.640 And it makes it a lot easier for you to be able to plug these different ways of authentication into 98 08:10.640 --> 08:11.330 your website. 99 08:11.840 --> 08:18.080 So let's get started learning about Passport and learning about how we can implement cookies and sessions.