We're coming along with our authentication system, and you might be curious and thinking and you might think that this is a lot of work for a pretty basic feature, and it definitely is a good amount of work. But also keep in mind that you're learning a number of key concepts along the way as you're learning how to build this authentication feature. So, there are many different items here that you are not going to have to relearn as we go through the rest of the course, so quite a few of the other features we're going to build out are our going to move along much faster because you're already going to have this foundational knowledge. So now that we have the ability to login, register and the ability to make that persistent. In this guide, we're going to add the ability to log out. So, I have open the account screen code right here. And so, this is where we're going to place the code that we're going to write. I don't think that it makes any sense for us to have the logout button on the feed screen. This is going to be where all of the posts render. So instead I'm going to put this on the account screen. So if you click on our little gears here, this is our account screen so we can start building this out. We're going to start by importing a few of the different features we're going to need. We know we're going to need to have access to the context. So I'm going to say useContext. Because we're going to need to work with the current user. We're going to need to be able to set the current user to null whenever a user has logged out. So that's going to be the first one. The next thing is we have to work with the secure store. So you can either copy that or you can just type import * as SecureStore from expo-secure-store. Then the last thing that we're going to implement. Actually, we need two more things. We need to actually bring in the current user context and then we're going to use our button.The same button that we created earlier for our authentication screen. So I'm going to say import current user context from ../contexts/CurrentUser/Context and then our button. So this one may go and see where that is. I know it's in a helpers directory. So in components helpers button and part of the reason why I wanted to make sure I knew where it was at, was for the import and one of the issues is say that you want to use the auto importer then you might run into this where you start typing so you could say button here and then you can see that you have multiple buttons to bring in. One of the tricky things is button is a name of a component inside of React Native. So if you type this you could say, button and then you could use it down here. I'm not a big fan of the button component that React Native offers. It's not something that I use in a lot of different applications. So I'm not using that, that's part of the reason why we created our own and so now I'm just going to import this button manually. So here I'll say import button from ../components/helpers/button. Okay, so that's everything that we need for our Imports. Now, let's create the context or let's pull in the context. So I'm going to say const setCurrentUser and that is from using the context for our current user. And then from there, we're going to need a handler function. For right now, let's just create an empty one. So I'm going to say const handleSignOut. It's not going to take in any arguments. And then from there, let's just console.log this. So console logger. Let's alert this one, so alert and we'll say signing out. That's just so we can create our button and then we can have something to put therefor the on press Handler. So now let's come down to the account screen tap or actual jsx code and let's add a view and then let's give a little bit of margin. So here I'll say style and we'll add some margin to the top of 20 and then inside of that let's put our button. So that's our button. It has a on press Handler and that is going to be handle sign out and then it takes in some text and the text is just a string here, so we could just say sign out and close off that tag. Okay, let's hit save here. You can see the button has been brought in. It has our text. Everything there is working, if I click sign out, our handler's working as well. So all of that's good. Now, let's actually build out our real functionality for logging the user out. So the first thing that we're going to do is we're going to remove that token. So for that we're going to use a async/await call, which means that we need to make sure we're calling it from up here. So that's async and then await secure store Dot and this time we want to delete item async. So that's one of the nice things about the secure store module. It only has three real functions that you're going to use and they're all provided there when you're using typescript, you have all of those recommendations, so we simply need to provide the item to delete which is a string. We're not going to have to use any of the options or anything like that, so we can come anywhere that we've used that string and just copy that and I do that instead of typing it out just so I don't run into issues where maybe I misspelled something or anything like that. So you want to make sure it's very important that when you create the name for your token, it's very important that you always use the exact same name because if not, then you're going to run into some really confusing bugs. One thing that I'll do on larger applications. I'll actually store this as a global environment variable in the application and I'll just call that just to make sure I never have any type of spelling issues or typos. Okay. So that's the first thing we're going to do. What's the next thing? Well, we want to set the current user. to null because the current user, their signing out is not going to exist. We want to make sure that that is the case and then lastly we want to redirect the user. So how do we do that? Well, we need to create an interface and have some props. So I'm going to create an interface here and this is just going to be called IAccountScreenProps and we can just copy this because it's going to be the exact same thing from our feed screen. So we just want the navigation here. And so now we have the ability to navigate the user to a different part of the application. So here I'm going to say props and I do not want that imported. Sometimes that is one of the only issues I have with the auto importer, is sometimes it gets a little bit aggressive and it tries to do something like that, where it brings in something I didn't actually want so I'm going to say props dot and that's part of the other reason why I did that, we need actually call props here. So we need to say that our account screen is now taking props and it's going to take them and have the shape of the IAccountScreenProps. And now this will work. So now when I type, now when I type props. Now, it tells me I have navigation and then I have the ability to navigate and then that takes in a string which we want this to be Auth. Okay, let's hit save and see if this is working. Okay, so if I click sign out now, now it's all working and if I hit refresh or if I quit out of the application and I open the simulator up again, then what's going to happen is when it gets to that check and it's looking for the token. It's not going to find the token anymore because we deleted it and now it's going to redirect the user to the off-screen. So all of that's working. So great job, you've built out the full sign out feature. And in the next guide, we're going to walk through a subtle bug that our program currently has and we're going to see how we can fix it.

Starting Code

import React from "react";
import { View, Text } from "react-native";

export default () => {

  return (
    <View>
      <Text>Account screen</Text>
    </View>
  );
};

Finished Code

import React, { useContext } from "react";
import { View, Text } from "react-native";
import * as SecureStore from "expo-secure-store";

import CurrentUserContext from "../contexts/CurrentUserContext";
import Button from "../components/helpers/Button";

interface IAccountScreenProps {
  navigation: {
    navigate: (arg: string) => void;
  };
}
export default (props: IAccountScreenProps) => {
  const { setCurrentUser } = useContext(CurrentUserContext);

  const handleSignOut = async () => {
    await SecureStore.deleteItemAsync("memipedia_secure_token");
    setCurrentUser(null);
    props.navigation.navigate("Auth");
  };

  return (
    <View>
      <Text>Account screen</Text>

      <View style={{ marginTop: 20 }}>
        <Button onPress={handleSignOut} text="Sign Out" />
      </View>
    </View>
  );
};

Resources

• Source code