1 00:00:01,310 --> 00:00:06,140 With our axis instance configured we can go back over to our auto and text file and start to implement 2 00:00:06,170 --> 00:00:08,160 those different action functions. 3 00:00:08,250 --> 00:00:09,020 So I'm gonna go back to. 4 00:00:09,020 --> 00:00:09,960 Off context. 5 00:00:09,980 --> 00:00:16,980 J.S. at the top I will import the tracker API or the axles instance so we just created from that tracker 6 00:00:16,990 --> 00:00:25,010 dot J J.S. file so I gonna call it tracker API inside of here and I'll import that from up one directory 7 00:00:25,640 --> 00:00:28,680 API tracker case. 8 00:00:28,680 --> 00:00:33,690 Now we can go down to our sign up action right here and we already put down a couple of notes or comments 9 00:00:33,690 --> 00:00:36,750 inside of here to guide us in what we want to do inside of here. 10 00:00:36,810 --> 00:00:40,320 I'm going to delete these comments just to make the code I write a little bit more clear. 11 00:00:40,500 --> 00:00:45,140 I put together kind of a expanded version of what we want to do inside of your inside of a quick diagram. 12 00:00:45,170 --> 00:00:48,540 So let's go through that diagram really quickly even though we already discussed exactly what we want 13 00:00:48,540 --> 00:00:48,890 to do. 14 00:00:49,310 --> 00:00:49,760 OK. 15 00:00:49,800 --> 00:00:52,350 So inside there we're going to make our request to sign up. 16 00:00:52,500 --> 00:00:54,690 So that's going to be a post request to our API. 17 00:00:55,530 --> 00:00:57,930 If that request is not successful. 18 00:00:57,930 --> 00:01:02,910 So if we fall in the case over here then we probably want to show an error message to the user to do 19 00:01:02,910 --> 00:01:03,260 so. 20 00:01:03,270 --> 00:01:08,550 We're going to dispatch an action that's going to update our state object or our state value inside 21 00:01:08,550 --> 00:01:13,430 of our reducer and we're going to make sure that we reflect an error message inside of there. 22 00:01:13,680 --> 00:01:18,840 Then inside of our sign up component or the sign up screen we can take that updated piece of state that 23 00:01:18,870 --> 00:01:24,060 air property and we'll attempt to show it as an error to the user on the screen so that they know that 24 00:01:24,060 --> 00:01:26,880 something went wrong during the sign up process. 25 00:01:26,880 --> 00:01:32,220 If everything goes correctly then remember we engineered our API whenever we sign up successfully to 26 00:01:32,220 --> 00:01:34,870 return a Jason web token. 27 00:01:35,040 --> 00:01:39,990 If you skipped all that express API set up stuff in those optional videos all you need to understand 28 00:01:40,020 --> 00:01:45,030 is that this Jason web token is essentially a string of characters that proves that we are signed in 29 00:01:45,270 --> 00:01:47,700 with our API. 30 00:01:47,810 --> 00:01:52,790 The first thing we're going to do after that is make sure that we take that Jason web token and store 31 00:01:52,790 --> 00:01:58,820 it on the device so that even if a user restarts our application when the applicant's application starts 32 00:01:58,820 --> 00:02:04,700 back up we can look at some storage we can pull the token out and say OK we've got a token here our 33 00:02:04,700 --> 00:02:10,800 user must be signed in after that we're then going to dispatch an action to put that token in our state 34 00:02:10,860 --> 00:02:16,250 object and we're going to use the presence of that token as proof that we are signed in or not. 35 00:02:16,380 --> 00:02:21,000 Remember previously I'd said with our default state value right here that we going to have an is signed 36 00:02:21,000 --> 00:02:23,400 in flag but I said hey that's going to be temporary. 37 00:02:23,460 --> 00:02:26,580 So having something like is signed in is not super useful. 38 00:02:26,640 --> 00:02:32,580 Instead if we just store the token on this object right here or on our state object the presence of 39 00:02:32,580 --> 00:02:37,740 a Jason web token essentially means hey we have successfully signed in so we can use the existence of 40 00:02:37,740 --> 00:02:42,770 a token inside of our state object as proof that we are signed in then finally after that we're gonna 41 00:02:42,770 --> 00:02:47,680 make sure that we navigate our user over to the main flow inside of our application. 42 00:02:47,730 --> 00:02:50,300 So that's the general idea that's if we're going to go through. 43 00:02:50,300 --> 00:02:54,970 So let's start writing out some code to make it all happen guess we'll find my sign up action. 44 00:02:54,980 --> 00:03:04,100 Here it is right here inside there I'm going to first set up a tri catch statement like so that inside 45 00:03:04,100 --> 00:03:07,160 of our tri we're gonna make our actual request. 46 00:03:07,160 --> 00:03:14,750 So I gonna say constant response is going to be a weight tracker API dot post because remember we want 47 00:03:14,750 --> 00:03:21,590 to make a post request and we're gonna send that off to our sign up route and along with our sign up 48 00:03:21,830 --> 00:03:26,060 we're going to send along some amount of data that's going to be the email and password that is being 49 00:03:26,060 --> 00:03:34,550 passed into our action function so I'll pass along email and password like so it's now if everything 50 00:03:34,550 --> 00:03:40,730 goes correctly we'll immediately get our response and we can extract our token out of there for right 51 00:03:40,730 --> 00:03:47,890 now let's just add in a quick console log of a response dot data to make sure that we get that token 52 00:03:47,890 --> 00:03:51,430 back alternately if something goes incorrectly. 53 00:03:51,570 --> 00:03:54,220 Well we're going to fall into the catch case right here. 54 00:03:54,450 --> 00:04:00,100 So right now once again we'll just do a console log and see what the error message is. 55 00:04:00,130 --> 00:04:02,180 So I'll do air dot message. 56 00:04:02,180 --> 00:04:04,780 Like so. 57 00:04:04,950 --> 00:04:06,030 Let's save this. 58 00:04:06,030 --> 00:04:10,620 Now last thing we have to do before we can test this out is make sure that we wire up are off context 59 00:04:10,650 --> 00:04:12,190 inside of our sign up screen. 60 00:04:12,360 --> 00:04:17,010 And whenever user presses that sign up button we want to make sure that we run this function right here 61 00:04:17,160 --> 00:04:22,970 in passing our email and password so back inside my sign up screen at the very top. 62 00:04:22,970 --> 00:04:28,160 Remember what we have to do to get access to those action functions or any time you want to access anything 63 00:04:28,160 --> 00:04:32,050 coming from a context object to get access to that information. 64 00:04:32,090 --> 00:04:40,680 We're going to first import the use context took from react and we're also going to import our context 65 00:04:40,680 --> 00:04:46,230 object from the context file in this case off context. 66 00:04:46,230 --> 00:04:50,270 So we're gonna go up one directory context of context. 67 00:04:50,410 --> 00:04:56,160 Remember just like we mentioned around the provider inside of our app dot J.S. file where eventually 68 00:04:56,160 --> 00:05:00,180 probably gonna have multiple different contexts variables inside of some different files inside this 69 00:05:00,180 --> 00:05:01,130 project. 70 00:05:01,140 --> 00:05:05,730 So right away I'm going to rename that variable just in case I ever import some other context object 71 00:05:05,730 --> 00:05:06,720 inside of here. 72 00:05:06,840 --> 00:05:14,010 So I will rename it to context as off context like so. 73 00:05:14,050 --> 00:05:21,600 So now inside of our component we can d structure out our state object and sign up. 74 00:05:21,610 --> 00:05:22,730 That's our action function. 75 00:05:22,730 --> 00:05:29,710 We just defined from use context with off context like so. 76 00:05:29,820 --> 00:05:34,320 So now that sign up function as soon as we call it with an object that has our email and password provided 77 00:05:34,320 --> 00:05:40,800 by the user that's going to initiate our request to sign up with our API so down inside of our button 78 00:05:40,860 --> 00:05:49,350 element right here we'll add on our on press callback so whenever user presses that thing we want to 79 00:05:49,350 --> 00:05:55,680 call sign up and we want to pass in the current email and password pieces of state remember email and 80 00:05:55,680 --> 00:06:00,640 password are the two pieces of state that we set up right here okay. 81 00:06:00,650 --> 00:06:01,770 So that should be it. 82 00:06:01,910 --> 00:06:06,050 Now at present remember we just have some console logs that are going to verify that we either sign 83 00:06:06,110 --> 00:06:08,000 up successfully or not. 84 00:06:08,060 --> 00:06:11,900 So let's just try to sign up successfully right now and then take a look at our terminal and see what 85 00:06:11,900 --> 00:06:18,240 kind of console logs we get going to save this file I'll then go back over to my application. 86 00:06:18,360 --> 00:06:20,470 It looks like I've got a little typo somewhere. 87 00:06:20,610 --> 00:06:22,460 I've got to put the await keyword on there. 88 00:06:22,470 --> 00:06:23,640 My mistake. 89 00:06:23,640 --> 00:06:27,710 So back inside of off context here's our function. 90 00:06:27,710 --> 00:06:29,090 I use the awake keyword right there. 91 00:06:29,090 --> 00:06:31,600 I need to make sure there's Mark that function as async. 92 00:06:31,610 --> 00:06:34,430 It's funny because when you're writing this code I was thinking to myself Oh yeah. 93 00:06:34,430 --> 00:06:38,520 Don't forget to put async on there but clearly I just totally forgot. 94 00:06:38,560 --> 00:06:38,770 Yes. 95 00:06:38,780 --> 00:06:42,260 Now I can refresh here's our application. 96 00:06:42,260 --> 00:06:44,720 So now we can enter in an email and password. 97 00:06:44,720 --> 00:06:50,450 So for this first test I'm gonna put in a email and password that do not exist on my back end. 98 00:06:50,630 --> 00:06:54,380 Guess I'm going to put in a completely new email that I've never used before. 99 00:06:54,380 --> 00:07:00,810 So inside of here I'll put in something like test 10 at test dot com and I'll put in some random password 100 00:07:00,810 --> 00:07:05,480 in this case is just can be simply password and I'll try to sign up. 101 00:07:05,530 --> 00:07:10,180 So nothing really happens here so I'm gonna go check my terminal and see what happened. 102 00:07:10,210 --> 00:07:12,170 So back inside my terminal. 103 00:07:12,250 --> 00:07:12,750 Here we go. 104 00:07:13,270 --> 00:07:14,970 So I've got a response right here. 105 00:07:15,040 --> 00:07:18,340 That's the response I got back from my API so it's an object. 106 00:07:18,400 --> 00:07:22,130 It has a token property and right there is my Jason Webb token. 107 00:07:22,360 --> 00:07:28,030 Again this information right here is what is going to prove that I am authenticated with the API. 108 00:07:28,030 --> 00:07:34,390 So I need to include that Jason Webb token with any follow up request that I make through axioms. 109 00:07:34,600 --> 00:07:34,840 OK. 110 00:07:34,860 --> 00:07:35,980 So that looks pretty good. 111 00:07:36,020 --> 00:07:41,510 So let's now try to get an error to get an error with our API or we have to do is attempt to sign up 112 00:07:41,540 --> 00:07:43,780 once again with the same email. 113 00:07:43,850 --> 00:07:47,560 Remember every email sign up inside of our application has to be unique. 114 00:07:47,600 --> 00:07:52,500 So if we tried to sign up once again with these same email it should result in an error. 115 00:07:52,510 --> 00:07:59,530 So I'm going to hit sign up once again go back over and I see it request failed with status code for 116 00:07:59,530 --> 00:08:00,810 twenty two. 117 00:08:00,820 --> 00:08:05,980 Well if you recall from our API I can flip back over to that code Ed really quickly for our API 118 00:08:09,310 --> 00:08:13,360 right here whenever we tried to sign up here's auth roots. 119 00:08:13,660 --> 00:08:16,270 Let's find our sign up root handler here it is right here. 120 00:08:16,270 --> 00:08:21,420 So we had said that if a user ever tries to sign up with an existing email that's going to be throw 121 00:08:21,430 --> 00:08:23,100 an error when we try to save the user. 122 00:08:23,200 --> 00:08:24,810 And so fall into this case right here. 123 00:08:24,820 --> 00:08:28,930 So we get a error status for twenty two and that's definitely the four twenty two that we just saw in 124 00:08:28,930 --> 00:08:32,710 our console to actually see the real error message that gets sent back. 125 00:08:32,710 --> 00:08:37,930 We could alternatively back inside of our sign up action file right here rather than doing a console 126 00:08:37,930 --> 00:08:43,950 log of error message off the top of my head I think we can do like air dot data. 127 00:08:43,960 --> 00:08:44,770 I want to say no. 128 00:08:44,770 --> 00:08:46,240 Eric response dot data. 129 00:08:46,240 --> 00:08:47,440 Let's try that out. 130 00:08:48,140 --> 00:08:51,710 And then if we go back over and try to sign up with the same email once again 131 00:08:55,260 --> 00:08:57,870 and then go back to our terminal there we go. 132 00:08:57,870 --> 00:09:03,150 So now that's the error that we got from our API the one that essentially tells us that this email is 133 00:09:03,150 --> 00:09:04,310 already in use. 134 00:09:04,320 --> 00:09:08,490 So remember we had said we were putting together the API that this error message is not really user 135 00:09:08,490 --> 00:09:09,000 friendly. 136 00:09:09,210 --> 00:09:13,650 So maybe we don't want to use exactly that error message right there but at least we can verify that. 137 00:09:13,650 --> 00:09:15,930 Yeah we are in contact with our API. 138 00:09:15,960 --> 00:09:20,580 We can sign up and if we try to sign up with some invalid information we get some appropriate error 139 00:09:20,580 --> 00:09:22,200 message back. 140 00:09:22,320 --> 00:09:24,200 So this is definitely a good step forward. 141 00:09:24,210 --> 00:09:28,440 So now that we are getting our response here the last thing I have to do is kind of implement the rest 142 00:09:28,500 --> 00:09:30,000 of these two flows. 143 00:09:30,000 --> 00:09:35,400 So we need to if we sign up successfully we need to take that Jason web token and stored on the device. 144 00:09:35,700 --> 00:09:38,910 We need to dispatch our action navigate in if something went wrong. 145 00:09:38,910 --> 00:09:41,000 We need to show some kind of error message. 146 00:09:41,160 --> 00:09:43,530 So let's take care of these two branches in the next video.