- Read Tutorial
- Watch Guide Video
In this lesson, we're going to walk through how we can create a function that checks if a user is logged in or not. Now, in this case, what we're going to be building out isn't going to be something we can test quite yet. What we're building out is something that will only work after we've implemented the token system.
So if you go to DevCamp Space and then go to the MemiPedia project, click to view data, you'll see that you have a new endpoint here called check auth, and the endpoint ends, it's same thing as all the other ones. It's going to start off with your username, and then from there it's going to be devcampspace/memipedia, all of this is in our utility, our API utility. So all we're going to have to add in is this logged_in call. That's the endpoint. And also notice, this is a GET request.
So this is going to be what we type into that function. So lemme open up Visual Studio Code here, and I'm going to create the API connector. So I'm going to get rid of my TODO here, and I'm going to import the API and if you added that self importer, the auto importer extension, then you should be able to follow along and just type in api, hit Tab, and then as you can see, that imports it at the top. If you've not added that yet or you're onto a fan of it, then you can import it just like I did right up here, and then from here, this is where we're going to make that GET request. So can say API. and then as a string, this is that endpoint, logged_in. And then from there, we need to add one thing.
So if you have followed along in some of my other React courses where we use sessions for our authentication, then you might have remembered for a GET request. The second one would have been something like withCredentials true. Now, whenever we're building out these type of applications on mobile devices that use the JWT or JWT tokens, we can't do this. And in mobile, you can't do this at all because there is no session in mobile, which is the reason why we need to use tokens in the first place. So I'm going to get rid of that, and instead, what we're going to pass in are some headers. the way that this works is I'm going to create an object, and I'll give ourselves a little bit more room here, and I'm going to create an object that uses what are called headers, and headers are a set of key-value pairs. As well as the first object we passed in, it has its own object, and so what headers are, if you're not really that familiar with them and I definitely recommend them, and it's going to be a little bit of homework after this guide, I want you to go and research what HTTP headers are.
So when you're making HTTP requests, many times, you're going to have to pass headers in. What these are is it's a set of data points that you're passing up to the server. So these are not data points like say the login username and password, instead, this is metadata that you're passing up to the server. The server then is going to be listening for specific header data. So the way that the API that I built out works is it looks for the headers to have an authorization code sent along with them. If that code is not sent, then it's immediately rejected, and you get an error, and so that is something that you want to make sure that you understand. So I'm going to say headers here, and then inside of headers, I'm going to use what is called the Authorization header.
Now, this is something specific that is, it's actually real, it's not just a made-up name, so in other words, this is going to be something that you're going to be passing in on many different APIs you're going to be working with. So the APIs are listening for an authorization header to be passed on. Now, what it's expecting here is what is called the token, the bearer token. So I'm going to use string interpolation here, and you have to make sure you're typing this out exactly as I am, so it's going to be looking for Bearer, just like this, and then using string interpolation, token.
So the way that this works, and once you do some of this research, and it's the reason why I want you to dedicate some time to study this is this format that we're sending here is the industry standard. So this is not just specific to the API that I built out. I always try to tell you when I'm showing you something that you have to do just because I built my API that way, and then I also want to show you when there's an industry standard.
In this case, this code that you write here is going to be the same type of code you write for almost any type of API that uses token authentication. So hopefully that is clear. So what we're doing here we are first checking in the checkLogin function if a token exists. If it does, we're dropping down, and we're calling this endpoint. We're passing in headers that are authorization headers. This is where we take that token, that encrypted token, and we're saying to the server, hey, I have this token. Can you let me know if it's real or not? Can you tell me if this user is valid, and if it is, then it's going to expect to get a user object back.
So that's all we have to type in for the initial GET request, and then we have to say what we want to happen if this comes back true, or if we get an error or anything like that. So I'm going to say when this resolves, we're expecting a response, and so with this response, let's see what we want to do with it. The first thing that we want to do, I want to console. out the results.
So I'm going to say response from checklogin. And I can just look at the response.data 'cause is know that's the way that the data is structured. Then from there, I want to also set the currentUser. So this is going to be exactly, this is once again, talking to our provider. The same provider where we set user to null, this is talking to that provider, and here, I'm going to say response. dot and this one is a little bit tricky. This is specific to my API, and this one is going to be memipedia_user. Now, if you were building this out with a different application, in the docs, you would be told what this would be named so it might just be a user in your application. I namespaced it so it has memipedia_user. Each API's going to be a little bit different on that side so always read those docs.
Now, the other thing that we want to do is we want to redirect the user. So if the user's logged in, and I'm going to do, actually, you know what? I'm going to do one more check here just to be smart, so I'm going to say if this user is sent back because there might be a case where we send this token up and it turns out that maybe the users or someone's trying to hack the system or maybe the token's expired or maybe the user got blocked or anything like that. We want to make sure that we actually have a user to work with.
So I'm going to say if we get this back, and this way we can be confident that we do have a user to work with, we want to set the CurrentUser, and then we want to navigate to the App stack. So I'm going to hit Save there. And then let's also add an else here. So I'm going to add an else, and in this case, we're going to make sure the CurrentUser is set to null, and then we're going to redirect to Auth, and then let's add a catch block. This is if there's a server error or something like that.
So in this case, we're going to add a catch block that listens for an error, and once again, here, we're just going to set the user to null, and we're going to redirect them to Auth. You need to make sure, and when you're building out any kind of component that its job is to redirect the user, you need to make sure that you're catching all cases. You want to make sure that you are always watching for the user logged in? Are there any errors? Because remember, this view is just an empty view. If we missed a case here, what would happen in our application is the user would just see a big white screen if one of those things happened, which definitely would not be good.
So here, I think we're catching all the cases. We're not getting any errors, and I think this is all that we need to do so this is all working really nicely. So with all of this in place, we're going to take a break now. I want you to go, I want you to go research and study up on HTTP headers and just kinda get more familiar, especially with the authorization side of them and how they work, because that's going to really streamline how you're understanding the request and response lifecycle when you're communicating with APIs, so just start by googling it. Read Medium articles on it, really get in and understand what's happening there and then after you're done with that, come back, and in the next guide, we are going to extend out our login call here so when we call and check and create a login, we are going to take this JWT, this JWT token and we're going to store it on the device, so the user is authenticated, and we can use that token every time they open up the app.