Just a few years ago, performing this kinda task was something that really was only set up for advanced developers, but now we have the ability to build authentication directly into third-party apps even if they're not directly connected to the service that is logging them in.

So let's build that out here and make sure that you have access to your DevCamp Space email and password because that's what you're gonna be using to log in. So let's get started.

And at the very top of our login component, we are going to import Axios 'cause Axios is the tool that we're gonna be using to communicate, just like when we brought in our portfolio items. So now inside of handleSubmit, I'm gonna get rid of this console.log statement.

And above the event.preventDefault, I'm going to call Axios and then I'm gonna make a post request. So remember when we brought in the portfolio items, we used the GET method, but now because we're actually pushing something up and we want to create something, namely, we want to create what is called a session.

So that is the process that we're making right now, we're creating the ability to create a session on the server so the server is going to send back a cookie, it's gonna store the cookie directly in the browser, and that is what is going to be able to be used to make sure that we have the ability to login or if we do not have that ability.

So that is at a high level, what we're doing. I know that may sound a little confusing, but don't worry if it does, we're gonna walk through this quite a bit over the next few videos. We're also going to extend this and we're gonna spread it over a few different components.

So inside of post, the very first argument is the URL. So the URL that we're going to be using for this is gonna be https://api.devcamp.space/sessions. So this is the URL endpoint you need to hit in order to make this work, and then this is going to expect an object. And so the object that it's expecting, if IntelliSense will actually let us see what we're typing, the object that's expecting is going to be what is called a client object.

Now, this is not specific to React, this is just the way that I built the API out. You may have, when you're building this for other applications, you may have some other thing like user or some other keyword, but with what I created with DevCamp Space, I called it a client.

So this is gonna be the client object, and the client object is going to contain the email and the password, and it's gonna store that in an object. So we have this nested client object that's going to contain the email and the password.

And, remember, we can get that by calling this.state.email, and then we can get the password by saying password: this.state.password, just like that. So that is what is going to give us the ability to send up a client object to sessions to see if we are authorized or not. The API is gonna take care of all these, you're not gonna have to build that out.

You simply push up your credentials and it is going to send back if you are authorized or if you are not. So at the end of that object, add a comma, and now we're going to pass in a second object and this is called withCredentials and then true.

Now, this is something special with how HTTP works, and this speaks directly to how authentication works on the web. Whenever you're making an API request, you, as the client, so if you're on the browser, say you're on Facebook or Twitter, or something, when you post a tweet, more than just the message get sent and even more than just the message and your personal information, when you send that tweet, the HTTP Protocol sends all kinds of metadata.

It sends cookies on your system, it sends other metadata with how you're creating the tweet, all kinds of things like that, so the server can interpret that and then make a decision on how to react. So when I say withCredentials: true, what I'm saying is I want you to send up the authorized cookies on the system to see if this user.

In this case, you are authorized to access this or not, and then the server can run its own authorization engine and its own set of rules on top of that, and then it will send back a response, which we'll see here in a minute.

So after withCredentials, we want to end this post method. So we are sending three arguments, I know it looks like it's kinda weird 'cause it's spread out. The first argument is the API url, the second is the data, and the third is the optional withCredentials where we're saying I want you to send those secure items like the cookies and those kinds of things.

So let's end that post, and then from there, we have to call, we have to tell Axios exactly what we want to do with the response. So if you remember back to when we talked about promises in JavaScript the way that Axios works, because an API is not immediate, you can't immediately just expect that you're going to send the request and get the data right back, it could take a few milliseconds, it could take a few seconds, so Axios works with promises.

So if you remember what you have to do when you get a promise, in order to receive that data when whatever happens, that we expected comes true, in this case, getting the response, we have to call then. So after you have the closing parens right here, now I want you to say then and we're going to grab that response and so response is just simply what then is automatically passed, and we have to pass that a function.

So we're gonna use an arrow function and then use curly braces, and we simply wanna say, okay, after we get our response back, tell me now exactly what you want to do with that. In this case, we're just gonna console.log that response.

So let's say response and response, and then let's see what else we need to do. Okay, and it looks like I had an extra paren there. Okay, so let's hit save, and if everything is working, if you log in with the correct credentials, we should get the correct response back.

So let's test this out, hit refresh in the browser and make sure you login with your correct credentials. And one quick thing before you even do that, switch to incognito mode, because with the way the cookies work, we have not built the ability to sign out yet, so it's better to test this out in incognito mode here.

So I'm gonna go localhost:300/auth. So we have everything here, let's open up the terminal and login with the correct credentials for DevCamp Space. So now that we have that, hit login, and there we go. We got our response, we got data, let's see if it worked, here's the data we got back right here, it says data status: created.

So that means everything worked. We were able to send out a request, a post request to the DevCamp Space API. We said here is my email and my password, am I allowed in? Do you recognize me? And it responded and it said, Yes, we do, and we have created a session for you.

Which means that once we get to this point of the application development, we'll be able to navigate through each page of the application and we'll be able to check to see if we're authorized, and the system is automatically gonna pick up because of the cookies that got sent back right here, and we're gonna walk through that later.

Because that is gonna be sent up and because we're sending things like withCredentials: true, with each request, the system is gonna be able to recognize us, it's gonna understand exactly who you are, what your email is, what data you have access to, and it's gonna automatically know what to send back.

So that's pretty cool, this is one of the most exciting parts of building out applications, building in this kind of behavior that you see in all other kinds of apps, and so now you get to see how it actually works behind the scenes.

So now that we have this working, in the next guide, we're gonna walk through what happens and how to handle what happens when someone enters the wrong credentials.

Resources

• Source Code