WEBVTT 00:02.120 --> 00:08.810 So things are coming along nicely, but we still have some work to do, for example, back here in Tolkien's 00:08.810 --> 00:15.290 Dargo right now, when we insert a token, we're inserting a token every time somebody logs in. 00:15.740 --> 00:18.630 And of course, we don't really need to keep the old tokens. 00:18.650 --> 00:25.310 So perhaps once someone tries to log in, one of the right things to do is to get rid of any preexisting 00:25.310 --> 00:27.510 tokens for that user I.D. So let's do that. 00:28.400 --> 00:34.310 So we'll say delete existing tokens and we'll just create a statement. 00:35.760 --> 00:38.720 We're going to have to change the assignment operator in a minute, but that's OK. 00:39.380 --> 00:47.630 And that's going to be nothing more sophisticated than delete from tokens where user ID equals questionmark. 00:49.660 --> 00:54.490 Now we execute that, so we don't care about the result, but we will check for an error and that's 00:54.490 --> 00:58.750 equal to the exact context. 00:58.870 --> 01:00.370 And we handed the context. 01:00.550 --> 01:07.810 We handed our statement and we had a new idea, which is the user I.D. and we check for an error if 01:07.810 --> 01:09.670 error is not equal to nil. 01:13.710 --> 01:21.010 Return the air and all we have to do here is change these to equal signs instead of assignment operators. 01:23.100 --> 01:28.410 So if there are no existing tokens, this won't it'll still execute. 01:28.410 --> 01:30.180 It just won't delete any any rows. 01:30.690 --> 01:32.020 And then we insert the token. 01:32.040 --> 01:33.000 So that's the first step. 01:33.570 --> 01:38.840 The second thing is on the login page, when we log in, we go to my Web browser. 01:39.600 --> 01:41.220 When we log in, we get no feedback. 01:41.250 --> 01:44.280 Now, eventually, we'll probably redirect the user to another page. 01:44.280 --> 01:49.290 But it's still it's useful to give feedback, say if something goes wrong or if something goes right. 01:49.770 --> 01:51.170 And we can do that easily enough. 01:51.250 --> 02:00.060 If we go back to buy once the buy dash one start page that HTML, we have this nice alert just before 02:00.060 --> 02:00.510 a forum. 02:00.510 --> 02:08.160 So I'm going to copy that and go back into login page and just before the form, I'll put that right 02:08.160 --> 02:08.460 here. 02:11.740 --> 02:20.290 And I'll change the ID to login messages and then down here in the JavaScript, we can put the same 02:20.290 --> 02:23.210 kind of thing we have in the striped dash, just partial. 02:23.710 --> 02:28.330 So here, if we look at the top, we have error and success. 02:28.330 --> 02:31.380 So I'm going to copy these functions and just change them as necessary. 02:31.390 --> 02:39.010 So I'll copy those, go back to login page, paste those functions and I'll just call this show error 02:40.570 --> 02:41.650 and show success. 02:44.050 --> 02:52.210 And of course, we need a variable to point to that div, that alert give, so we'll just say let logging 02:52.210 --> 02:52.840 messages 02:55.570 --> 02:59.700 equal document, get out of it by ID. 03:00.100 --> 03:02.950 And I called it, what did I call it, card messages. 03:02.950 --> 03:04.090 No logging messages. 03:07.220 --> 03:09.200 Logging the messages. 03:11.350 --> 03:14.320 And I guess there's a reference to that debate, so I can just copy this. 03:16.030 --> 03:25.140 Paste it here and here and here and here and here all the way down. 03:28.830 --> 03:35.340 And we don't want this to be transaction's successful, we'll just make it log-in successful and everything 03:35.340 --> 03:36.780 else should stay pretty much the same. 03:37.650 --> 03:44.280 So now if we come down to the part where we do our attempt to authenticate when we call API authenticate 03:45.630 --> 03:49.080 in the last, then cause we can still log the response. 03:49.080 --> 03:50.150 There's nothing wrong with that. 03:50.310 --> 03:51.120 But we can do a check. 03:51.420 --> 03:53.220 So we'll just say, is there an error? 03:53.250 --> 03:57.180 So if DataDot error, that's equal to true. 03:57.750 --> 04:00.990 If that's exactly equal to false, then we've authenticate. 04:02.460 --> 04:04.600 Otherwise something went wrong. 04:05.970 --> 04:08.970 So if we have authenticated, what are we going to do with this? 04:08.970 --> 04:14.130 Well, what I'm going to do is store the token and the expiry right. 04:14.130 --> 04:15.270 In local storage. 04:15.270 --> 04:17.850 And I can put it anywhere, but I'm going to put it in local storage for now. 04:18.330 --> 04:26.770 So local storage and we'll set an item and we'll set token. 04:27.660 --> 04:29.880 And that's what I'll call the entry so I can pull it back. 04:29.890 --> 04:36.840 And what I needed to data the authentication token the token. 04:39.480 --> 04:47.610 And I also want the expiry, so I'll just duplicate that and make this token expiry, and that's equal 04:47.610 --> 04:51.330 to data to data syndication, underscore Tolkan expiry. 04:54.910 --> 05:04.350 And the last thing I'll do is say show success, otherwise we want to show the error. 05:04.690 --> 05:06.850 So show error. 05:09.270 --> 05:12.000 And we're going to hand it DataDot message. 05:14.070 --> 05:16.130 All right, let's start everything and try this out. 05:16.140 --> 05:19.800 So make stuff to make sure everything is stopped. 05:19.830 --> 05:23.800 It is make start and I'll just start the front and back in that way. 05:26.100 --> 05:30.330 We'll go back to a Web browser, reload this page. 05:32.380 --> 05:38.610 And we have an expected expression, God, learn more, let's go see that one Log-in one forty one. 05:39.340 --> 05:40.500 So I have a typo somewhere. 05:44.280 --> 05:44.850 There it is. 05:48.860 --> 05:55.550 That was sloppy, let's start things over again, make stuff make start. 05:59.460 --> 06:00.790 Reload that page again. 06:02.100 --> 06:03.570 Good, let's clear the console. 06:03.840 --> 06:09.330 So let's try logging in, first of all, with invalid credentials, me at here dot com test. 06:12.890 --> 06:17.830 And data is not defined, so the more sloppy JavaScript error, so let's find that again. 06:20.530 --> 06:28.330 Yes, so let's just call this data, because I'm calling it a response, and if we change this one to 06:28.330 --> 06:34.480 data and start and stop the application a third time stop. 06:36.890 --> 06:37.310 Start. 06:41.610 --> 06:42.340 Let's try that again. 06:43.260 --> 06:50.160 So reload the page, clear the JavaScript console and log in with invalid credentials, meet here dot 06:50.160 --> 06:57.600 com test and that should give me my error div at the top, a little alert and it does invalid authentication 06:57.600 --> 06:58.200 credentials. 06:58.800 --> 07:05.850 Now let's login with the corrected credentials admin, for example, dot com with the password password, 07:06.540 --> 07:09.300 which I think I just mistyped password. 07:11.860 --> 07:17.440 And there it is now let's look at our storage, so I go to my JavaScript console and choose storage 07:17.830 --> 07:24.370 and look at local storage for localhost four thousand and there is my token and there is my expiry. 07:24.670 --> 07:25.090 Perfect. 07:25.330 --> 07:26.310 So that works well. 07:27.040 --> 07:34.330 So now that we have that information, we can actually do things like change the login link up here 07:34.360 --> 07:40.150 to a log out if we're successfully logged in and change it back to a log in if and when we log out or 07:40.150 --> 07:41.110 the token expires. 07:41.740 --> 07:48.940 And of course, we can use that token to send back information to the back end with a barer header that 07:48.940 --> 07:54.820 says, this is who I am, this is my token, and write some logic on the backend that verifies and validates 07:54.820 --> 07:59.560 that token and make sure that it is a token we issued and that it hasn't expired yet. 08:00.100 --> 08:02.310 And we'll get started on that in the next election.