AirBnB Clone with React Native Part 7: “Forgot Password?” with Firebase
Tags: mobiledevelopment, javascript, firebase, heartbeat
Published: 2019-10-27 05:03:03

---
title: AirBnB Clone with React Native Part 7: “Forgot Password?” with Firebase
published: true
date: 2019-10-24 14:09:07 UTC
tags: mobile-development,javascript,firebase,heartbeat
canonical_url: https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-7-forgot-password-with-firebase-14ccbf6afa21
cover_image: https://cdn-images-1.medium.com/max/1024/0*O5XGxY4aol1I_Wyv.jpeg
---


This tutorial is the seventh chapter of our implementation of an [AirBnB clone in React Native](https://www.instamobile.io/app-templates/real-estate-app-template-react-native/). In the previous chapter, we successfully implemented animated checkmarks for our Login form. In case you need to get caught up, here are links to parts 1–6:

- [AirBnB Clone with React Native Part 1: Home Screen UI](https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-1-home-screen-ui-b5ed1c9278ae)
- [AirBnB Clone with React Native Part 2: Login Screen UI](https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-2-login-screen-ui-999773e860e4)
- [AirBnB Clone with React Native Part 3: Email Authentication with Firebase](https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-3-email-authentication-with-firebase-2153a00175ab)
- [AirBnB Clone with React Native Part 4: Login error notifications](https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-4-login-error-notifications-580beb4fc03c)
- [AirBnB Clone with React Native Part 5: Loading Modal Implementation](https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-5-loading-modal-implementation-8a399154ac02)
- [AirBnB Clone with React Native Part 6: Animated Checkmarks](https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-6-animated-checkmarks-5917e4972702)

In part 7, we’re going to continue where we left off by implementing a “forgot password?” screen. The forgot password screen is available in most web and app systems in case a user forgets their login credentials. Here, the idea is to create a simple forgot password screen with an email input form. Then we’re going to use Firebase to handle the backend configuration.

### Importing all necessary components

Before doing anything, we need to create a file named ForgetPassword.js in the ./screens directory of our project. In this file, we need to import a few necessary packages, provided in the code snippet below:

{% gist https://gist.github.com/krissnawat/99c205d98f5e1aef648530fe8ea21ffe %}

Here, we’ve also imported several custom components from our ./components folder. The InputField and NextArrowButton components that we implemented in earlier tutorials are imported from this folder.

### Implementing “Forgot Password” screen

Now we need to define a class called ForgotPassword that extends to the Component module, as shown below:

```
export default class ForgotPassword extends Component {
```

In the render()function, we need to add the heading and sub-heading. For that, we’re going to add a View component with some styles wrapped by the KeyboardAvoidingView component, which enables us to solve the common problem of views that need to move out of the way of the virtual keyboard.

This component will automatically adjust its positions and paddings based on the position of the keyboard. The View component wraps two child Text components, which consist of text for the heading and sub-heading:

{% gist https://gist.github.com/krissnawat/aec478b46653c4d34832bcad0d5bbb43 %}

The styles required are provided in the code snippet below:

{% gist https://gist.github.com/krissnawat/4f5f51ce2c086c7de2108ad9f7611c6c %}

Hence, we will get the following result in our emulator screen:

![](https://cdn-images-1.medium.com/max/476/1*0UjTvJV522trcUeUIwWY1w.png)

As we can see, we have successfully implemented the heading and sub-heading sections. But there’s a white header at the top that needs to fit the style of the rest of the app. For that, we need to add a similar background color style to the header, as shown in the code snippet below:

{% gist https://gist.github.com/krissnawat/61d64f31f72c582b4f94018a30ccf6a6 %}

Here’s what this should look like:

![](https://cdn-images-1.medium.com/max/476/1*ixrlzC9ohZqS_Hra-wkNPg.png)

> Looking for new ways to elevate your mobile app’s user experience? [With Fritz AI, you can teach your apps to see, hear, sense, and think. Learn how and start building with a free account.](https://www.fritz.ai/product/standard.html?utm_campaign=buildapps9&utm_source=heartbeat)

### Adding a form section

Next, we’re going to add a form that includes a single email input field. For that, we’re going to use the InputField component from the react-native package. The InputField component will contain several props for labels, color, border, etc., as shown in the snippet below:

{% gist https://gist.github.com/krissnawat/a7d19f4b46dc6ac8b6213b09f2dc103b %}

A quick glance at what this looks like:

![](https://cdn-images-1.medium.com/max/432/1*zcXxWpKFGN9G0GWnW8U6FQ.png)

### Adding a submit button

In this step, we’re going to add a ‘submit’ button to the ForgotPassword.js screen in order to submit our email address. For that, we’re going to make use of the NextArrowButton component that we implemented in earlier tutorial parts. We need to add the NextArrowbutton component to the bottom of the screen:

```
        < **NextArrowButton** _handelPress_={this.submitEmail} _disabled_={false} /> 
    </ **KeyboardAvoidingView** >
```

Here the submit button implemented from NextArrowButton component is set with two props. One is handlePress, set to the submitEmail function. When handlePress is triggered by the child component, the submitEmail function will be triggered in the parent component. The second prop is a disabled prop, which is set to false in order to enable the button.

Here’s what this will look like:

![](https://cdn-images-1.medium.com/max/476/1*7tM8d6orkpQjkA3WnIiyIg.png)

### Configuring the form submission

Now we’re going to configure the form submission after pressing the submit button. For that, we’re first going to define an emailAddress state variable that handles the input from the InputField that we added earlier. The emailAddress state is defined as shown in the code snippet below:

{% gist https://gist.github.com/krissnawat/afb0537c59f94d500ac733eae1e39f15 %}

Now we need to create a function to handle the change of the input variable when something is entered in the InputField component. For that, we’re going to create a function called handleEmailChange, which takes in a parameter called email and sets the emailAddress state value to whatever a user types in the email InputField component. The function is provided in the code snippet below:

{% gist https://gist.github.com/krissnawat/6414ddafe6c1c4f6f5e2e8f3743714dd %}

Now we need to add the handleEmailChange function to the onChangeText event of the InputField component:

{% gist https://gist.github.com/krissnawat/7419b9709e3bb4911ed18b9a1faa81b3 %}

At this point, we’ve successfully implemented the input form that takes in the entered email address from the user. Now we need to configure the submitEmail function, which will submit the email address entered by the user to Firebase.

> The next revolution in mobile development? Machine learning. Don’t miss out on the latest from this emerging intersection. [Sign up for weekly updates from our crew of mobile devs and machine learners.](https://www.fritz.ai/newsletter?utm_campaign=heartbeat-newsletter-fomo2&utm_source=heartbeat)

### Adding Firebase

In this step, we’re going to add the Firebase to the project to handle the overall _forgot password_ process. For that, we need to import the react-native-firebase package into our ForgotPassword.js file, as shown in the code snippet below:

{% gist https://gist.github.com/krissnawat/cedc1671e5dc7d5327091c968ea7e346 %}

> Note: We’re also importing the Alert component from the react-native package.

Now we’re going to use the Firebase configuration in our submitEmail function in order to send the email address entered in the input form to the Firebase account. The overall configuration for the submitEmail function with firebase config is provided in the code snippet below:

{% gist https://gist.github.com/krissnawat/322b3a4487e99b0c019cc584065723a5 %}

In the submitEmail function, we call the function sendPasswordResetEmail of thefirebase.auth() function and send an email address stored in the email state.

Then we relieve two callbacks: one for success and one for error. During the callbacks, we’re going to set an alert message using the Alert component as per the result of the callbacks. So whenever we submit the email address, we will get some kind of error on the screen.

Now we need to test our overall implementation. The test is shown in the emulator simulation below:

![](https://cdn-images-1.medium.com/max/364/1*c5Y1Y3C8GEDV_JdkxhLS0A.gif)

As we can see, when we enter an invalid email address, we automatically get the error alert on the screen. This means that firebase automatically handles the email address format validation. We can also see that when we enter a valid email address and if the email is not available then it shows another alert message automatically on the screen.

Now we need to test this system by using a valid email address:

![](https://cdn-images-1.medium.com/max/364/1*HbMu0D2ETiDsQdXMYCqovQ.gif)

As we can see, we get the success alert.

Firebase will then send us (the user) an automated email to help reset our password:

![](https://cdn-images-1.medium.com/max/1024/1*FqCjOSXDatjFXE64N7cc6Q.png)

Now when we click on the link provided in the email body, Firebase automatically handles the rest by navigating us to the form screen to change the password, as shown in the screenshot below:

![](https://cdn-images-1.medium.com/max/394/1*R54uayCYELwyLe-UnLw5Aw.png)

Now we just need to type in the new password and it will be set. This is all handled automatically by Firebase. After we enter the new password in the form shown in the above screenshot and click on ‘Save’, we’ll see the “Password changed”, which confirms the change:

![](https://cdn-images-1.medium.com/max/392/1*z9MSciuvGxs7lTHxQbgoAQ.png)

And that’s it! We’ve successfully implemented a _Forgot Password?_ screen with all the necessary configurations in our AirBnB clone project.

### Conclusion

In this part of our AirBn clone series, we learned how to implement a _Forgot Password?_ screen. We also learned how to re-use the components we’ve already implemented, like the submit button. We also got detailed insight on how to handle password changes using the Firebase.

In the next chapter, we’ll learn how to handle Facebook logins, specifically for iOS.

## Disclosure
This post includes affiliate links; I may receive compensation if you purchase
products or services from the different links provided in this article.

_Editor’s Note:_[_Heartbeat_](http://heartbeat.fritz.ai) _is a contributor-driven online publication and community dedicated to exploring the emerging intersection of mobile app development and machine learning. We’re committed to supporting and inspiring developers and engineers from all walks of life._

_Editorially independent, Heartbeat is sponsored and published by_[_Fritz AI_](http://fritz.ai)_, the machine learning platform that helps developers teach devices to see, hear, sense, and think. We pay our contributors, and we don’t sell ads._

_If you’d like to contribute, head on over to our_[_call for contributors_](https://heartbeat.fritz.ai/call-for-contributors-october-2018-update-fee7f5b80f3e)_. You can also sign up to receive our weekly newsletters (_[_Deep Learning Weekly_](https://www.deeplearningweekly.com/) _and_[_Heartbeat_](https://www.fritz.ai/newsletter)_), join us on_[](https://join.slack.com/t/fritz-ai-community/shared_invite/enQtNTY5NDM2MTQwMTgwLWU4ZDEwNTAxYWE2YjIxZDllMTcxMWE4MGFhNDk5Y2QwNTcxYzEyNWZmZWEwMzE4NTFkOWY2NTM0OGQwYjM5Y2U)[_Slack_](http://fritz.ai/slack)_, and follow Fritz AI on_[_Twitter_](https://twitter.com/fritzlabs) _for all the latest in mobile machine learning._

* * *