Managing user authentication flows in your mobile apps is often a fundamental requirement to allow only authorized users to access data. The react-navigation library in its latest version (version 5) allows you to implement a custom authentication flow in React Native apps.

In this tutorial, we’ll discuss one of the strategies to implement an authentication flow using react-navigation library, and react-native-firebase .

As you follow along, you’ll set up and configure a Firebase project to implement anonymous sign-in functionality. Lastly, you’ll be able to take advantage of a number of specific features in the latest version of the react-native-firebase package.

Requirements

Ensure your dev environment includes the following required packages:

Node.js above 10.x.x installed on your local machine

installed on your local machine JavaScript/ES6 basics

watchman the file watcher installed

the file watcher installed react-native-cli installed through npm or accessed via npx

For a complete walkthrough on setting up a development environment for React Native, you can go through the official documentation here.

Also, do note that the following tutorial is going to use react-native version 0.61.5 . Please make sure you’re using a version of React Native above 0.60.x .

Installing and configuring react-navigation

To start, create a new React Native project and install the necessary dependencies to set up and use the react-navigation library:

From React Native 0.60.x and higher, linking is automatic, so you don't need to run react-native link .

To finalize the installation on iOS, you’ll have to install pods. (Note: Make sure you have CocoaPods installed.)

Similarly, on Android, open the file android/app/build.gradle and add the following two lines in dependencies section:

Lastly, to save the app from crashing in a production environment, add the following line in index.js :

That’s all we need to do to configure the react-navigation library!

Create a new Firebase Project

To access the Firebase credentials for each mobile OS platform and configure them to use the Firebase SDK, create a new Firebase project from the Firebase console, or if you already have access to a project in your console, you can skip this step.

Create a new project as shown below:

Complete the details of your Firebase project:

Click the button “Create project”, and you should be redirected to the dashboard screen. You should see your newly-created project in that dashboard.

Add Firebase SDK to React Native app

If you’ve used react-native-firebase version 5 or below, you probably noticed that it was a monorepo used to manage all Firebase dependencies from one module.

Version 6 of this library wants you to only install dependencies based on Firebase features that you want to use. For example, in the current app, to support the anonymous login feature, you’ll start by installing the auth and core app packages only.

Also, do note that the core module @react-native-firebase/app is always required.

Open a terminal window to install these dependencies:

Go back to the Firebase console of the project and navigate to “Authentication” section from the side menu.

Go to the second tab (Sign-in method) and make sure to enable the Anonymous sign-in provider.