1 00:00:03,000 --> 00:00:05,598 Now that we bound the form field values 2 00:00:05,598 --> 00:00:07,530 to component state variables, 3 00:00:08,096 --> 00:00:10,370 it's time to actually call the API 4 00:00:10,370 --> 00:00:12,175 when the form is submitted. 5 00:00:12,742 --> 00:00:15,091 Let's quickly remind ourselves 6 00:00:15,091 --> 00:00:17,911 of how a Strapi login request works. 7 00:00:18,490 --> 00:00:22,367 We need to send a POST request to "/auth/local" 8 00:00:22,367 --> 00:00:26,328 sending "identifier" and "password" in the body, 9 00:00:26,911 --> 00:00:28,799 and we get back a response 10 00:00:28,799 --> 00:00:31,050 that includes a JSON web token. 11 00:00:31,623 --> 00:00:33,802 We basically need to do the same 12 00:00:33,802 --> 00:00:35,368 but in JavaScript code. 13 00:00:35,368 --> 00:00:36,934 So let's copy this URL, 14 00:00:37,570 --> 00:00:39,534 and, to make an HTTP request 15 00:00:39,534 --> 00:00:43,249 remember that we already wrote a "fetchJson" function 16 00:00:43,820 --> 00:00:46,553 that takes care of checking for errors 17 00:00:46,553 --> 00:00:48,711 and parsing the JSON response. 18 00:00:49,283 --> 00:00:51,470 So when the user clicks "Sign In" 19 00:00:51,470 --> 00:00:53,060 we can call "fetchJson", 20 00:00:53,627 --> 00:00:54,631 that should be imported, 21 00:00:55,527 --> 00:00:57,734 with the URL we copied earlier. 22 00:00:58,234 --> 00:01:00,805 Now, the problem is that in this case 23 00:01:00,805 --> 00:01:03,445 we're not making a simple GET request. 24 00:01:04,015 --> 00:01:06,313 We need to make a POST request, 25 00:01:06,313 --> 00:01:08,537 set the "Content-Type" header, 26 00:01:08,537 --> 00:01:10,835 and send some JSON in the body. 27 00:01:11,483 --> 00:01:13,540 Our "fetchJson" function currently 28 00:01:13,540 --> 00:01:15,234 doesn't allow us to do that. 29 00:01:15,794 --> 00:01:17,561 But that's easy to change. 30 00:01:17,561 --> 00:01:19,735 When we call "fetch" we can pass 31 00:01:19,735 --> 00:01:21,569 an optional second argument 32 00:01:21,569 --> 00:01:23,403 that here is called "init", 33 00:01:23,403 --> 00:01:25,917 but is basically the request options. 34 00:01:26,688 --> 00:01:29,938 So we could simply accept a second parameter here, 35 00:01:29,938 --> 00:01:31,563 that I'll call "options", 36 00:01:31,563 --> 00:01:33,643 and pass it straight to "fetch". 37 00:01:34,273 --> 00:01:36,609 This way when we call "fetchJson" 38 00:01:36,609 --> 00:01:40,219 we can pass any options supported by the Fetch API. 39 00:01:40,789 --> 00:01:43,730 In this object we can set the HTTP method 40 00:01:43,730 --> 00:01:44,663 to be "POST". 41 00:01:45,234 --> 00:01:46,940 Then we need to set some "headers", 42 00:01:48,334 --> 00:01:49,920 or in fact just one header 43 00:01:49,920 --> 00:01:51,567 that is the 'Content-Type', 44 00:01:52,128 --> 00:01:54,870 with a value of "application/json". 45 00:01:55,894 --> 00:01:57,833 Finally we want to pass a "body" 46 00:01:58,333 --> 00:02:00,091 that should be a JSON string, 47 00:02:00,091 --> 00:02:02,151 so we can call "JSON.stringify()". 48 00:02:02,711 --> 00:02:04,529 Here we can pass an object 49 00:02:04,529 --> 00:02:07,255 with the properties expected by Strapi, 50 00:02:07,255 --> 00:02:09,841 that are "identifier" and "password". 51 00:02:10,479 --> 00:02:12,854 Where the "identifier" can be the email. 52 00:02:13,354 --> 00:02:16,005 So let's set "identifier" to the value 53 00:02:16,005 --> 00:02:18,098 of our "email" state variable, 54 00:02:18,667 --> 00:02:20,355 and then for the "password" 55 00:02:20,355 --> 00:02:22,980 we can use the short-hand property syntax, 56 00:02:22,980 --> 00:02:26,230 since it has the same name as our existing variable. 57 00:02:26,854 --> 00:02:29,341 Ok. Now, "fetchJson" is "async" 58 00:02:29,341 --> 00:02:32,790 so we can get the "response" by "awaiting". 59 00:02:33,487 --> 00:02:35,930 And for now let's just log the response, 60 00:02:35,930 --> 00:02:38,372 so we can see it in the browser console. 61 00:02:39,953 --> 00:02:43,165 Good. We're ready to test this API request. 62 00:02:43,665 --> 00:02:46,824 Let's enter "alice@example.com" as the email, 63 00:02:47,631 --> 00:02:51,492 and "Alice123" (with a capital A) as the password, 64 00:02:51,992 --> 00:02:52,926 click "Sign In", 65 00:02:52,926 --> 00:02:55,845 and we can see the response logged in the console. 66 00:02:56,403 --> 00:02:58,996 It has a token and the user details 67 00:02:58,996 --> 00:03:00,107 as we expected. 68 00:03:00,681 --> 00:03:02,166 So this is working fine, 69 00:03:02,166 --> 00:03:04,765 as long as we enter the right credentials. 70 00:03:05,326 --> 00:03:07,499 Now, some of you may be thinking 71 00:03:07,499 --> 00:03:10,282 we defined a CMS_URL environment variable 72 00:03:10,282 --> 00:03:11,776 earlier in the course. 73 00:03:12,411 --> 00:03:15,000 Why don't we use that variable here, 74 00:03:15,000 --> 00:03:17,588 instead of hard-coding the full URL? 75 00:03:18,159 --> 00:03:22,329 The problem is that this code runs on the client side, 76 00:03:22,329 --> 00:03:25,109 and environment variables by default 77 00:03:25,109 --> 00:03:27,966 are only visible to server side code. 78 00:03:28,620 --> 00:03:31,428 If we try logging that CMS_URL variable 79 00:03:31,428 --> 00:03:33,875 when we trigger a form submission, 80 00:03:33,875 --> 00:03:36,899 you can see that its value is "undefined". 81 00:03:37,542 --> 00:03:39,801 Now, Next.js does provide a way 82 00:03:39,801 --> 00:03:42,643 to make environment variables available 83 00:03:42,643 --> 00:03:44,683 to client side code as well, 84 00:03:45,328 --> 00:03:49,235 and that is to prefix them with "NEXT_PUBLIC". 85 00:03:49,235 --> 00:03:52,801 So if we called this "NEXT_PUBLIC_CMS_URL" 86 00:03:52,801 --> 00:03:55,519 then it would work in this code. 87 00:03:56,188 --> 00:03:58,923 But I'm not actually going to do that because 88 00:03:58,923 --> 00:04:01,293 (spoiler alert) later on we're going to 89 00:04:01,293 --> 00:04:02,751 change this code anyway. 90 00:04:03,372 --> 00:04:04,740 So we'll leave the URL 91 00:04:04,740 --> 00:04:06,854 hard-coded to "localhost" for now. 92 00:04:07,416 --> 00:04:10,933 Ok. Now, the next thing we need to think about 93 00:04:10,933 --> 00:04:15,060 is: what happens if the user types the wrong password? 94 00:04:15,636 --> 00:04:17,903 I entered "x" as the password. 95 00:04:17,903 --> 00:04:20,245 And what happens is that we see 96 00:04:20,245 --> 00:04:22,437 an "Unhandled Runtime Error". 97 00:04:23,088 --> 00:04:25,225 Which is of course not something 98 00:04:25,225 --> 00:04:27,161 we want to show to our users. 99 00:04:27,161 --> 00:04:29,698 We'll want to handle this case better, 100 00:04:29,698 --> 00:04:32,969 and display some nicer error message in our page. 101 00:04:32,969 --> 00:04:35,772 We'll take care of that in the next video.