1 00:00:00,770 --> 00:00:05,180 Before we move on to our tracklist scream this probably one last quick thing we want to take care of. 2 00:00:05,570 --> 00:00:10,290 Remember whenever our application restarts in any way we dump all of our state. 3 00:00:10,430 --> 00:00:15,320 So we need to make sure that if the user still has a token inside of async storage we want to essentially 4 00:00:15,380 --> 00:00:18,510 automatically log them in and send them to the track list. 5 00:00:18,530 --> 00:00:22,100 So in short this is really what we want to whenever the app starts up. 6 00:00:22,100 --> 00:00:28,070 We need to check to see if there is a token in async storage if there is go to the track list. 7 00:00:28,070 --> 00:00:33,470 Otherwise take the user to the sign up or the essentially off flow and we will allow the user to then 8 00:00:33,470 --> 00:00:37,340 sign in and then eventually get over to track list. 9 00:00:37,450 --> 00:00:43,040 So to actually make this question or answer this question we're going to create a new action function 10 00:00:43,340 --> 00:00:47,270 that's just going to look inside of async storage and check to see if there's a token there. 11 00:00:47,270 --> 00:00:52,400 If there is we're then going to dispatch an action with that token and essentially put the token into 12 00:00:52,400 --> 00:00:54,470 our context object. 13 00:00:54,710 --> 00:00:55,510 So let's get to it. 14 00:00:55,700 --> 00:01:01,240 Let's first create a function that's going to check to see if there is a token an async storage. 15 00:01:01,250 --> 00:01:07,640 So once again inside of off context J.S. I'm going to define a new function I'm going to call this one 16 00:01:07,650 --> 00:01:11,410 How about try local sign in. 17 00:01:11,420 --> 00:01:15,710 So the reason I'm calling it this is that we're essentially trying to sign the user in automatically 18 00:01:16,280 --> 00:01:21,740 using just information on the user's device as opposed to making some API request or something like 19 00:01:21,740 --> 00:01:28,480 that and then going to mark the second function here as a sync and then inside there we'll say coins 20 00:01:28,480 --> 00:01:36,610 token is a weight async storage dot get item and remember we stored that token under token so now if 21 00:01:36,610 --> 00:01:39,370 we have a token token there's going to be the token. 22 00:01:39,400 --> 00:01:41,860 Otherwise it's going to be simply null. 23 00:01:41,860 --> 00:01:48,190 So then inside of here we can put in a simple if check will say if there is a token then Let's dispatch 24 00:01:48,190 --> 00:01:49,990 an action immediately. 25 00:01:50,110 --> 00:01:52,920 So I'm going to dispatch an action of type. 26 00:01:52,990 --> 00:01:57,430 Remember we can actually reuse one of our existing action types we have right here which is sign in 27 00:01:57,760 --> 00:02:02,900 and that's going to make sure that we just store the token from the payload inside of our state it's 28 00:02:02,960 --> 00:02:08,270 going to dispatch an action of type sign in and the payload will be the token that we've just pulled 29 00:02:08,330 --> 00:02:13,610 out of local storage or async storage and then immediately after that we're going to make sure that 30 00:02:13,610 --> 00:02:19,610 we navigate our user over to track list so we can once again use the navigate function that we've already 31 00:02:19,610 --> 00:02:26,770 imported into this file so there's navigate right there so to navigate the user around we'll call navigate 32 00:02:28,480 --> 00:02:33,620 and say that we want to go to the track list screen. 33 00:02:33,830 --> 00:02:36,450 Now if we fail to find a token that's totally fine. 34 00:02:36,500 --> 00:02:40,940 We don't actually have to navigate the user over to our log and flow or anything like that but just 35 00:02:40,940 --> 00:02:43,090 to make sure that we're really explicit here. 36 00:02:43,190 --> 00:02:48,170 I'll put it in else case and say okay if we don't find the token let's just make 100 percent certain 37 00:02:48,380 --> 00:02:51,070 that we navigate to our log and flow. 38 00:02:51,120 --> 00:02:55,160 So that's going to make sure that we go to our log and flow right there which by default will show these 39 00:02:55,160 --> 00:02:56,780 sign up screen. 40 00:02:56,780 --> 00:03:04,060 We could alternatively just say very explicitly take me to sign up but either sign up or log and would 41 00:03:04,060 --> 00:03:06,800 be appropriate here okay. 42 00:03:06,830 --> 00:03:12,230 Now we just need a place to call this action function from let's make sure that we first export it at 43 00:03:12,230 --> 00:03:13,470 the bottom of the file. 44 00:03:13,490 --> 00:03:22,200 So I'll go down to the bottom of our file and wired up to our action object right here so try local 45 00:03:22,920 --> 00:03:27,730 signing. 46 00:03:27,850 --> 00:03:29,470 So now we've got that all wired up. 47 00:03:29,470 --> 00:03:33,880 We can probably call this thing anytime that a user navigates to art sign up screen. 48 00:03:33,880 --> 00:03:38,190 Remember that's the default screen that we show an application first starts up. 49 00:03:38,810 --> 00:03:47,160 So inside of my sign up screen I'm going to make sure that I pull off that new try local sign in function. 50 00:03:47,160 --> 00:03:51,900 And then we want to make sure that we only try to call his function exactly at one time when this component 51 00:03:51,990 --> 00:03:54,750 is first shown on the screen of our device. 52 00:03:54,810 --> 00:03:58,950 So to do so we can once again use that U.S. fact hook from the react library. 53 00:03:59,130 --> 00:04:04,590 Remember use effect allows us to call some function just one time when our component sign up screen 54 00:04:04,650 --> 00:04:12,800 first appears on the screen so I can make sure that I import the hook use effect then inside of my component 55 00:04:12,860 --> 00:04:19,050 I'll call use effect I'll pass in the function and remember to actually indicate that we only want to 56 00:04:19,050 --> 00:04:20,960 run that function exactly one time. 57 00:04:21,060 --> 00:04:28,440 We'll put in an empty array like so so then inside of here we can call try local sign in and that should 58 00:04:28,440 --> 00:04:30,450 be at OK. 59 00:04:30,460 --> 00:04:34,210 Now at this point on my device I am definitely signed in so to speak. 60 00:04:34,210 --> 00:04:39,880 In other words I definitely currently have a token inside of easing storage so I'm going to expect that 61 00:04:39,880 --> 00:04:47,050 when I save this file in my application reloads I should eventually appear at the track list screen. 62 00:04:47,050 --> 00:04:51,780 It's going to save this and sure enough I get to the trackless screen. 63 00:04:51,780 --> 00:04:57,000 There's just one little issue when I see that refresh occur you'll notice that for just a split second 64 00:04:57,210 --> 00:05:00,020 I see the authentication screen first. 65 00:05:00,060 --> 00:05:05,100 That's because we first show these sign up screen to the user and only when that sign up screen appears 66 00:05:05,370 --> 00:05:12,110 do we then attempt to do our local sign in so in that very small split seconds that it takes between 67 00:05:12,200 --> 00:05:16,970 showing these sign up screen to the user and then calling try local sign in and actually looking inside 68 00:05:17,000 --> 00:05:18,950 of our async storage. 69 00:05:18,950 --> 00:05:24,350 Well for that very small split second the user ends up seeing the sign up screen which is just a little 70 00:05:24,350 --> 00:05:25,410 bit awkward. 71 00:05:25,520 --> 00:05:29,600 So I didn't go to be really nice to kind of fix that up and make sure that there is no kind of flash 72 00:05:29,600 --> 00:05:31,310 of content like that. 73 00:05:31,330 --> 00:05:33,710 Let's take a quick pause right here when we come back the next video. 74 00:05:33,710 --> 00:05:35,300 We'll figure out how to deal with that.