1 00:00:01,080 --> 00:00:03,850 We've now handled our failure case around signing up. 2 00:00:03,870 --> 00:00:06,030 So now we're going to take care of our success case. 3 00:00:06,060 --> 00:00:10,470 So the first thing we want to do is take that Jason web token that we get back from API and store it 4 00:00:10,500 --> 00:00:11,860 on our device. 5 00:00:11,900 --> 00:00:17,040 Remember the Jason web token is essentially a string of characters that will prove to our API that we 6 00:00:17,040 --> 00:00:18,150 are signed in. 7 00:00:18,330 --> 00:00:22,300 We're gonna take that token independent to every request that we make to our API. 8 00:00:22,410 --> 00:00:28,440 After a user is authenticated that API is then going to trust our token and understand that we're the 9 00:00:28,440 --> 00:00:31,720 same person who just logged in a couple of minutes ago. 10 00:00:31,770 --> 00:00:36,120 The reason that we're going to store this on the device is that anytime a user restarts our application 11 00:00:36,360 --> 00:00:42,180 by closing it or turning off their phone and opening it back up anytime that happens all the state inside 12 00:00:42,180 --> 00:00:44,570 of application gets completely wiped away. 13 00:00:44,590 --> 00:00:48,900 So that's all the state inside of our different components and all the state inside of our context as 14 00:00:48,900 --> 00:00:49,980 well. 15 00:00:50,010 --> 00:00:56,190 So rather than making our user log back in every single time that the application gets restarted we're 16 00:00:56,190 --> 00:01:01,590 going to instead store that Jason web token on some long term storage on the device. 17 00:01:01,620 --> 00:01:04,650 This information will be persisted across restarts. 18 00:01:04,740 --> 00:01:11,310 So any time our application gets restarted we can check in local storage or the storage idea and see 19 00:01:11,310 --> 00:01:12,720 if we have a token inside there. 20 00:01:12,900 --> 00:01:16,200 If we have a token we will then assume that we are still logged in. 21 00:01:17,010 --> 00:01:21,730 So let's understand how we're going to work with storage on the device. 22 00:01:21,810 --> 00:01:26,770 So to work with storage we're going to use a little module called async storage async storage has a 23 00:01:26,770 --> 00:01:30,590 couple of different methods tied to it for storing some pieces of information. 24 00:01:30,820 --> 00:01:34,900 So I won't even read off the names these methods because I bet you can guess what each of them does 25 00:01:35,680 --> 00:01:41,470 now async storage is not really for storing say images or video or music or stuff like that. 26 00:01:41,470 --> 00:01:46,990 Instead it's much more about storing not small snippets of information like maybe a Jason object or 27 00:01:46,990 --> 00:01:48,450 something like that. 28 00:01:48,520 --> 00:01:51,420 So it's really perfect for our particular use case here. 29 00:01:51,430 --> 00:01:57,660 Everything we store inside of async storage will be persisted across restarts of our application. 30 00:01:57,700 --> 00:02:00,460 Now there is one downside to async storage. 31 00:02:00,460 --> 00:02:02,520 One quick little gotcha here. 32 00:02:02,680 --> 00:02:07,720 So the time that I am making this video async storage is a part of the react native standard library 33 00:02:08,200 --> 00:02:10,760 but it's going to soon be deprecated. 34 00:02:10,760 --> 00:02:15,280 So that means that at some point time the async storage module that is currently a part of React Native 35 00:02:15,490 --> 00:02:21,400 is going to be removed from the standard library and it's going to instead be a part of a separate module 36 00:02:21,400 --> 00:02:26,930 called React Native async storage that we have to install as a separate library. 37 00:02:27,010 --> 00:02:31,810 However this separate library is not yet compatible with Expo which is what we are using inside of our 38 00:02:31,810 --> 00:02:33,310 application. 39 00:02:33,310 --> 00:02:39,070 So our work around for right now is to continue to use the version of async storage that is included 40 00:02:39,070 --> 00:02:45,250 with the react native standard library even though it is being deprecated then at some point time probably 41 00:02:45,250 --> 00:02:50,830 by the time you watch this video whenever react native async storage is compatible with Expo I'm going 42 00:02:50,830 --> 00:02:55,720 to put up a note after this video until you hey use this other module now instead. 43 00:02:55,780 --> 00:03:00,920 Now this might sound like a real big pain but trust me it's really not a big deal at all. 44 00:03:00,970 --> 00:03:06,760 I've got the documentation for react native async storage so here's the separate new module that we 45 00:03:06,760 --> 00:03:08,890 would ideally be using right here. 46 00:03:09,130 --> 00:03:13,330 So going to take a look down here at the read me a really quick to react native async storage. 47 00:03:13,330 --> 00:03:18,930 Again this is the new version that ideally we would use but is not yet compatible with expo. 48 00:03:19,030 --> 00:03:24,040 So under this section that says usage you'll see that to store data we're supposed to call async storage 49 00:03:24,090 --> 00:03:29,470 dot set item and to read information we call async storage dot get item. 50 00:03:29,470 --> 00:03:35,440 These are the exact same methods as what we use today with the deprecated version of async storage is 51 00:03:35,440 --> 00:03:37,210 the same exact stuff. 52 00:03:37,240 --> 00:03:42,640 So even though you're going to eventually be using a different library it's still the exact same API 53 00:03:42,850 --> 00:03:43,860 same interaction. 54 00:03:43,870 --> 00:03:46,470 Absolutely nothing is different. 55 00:03:46,510 --> 00:03:51,730 So again at some point time if you see a video after this one or a quick note that says hey use the 56 00:03:51,730 --> 00:03:56,250 separate module all you have to do is follow the directions inside that little text lecture. 57 00:03:56,260 --> 00:04:01,630 If you see it after this one if you don't see any separate lecture after this one or any note just use 58 00:04:01,660 --> 00:04:02,740 the async storage. 59 00:04:02,740 --> 00:04:06,910 That is a part of React Native standard library and that's why I to show you in the following videos 60 00:04:06,940 --> 00:04:08,570 after this one date. 61 00:04:08,590 --> 00:04:13,570 So I apologize for the confusion here but again not yet compatible text vote so it's really just the 62 00:04:13,570 --> 00:04:14,970 best we can do. 63 00:04:15,060 --> 00:04:16,810 So now we understand this little caveat here. 64 00:04:16,810 --> 00:04:20,770 Let's take a quick pause and start making use of async storage in the next video.