1 00:00:00,550 --> 00:00:01,660 Not bad, not bad. 2 00:00:01,930 --> 00:00:10,360 We have our app now where you would just want to connected to our project and as far as the info, we 3 00:00:10,360 --> 00:00:18,760 can get it if we navigate here, the docs and more specifically, we're looking for you Libres are here 4 00:00:19,150 --> 00:00:24,200 and I'm going to go with Arth zero React SDK. 5 00:00:24,540 --> 00:00:31,210 Now, there's also option for this one of zero single page app as they go, but actually find this one 6 00:00:31,210 --> 00:00:38,020 to be a bit more straightforward and less buggy because with this one there were some weird bugs. 7 00:00:38,020 --> 00:00:46,780 So I just went with react as D.K. So we click now there is option for reading more info and essentially 8 00:00:46,780 --> 00:00:48,930 I cover that in the previous project. 9 00:00:49,240 --> 00:00:53,850 There's this one setting that we add that we can find in the API. 10 00:00:54,100 --> 00:01:00,370 By the way, I'll open up one more window, but I'll show you that set up right away. 11 00:01:00,410 --> 00:01:07,960 So tell me honestly, yes, there is some useful info as far as we can set everything up, but we can 12 00:01:07,960 --> 00:01:10,990 get most of it in here as well. 13 00:01:11,350 --> 00:01:15,550 And the way we set it up, we would need to, of course, install the package. 14 00:01:16,330 --> 00:01:20,510 So we would go with NPM, install all zero and then the react one. 15 00:01:20,800 --> 00:01:24,490 Now, of course, I have already installed it for us. 16 00:01:24,490 --> 00:01:34,480 So we have it if you are using the star project and then we import Arth zero component from that package 17 00:01:34,840 --> 00:01:43,090 in mind that this is a named import and then we would want to wrap our application in that component. 18 00:01:43,330 --> 00:01:45,090 And then we need to provide props. 19 00:01:45,340 --> 00:01:46,630 We need to provide domain. 20 00:01:46,840 --> 00:01:48,610 We need to provide client Edie. 21 00:01:48,910 --> 00:01:51,010 And of course, we have a redirect. 22 00:01:51,220 --> 00:01:52,030 You are right. 23 00:01:52,270 --> 00:01:55,980 And then there is extra one of the local storage. 24 00:01:55,990 --> 00:02:02,800 So this is the case where I'll quickly show you the actual API and we're going to keep on scrolling, 25 00:02:02,800 --> 00:02:10,180 keep on scrolling, and hopefully we will hit it at some point because what we're looking for is the 26 00:02:10,180 --> 00:02:11,290 local storage. 27 00:02:11,680 --> 00:02:14,800 So we would want to set up cache location. 28 00:02:15,070 --> 00:02:20,950 This is the problem that we're looking for and by default, it's not going to be a local storage and 29 00:02:20,950 --> 00:02:24,220 we just want to set it up that we'll save it in a local storage. 30 00:02:24,610 --> 00:02:27,670 And what's really called just saves the tokens in local storage. 31 00:02:27,680 --> 00:02:31,660 And again, you can just avoid some unnecessary bugs. 32 00:02:31,870 --> 00:02:37,320 And what we'll do, we'll add it as a prop to our auth provider. 33 00:02:38,050 --> 00:02:39,070 So let's set this up. 34 00:02:39,460 --> 00:02:41,350 I'm going to write away copy and paste. 35 00:02:41,350 --> 00:02:43,000 I think it's going to be much faster. 36 00:02:43,360 --> 00:02:45,280 We'll navigate to our application. 37 00:02:45,280 --> 00:02:46,930 I'll make this one a bit smaller. 38 00:02:47,140 --> 00:02:54,310 And the notice, I'm already importing the auth provider from the package and that I would want to wrap 39 00:02:54,310 --> 00:02:55,260 my whole application. 40 00:02:55,540 --> 00:02:59,710 So make sure that you copy and paste the auth provider. 41 00:03:00,070 --> 00:03:04,870 And now, of course, you would want to wrap all your previous providers as well. 42 00:03:05,170 --> 00:03:07,540 And then there's going to be a tiny bug. 43 00:03:07,540 --> 00:03:10,210 We just need to move that comma down here. 44 00:03:10,450 --> 00:03:14,260 And then I remember we need to provide these vouchers now. 45 00:03:14,260 --> 00:03:20,770 We already covered how you can set up, of course, the environmental variables if you want to do that, 46 00:03:20,770 --> 00:03:21,730 is definitely an option. 47 00:03:21,970 --> 00:03:26,170 Now, I will leave my ones without environmental variables. 48 00:03:26,530 --> 00:03:34,360 So that way, if you go to the source code, you can always take my vows and just astrud whether everything 49 00:03:34,360 --> 00:03:40,630 works, because if it works with, of course, my values, then you need to go back and double check 50 00:03:40,630 --> 00:03:40,930 yours. 51 00:03:41,200 --> 00:03:46,930 If you have some issues, even with my values, then of course we know that the issue is somewhere else. 52 00:03:47,170 --> 00:03:48,850 So I will leave my ones. 53 00:03:49,780 --> 00:03:55,210 For your reference, so if you ever need to go back and just to set out whether your application works 54 00:03:55,210 --> 00:03:59,250 with my credentials, then of course you can do that. 55 00:03:59,260 --> 00:04:06,250 But in your case, if you don't want to leave them as far as the source code, when you push it up to 56 00:04:06,250 --> 00:04:11,920 the GitHub, then of course, remember, we set up the dot and we in react. 57 00:04:11,920 --> 00:04:18,230 We need to set them up in a certain way where we start with, I believe, create, underscore, react 58 00:04:18,250 --> 00:04:18,580 app. 59 00:04:18,820 --> 00:04:20,350 But again, please double check that. 60 00:04:20,650 --> 00:04:24,670 And then we provide these powers and then we just use process. 61 00:04:24,970 --> 00:04:31,210 And again, if you need a refresher, please go back to one of the advanced projects where we were setting 62 00:04:31,210 --> 00:04:33,100 up the environment variable. 63 00:04:33,100 --> 00:04:38,630 Since I'm not going to repeat that right now, in my case, I'll simply grab these suckers over here. 64 00:04:39,100 --> 00:04:40,990 So this is going to be my domain, of course. 65 00:04:41,440 --> 00:04:43,690 And then we have client ID. 66 00:04:44,410 --> 00:04:47,260 And then I also want to add that extra prop. 67 00:04:48,280 --> 00:04:54,490 We're every time the user logs in, I would just want to serve it in local storage as far as the token 68 00:04:54,880 --> 00:04:58,420 and the problem that I'm looking for is cash location. 69 00:04:58,780 --> 00:05:05,380 And we simply say here a street value of local storage. 70 00:05:05,690 --> 00:05:08,230 So we say local storage, we save. 71 00:05:08,620 --> 00:05:13,090 If we don't get some weird bugs, we are in good shape. 72 00:05:13,420 --> 00:05:19,570 And of course, now we can proceed on setting up our contacts, our user contacts.