Create an Authentication Flow with React Navigation

Instructor: [00:00] First, we've got a primary app tab navigator, which is what we're seeing here. It's one tab that renders a list of content, and another profile screen, which renders some profile information. The other navigator we've got set up is our off stack, which is just a stack navigator which we can click through, and press sign in, or sign up.

[00:17] Now, to actually make this work in a typical application flow, what we're first going to do is import a few packages from React native, specifically asyncStorage, view, and text. Also, simply to simulate an authentication that would typically happen on a server, what we've got here is a function which we can check off, which is just returning a promise.

[00:40] In which we check asyncStorage for this authorized key, and if that exists, we're going to assume that they're authorized. If not, then that user is not authorized. With that in mind, we go ahead and start defining our application.

[00:53] We're going to replace those export defaults with an app, which extends react.component. Inside of here, we're going to initialize it with some state. First, we'll have isAuthorized, which is going to be false.

[01:07] We're also going to have checkingInitialAuth. That's going to be true by default. We'll then use a componentWillMount. Inside of here, first, we're going to make this async, so we can use async and await.

[01:20] We'll say const is authorized, and we'll await checkAuth, which is a function we previously defined. Then with that, we can say this.setState. We'll set isAuthorized to the value that's returned from our checkAuth function. Then we'll say checkingInitialAuth will be false.

[01:39] We can then go ahead and set up our render function. Inside of our render function, we're going to access our isAuthorized, as well as our checkingInitialAuth variables, which are going to be available from this.state.

[01:51] Initially, if we're checking the initial auth, so if we haven't found out if they're authorized or not, we're just going to return a very basic loading screen, which is just a view and some text. This will be a good point where you could actually continue to render your splash screen until you've actually checked authorization.

[02:08] Next, we'll say else if isAuthorized. Inside of here, we want to return our primary app's tab navigator. Finally, if they're not checking initial auth, and if they're not authorized, we'll want to return our auth stack. If you run into this error, make you sure you export default app.

[02:28] You can see here, since we're not authorized yet, we're just rendering our auth stack. Now, before we move on, we're going to set up two functions on our component. The first one is going to be signIn. When our signIn function is called, we'll say this.setState. We'll see isAuthorized to true.

[02:46] We're also going to say asyncStorage.setItem of authorized, which is the key that we're using in our checkAuth function. We'll set that to a string of true. Now, asyncStorage only accepts strings. That's why we need to use a string, versus just a Boolean.

[03:01] We're also going to set up a function of signOut. Just like signIn, we'll set this.setState. This time, isAuthorized is false, and asyncStorage.removeItem. We just need to specify the key we want to remove. That will be authorized.

[03:17] Now, to actually pass these signIn and signOut functions down to the components where they need to be called, we can do that via screen pros, which we'll define down here. When the primary application is shown, we want to pass this.signOut. When the auth stack is shown, we want to pass the signIn function.

[03:36] Now, we actually want to use our screenProps to define this. To do so, looking at our auth stack, we can go into our sign-up screen. What we need to do is import screenProps, which will be passed to a screen when it's been registered with the navigator.

[03:52] Then down here, when they press sign up, we expect them to actually go to the sign-up screen. We can say screenProps.signIn. We're going to do the same thing on the sign-in screen. This time, again, we've imported screenProps. Then when we press sign in, we'll say screenProps.signIn.

[04:10] Now, when we press sign up, we'll switch over to our auth stack. From here, looking at our profile screen, we want to again import screenProps from our props, and when the user presses sign out, we pass the screenProps.signOut via screenProps.

[04:28] Now, when we go to our profile tab, press sign out, it'll bring us to our sign-up screen. Going to sign in to check it out, we can again see we're able to sign in. Now, when we actually refresh the application as well, it's going to persist that authorization state between sessions, because we're doing that check in our componentWillMount.