Password Reset

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 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 a react native app created and connected to back4app complete the previous guides so you can have a better understanding of the parse user class 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 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 2 using requestpasswordemail calling the parse user requestpasswordemail 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 1 const douserpasswordreset = async function () { 2 // note that this value come from state variables linked to your text input 3 const emailvalue = email; 4 return await parse user requestpasswordreset(emailvalue) 5 then(() => { 6 // login returns the corresponding parseuser object 7 alert alert( 8 'success!', 9 `please check ${email} to proceed with password reset `, 10 ); 11 return true; 12 }) 13 catch((error) => { 14 // error can be caused by lack of internet connection 15 alert alert('error!', error message); 16 return false; 17 }); 18 };1 const douserpasswordreset = async function () promise\<boolean> { 2 // note that this value come from state variables linked to your text input 3 const emailvalue string = email; 4 return await parse user requestpasswordreset(emailvalue) 5 then(() => { 6 // login returns the corresponding parseuser object 7 alert alert( 8 'success!', 9 `please check ${email} to proceed with password reset `, 10 ); 11 return true; 12 }) 13 catch((error object) => { 14 // error can be caused by lack of internet connection 15 alert alert('error!', error message); 16 return false; 17 }); 18 }; go ahead and test your screen and component you will see a message like this after requesting a password reset email 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 the password reset form will look like this 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 1 import react, {fc, reactelement, usestate} from 'react'; 2 import {alert, text, textinput, touchableopacity, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import {usenavigation} from '@react navigation/native'; 5 import styles from ' /styles'; 6&#x9; 7 export const userresetpassword = () => { 8 const navigation = usenavigation(); 9&#x9; 10 // your state variable 11 const \[email, setemail] = usestate(''); 12&#x9; 13 const douserpasswordreset = async function () promise\<boolean> { 14 // note that this value come from state variables linked to your text input 15 const emailvalue = email; 16 return await parse user requestpasswordreset(emailvalue) 17 then(() => { 18 // login returns the corresponding parseuser object 19 alert alert( 20 'success!', 21 `please check ${email} to proceed with password reset `, 22 ); 23 // redirect user to your login screen 24 navigation navigate('login'); 25 return true; 26 }) 27 catch((error) => { 28 // error can be caused by lack of internet connection 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; 33&#x9; 34 return ( 35 \<view style={styles login wrapper}> 36 \<view style={styles form}> 37 \<text>{'please enter your account email to reset your password '}\</text> 38 \<textinput 39 style={styles form input} 40 value={email} 41 placeholder={'your account email'} 42 onchangetext={(text) => setemail(text)} 43 autocapitalize={'none'} 44 keyboardtype={'email address'} 45 /> 46 \<touchableopacity onpress={() => douserpasswordreset()}> 47 \<view style={styles button}> 48 \<text style={styles button label}>{'request password reset'}\</text> 49 \</view> 50 \</touchableopacity> 51 \</view> 52 \</view> 53 ); 54 }; userresetpassword tsx 1 import react, {fc, reactelement, usestate} from 'react'; 2 import {alert, text, textinput, touchableopacity, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import {usenavigation} from '@react navigation/native'; 5 import styles from ' /styles'; 6&#x9; 7 export const userresetpassword fc<{}> = ({}) reactelement => { 8 const navigation = usenavigation(); 9&#x9; 10 // your state variable 11 const \[email, setemail] = usestate(''); 12&#x9; 13 const douserpasswordreset = async function () promise\<boolean> { 14 // note that this value come from state variables linked to your text input 15 const emailvalue string = email; 16 return await parse user requestpasswordreset(emailvalue) 17 then(() => { 18 // login returns the corresponding parseuser object 19 alert alert( 20 'success!', 21 `please check ${email} to proceed with password reset `, 22 ); 23 // redirect user to your login screen 24 navigation navigate('login'); 25 return true; 26 }) 27 catch((error object) => { 28 // error can be caused by lack of internet connection 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; 33&#x9; 34 return ( 35 \<view style={styles login wrapper}> 36 \<view style={styles form}> 37 \<text>{'please enter your account email to reset your password '}\</text> 38 \<textinput 39 style={styles form input} 40 value={email} 41 placeholder={'your account email'} 42 onchangetext={(text) => setemail(text)} 43 autocapitalize={'none'} 44 keyboardtype={'email address'} 45 /> 46 \<touchableopacity onpress={() => douserpasswordreset()}> 47 \<view style={styles button}> 48 \<text style={styles button label}>{'request password reset'}\</text> 49 \</view> 50 \</touchableopacity> 51 \</view> 52 \</view> 53 ); 54 }; this component should render in a screen like this 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