7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 API

The next task that we wanna tackle is allowing our users to log in and log out. Right now we just have a placeholder for a log in here in our app component. And we wanna replace that with a log in component. However before we can do that, we need a way to allow our users to log into our back-end. So we're going to create an API file. API.js in the source directory. And this is where we're going to let the users log in and log out. Now, we know that logging in and logging out is going to be done through post requests. Because that's how we created it on the server. So let's start by creating a post function here. And I'll use two ES6 features here. A const statement and an arrow function. And our function is going to take two parameters. The URL that we're posting to and potentially request body. Now, we're inside this function we're going to call fetch, which is a promise wrapped version of XML HTTP request. And a lot of browsers support this these days. So, we're just gonna go ahead and use it. The first parameter to fetch is the URL. And second, we have an Options object. Now, in this Options object, we'll set the method to POST. We also have to set credentials to include. So, that the browser will include the session cookies. So, that the server can see those cookies. That isn't really important in this specific case, cuz we're only doing log in and log out. However if you're using fetch like this in other applications, you'll want to make sure to include that property. We'll set the body to JSON.stringify whatever body was passed in. Or if no body was passed in, we'll just use an empty object. We will have to set a couple of headers. First of course, is the content type. We'll say that we're sending application/JSON. And what do we expect to receive? Application/JSON as well. Okay, now if we left our post function like this, that would work just fine because fetch would return a promise and we can use that wherever we use POST. However I'm going to add one then() block to the promise here. And we'll say when we get a response, then we'll just return response.json. And response.json is going to be another promise. So what will actually be returned from the post function here is the JSON response promise. So, this means that any then() calls that we add directly off of our post() calls will receive the response JSON. All right, so let's write a couple of functions that use our post function here. So we'll start by exporting a constant sign-in. This will take a username and password and we'll call post. Passing it, api/signin. And then as an object, we'll pass it the username and the password. And we can use destructuring once again to create an object where the username and password keys are set to whatever value their argument is. And, really, it's that simple. Wherever we use sign in, we'll get the response directly back. Now we can duplicate this for signup. I'll duplicate the line. I'll change the function name to signup, and I'll change the route to signup as well. For signout, it's almost as easy except we don't need any parameters to our function. We can just post to api/signout. Now there's one more thing will need in our API here, and that is Firebase. Right? Because we're using the Firebase database to store all of our data here. Now we want authentication to go through the server, as we've already done. However, after they authenticate, we'll allow our front end code to access our Firebase data directly, so we don't even need the server middleman for that. At the top of the file, we'll go ahead and import Firebase, just like we did on the server. And then I'll export another constant here. We'll call this pages, and just like we did on the server, we'll create a new Firebase object. We'll pass it our database URL, but then at the end of that URL, we'll add /pages. And this is another thing that we can do with Firebase. We can drill down into our data structure immediately when creating our Firebase object. This would be exactly the same thing as creating a reference to our Firebase database and then creating a child reference to pages. This just does both those things in a single step. All right. So with these functions and our pages reference in place, we're ready to use this API wherever we need to in our application.

Back to the top