1 00:00:01,060 --> 00:00:04,190 In this video we're going to make one last change or author douceur. 2 00:00:04,350 --> 00:00:08,850 At present this author reducer is always going to return an object that vaguely looks like this right 3 00:00:08,850 --> 00:00:09,350 here. 4 00:00:09,510 --> 00:00:12,720 So it will be an object with a single property of is signed in. 5 00:00:12,830 --> 00:00:16,020 And that value will be equal to either no true or false. 6 00:00:16,050 --> 00:00:19,050 So we're going to add in one additional property to this thing. 7 00:00:19,050 --> 00:00:23,550 This other property is not going to make a lot of sense right now but it's going to make a lot of sense 8 00:00:23,610 --> 00:00:29,010 later on as we continue developing this course member that the entire idea this application is that 9 00:00:29,010 --> 00:00:34,080 we're going to eventually have an API server like this thing right here that's going to store a list 10 00:00:34,110 --> 00:00:37,440 of all the streams that have been created by our users. 11 00:00:37,440 --> 00:00:42,270 The other thing I want you to recall is that inside of our mockups we had said when we pull this markup 12 00:00:42,390 --> 00:00:43,550 markups up right here. 13 00:00:43,680 --> 00:00:49,530 So we had said that once a user is logged in a user should be able to delete or edit the streams that 14 00:00:49,530 --> 00:00:51,230 they have created. 15 00:00:51,240 --> 00:00:56,460 So at some point in time we need to make sure that each stream is somehow associated with the user who 16 00:00:56,460 --> 00:00:57,600 created it. 17 00:00:57,600 --> 00:01:03,390 So in order to do so we're going to essentially create each stream record inside that API server that 18 00:01:03,390 --> 00:01:07,290 contains the ID of the user who created it. 19 00:01:07,320 --> 00:01:10,530 Now at present we don't have any user ID or anything like that. 20 00:01:10,710 --> 00:01:14,610 But it turns out that we do it through Google off. 21 00:01:14,610 --> 00:01:16,190 Let me show you something really quickly. 22 00:01:16,320 --> 00:01:20,460 I'm going to flip back over to my browser council at our application and I'm going to make sure that 23 00:01:20,460 --> 00:01:21,270 I am signed in. 24 00:01:21,270 --> 00:01:22,840 Make sure you are signed in as well. 25 00:01:22,890 --> 00:01:27,990 If you want to write out this code to then inside my counsel I'm going to reference the off instance 26 00:01:28,200 --> 00:01:29,920 with GA API. 27 00:01:29,980 --> 00:01:38,540 Off to get off instance that current user so this current user right here is a reference to all the 28 00:01:38,540 --> 00:01:44,390 information about the user who is currently signed in to our application inside of this current user 29 00:01:44,390 --> 00:01:45,040 object. 30 00:01:45,110 --> 00:01:52,160 Is the idea of the user who signed in now this idea is the Google ID for this user when this user created 31 00:01:52,160 --> 00:01:57,290 their account through Google dot com like they went to Google dot com and sign up for new account Google 32 00:01:57,350 --> 00:01:59,840 assigned them an ID automatically. 33 00:01:59,840 --> 00:02:06,020 So inside of our application we're just going to reuse the Google ID for this user to record which user 34 00:02:06,020 --> 00:02:07,970 created which Stream. 35 00:02:08,030 --> 00:02:12,470 Now a lot of this stuff it's not going to seem super relevant right now but trust me as soon as we start 36 00:02:12,470 --> 00:02:16,040 creating streams and trying to edit them this is going to make a lot more sense. 37 00:02:16,040 --> 00:02:21,370 And figuring out how we make sure that a given user is only able to create and edit a stream that are 38 00:02:21,530 --> 00:02:24,270 only able to edit and delete a stream that they have created. 39 00:02:25,160 --> 00:02:31,910 So to actually get an idea out of this object right here we can reference current user get and then 40 00:02:32,060 --> 00:02:39,500 call get Id like so and that right there is the ID of the user who has currently signed in to our application 41 00:02:40,370 --> 00:02:46,190 if we sign out and then sign in as some other user like with some other gmail address or google address 42 00:02:46,400 --> 00:02:49,040 the ID will be completely different. 43 00:02:49,070 --> 00:02:54,770 So we want to essentially store this ID inside of our Auth. reducer or through our Auth. reducers. 44 00:02:54,770 --> 00:02:59,000 So with that when we create streams at some point in the feature we can mark which user created the 45 00:02:59,010 --> 00:03:02,380 stream very easily by using that ID. 46 00:03:02,390 --> 00:03:03,020 All right. 47 00:03:03,050 --> 00:03:09,680 So to do so we're going to first flip back over to our Google component and site if you're going to 48 00:03:09,680 --> 00:03:12,380 go on down to on off change. 49 00:03:12,530 --> 00:03:16,480 So when we call on sign in I don't want to just call sign in. 50 00:03:16,490 --> 00:03:21,230 I went to call sign in and also in the idea the user who is currently signed in. 51 00:03:21,500 --> 00:03:26,780 So I'm going to add as an argument to this action creator a call to our instance and we're going to 52 00:03:26,780 --> 00:03:30,710 essentially write out the same code that you see right here to get the idea the currently signed in 53 00:03:30,770 --> 00:03:31,490 user. 54 00:03:31,760 --> 00:03:40,250 So right you're going to say this off dot current user don't get get ID. 55 00:03:40,300 --> 00:03:40,780 Like so 56 00:03:44,020 --> 00:03:47,920 now when we call this action creator we're going to also pass on the idea of the user who has signed 57 00:03:47,920 --> 00:03:48,520 in. 58 00:03:48,790 --> 00:03:54,040 So now we need to make sure that we open up our action creator as well received this ID as an argument 59 00:03:54,220 --> 00:03:55,740 and pass it through to the reducer. 60 00:03:55,750 --> 00:04:03,260 By assigning this ID to the action object as a payload property so inside of my actions index file I'm 61 00:04:03,260 --> 00:04:06,150 going to find my sign in action creator is right here. 62 00:04:06,860 --> 00:04:14,480 I'm going to receive that user ID as an argument and I'll add it to my action on the palette property. 63 00:04:15,440 --> 00:04:22,910 Like so and so now finally and of her Auth. reducer This is the part that we worked up to Rubin to make 64 00:04:22,910 --> 00:04:27,770 sure that when a user signs in right here we not only update the is signed in property we're going to 65 00:04:27,770 --> 00:04:31,530 make sure that we also update the user id flag as well. 66 00:04:31,550 --> 00:04:37,250 Now to really do this correctly I'm going to make sure that all my initial states I put on is the user 67 00:04:37,310 --> 00:04:41,200 id and I'm going to initialize it to null with the value of nil. 68 00:04:41,210 --> 00:04:43,950 That means that we don't currently have a user ID. 69 00:04:44,390 --> 00:04:50,060 So then inside of this update right here for a case seinen I'm going to make sure that I update the 70 00:04:50,150 --> 00:04:54,910 user id property and the new value for this property is going to come from action. 71 00:04:54,920 --> 00:04:58,880 Payload. 72 00:04:58,980 --> 00:05:02,540 Now when a user signs out we should probably also clear that property. 73 00:05:02,580 --> 00:05:07,260 So when the user signs out we want to make sure that we don't accidently carry that user ID around because 74 00:05:07,260 --> 00:05:09,040 when the user signs out that's pretty much it. 75 00:05:09,060 --> 00:05:12,390 They do not want to be associated with our application any more. 76 00:05:12,570 --> 00:05:20,830 So when a user signs out I'm going to update user id back to a value of NULL like so OK so that's pretty 77 00:05:20,830 --> 00:05:21,570 much it. 78 00:05:21,580 --> 00:05:23,680 Now let's do one more quick test over here. 79 00:05:23,680 --> 00:05:26,860 We're not going to actually see any change to our application. 80 00:05:26,860 --> 00:05:30,460 Nonetheless I just want to make sure that we can go through the entire authentication process without 81 00:05:30,460 --> 00:05:31,900 seeing an error message. 82 00:05:31,930 --> 00:05:39,010 So I will refresh the page then sign out and sign back in. 83 00:05:39,230 --> 00:05:42,550 And it looks like I signed in successfully without any error message. 84 00:05:42,560 --> 00:05:43,610 Perfect. 85 00:05:43,610 --> 00:05:44,020 All right. 86 00:05:44,030 --> 00:05:46,980 So that's pretty much it for authentication. 87 00:05:47,000 --> 00:05:51,560 That's all we really had to do we put together the author douceur we put together the Google component 88 00:05:51,800 --> 00:05:54,980 and these two very simple action creators. 89 00:05:54,990 --> 00:05:56,350 So now let's take a pause right here. 90 00:05:56,360 --> 00:06:00,110 When we come back the next section we're going to start move forward on our application and making sure 91 00:06:00,110 --> 00:06:04,820 that a user can eventually create a stream and then eventually show a list of streams. 92 00:06:05,000 --> 00:06:07,220 So quick pause and I'll see you in just a minute.