React Native Login and Registration

Prerequisite

To begin with this tutorial of react native login and registration example, it is essential to have Node.js and NPM properly installed on your device. Additionally, you should be acquainted with the following tools, frameworks, and packages in order to follow along:

• Firebase (backend service)
• React Native (framework for building mobile apps)
• React Native CLI (Command Line Interface)
• React Native Firebase Package (integration of Firebase with React Native)

Install React Native Project

To get started, you will need to install the create-react-native-app tool on your computer. Open your terminal and enter the following command:

Next, create a new React Native app by running the following command:

During the installation process, you will be prompted to install the Expo tool. Type Y and press Enter to proceed. Once the installation is complete, navigate to the project folder by entering the command:

Now you're ready to start working on your React Native app!

Firebase Account Setup

Go to Firebase Console to create a Firebase project. To get started with Firebase, follow these simple steps:

1. Create a Firebase account by accessing the Firebase dashboard. Click on the Create a project button to initiate the creation of a new Firebase authentication project.

2. Provide a suitable name for your project and proceed by clicking the "Continue" button.

3. To add Firebase to your app, choose the appropriate platform based on your selection.

4. Enter a nickname for your app and click on the "Next" button.
   

5. To establish a connection between your React Native app and the Firebase database, we require certain configuration details from Firebase.

6. On the left side of the Firebase dashboard, you'll find a comprehensive list of Firebase features. Navigate to the Authentication section, where the "Users" tab will display the list of registered users. We'll be using the front-end of React Native to register users.

7. Enable the sign-in methods, such as Email and Password, and also enable Login with Google for a seamless user experience.

By following these steps, you'll be on your way to integrating Firebase with your React Native app and leveraging its authentication features.

Set up Firebase in React Native

To integrate Firebase into our React Native application, we will utilize a third-party Firebase package. Follow these steps to set up and configure Firebase:

1. Begin by installing the Firebase package by executing the following command in your terminal:

2. After installing the package, create a "database" folder and a file named "firebase.js" using the following command:

3. Open the "firebase.js" file and add the following code:

With these steps, we have successfully configured Firebase in our React Native application. We can now access Firebase's authentication services and utilize its APIs for our app's functionality.

Initiate Navigation in React Native

In the next step, we will set up the routes in our React Native application. This will enable navigation between different screens, namely the Login, Signup, and Dashboard screens.

To begin, let's create the necessary components by executing the following commands in the terminal:

• Create a new directory called components.
• Create the files signup.js, login.js, and dashboard.js inside the components directory.

Now that we have the basic React Native project structure in place, we need to add the following code to the App.js file:

In this code snippet, we have configured React Native navigation using the StackNavigator. We have also implemented the Header bar with custom styles for each screen.

By following these steps, we have successfully set up the routes and navigation in our React Native application.

Register with Email and Password

Implementing Firebase User Authentication in React Native

To incorporate Firebase User Authentication into our React Native app, we'll create a basic form that captures user registration information, including the username, email, and password.

Registration Authentication with Email and Password

To begin, let's add the following code to the components/signup.js file:

Output

By adding the above code, we have created a user registration form that is compatible with both iOS and Android platforms using the available React Native UI components.

The registerUser() method handles the user registration process by utilizing the createUserWithEmailAndPassword(email, password) method from the Firebase API.

The updateInputVal() function is triggered when users enter information into the input fields, ensuring that the user registration form values are updated accordingly.

With this simple implementation, you can now incorporate Firebase User Authentication into your React Native app.

Login User with email and password

Firebase offers convenient authentication options, including custom email and password authentication, as well as OAuth2 integrations with popular platforms like Facebook, Google, Twitter, and GitHub.

With Firebase authentication, users can swiftly access and modify data in cloud storage and real-time databases.

In the previous step, we covered how to register a new user using email and password and update the display name within the Firebase user object. Now, let's focus on logging in to the system by authenticating the user's registered email and password.

To implement this functionality, add the following code to the login.js file:

In the Login component, we bind the signInWithEmailAndPassword() method to the Sign In button using the onPress() event. When the user clicks the Sign In button, they will be logged into the app.

Logout from Firebase via React Native

Now, let's explore the process of logging out from Firebase in a React Native application. To achieve this, we utilize the signOut() method. Take a look at the implementation in a React Native app below.

In the dashboard.js file, add the following code:

Output

In this code, the firebase.auth().signOut() method is used to log out from the app. Upon successful logout, the users is redirected to the login screen.