You're learning about handlers, API connectors, forms, there's so many things that go into building out an authentication system inside of React Native and today is gonna be a very exciting guide because in this guide, we're gonna see how we can actually take the data that's sent back from the API and redirect the user. So that is really one of the key steps when it comes to building out an authentication system, so let's get started on that.

The very first thing we need to do is, let our AuthScreen know about some of the props it has access to because we need to use something we've already done in the last section, which is the navigate function. So in order to do that, let's build out an interface and you can definitely refer back to the FeedScreen interface and in fact, let's just copy this because this is gonna be exactly what we're gonna be using here for the AuthScreen. The only difference is we're gonna change the name so instead of IFeedScreenProps, it's gonna be IAuthScreenProps but everything else is gonna be exactly the same.

AuthScreen.tsx

interface IAuthScreenProps {
  navigation: {
    navigate: (arg: string) => void;
  };
}

So let's copy that and in our export default, let's let our app know, our component know that it's going to receive props and it's going to be mapped to this interface right here.

AuthScreen.tsx

export default (props: IAuthScreenProps) => {
  const [formToShow, setFormToShow] = useState("LOGIN");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

So what this is telling our screen component is that it has access to one type of prop which is this navigation prop. Now, with that in place, let's come down here, down to our handleSubmit function and inside of the response, so we're gonna wait back to see if we get a JWT token.

So here, I'm gonna say if response.data.jwt, because we saw what happens when a user types in the wrong username or the wrong email address and password, we don't get that JWT token back. So we first check for that and if we receive it, then we're gonna say that we want to say props.navigation.navigate, and now we just want to navigate to the Feed screen. Let's hit save and let's see if this is working.

AuthScreen.tsx

if (response.data.jwt) {
  props.naviation.navigate("Feed");
}

So I'm gonna come to the simulator and type my correct email address or lemme do the wrong one first. So I'm gonna say reactnative@devcamp.com and some wrong password. So if I hit Login, nothing happens which is exactly what we want. Now, if I type in the correct password, now hit Login, you'll see I've been redirected to our Feed screen so this is working beautifully. This is exactly what we're wanting to have happen.

This is good but what happens in the case where the user types the wrong information in? In that case, we need to let them know and there's a few ways of doing it. I'm gonna show you how we can use an alert. So go back to the simulator, hit refresh so it takes us back to the Login screen and I'm gonna add a couple of alerts.

So here, I'm gonna say if this is the case, then I want to redirect the user. Else, so if we do not get that JWT token back, then I want to call an alert so this is something, an alert is just something just built directly into React Native and I can say alert, it looks like you typed in the wrong email or password, please try again. And we're gonna also copy this alert down in in case there are any errors and we can get rid of our console.log statements.

AuthScreen.tsx

API.post("memipedia_user_token", params)
    .then(response => {
      if (response.data.jwt) {
        props.navigation.navigate("Feed");
      } else {
        alert(
          "It looks like you typed in the wrong email or password, please try again"
        );
      }
    })
    .catch(error => {
      alert(
        "It looks like you typed in the wrong email or password, please try again"
      );
    });
};

Hit Save and now let's come and test this out so here I'm gonna just type in some gibberish for the email and for the password. Type Login and you can see, we now have this alert and it says it looks like you typed in the wrong email or password, please try again.

Hit OK and all that is working once again. Let's type out the correct one, and let's confirm that it's still working. Type Login and that's working perfectly.

So we now have a way of notifying the user if they have entered in the correct information, which in that case, they get redirected to the main part of the app and then we have shown how you can work with alerts to let them know when they've typed in something that might not be correct.

Resources

• Source code