- Read Tutorial
- Watch Guide Video
As we continue to build our authentication system, the next step we will implement is the ability to save the token that comes back from the server on the user's device. That is one of the key items that we're going to need to verify that the user is actually who they say they are. This is important not just for login, but as you're going to see, as we go throughout this course, we're going to use that token every time we communicate with the server to verify that the user is who they say they are and that they have the right privileges to do what they're trying to do. So, let's open up the AuthScreen component, and so, what we're going to do here is, at this step, where we check to see if the JWT token has been sent back to us, we are going to store that on the user's local system, and we're going to use the SecureStore in order to do it.
One of the nice things about using SecureStore, as opposed to just a normal local storage mechanism, is it's also going to be secure so that we can be confident that it's not getting manipulated, and there are just some safeguards from hackers who are trying to use it as well. So, that is going to be a good approach. So, the very first thing that we need to do is we need to import that into our AuthScreen. Looks like we have not imported that yet. We can go to the AuthLoadingScreen and just copy that. So it's going to be the import star as SecureStore from expo-secure-store, and so, I'm going to paste that in, and now, all we have to do is call that.
So, here, we're going to do this. We're going to make this call above where we're doing the redirect to the feed. So we're going to say, if we get that, then we're going to call it, and we need to also wrap this response up in an async call, and if you remember, that's exactly what we did here. We had to use async in order to call the SecureStore because it uses await. So the way you do that inside of a response block is by, right before where it says response there, just say async, and then, you'll be able to use an await call inside of it.
So I'm going to say await, and then we're going to call the SecureStore. If you hit dot, this is going to get you all of the functions that you have available. So right now, what we want is SetItemAsync. So, the way that this works is this is just a normal function, and it takes two arguments, and you can see right here that it's telling us what it takes. It takes a key and a value, both of which need to be a string. So the very first thing that it takes is the name of the key. The name of all of our keys is going to be this, this memipedia_secure_token.
[Capture #1 [3:04]]
So I'm just going to copy that to make sure we don't get any typos, wrap it inside of quotation marks, and that's the first item. The next one is going to be the JWT itself. So here, I can say response.data.jwt. Hit Save, and then that is going to be all we need to do.
So let's test this out, and let's see if this is working. So now, I'm going to say reactnative@devcamp.com, and the password asdfasdf. Now, if I hit Login right here, then you'll see it redirected us, but it was already doing that. So let's actually test this out by closing this screen, closing the simulator entirely, and let's start it back up So what is going to do is it's going to mimic a user getting out of the application and then opening it back up. So this is going to hit our AuthLoadingScreen, and it's going to perform that check, and there you go, look at that, we now have persistence. We have a way of checking to see if the user is authenticated simply by using their JWT token. So if that is maybe a little bit confusing, if it's not clear yet, let's walk through exactly what's happening here. So, we are still using our same handleLogin function right here. So, all we're doing here is we are sending the email and the password up to the server. What that is returning us, if the user's authenticated, that is returning us the JWT, that JWT token. We're then setting that.
So, in this line of code right here, we're setting that token with a specific name on the user's device using the SecureStore module. From there, if the user just decides to quit the app, then they restart their phone, whatever it is, then what happens is when the app loads back up, it's going to hit this AuthLoadingScreen again. From there, it checks to see if there is a token named this memipedia_secure_token. If there is, we're dropping into this part of the conditional, where we're checking to see if the user is logged in, OK. If they are, then we need to get that data back. So we set the user, and we set the CurrentUser, and from there, we redirect it to the application, and all of that is working beautifully. If you want to test this out to see the data to make sure we're setting the CurrentUser, I think that would be a good idea. So let's open up the FeedScreen here, and let's add the context so that we have access to the CurrentUser. So, up at the top, where it says import React, I'm going to say I also want to now get the context, and then, from there, I want to import that. So I'm going to import the CurrentUserContext from ../contexts/CurrentUser, and then from there, we simply need to call that.
[Capture #2 [6:20]]
So I'm going to inside of our function, our component function here. I'm going to say that I want to destructure, I'm going to grab the CurrentUser, and I want to grab that from using context for the CurrentUserContext, and then, down here, instead of it saying Feed screen, or let's actually just do a new text item, and I'm going to wrap it up in a View just to make it a little bit easier for us to see. It's also just good practice to keep working with each one of those components, just so you can kind of get used to it, and I'll add some margin here, so I'll say style marginTop of, and then, inside of FeedScreen, we're going to do what we did before in the AuthScreen, where we're going to use JSONstringify, and then, we're going to capture that CurrentUser value. So let's hit Save here, and it's going to refresh, and there you go. You can see we have the email, which is the email I typed in, and also has some other data, has a Created at, has column names, which you don't have to worry about that. That's just some metadata that DevCamp Space uses, but the important thing is, here, we have the email. That is what we might want to use in another part of the application.
So we now have access to all of that right there, and that is looking really nice. So great job, we now have the ability to log the user in, to store the token, and then have persistence so that we can come back, and we can actually have the user automatically logged in without them having to type that information in each time So with all this in place, in the next guide, we are going to add a logout functionality
[Code-Block #1]