1 00:00:07,520 --> 00:00:08,660 Welcome back. 2 00:00:08,690 --> 00:00:14,000 In this video, let's continue the authentication system from the client side. 3 00:00:14,450 --> 00:00:18,710 What we have done is what we call the authentication. 4 00:00:19,040 --> 00:00:22,430 What has left is what we call authorization. 5 00:00:22,430 --> 00:00:24,320 But we lack something. 6 00:00:24,320 --> 00:00:27,230 And here is what I mean, remember? 7 00:00:27,260 --> 00:00:33,470 As soon as we look in our server does not remember who has logged in. 8 00:00:33,910 --> 00:00:41,030 Unless we send a token and pass it to a header upon every request. 9 00:00:41,330 --> 00:00:47,690 But in one case, when you log in, we are just dumping the logging user details into the console and 10 00:00:47,690 --> 00:00:48,520 that is it. 11 00:00:48,530 --> 00:00:56,240 So to avoid that, we are going to save the logging user into local storage and this is what we are 12 00:00:56,240 --> 00:00:57,230 going to do. 13 00:00:57,500 --> 00:01:02,270 But we faced some error here, meaning that logging field was not found. 14 00:01:02,360 --> 00:01:08,540 We have log in failed or I think I made some typo mistake. 15 00:01:08,540 --> 00:01:15,470 Here is failed id where again we still have the error I think. 16 00:01:15,470 --> 00:01:17,930 Oh I need to add ID to it. 17 00:01:17,930 --> 00:01:18,550 Yeah. 18 00:01:19,150 --> 00:01:19,910 Go to it now. 19 00:01:19,910 --> 00:01:20,780 Is happy. 20 00:01:21,290 --> 00:01:21,770 All right. 21 00:01:21,770 --> 00:01:23,240 So let's continue. 22 00:01:23,540 --> 00:01:31,760 So what we are going to do is that we are going to save the logging user into local storage. 23 00:01:31,940 --> 00:01:34,670 So let's see how we are going to implement that. 24 00:01:35,030 --> 00:01:43,310 Remember this way, we are handling the success, so we are going to save the user into local storage. 25 00:01:43,400 --> 00:01:52,430 So let's add a comment here and say that add user to storage, that is the look at storage. 26 00:01:53,390 --> 00:01:54,410 So here we go. 27 00:01:54,440 --> 00:01:58,520 We bring the local storage set item. 28 00:01:58,730 --> 00:02:02,800 And for this I want to use a property called user off. 29 00:02:02,930 --> 00:02:12,680 And here I'm going to string ify the data as JSON string file and I'm going to pass in the entire payload 30 00:02:12,680 --> 00:02:14,270 and that is it. 31 00:02:14,420 --> 00:02:16,550 So moment of truth. 32 00:02:16,610 --> 00:02:18,740 Let's check our thing. 33 00:02:18,780 --> 00:02:19,670 Have some error here. 34 00:02:19,670 --> 00:02:20,210 Don't worry. 35 00:02:20,210 --> 00:02:21,060 It's from TV. 36 00:02:21,230 --> 00:02:27,920 Yes, for our HTML, let's open our local storage by going to application and our link. 37 00:02:27,920 --> 00:02:28,670 That is it. 38 00:02:28,670 --> 00:02:33,200 So let's move or remove any data inside your storage. 39 00:02:33,200 --> 00:02:34,820 So let's have a look. 40 00:02:35,030 --> 00:02:39,440 When I make use of atom at gmail.com. 41 00:02:39,890 --> 00:02:40,880 The password. 42 00:02:40,880 --> 00:02:42,410 One, two, three, four, five. 43 00:02:42,410 --> 00:02:43,610 And let me hit send. 44 00:02:44,690 --> 00:02:46,460 Let me refresh my local storage. 45 00:02:46,460 --> 00:02:55,220 For some reasons, I'm not seeing the data inside our local storage and also I'm not seeing the response 46 00:02:55,220 --> 00:03:00,250 down here, meaning that I am not handling the type well. 47 00:03:00,260 --> 00:03:04,220 So inside the dispatch, remember I changed this one. 48 00:03:04,220 --> 00:03:09,080 So now it's going to be the constant as look in success. 49 00:03:09,080 --> 00:03:11,540 So now moment of truth. 50 00:03:11,870 --> 00:03:15,740 Let me clear it and let me open my storage again. 51 00:03:15,740 --> 00:03:21,290 Provide right looking credentials at gmail.com. 52 00:03:21,650 --> 00:03:23,420 One, two, three, four, five. 53 00:03:23,420 --> 00:03:24,380 And it's sent. 54 00:03:24,590 --> 00:03:31,490 And you can see that I have a property user off with a value from the back end. 55 00:03:31,730 --> 00:03:40,220 So now that we have the user inside the local storage, we want to update our initial state by using 56 00:03:40,220 --> 00:03:45,710 the data inside here to update the initial state of user. 57 00:03:45,710 --> 00:03:55,250 Oh, and to achieve that, it's going to be pretty simple here by making use of low cost storage, low 58 00:03:55,250 --> 00:04:04,760 cost storage dot get item and I want the user off make sure that you provide the same property name 59 00:04:04,760 --> 00:04:06,050 as we see here. 60 00:04:06,380 --> 00:04:09,410 Otherwise you're going to see some box. 61 00:04:09,500 --> 00:04:09,950 Great. 62 00:04:09,950 --> 00:04:19,430 But I want to convert this one to object so I need to pass the entire function to Jason Dot pass. 63 00:04:25,660 --> 00:04:35,440 So in my component, which is the log in, any time I refresh my page, I will see the log in user right 64 00:04:35,440 --> 00:04:37,060 inside my components. 65 00:04:37,060 --> 00:04:41,380 So let me see the log in here where we are console logging it. 66 00:04:41,410 --> 00:04:45,130 Now let's go to console and let's refresh it. 67 00:04:45,790 --> 00:04:48,250 Let me play this one and now let me refresh it. 68 00:04:48,250 --> 00:04:51,790 And here you can see that we have the log in user. 69 00:04:52,060 --> 00:04:56,860 So it is how we can set a token or a user into look at storage.