SERIES: React Native (Step by Step) — Auth Flow Navigation with Mock User Login

Preparations

For our AuthFlow example, we need a few additional screens. For one we want to allow the user to both sign in (existing users) and sign up (new users) and in addition to the AppLoading screen (for loading / initialising user data) I’ve added an AppCheck screen where I will, later on, check for version updates in the app stores and such.

Skippable Splash Screen

Starting with the SplashScreen, we’re building a small mechanism to trigger a navigation event after a few seconds or when the user taps the screen to trigger it manually. This is a common pattern you see in many apps.

Mocking the login

I will briefly go over the mock login I’m using. To represent real server/api interaction, I’ve mocked a promise using a timeout that will return the expected mock values. I’m skipping the types I’ve used and advise you to simply copy the full file from GitHub as this is only a mock authentification and not the focus of this article.

Wiring up Redux and Mock API

We now need to do the real work, setting up the real redux code for users so our previous user.ts duck will now be rewritten completely.

Actions

We will use the setLogin action to store a logged-in user’s info in our state. This action will no longer be called directly from the app. Instead, we will use if in the userMiddleware we are about to write.

Selectors

For easier access, we will set up a total of 3 selectors for different parts of our state to be used in the frontend. We know selectLogin already. Additionally, we now have a flag for isSubmitting during the api request and the loginMessage, to update the UI accordingly and provide useful feedback for user interactions.

Middleware

In our middleware, we will listen to login and signup attempts, call our mock code and dispatch additional actions according to the results from the mock api.

Reducer

The last bit is our Reducer code. This is where it all comes together. When the user attempts to log in, we update state and message to reflect this in the UI and then wait for updates via setLogin and setLogout.

A proper login form

On our SignIn and SignUp screens, we can now replace the mock button with a propper login form from a separate component file.

Some words about me:

If you want to see more of my work and progress, feel free to follow me and check out my other articles. If you clap feverishly for the articles you like most, it will be easier for me to decide which directions to pursue in following articles so use your ability to cast a vote for future content.

I’m a Web / App Developer & father 👨‍👩‍👧 doing freelance and part-time agency work since 2003, 💻 building stuff on the side 🕹 and attending conferences 🎟