In this guide, because what we just walked through, in being able to communicate with an API, and then authenticate your application, and authenticate you, as a user, with that service might still seem a little bit vague, and might be a little bit intimidating, I know it was for me when I was originally learning how to perform processes like this.

So I really think it would help to just spend a few minutes to look, and really dissect, the issue, and what is happening, everything from making the API call to exactly what we get back because that is going to explain how everything else works.

Because from this point on, after we finish building out the authentication system, including being able to let the parent application or the parent components, all know that you're signed in, and those kinds of processes, from that point on, we're gonna be leveraging this authentication process for almost the rest of the course.

Think about things like being able to create a portfolio item, or create a blog post. In order to do that, you're going to have to be able to prove that you are you. You wouldn't want someone else being able to post to an API and say, okay, here's a portfolio item for someone who isn't me, that just would be a really bad process.

So everything we're going to do is going to touch on authentication in some form or another, and so I think it would help to understand exactly how that process would work. Because right now, it might seem a little magical. It might seem like, okay, yeah, we went and we called that API, and it told us it was created.

But from that point on, so say that we go, and we're gonna be creating a blog post page, and that'll give us the ability to create blog posts. How in the world is it gonna know that it is you who is the one on the site, and you have the authority to post up the blog post to your account?

Well, it all comes down to cookies. So that is what we're gonna walk through here, and instead of doing it in code, I think it really helps to look at the actual data. Strip the code away, because at the end of the day, that's just wrapping up the process.

Instead, I want to make the call, and we're gonna use Postman in order to do this. And so you can follow along, or you can simply watch, and understand what process is going on here. So what I'm gonna do is I'm gonna mimic exactly what we did.

Remember, we created a POST request. So I'm gonna do that, and I'm gonna go to https://api.devcamp.space/sessions, so that's exactly what we already did. Now, the other thing, let me just go, really quick, so that I'm not showing the world my login credentials here, I'm gonna go to DevCamp Space in Incognito mode. I'm just gonna create an account really quick, and this is gonna be something that is different than what I've used before.

So for this, I'll just say demoaccount@devcamp.com, so now no one else can use that one. The subdomain is just gonna be demoaccount, and the password will be asdf, and asdf, and I'll register, and that is all I need to do. I'm not gonna actually do anything in DevCamp Space, I just wanted to create that account, so I'll quit out of there, and now, lemme switch back to Postman.

So now that I have that, I can mimic the other part of what we did, which was to send that client data. So here, I'm gonna go to Body, this is exactly like placing this inside of the code. So I want to use raw, and instead of text, I want to use JSON for the data type, and I'm gonna wrap up an object, just like we did before.

So here, I'll say client, and then client is also going to have an object. It's gonna have email, and that is gonna take in that demoaccount@devcamp.com, and then it's gonna have a password, and the password will be asdfasdf.

{
    "client": {
        "email": "demoaccount@devcamp.com",
        "password": "asdfasdf"
    }
}

So now, when I hit Send, we're gonna see exactly what we have access to. So I'm gonna hit Send here, it's sending, and because I have this zoomed in so much, it's hard to see. So I'm gonna scroll down. You can see that this is the response that Postman gives us, it's exactly what we got when we called to the API, we get the status of created.

Now, this still is really for our benefit. We're just being told that the session was created, that didn't have anything to do with the system. We need to tell the browser, or I should say the application, the API, needs to tell the browser that the user is now authenticated, and that is where the cookies come in.

So if you come right here, you see where it says Cookies? If I click on that, now you can see we have two different cookies that were sent back, and one says _devcamp_space_session, and it has this long string of characters with the domain, this is where all the magic is happening.

So what is going to happen is, whenever you log in, and this is the reason why I said to login with Incognito mode, it was because we haven't created a logout button yet. So if you do not log in with Incognito in the browser, what's gonna happen is this cookie is going to be set, and you have no way of getting rid of it, yet, we'll do that later.

So what is going on is, with our response back, we're not just getting status created back, we're also getting these cookies, and these cookies are gonna be automatically placed inside of your browser session. So this means that you can go away from the computer, you can restart, you can do anything, and these cookies are still gonna be stored in the browser, they're a key-value pair.

It's kind of like a regular object, where we have _devcamp_space_session, we have the name of the domain, and then we have this long secret key. Now, what is going to happen is, if you remember when we said, with credentials, true? Well, those credentials are these credentials.

So what we're doing when we say with credentials, true, and we're gonna be doing that for just about every one of the API calls we make from here on out, is the React system is going to say, okay, we're grabbing the credentials, which means we're gonna go in the browser, we're going to go into the cookie jar, we're going to pick out this _devcamp_space_session, and we're going to send all of this to the API.

Now notice, we don't have to do any of that, that all happens automatically when we say with credentials, true, but I don't think it really helps, at least for me. I don't like when things seem too magical; when something simply works, and I don't understand why that bothers me.

And so, if it bothers you too, hopefully, this starts to make a little bit more sense. So when we will make another API request, say, it is to create a portfolio item, what we're gonna be able to do is to wrap up all of these credentials, all these cookies, everything, automatically, just because we're logged in, and that is what is going to be checked whenever we send a request.

So if we say, okay, I have a new portfolio item for you. It has a title, it has a description, it has these images, the server is first gonna look at this. It's gonna look at the credentials that we sent up. It's gonna look at these cookies, and it's gonna say, yes, you are authenticated, I know who you are, I know exactly what ID to place this inside in the database, here, I'll create it for you, and I will send it back.

If you do not have that, so say that you're not logged in, then the server's gonna say, I have no idea who you are, so I'm sorry, try again later. So that is how that's working, the credentials are wrapping up all of these cookies and they're sending them up with every request when we tell them to, and that's how the authentication process works.

The body that we got back, this is just for our benefit. This doesn't have anything to do with the client, browser, anything like that. The cookies, though, this is where this is all going to work, this is really the heart of the authentication process.

And so, if you come back up here, you can see that we've essentially walked through the exact same steps that we followed earlier. We created a client object, we passed in the correct email and password, we sent it up, we got the same response back. But that's why I like using tools like Postman, it allows you to really dissect the real data that's coming back, not just the data that's easy for us to access.

We don't ever have to touch the cookies, those are all stored in the browser, and that is simply going to happen automatically. So tools like Postman are very helpful for that. If you've not gone through it yet, DevCamp has a full section on how to use Postman, all the different requests. I definitely recommend you going through it whenever I'm building, or working with a new API, Postman is a tool I use quite a bit.

So now that we've walked through that, hopefully, this process is making a little bit more sense, and now we can start moving on with the rest of the application.