⚠️ This lesson is retired and might contain outdated information.

Create an Authentication Flow with React Navigation

Spencer Carli
InstructorSpencer Carli
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 6 months ago

In this lesson you will learn how to structure an auth flow in an application using React Navigation. In the process you will learn how to use a navigator’s screenProps to access parent functions and React Native’s AsyncStorage to persistent auth state between sessions.

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.

David Moore
David Moore
~ 6 years ago

Cool video. I noticed you are using the deprecated componentWillMount. Is there a plan to update the video or code?

Spencer Carli
Spencer Carliinstructor
~ 6 years ago

@David you could use componentDidMount for the same thing. No plans to update the video as it doesn't change much from what is the focus of the lesson.

Michael Cavallaro
Michael Cavallaro
~ 5 years ago

Great stuff! I was just curious, can you pass the signIn/signOut functions through regular props? Or do these callbacks have to be through screenProps?

Spencer Carli
Spencer Carliinstructor
~ 5 years ago

@Michael - good question! You'll need to pass them through screenProps otherwise React Navigation won't pass them down the screens. They'll just never get exposed anywhere.

Michael Cavallaro
Michael Cavallaro
~ 5 years ago

@Spencer, thanks so much for the quick response, that makes perfect sense! I've been comparing it to react-router usage.

Markdown supported.
Become a member to join the discussionEnroll Today