User LogIn

user login and logout for react native introduction after implementing a component that handles user registration in parse in the last guide, you will now learn how to log in and log out users using the same parse user parse user class you will also learn to install and configure react navigation react navigation so you can navigate the user through your new screens and components the parse user login parse user login method stores in your local storage a valid user session, so future calls to methods like currentasync currentasync will successfully retrieve your user data on the other hand, logout logout will clear this session from disk and log out of any linked services in your parse server at any time, you can access the complete android project built with this tutorial at our github repositories kotlin example repository java example repository 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 build a user login and logout feature using parse for a react native app 1 installing dependencies at some point, every application in react native will need screen navigation you will now learn how to install and configure the most used library in react native for this, react navigation react navigation go to your project root directory and install the following dependencies if you are developing for ios, you need to install the pods to complete your app auto linking note linking is automatic for react native 0 60+ 0 60+ to all platforms, so if you are still using an older version of rn, take a look at react native docs here https //reactnative dev/docs/linking libraries ios in your app entry file ( app tsx app tsx or app js app js ), add this import line at the very top of the file now you need to move your components inside the react navigation react navigation container, which will encapsulate your app inside a navigationcontainer navigationcontainer app tsx/app js 1 import "react native gesture handler"; 2 // your other imports go here 3 import { navigationcontainer } from "@react navigation/native"; 4&#x9; 5 const app = () => { 6 return \<navigationcontainer>{/ your app code /}\</navigationcontainer>; 7 } 8&#x9; 9 export default app; the core navigation library has different additional navigation modules like a stack, tabs, drawer, others stack navigator is the most straightforward one and the one that you will use in this guide proceed with the installation 2 creating a stacknavigator let’s now create and set up a stacknavigator stacknavigator this module will manage and handle screen navigation on your app since it’s not a goal here to give you a react navigation react navigation deep understanding, please go to the official docs https //reactnavigation org/docs/hello react navigation/ to know more in your app js app js ( app tsx app tsx if you are using typescript) file, import and create a stacknavigator stacknavigator , create a function containing your user registration screen and insert the navigator inside your app navigationcontainer navigationcontainer your main file should look like this app tsx/app js 1 import 'react native gesture handler'; 2 import react from 'react'; 3 import {image, safeareaview, statusbar, text, view} from 'react native'; 4&#x9; 5 import asyncstorage from '@react native async storage/async storage'; 6 import parse from 'parse/react native'; 7 import {navigationcontainer} from '@react navigation/native'; 8 import {createstacknavigator} from '@react navigation/stack'; 9 import {userregistration} from ' /userregistration'; 10 import styles from ' /styles'; 11&#x9; 12 // your parse initialization configuration goes here 13 parse setasyncstorage(asyncstorage); 14 const parse application id string = 'application id'; 15 const parse host url string = 'host url'; 16 const parse javascript id string = 'javascript id'; 17 parse initialize(parse application id, parse javascript id); 18 parse serverurl = parse host url; 19&#x9; 20 // wrap your old app screen in a separate function, so you can create a screen 21 // inside the navigator; you can also declare your screens in a separate file, 22 // export and import here to reduce some clutter 23 function userregistrationscreen() { 24 return ( 25 <> 26 \<statusbar /> 27 \<safeareaview style={styles login container}> 28 \<view style={styles login header}> 29 \<image 30 style={styles login header logo} 31 source={require(' /assets/logo back4app png')} 32 /> 33 \<text style={styles login header text}> 34 \<text style={styles login header text bold}> 35 {'react native on back4app '} 36 \</text> 37 {' user registration'} 38 \</text> 39 \</view> 40 \<userregistration /> 41 \</safeareaview> 42 \</> 43 ); 44 } 45&#x9; 46 // create your main navigator here 47 const stack = createstacknavigator(); 48&#x9; 49 // add the stack navigator to your navigationcontainer 50 // and in it you can add all your app screens in the order you need 51 // them on your stack 52 const app = () => { 53 return ( 54 \<navigationcontainer> 55 \<stack navigator> 56 \<stack screen name="sign up" component={userregistrationscreen} /> 57 \</stack navigator> 58 \</navigationcontainer> 59 ); 60 }; 61&#x9; 62 export default app; if you run your app now, you will notice the inclusion of a header at the top of the screen containing your screen name 3 creating a login component let’s now build the userlogin userlogin functional component in your app create a new file in your root directory called userlogin js userlogin js ( userlogin tsx userlogin tsx if you are using typescript) and add the input elements using state hooks to manage their data userlogin js 1 import react, {fc, reactelement, usestate} from 'react'; 2 import { 3 image, 4 text, 5 textinput, 6 touchableopacity, 7 view, 8 } from 'react native'; 9 import parse from 'parse/react native'; 10 import styles from ' /styles'; 11&#x9; 12 export const userlogin = () => { 13 const \[username, setusername] = usestate(""); 14 const \[password, setpassword] = usestate(""); 15&#x9; 16 return ( 17 \<view style={styles login wrapper}> 18 \<view style={styles form}> 19 \<textinput 20 style={styles form input} 21 value={username} 22 placeholder={'username'} 23 onchangetext={(text) => setusername(text)} 24 autocapitalize={'none'} 25 keyboardtype={'email address'} 26 /> 27 \<textinput 28 style={styles form input} 29 value={password} 30 placeholder={'password'} 31 securetextentry 32 onchangetext={(text) => setpassword(text)} 33 /> 34 \<touchableopacity onpress={() => {}}> 35 \<view style={styles button}> 36 \<text style={styles button label}>{'sign in'}\</text> 37 \</view> 38 \</touchableopacity> 39 \</view> 40 \<view style={styles login social}> 41 \<view style={styles login social separator}> 42 \<view style={styles login social separator line} /> 43 \<text style={styles login social separator text}>{'or'}\</text> 44 \<view style={styles login social separator line} /> 45 \</view> 46 \<view style={styles login social buttons}> 47 \<touchableopacity> 48 \<view 49 style={\[ 50 styles login social button, 51 styles login social facebook, 52 ]}> 53 \<image 54 style={styles login social icon} 55 source={require(' /assets/icon facebook png')} 56 /> 57 \</view> 58 \</touchableopacity> 59 \<touchableopacity> 60 \<view style={styles login social button}> 61 \<image 62 style={styles login social icon} 63 source={require(' /assets/icon google png')} 64 /> 65 \</view> 66 \</touchableopacity> 67 \<touchableopacity> 68 \<view style={styles login social button}> 69 \<image 70 style={styles login social icon} 71 source={require(' /assets/icon apple png')} 72 /> 73 \</view> 74 \</touchableopacity> 75 \</view> 76 \</view> 77 \</view> 78 ); 79 }; userlogin tsx 1 import react, {fc, reactelement, usestate} from 'react'; 2 import { 3 image, 4 text, 5 textinput, 6 touchableopacity, 7 view, 8 } from 'react native'; 9 import parse from 'parse/react native'; 10 import styles from ' /styles'; 11&#x9; 12 export const userlogin fc<{}> = ({}) reactelement => { 13 const \[username, setusername] = usestate(""); 14 const \[password, setpassword] = usestate(""); 15&#x9; 16 return ( 17 \<view style={styles login wrapper}> 18 \<view style={styles form}> 19 \<textinput 20 style={styles form input} 21 value={username} 22 placeholder={'username'} 23 onchangetext={(text) => setusername(text)} 24 autocapitalize={'none'} 25 keyboardtype={'email address'} 26 /> 27 \<textinput 28 style={styles form input} 29 value={password} 30 placeholder={'password'} 31 securetextentry 32 onchangetext={(text) => setpassword(text)} 33 /> 34 \<touchableopacity onpress={() => {}}> 35 \<view style={styles button}> 36 \<text style={styles button label}>{'sign in'}\</text> 37 \</view> 38 \</touchableopacity> 39 \</view> 40 \<view style={styles login social}> 41 \<view style={styles login social separator}> 42 \<view style={styles login social separator line} /> 43 \<text style={styles login social separator text}>{'or'}\</text> 44 \<view style={styles login social separator line} /> 45 \</view> 46 \<view style={styles login social buttons}> 47 \<touchableopacity> 48 \<view 49 style={\[ 50 styles login social button, 51 styles login social facebook, 52 ]}> 53 \<image 54 style={styles login social icon} 55 source={require(' /assets/icon facebook png')} 56 /> 57 \</view> 58 \</touchableopacity> 59 \<touchableopacity> 60 \<view style={styles login social button}> 61 \<image 62 style={styles login social icon} 63 source={require(' /assets/icon google png')} 64 /> 65 \</view> 66 \</touchableopacity> 67 \<touchableopacity> 68 \<view style={styles login social button}> 69 \<image 70 style={styles login social icon} 71 source={require(' /assets/icon apple png')} 72 /> 73 \</view> 74 \</touchableopacity> 75 \</view> 76 \</view> 77 \</view> 78 ); 79 }; you can now implement the function that will call the parse user login parse user login method, using state variables javascript 1 const douserlogin = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser) => { 7 // login returns the corresponding parseuser object 8 alert alert( 9 'success!', 10 `user ${loggedinuser get('username')} has successfully signed in!`, 11 ); 12 // to verify that this is in fact the current user, currentasync can be used 13 const currentuser = await parse user currentasync(); 14 console log(loggedinuser === currentuser); 15 return true; 16 }) 17 catch((error) => { 18 // error can be caused by wrong parameters or lack of internet connection 19 alert alert('error!', error message); 20 return false; 21 }); 22 };1 const douserlogin = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser parse user) => { 7 // login returns the corresponding parseuser object 8 alert alert( 9 'success!', 10 `user ${loggedinuser get('username')} has successfully signed in!`, 11 ); 12 // to verify that this is in fact the current user, currentasync can be used 13 const currentuser parse user = await parse user currentasync(); 14 console log(loggedinuser === currentuser); 15 return true; 16 }) 17 catch((error object) => { 18 // error can be caused by wrong parameters or lack of internet connection 19 alert alert('error!', error message); 20 return false; 21 }); 22 }; insert this function inside the userlogin userlogin component, just before the return return call, to be called and tested remember to update the form’s login button onpress onpress action to () => douserlogin() () => douserlogin() and to import alert alert from react native react native your component should now look like this userlogin js 1 import react, {fc, reactelement, usestate} from 'react'; 2 import { 3 alert, 4 image, 5 text, 6 textinput, 7 touchableopacity, 8 view, 9 } from 'react native'; 10 import parse from 'parse/react native'; 11 import styles from ' /styles'; 12&#x9; 13 export const userlogin = () => { 14 const \[username, setusername] = usestate(''); 15 const \[password, setpassword] = usestate(''); 16&#x9; 17 const douserlogin = async function () { 18 // note that these values come from state variables that we've declared before 19 const usernamevalue = username; 20 const passwordvalue = password; 21 return await parse user login(usernamevalue, passwordvalue) 22 then(async (loggedinuser) => { 23 // login returns the corresponding parseuser object 24 alert alert( 25 'success!', 26 `user ${loggedinuser get('username')} has successfully signed in!`, 27 ); 28 // to verify that this is in fact the current user, currentasync can be used 29 const currentuser = await parse user currentasync(); 30 console log(loggedinuser === currentuser); 31 return true; 32 }) 33 catch((error) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 }; 39&#x9; 40 return ( 41 \<view style={styles login wrapper}> 42 \<view style={styles form}> 43 \<textinput 44 style={styles form input} 45 value={username} 46 placeholder={'username'} 47 onchangetext={(text) => setusername(text)} 48 autocapitalize={'none'} 49 keyboardtype={'email address'} 50 /> 51 \<textinput 52 style={styles form input} 53 value={password} 54 placeholder={'password'} 55 securetextentry 56 onchangetext={(text) => setpassword(text)} 57 /> 58 \<touchableopacity onpress={() => douserlogin()}> 59 \<view style={styles button}> 60 \<text style={styles button label}>{'sign in'}\</text> 61 \</view> 62 \</touchableopacity> 63 \</view> 64 \<view style={styles login social}> 65 \<view style={styles login social separator}> 66 \<view style={styles login social separator line} /> 67 \<text style={styles login social separator text}>{'or'}\</text> 68 \<view style={styles login social separator line} /> 69 \</view> 70 \<view style={styles login social buttons}> 71 \<touchableopacity> 72 \<view 73 style={\[ 74 styles login social button, 75 styles login social facebook, 76 ]}> 77 \<image 78 style={styles login social icon} 79 source={require(' /assets/icon facebook png')} 80 /> 81 \</view> 82 \</touchableopacity> 83 \<touchableopacity> 84 \<view style={styles login social button}> 85 \<image 86 style={styles login social icon} 87 source={require(' /assets/icon google png')} 88 /> 89 \</view> 90 \</touchableopacity> 91 \<touchableopacity> 92 \<view style={styles login social button}> 93 \<image 94 style={styles login social icon} 95 source={require(' /assets/icon apple png')} 96 /> 97 \</view> 98 \</touchableopacity> 99 \</view> 100 \</view> 101 \</view> 102 ); 103 }; userlogin tsx 1 import react, {fc, reactelement, usestate} from 'react'; 2 import { 3 alert, 4 image, 5 text, 6 textinput, 7 touchableopacity, 8 view, 9 } from 'react native'; 10 import parse from 'parse/react native'; 11 import styles from ' /styles'; 12&#x9; 13 export const userlogin fc<{}> = ({}) reactelement => { 14 const \[username, setusername] = usestate(''); 15 const \[password, setpassword] = usestate(''); 16&#x9; 17 const douserlogin = async function () promise\<boolean> { 18 // note that these values come from state variables that we've declared before 19 const usernamevalue string = username; 20 const passwordvalue string = password; 21 return await parse user login(usernamevalue, passwordvalue) 22 then(async (loggedinuser parse user) => { 23 // login returns the corresponding parseuser object 24 alert alert( 25 'success!', 26 `user ${loggedinuser get('username')} has successfully signed in!`, 27 ); 28 // to verify that this is in fact the current user, currentasync can be used 29 const currentuser parse user = await parse user currentasync(); 30 console log(loggedinuser === currentuser); 31 return true; 32 }) 33 catch((error object) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 }; 39&#x9; 40 return ( 41 \<view style={styles login wrapper}> 42 \<view style={styles form}> 43 \<textinput 44 style={styles form input} 45 value={username} 46 placeholder={'username'} 47 onchangetext={(text) => setusername(text)} 48 autocapitalize={'none'} 49 keyboardtype={'email address'} 50 /> 51 \<textinput 52 style={styles form input} 53 value={password} 54 placeholder={'password'} 55 securetextentry 56 onchangetext={(text) => setpassword(text)} 57 /> 58 \<touchableopacity onpress={() => douserlogin()}> 59 \<view style={styles button}> 60 \<text style={styles button label}>{'sign in'}\</text> 61 \</view> 62 \</touchableopacity> 63 \</view> 64 \<view style={styles login social}> 65 \<view style={styles login social separator}> 66 \<view style={styles login social separator line} /> 67 \<text style={styles login social separator text}>{'or'}\</text> 68 \<view style={styles login social separator line} /> 69 \</view> 70 \<view style={styles login social buttons}> 71 \<touchableopacity> 72 \<view 73 style={\[ 74 styles login social button, 75 styles login social facebook, 76 ]}> 77 \<image 78 style={styles login social icon} 79 source={require(' /assets/icon facebook png')} 80 /> 81 \</view> 82 \</touchableopacity> 83 \<touchableopacity> 84 \<view style={styles login social button}> 85 \<image 86 style={styles login social icon} 87 source={require(' /assets/icon google png')} 88 /> 89 \</view> 90 \</touchableopacity> 91 \<touchableopacity> 92 \<view style={styles login social button}> 93 \<image 94 style={styles login social icon} 95 source={require(' /assets/icon apple png')} 96 /> 97 \</view> 98 \</touchableopacity> 99 \</view> 100 \</view> 101 \</view> 102 ); 103 }; 4 creating a login screen let’s now create a new screen for your app that will use your userlogin userlogin component add the new screen as the first (or top) screen of your stacknavigator stacknavigator as well app tsx/app js 1 // 2&#x9; 3 // add this new screen function below the userregistrationscreen 4 function userloginscreen() { 5 return ( 6 <> 7 \<statusbar /> 8 \<safeareaview style={styles login container}> 9 \<view style={styles login header}> 10 \<image 11 style={styles login header logo} 12 source={require(' /assets/logo back4app png')} 13 /> 14 \<text style={styles login header text}> 15 \<text style={styles login header text bold}> 16 {'react native on back4app '} 17 \</text> 18 {' user login'} 19 \</text> 20 \</view> 21 \<userlogin /> 22 \</safeareaview> 23 \</> 24 ); 25 } 26&#x9; 27 // 28&#x9; 29 // add the screen as the top one at your stacknavigator 30 const app = () => { 31 return ( 32 \<navigationcontainer> 33 \<stack navigator> 34 \<stack screen name="login" component={userloginscreen} /> 35 \<stack screen name="sign up" component={userregistrationscreen} /> 36 \</stack navigator> 37 \</navigationcontainer> 38 ); 39 }; 40&#x9; 41 // go ahead and test your screen and component notice that your app will now show the user login screen instead of the user registration one, due to their placement on the stacknavigator stacknavigator screen list you will see a message like this after signing in 5 creating a home screen and handling navigation after logging in, you will generally want to take the user to your app home screen create this screen in your app’s main file app tsx/app js 1 // 2&#x9; 3 // add this new screen function below the userregistrationscreen 4 function userloginscreen() { 5 return ( 6 <> 7 \<statusbar /> 8 \<safeareaview style={styles login container}> 9 \<view style={styles login header}> 10 \<image 11 style={styles login header logo} 12 source={require(' /assets/logo back4app png')} 13 /> 14 \<text style={styles login header text}> 15 \<text style={styles login header text bold}> 16 {'react native on back4app '} 17 \</text> 18 {' user login'} 19 \</text> 20 \</view> 21 \<userlogin /> 22 \</safeareaview> 23 \</> 24 ); 25 } 26&#x9; 27 // 28&#x9; 29 // add the screen as the top one at your stacknavigator 30 const app = () => { 31 return ( 32 \<navigationcontainer> 33 \<stack navigator> 34 \<stack screen name="login" component={userloginscreen} /> 35 \<stack screen name="sign up" component={userregistrationscreen} /> 36 \</stack navigator> 37 \</navigationcontainer> 38 ); 39 }; 40&#x9; 41 // now you need to use ‘react navigation’ to navigate the user after he logs in, adding this new code inside the userlogin userlogin component userlogin js 1 // 2 // add this import 3 import {usenavigation} from '@react navigation/native'; 4&#x9; 5 export const userlogin = () => { 6 // add this to use usenavigation hook 7 const navigation = usenavigation(); 8 9 // 10&#x9; 11 const douserlogin = async function () { 12 const usernamevalue = username; 13 const passwordvalue = password; 14 return await parse user login(usernamevalue, passwordvalue) 15 then(async (loggedinuser) => { 16 alert alert( 17 'success!', 18 `user ${loggedinuser get('username')} has successfully signed in!`, 19 ); 20 const currentuser = await parse user currentasync(); 21 console log(loggedinuser === currentuser); 22 // add this to navigate your home screen; navigation navigate takes 23 // the user to the screen named after the one passed as parameter 24 navigation navigate('home'); 25 return true; 26 }) 27 catch((error) => { 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; 32 // userlogin tsx 1 // 2 // add this import 3 import {usenavigation} from '@react navigation/native'; 4&#x9; 5 export const userlogin fc<{}> = ({}) reactelement => { 6 // add this to use usenavigation hook 7 const navigation = usenavigation(); 8&#x9; 9 // 10 11 const douserlogin = async function () promise\<boolean> { 12 const usernamevalue string = username; 13 const passwordvalue string = password; 14 return await parse user login(usernamevalue, passwordvalue) 15 then(async (loggedinuser parse user) => { 16 alert alert( 17 'success!', 18 `user ${loggedinuser get('username')} has successfully signed in!`, 19 ); 20 const currentuser parse user = await parse user currentasync(); 21 console log(loggedinuser === currentuser); 22 // add this to navigate your home screen; navigation navigate takes 23 // the user to the screen named after the one passed as parameter 24 navigation navigate('home'); 25 return true; 26 }) 27 catch((error object) => { 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; 32&#x9; 33 // you will be redirected to your new homescreen homescreen after logging in you can upgrade this screen by adding this hellouser hellouser component that shows the current user username hellouser js 1 import react, {fc, reactelement, useeffect, usestate} from 'react'; 2 import {text} from 'react native'; 3 import parse from 'parse/react native'; 4 import styles from ' /styles'; 5&#x9; 6 export const hellouser = () => { 7 // state variable that will hold username value 8 const \[username, setusername] = usestate(''); 9&#x9; 10 // useeffect is called after the component is initially rendered and 11 // after every other render 12 useeffect(() => { 13 // since the async method parse user currentasync is needed to 14 // retrieve the current user data, you need to declare an async 15 // function here and call it afterwards 16 async function getcurrentuser() { 17 // this condition ensures that username is updated only if needed 18 if (username === '') { 19 const currentuser = await parse user currentasync(); 20 if (currentuser !== null) { 21 setusername(currentuser getusername()); 22 } 23 } 24 } 25 getcurrentuser(); 26 }, \[username]); 27&#x9; 28 // note the condition operator here, so the "hello" text is only 29 // rendered if there is an username value 30 return ( 31 \<view style={styles login wrapper}> 32 \<view style={styles form}> 33 {username !== '' && \<text>{`hello ${username}!`}\</text>} 34 \</view> 35 \</view> 36 ); 37 }; hellouser tsx 1 import react, {fc, reactelement, useeffect, usestate} from 'react'; 2 import {text} from 'react native'; 3 import parse from 'parse/react native'; 4 import styles from ' /styles'; 5&#x9; 6 export const hellouser fc<{}> = ({}) reactelement => { 7 // state variable that will hold username value 8 const \[username, setusername] = usestate(''); 9&#x9; 10 // useeffect is called after the component is initially rendered and 11 // after every other render 12 useeffect(() => { 13 // since the async method parse user currentasync is needed to 14 // retrieve the current user data, you need to declare an async 15 // function here and call it afterwards 16 async function getcurrentuser() { 17 // this condition ensures that username is updated only if needed 18 if (username === '') { 19 const currentuser = await parse user currentasync(); 20 if (currentuser !== null) { 21 setusername(currentuser getusername()); 22 } 23 } 24 } 25 getcurrentuser(); 26 }, \[username]); 27&#x9; 28 // note the condition operator here, so the "hello" text is only 29 // rendered if there is an username value 30 return ( 31 \<view style={styles login wrapper}> 32 \<view style={styles form}> 33 {username !== '' && \<text>{`hello ${username}!`}\</text>} 34 \</view> 35 \</view> 36 ); 37 }; note you can take a better look at react’s useeffect useeffect hooks here https //reactjs org/docs/hooks effect html after calling this component inside your homescreen, your app should look like this 6 creating a logout component the userlogout userlogout component is simpler than the login since the parse user logout parse user logout method takes no arguments and clears the currentuser currentuser data stored locally automatically create this component in your app root directory userlogout js 1 import react, {fc, reactelement} from 'react'; 2 import {alert, text, touchableopacity, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import {usenavigation} from '@react navigation/native'; 5 import {stackactions} from '@react navigation/native'; 6 import styles from ' /styles'; 7&#x9; 8 export const userlogout = () => { 9 const navigation = usenavigation(); 10&#x9; 11 const douserlogout = async function () { 12 return await parse user logout() 13 then(async () => { 14 // to verify that current user is now empty, currentasync can be used 15 const currentuser = await parse user currentasync(); 16 if (currentuser === null) { 17 alert alert('success!', 'no user is logged in anymore!'); 18 } 19 // navigation dispatch calls a navigation action, and poptotop will take 20 // the user back to the very first screen of the stack 21 navigation dispatch(stackactions poptotop()); 22 return true; 23 }) 24 catch((error) => { 25 alert alert('error!', error message); 26 return false; 27 }); 28 }; 29&#x9; 30 return ( 31 \<view style={styles login wrapper}> 32 \<view style={styles form}> 33 \<touchableopacity onpress={() => douserlogout()}> 34 \<view style={styles button}> 35 \<text style={styles button label}>{'logout'}\</text> 36 \</view> 37 \</touchableopacity> 38 \</view> 39 \</view> 40 ); 41 }; userlogout tsx 1 import react, {fc, reactelement} from 'react'; 2 import {alert, text, touchableopacity, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import {usenavigation} from '@react navigation/native'; 5 import {stackactions} from '@react navigation/native'; 6 import styles from ' /styles'; 7&#x9; 8 export const userlogout fc<{}> = ({}) reactelement => { 9 const navigation = usenavigation(); 10&#x9; 11 const douserlogout = async function () promise\<boolean> { 12 return await parse user logout() 13 then(async () => { 14 // to verify that current user is now empty, currentasync can be used 15 const currentuser parse user = await parse user currentasync(); 16 if (currentuser === null) { 17 alert alert('success!', 'no user is logged in anymore!'); 18 } 19 // navigation dispatch calls a navigation action, and poptotop will take 20 // the user back to the very first screen of the stack 21 navigation dispatch(stackactions poptotop()); 22 return true; 23 }) 24 catch((error object) => { 25 alert alert('error!', error message); 26 return false; 27 }); 28 }; 29&#x9; 30 return ( 31 \<view style={styles login wrapper}> 32 \<view style={styles form}> 33 \<touchableopacity onpress={() => douserlogout()}> 34 \<view style={styles button}> 35 \<text style={styles button label}>{'logout'}\</text> 36 \</view> 37 \</touchableopacity> 38 \</view> 39 \</view> 40 ); 41 }; append this new component to homescreen homescreen so you can test it after signing in your app home screen will look like this now if you perform a successful logout, you will see a message like this while being redirected to the userlogin userlogin screen, which is the first one in the navigation stack connect your userregistration userregistration to a registration button inside the userlogin userlogin screen and repeat the same redirection pattern to your app homescreen homescreen remember to read through react navigation react navigation ’s docs to discover several customization options and control every aspect of your app navigation userlogin js 1 // 2&#x9; 3 export const userlogin = () => { 4 const navigation = usenavigation(); 5&#x9; 6 const \[username, setusername] = usestate(''); 7 const \[password, setpassword] = usestate(''); 8&#x9; 9 const douserlogin = async function () { 10 // note that these values come from state variables that we've declared before 11 const usernamevalue = username; 12 const passwordvalue = password; 13 return await parse user login(usernamevalue, passwordvalue) 14 then(async (loggedinuser) => { 15 // login returns the corresponding parseuser object 16 alert alert( 17 'success!', 18 `user ${loggedinuser get('username')} has successfully signed in!`, 19 ); 20 // to verify that this is in fact the current user, currentasync can be used 21 const currentuser parse user = await parse user currentasync(); 22 console log(loggedinuser === currentuser); 23 // navigation navigate takes the user to the screen named after the one 24 // passed as parameter 25 navigation navigate('home'); 26 return true; 27 }) 28 catch((error) => { 29 // error can be caused by wrong parameters or lack of internet connection 30 alert alert('error!', error message); 31 return false; 32 }); 33 }; 34&#x9; 35 return ( 36 \<view style={styles login wrapper}> 37 \<view style={styles form}> 38 \<textinput 39 style={styles form input} 40 value={username} 41 placeholder={'username'} 42 onchangetext={(text) => setusername(text)} 43 autocapitalize={'none'} 44 keyboardtype={'email address'} 45 /> 46 \<textinput 47 style={styles form input} 48 value={password} 49 placeholder={'password'} 50 securetextentry 51 onchangetext={(text) => setpassword(text)} 52 /> 53 \<touchableopacity onpress={() => douserlogin()}> 54 \<view style={styles button}> 55 \<text style={styles button label}>{'sign in'}\</text> 56 \</view> 57 \</touchableopacity> 58 \</view> 59 \<view style={styles login social}> 60 \<view style={styles login social separator}> 61 \<view style={styles login social separator line} /> 62 \<text style={styles login social separator text}>{'or'}\</text> 63 \<view style={styles login social separator line} /> 64 \</view> 65 \<view style={styles login social buttons}> 66 \<touchableopacity> 67 \<view 68 style={\[ 69 styles login social button, 70 styles login social facebook, 71 ]}> 72 \<image 73 style={styles login social icon} 74 source={require(' /assets/icon facebook png')} 75 /> 76 \</view> 77 \</touchableopacity> 78 \<touchableopacity> 79 \<view style={styles login social button}> 80 \<image 81 style={styles login social icon} 82 source={require(' /assets/icon google png')} 83 /> 84 \</view> 85 \</touchableopacity> 86 \<touchableopacity> 87 \<view style={styles login social button}> 88 \<image 89 style={styles login social icon} 90 source={require(' /assets/icon apple png')} 91 /> 92 \</view> 93 \</touchableopacity> 94 \</view> 95 \</view> 96 <> 97 \<touchableopacity onpress={() => navigation navigate('sign up')}> 98 \<text style={styles login footer text}> 99 {"don't have an account? "} 100 \<text style={styles login footer link}>{'sign up'}\</text> 101 \</text> 102 \</touchableopacity> 103 \</> 104 \</view> 105 ); 106 }; 107&#x9; 108 // userlogin tsx 1 // 2&#x9; 3 export const userlogin fc<{}> = ({}) reactelement => { 4 const navigation = usenavigation(); 5&#x9; 6 const \[username, setusername] = usestate(''); 7 const \[password, setpassword] = usestate(''); 8&#x9; 9 const douserlogin = async function () promise\<boolean> { 10 // note that these values come from state variables that we've declared before 11 const usernamevalue string = username; 12 const passwordvalue string = password; 13 return await parse user login(usernamevalue, passwordvalue) 14 then(async (loggedinuser parse user) => { 15 // login returns the corresponding parseuser object 16 alert alert( 17 'success!', 18 `user ${loggedinuser get('username')} has successfully signed in!`, 19 ); 20 // to verify that this is in fact the current user, currentasync can be used 21 const currentuser parse user = await parse user currentasync(); 22 console log(loggedinuser === currentuser); 23 // navigation navigate takes the user to the screen named after the one 24 // passed as parameter 25 navigation navigate('home'); 26 return true; 27 }) 28 catch((error object) => { 29 // error can be caused by wrong parameters or lack of internet connection 30 alert alert('error!', error message); 31 return false; 32 }); 33 }; 34&#x9; 35 return ( 36 \<view style={styles login wrapper}> 37 \<view style={styles form}> 38 \<textinput 39 style={styles form input} 40 value={username} 41 placeholder={'username'} 42 onchangetext={(text) => setusername(text)} 43 autocapitalize={'none'} 44 keyboardtype={'email address'} 45 /> 46 \<textinput 47 style={styles form input} 48 value={password} 49 placeholder={'password'} 50 securetextentry 51 onchangetext={(text) => setpassword(text)} 52 /> 53 \<touchableopacity onpress={() => douserlogin()}> 54 \<view style={styles button}> 55 \<text style={styles button label}>{'sign in'}\</text> 56 \</view> 57 \</touchableopacity> 58 \</view> 59 \<view style={styles login social}> 60 \<view style={styles login social separator}> 61 \<view style={styles login social separator line} /> 62 \<text style={styles login social separator text}>{'or'}\</text> 63 \<view style={styles login social separator line} /> 64 \</view> 65 \<view style={styles login social buttons}> 66 \<touchableopacity> 67 \<view 68 style={\[ 69 styles login social button, 70 styles login social facebook, 71 ]}> 72 \<image 73 style={styles login social icon} 74 source={require(' /assets/icon facebook png')} 75 /> 76 \</view> 77 \</touchableopacity> 78 \<touchableopacity> 79 \<view style={styles login social button}> 80 \<image 81 style={styles login social icon} 82 source={require(' /assets/icon google png')} 83 /> 84 \</view> 85 \</touchableopacity> 86 \<touchableopacity> 87 \<view style={styles login social button}> 88 \<image 89 style={styles login social icon} 90 source={require(' /assets/icon apple png')} 91 /> 92 \</view> 93 \</touchableopacity> 94 \</view> 95 \</view> 96 <> 97 \<touchableopacity onpress={() => navigation navigate('sign up')}> 98 \<text style={styles login footer text}> 99 {"don't have an account? "} 100 \<text style={styles login footer link}>{'sign up'}\</text> 101 \</text> 102 \</touchableopacity> 103 \</> 104 \</view> 105 ); 106 }; 107&#x9; 108 // userregistration js 1 export const userregistration = () => { 2 const navigation = usenavigation(); 3&#x9; 4 const \[username, setusername] = usestate(''); 5 const \[password, setpassword] = usestate(''); 6&#x9; 7 const dousersignup = async function () { 8 // note that these values come from state variables that we've declared before 9 const usernamevalue = username; 10 const passwordvalue = password; 11 // since the signup method returns a promise, we need to call it using await 12 return await parse user signup(usernamevalue, passwordvalue) 13 then((createduser) => { 14 // parse user signup returns the already created parseuser object if successful 15 alert alert( 16 'success!', 17 `user ${createduser get('username')} was successfully created!`, 18 ); 19 // navigation navigate takes the user to the screen named after the one 20 // passed as parameter 21 navigation navigate('home'); 22 return true; 23 }) 24 catch((error) => { 25 // signup can fail if any parameter is blank or failed an uniqueness check on the server 26 alert alert('error!', error message); 27 return false; 28 }); 29 }; 30&#x9; 31 return ( 32 \<view style={styles login wrapper}> 33 \<view style={styles form}> 34 \<textinput 35 style={styles form input} 36 value={username} 37 placeholder={'username'} 38 onchangetext={(text) => setusername(text)} 39 autocapitalize={'none'} 40 keyboardtype={'email address'} 41 /> 42 \<textinput 43 style={styles form input} 44 value={password} 45 placeholder={'password'} 46 securetextentry 47 onchangetext={(text) => setpassword(text)} 48 /> 49 \<touchableopacity onpress={() => dousersignup()}> 50 \<view style={styles button}> 51 \<text style={styles button label}>{'sign up'}\</text> 52 \</view> 53 \</touchableopacity> 54 \</view> 55 \<view style={styles login social}> 56 \<view style={styles login social separator}> 57 \<view style={styles login social separator line} /> 58 \<text style={styles login social separator text}>{'or'}\</text> 59 \<view style={styles login social separator line} /> 60 \</view> 61 \<view style={styles login social buttons}> 62 \<touchableopacity> 63 \<view 64 style={\[ 65 styles login social button, 66 styles login social facebook, 67 ]}> 68 \<image 69 style={styles login social icon} 70 source={require(' /assets/icon facebook png')} 71 /> 72 \</view> 73 \</touchableopacity> 74 \<touchableopacity> 75 \<view style={styles login social button}> 76 \<image 77 style={styles login social icon} 78 source={require(' /assets/icon google png')} 79 /> 80 \</view> 81 \</touchableopacity> 82 \<touchableopacity> 83 \<view style={styles login social button}> 84 \<image 85 style={styles login social icon} 86 source={require(' /assets/icon apple png')} 87 /> 88 \</view> 89 \</touchableopacity> 90 \</view> 91 \</view> 92 <> 93 \<touchableopacity onpress={() => navigation navigate('login')}> 94 \<text style={styles login footer text}> 95 {'already have an account? '} 96 \<text style={styles login footer link}>{'log in'}\</text> 97 \</text> 98 \</touchableopacity> 99 \</> 100 \</view> 101 ); 102 }; 103&#x9; 104 // userregistration tsx 1 // 2&#x9; 3 export const userregistration fc<{}> = ({}) reactelement => { 4 const navigation = usenavigation(); 5&#x9; 6 const \[username, setusername] = usestate(''); 7 const \[password, setpassword] = usestate(''); 8&#x9; 9 const dousersignup = async function () promise\<boolean> { 10 // note that these values come from state variables that we've declared before 11 const usernamevalue string = username; 12 const passwordvalue string = password; 13 // since the signup method returns a promise, we need to call it using await 14 return await parse user signup(usernamevalue, passwordvalue) 15 then((createduser parse user) => { 16 // parse user signup returns the already created parseuser object if successful 17 alert alert( 18 'success!', 19 `user ${createduser get('username')} was successfully created!`, 20 ); 21 // navigation navigate takes the user to the screen named after the one 22 // passed as parameter 23 navigation navigate('home'); 24 return true; 25 }) 26 catch((error object) => { 27 // signup can fail if any parameter is blank or failed an uniqueness check on the server 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; 32&#x9; 33 return ( 34 \<view style={styles login wrapper}> 35 \<view style={styles form}> 36 \<textinput 37 style={styles form input} 38 value={username} 39 placeholder={'username'} 40 onchangetext={(text) => setusername(text)} 41 autocapitalize={'none'} 42 keyboardtype={'email address'} 43 /> 44 \<textinput 45 style={styles form input} 46 value={password} 47 placeholder={'password'} 48 securetextentry 49 onchangetext={(text) => setpassword(text)} 50 /> 51 \<touchableopacity onpress={() => dousersignup()}> 52 \<view style={styles button}> 53 \<text style={styles button label}>{'sign up'}\</text> 54 \</view> 55 \</touchableopacity> 56 \</view> 57 \<view style={styles login social}> 58 \<view style={styles login social separator}> 59 \<view style={styles login social separator line} /> 60 \<text style={styles login social separator text}>{'or'}\</text> 61 \<view style={styles login social separator line} /> 62 \</view> 63 \<view style={styles login social buttons}> 64 \<touchableopacity> 65 \<view 66 style={\[ 67 styles login social button, 68 styles login social facebook, 69 ]}> 70 \<image 71 style={styles login social icon} 72 source={require(' /assets/icon facebook png')} 73 /> 74 \</view> 75 \</touchableopacity> 76 \<touchableopacity> 77 \<view style={styles login social button}> 78 \<image 79 style={styles login social icon} 80 source={require(' /assets/icon google png')} 81 /> 82 \</view> 83 \</touchableopacity> 84 \<touchableopacity> 85 \<view style={styles login social button}> 86 \<image 87 style={styles login social icon} 88 source={require(' /assets/icon apple png')} 89 /> 90 \</view> 91 \</touchableopacity> 92 \</view> 93 \</view> 94 <> 95 \<touchableopacity onpress={() => navigation navigate('login')}> 96 \<text style={styles login footer text}> 97 {'already have an account? '} 98 \<text style={styles login footer link}>{'log in'}\</text> 99 \</text> 100 \</touchableopacity> 101 \</> 102 \</view> 103 ); 104 }; 105&#x9; 106 // your login and registration screens now should look like these conclusion at the end of this guide, you learned how to log in and log out parse users on react native and to navigate users through your application using react navigation react navigation in the next guide, we will show you how to perform useful user queries