1 00:00:01,050 --> 00:00:02,190 Instructor: In the last section, we created 2 00:00:02,190 --> 00:00:04,560 our Sign In component and in the process 3 00:00:04,560 --> 00:00:08,160 we reused a ton of code from the Sign out component. 4 00:00:08,160 --> 00:00:09,450 In this section, we're going to create 5 00:00:09,450 --> 00:00:12,270 our sign in action creator and make sure 6 00:00:12,270 --> 00:00:14,610 that we are able to sign a user in 7 00:00:14,610 --> 00:00:16,770 if they already have an account. 8 00:00:16,770 --> 00:00:19,983 So to get started, I'll open up my index.js file. 9 00:00:20,850 --> 00:00:25,470 I'll then take my entire signup action creator right here. 10 00:00:25,470 --> 00:00:27,660 I'm gonna copy the entire thing 11 00:00:27,660 --> 00:00:30,550 and I'll paste a copy of it down underneath 12 00:00:31,680 --> 00:00:35,073 and then I will rename that new function signin. 13 00:00:36,510 --> 00:00:38,400 So just about everything inside of here 14 00:00:38,400 --> 00:00:41,610 almost identical to the logic we had for signup. 15 00:00:41,610 --> 00:00:43,440 All we really have to change is the name 16 00:00:43,440 --> 00:00:45,810 of the action creator. I'm gonna make sure 17 00:00:45,810 --> 00:00:48,540 I change the route that we're trying to post this to 18 00:00:48,540 --> 00:00:51,520 so it should be signin instead of signup 19 00:00:53,220 --> 00:00:55,350 and then for our AUTH_ERROR, rather than 20 00:00:55,350 --> 00:01:00,030 dispatching a payload of 'Email in use', 21 00:01:00,030 --> 00:01:02,110 we'll change that default error to say 22 00:01:03,180 --> 00:01:07,230 'Invalid login credentials' or something similar. 23 00:01:07,230 --> 00:01:09,420 And so this is just gonna tell the user, hey look 24 00:01:09,420 --> 00:01:10,890 you put in an email and password. 25 00:01:10,890 --> 00:01:13,743 We don't know what it is. You gotta try something else. 26 00:01:15,030 --> 00:01:16,630 Okay, so that looks pretty good. 27 00:01:17,760 --> 00:01:19,920 So we've got the signin action creator. 28 00:01:19,920 --> 00:01:22,170 Let's do a quick check here. I think everything else 29 00:01:22,170 --> 00:01:26,280 is good to go so I'll save this file. 30 00:01:26,280 --> 00:01:28,590 I'll flip back over to my browser 31 00:01:28,590 --> 00:01:31,353 and I'm going to try to visit the Sign In route. 32 00:01:34,410 --> 00:01:36,750 I'm gonna do a hard refresh here just make sure 33 00:01:36,750 --> 00:01:39,143 this stuff actually shows up correctly. Okay. 34 00:01:43,230 --> 00:01:45,060 So I'll go to sign in. So you'll see 35 00:01:45,060 --> 00:01:47,010 that the button now says Sign In 36 00:01:47,010 --> 00:01:48,929 and I will attempt to sign in 37 00:01:48,929 --> 00:01:50,790 with an email that I've already created. 38 00:01:50,790 --> 00:01:54,310 So a little bit ago, I did browser@browser.com 39 00:01:55,200 --> 00:01:57,483 and I will enter in my password as well. 40 00:01:58,470 --> 00:02:01,080 And you'll notice I've got my network request tab open here 41 00:02:01,080 --> 00:02:04,983 so I should see a request go out to the Sign In route. 42 00:02:06,180 --> 00:02:09,690 Okay, so there's sign in. I got back my token. 43 00:02:09,690 --> 00:02:12,600 It is presumably being saved to my local storage 44 00:02:12,600 --> 00:02:16,710 and I'm able to flip it over to my slash feature route. 45 00:02:16,710 --> 00:02:20,490 Perfect. Okay, so this is looking pretty darn good. 46 00:02:20,490 --> 00:02:21,900 I think one of the last things we have to do 47 00:02:21,900 --> 00:02:23,790 is to make sure that our header 48 00:02:23,790 --> 00:02:25,710 looks way better than it does right now. 49 00:02:25,710 --> 00:02:27,510 So we're gonna do a little bit of styling on it 50 00:02:27,510 --> 00:02:28,500 and we're also gonna make sure 51 00:02:28,500 --> 00:02:30,630 that you only see the buttons that are relevant 52 00:02:30,630 --> 00:02:33,270 depending upon your authentication status. 53 00:02:33,270 --> 00:02:35,720 So quick break and I'll see you in just a moment.