React Native
...
Parse SDK (REST)
Users

Password Reset

9min

User Password Reset for React Native

Introduction

It’s a fact that as soon as you introduce passwords into a system, users will forget them. In such cases, Parse library provides a way to let them securely reset their password. As with email verification, Parse already has an implementation ready for this, Parse.User.requestPasswordEmail. By using this method, Parse will handle all aspects of password resetting for you seamlessly.



Prerequisites

To complete this tutorial, you will need:

Goal

To add a user password reset feature to a React Native App using Parse.

1 - Customizing password reset emails

Before calling the Parse.User.requestPasswordEmail method, you can customize the message that your user will get after requesting a password reset. Log in to your App dashboard, go to Settings->Verification Emails and change your password reset email subject or message. Ensure that your user will receive an email containing clear instructions and indicating that it is indeed from your application.

Document image


2 - Using requestPasswordEmail

Calling the Parse.User.requestPasswordEmail method only requires your user account email as a parameter, so go ahead and add the following function to your password reset screen. Remember to add a text input for your user email to your screen.

JavaScript
TypeScript


Go ahead and test your screen and component. You will see a message like this after requesting a password reset email:

Document image


You should have received the email, so go ahead and check your inbox. Note that the message will contain any changes you had set up before in your Parse dashboard.

Document image


The password reset form will look like this:

Document image


That’s it, after changing the password in this form, your user will be able to log in again to your application.

3 - Creating a password request component

As said before, you should create a component containing the function shown on Step 2 and also a text input field for your user account email to enable password reset in your app. Here is a complete example of this component. You can plug it in in our previous guides user login project if you like.

UserResetPassword.js
UserResetPassword.tsx


This component should render in a screen like this:

Document image


Conclusion

At the end of this guide, you learned how to allow your Parse users to reset their password on React Native. In the next guide, we will show you how to perform useful user queries.