--- title: User LogIn slug: back4app/WXr7Qp0pbLxhEJg2ZkQgS description: In this guide you will learn how to login and logout a user in Parse on React image: https://www.back4app.com/images/logo-social.png createdAt: 2024-03-19T17:20:13.079Z --- # User LogIn and LogOut for React ## 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` class. The `Parse.User.logIn` method stores in your local storage a valid user session, so future calls to methods like `current` will successfully retrieve your User data. On the other hand, `logOut` will clear this session from the disk and log out of any linked services in your Parse server. ## Prerequisites :::hint{type="info"} To complete this tutorial, you will need: - A React App created and [connected to Back4App](https://www.back4app.com/docs/react/quickstart). - Complete the previous guide so you can have a better understanding of [the Parse.User class](https://www.back4app.com/docs/react/working-with-users/sign-up-page-react). - If you want to test/use the screen layout provided by this guide, you should set up the [`Ant Design` library.](https://ant.design/docs/react/introduce) ::: ## Goal To build a User LogIn and LogOut feature using Parse for a React App. ## 1 - Understanding the logIn and logOut methods Parse User management uses the `Parse.User` object type, which extends the default `ParseObject` type while containing unique helper methods, such as `current` and `getUsername`, that will help you retrieve user data throughout your app. You can read more about the `Parse.User` object [here at the official documentation](https://parseplatform.org/Parse-SDK-JS/api/master/Parse.User.html). In this guide, you will learn how to use the `logIn` and `logOut` methods that will handle the user login process, saving the user data locally. ## 2 - Creating a login component Let’s now build the `UserLogIn` component in your App. Create a new file in your `src` directory called `UserLogIn.js` (`UserLogIn.tsx` if you are using TypeScript) and add the input elements using state hooks to manage their data. Note that there is also a function responsible for updating a state variable with the current logged in user, that you will use later: :::CodeblockTabs UserLogIn.js ```javascript 1 import React, { useState } from 'react'; 2 import Parse from 'parse/dist/parse.min.js'; 3 import './App.css'; 4 import { Button, Divider, Input } from 'antd'; 5 6 export const UserLogin = () => { 7 // State variables 8 const [username, setUsername] = useState(''); 9 const [password, setPassword] = useState(''); 10 const [currentUser, setCurrentUser] = useState(null); 11 12 // Function that will return current user and also update current username 13 const getCurrentUser = async function () { 14 const currentUser = await Parse.User.current(); 15 // Update state variable holding current user 16 setCurrentUser(currentUser); 17 return currentUser; 18 }; 19 20 return ( 21
22
23 Back4App Logo 30

{'React on Back4App'}

31

{'User Login'}

32
33
34

{'User Login'}

35 36
37 setUsername(event.target.value)} 40 placeholder="Username" 41 size="large" 42 className="form_input" 43 /> 44 setPassword(event.target.value)} 47 placeholder="Password" 48 size="large" 49 type="password" 50 className="form_input" 51 /> 52
53
54 64
65 66
67
68 69
70
71 72
73
74 75
76
77

Don't have an account? Sign up

78
79
80 ); 81 }; ``` UserLogIn.tsx ```typescript 1 import React, { useState, FC, ReactElement } from 'react'; 2 import './App.css'; 3 import { Button, Divider, Input } from 'antd'; 4 const Parse = require('parse/dist/parse.min.js'); 5 6 export const UserLogin: FC<{}> = (): ReactElement => { 7 // State variables 8 const [username, setUsername] = useState(''); 9 const [password, setPassword] = useState(''); 10 const [currentUser, setCurrentUser] = useState(null); 11 12 // Function that will return current user and also update current username 13 const getCurrentUser = async function (): Promise { 14 const currentUser: (Parse.User | null) = await Parse.User.current(); 15 // Update state variable holding current user 16 setCurrentUser(currentUser); 17 return currentUser; 18 } 19 20 return ( 21
22
23 Back4App Logo 30

{'React on Back4App'}

31

{'User Login'}

32
33
34

{'User Login'}

35 36
37 setUsername(event.target.value)} 40 placeholder="Username" 41 size="large" 42 className="form_input" 43 /> 44 setPassword(event.target.value)} 47 placeholder="Password" 48 size="large" 49 type="password" 50 className="form_input" 51 /> 52
53
54 64
65 66
67
68 69
70
71 72
73
74 75
76
77

Don't have an account? Sign up

78
79
80 ); 81 }; ``` ::: You can now implement the function that will call the `Parse.User.logIn` method, using state variables: :::CodeblockTabs JavaScript ```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 try { 6 const loggedInUser = await Parse.User.logIn(usernameValue, passwordValue); 7 // logIn returns the corresponding ParseUser object 8 alert( 9 `Success! User ${loggedInUser.get( 10 'username' 11 )} has successfully signed in!` 12 ); 13 // To verify that this is in fact the current user, `current` can be used 14 const currentUser = await Parse.User.current(); 15 console.log(loggedInUser === currentUser); 16 // Clear input fields 17 setUsername(''); 18 setPassword(''); 19 // Update state variable holding current user 20 getCurrentUser(); 21 return true; 22 } catch (error) { 23 // Error can be caused by wrong parameters or lack of Internet connection 24 alert(`Error! ${error.message}`); 25 return false; 26 } 27 }; ``` ```typescript 1 const doUserLogIn = async function (): Promise { 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 try { 6 const loggedInUser: Parse.User = await Parse.User.logIn(usernameValue, passwordValue); 7 // logIn returns the corresponding ParseUser object 8 alert( 9 `Success! User ${loggedInUser.get('username')} has successfully signed in!`, 10 ); 11 // To verify that this is in fact the current user, `current` can be used 12 const currentUser: Parse.User = await Parse.User.current(); 13 console.log(loggedInUser === currentUser); 14 // Clear input fields 15 setUsername(''); 16 setPassword(''); 17 // Update state variable holding current user 18 getCurrentUser(); 19 return true; 20 } catch (error: any) { 21 // Error can be caused by wrong parameters or lack of Internet connection 22 alert(`Error! ${error.message}`); 23 return false; 24 } 25 }; ``` ::: Insert this function inside the `UserLogIn` component, just before the `return` call, to be called and tested. Remember to update the form’s login button `onClick` action to `() => doUserLogIn()`. If you want to fully render this screen layout, add these classes to your `App.css` file: :::CodeblockTabs App.css ```css 1 @import '~antd/dist/antd.css'; 2 3 .App { 4 text-align: center; 5 } 6 7 html { 8 box-sizing: border-box; 9 outline: none; 10 overflow: auto; 11 } 12 13 *, 14 *:before, 15 *:after { 16 margin: 0; 17 padding: 0; 18 box-sizing: inherit; 19 } 20 21 h1, 22 h2, 23 h3, 24 h4, 25 h5, 26 h6 { 27 margin: 0; 28 font-weight: bold; 29 } 30 31 p { 32 margin: 0; 33 } 34 35 body { 36 margin: 0; 37 background-color: #fff; 38 } 39 40 .container { 41 width: 100%; 42 max-width: 900px; 43 margin: auto; 44 padding: 20px 0; 45 text-align: left; 46 } 47 48 .header { 49 align-items: center; 50 padding: 25px 0; 51 background-color: #208AEC; 52 } 53 54 .header_logo { 55 height: 55px; 56 margin-bottom: 20px; 57 object-fit: contain; 58 } 59 60 .header_text_bold { 61 margin-bottom: 3px; 62 color: rgba(255, 255, 255, 0.9); 63 font-size: 16px; 64 font-weight: bold; 65 } 66 67 .header_text { 68 color: rgba(255, 255, 255, 0.9); 69 font-size: 15px; 70 } 71 72 .heading { 73 font-size: 22px; 74 } 75 76 .flex { 77 display: flex; 78 } 79 80 .flex_between { 81 display: flex; 82 justify-content: space-between; 83 } 84 85 .flex_child { 86 flex: 0 0 45%; 87 } 88 89 .heading_button { 90 margin-left: 12px; 91 } 92 93 .list_item { 94 padding-bottom: 15px; 95 margin-bottom: 15px; 96 border-bottom: 1px solid rgba(0, 0, 0, 0.06); 97 text-align: left; 98 } 99 100 .list_item_title { 101 color: rgba(0, 0, 0, 0.87); 102 font-size: 17px; 103 } 104 105 .list_item_description { 106 color: rgba(0, 0, 0, 0.5); 107 font-size: 15px; 108 } 109 110 .form_input { 111 margin-bottom: 20px; 112 } 113 114 .login-social { 115 display: flex; 116 justify-content: center; 117 margin-bottom: 30px; 118 } 119 120 .login-social-item { 121 width: 54px; 122 height: 54px; 123 border-radius: 54px; 124 padding: 12px; 125 margin: 0 12px; 126 border: 1px solid #e6e6e6; 127 box-shadow: 0 2px 4px #d6d6d6; 128 } 129 130 .login-social-item--facebook { 131 padding: 4px; 132 background-color: #3C5B9B; 133 } 134 135 .login-social-item__image { 136 width: 100%; 137 } 138 139 .form__hint { 140 color: rgba(0, 0, 0, 0.5); 141 font-size: 16px; 142 text-align: center; 143 } ``` ::: Go ahead and run your application, importing this login component into your main application file. You should see a screen just like this and also a success message after logging in with the right credentials: ![](https://api.main.archbee.co/api/optimize/yD3zCY-NNBBIfd0uqcfR5/SsOX_fEH0uUbp0_3VRB-l_image.png) ## 3 - Checking logged-in user After your user successfully logs in to the application, he should be able to know about that and also be able to log out of the application. First, let’s hide the login form and render a welcome message containing the username. Note the usage of the conditional operator in conjunction with the state variable holding the current username. :::CodeblockTabs UserLogIn.js ```javascript 1 // Your imports ... 2 export const UserLogin = () => { 3 // State variables and functions ... 4 5 return ( 6
7
8 Back4App Logo 15

{'React on Back4App'}

16

{'User Login'}

17
18 {currentUser === null && ( 19
20

{'User Login'}

21 22
23 setUsername(event.target.value)} 26 placeholder="Username" 27 size="large" 28 className="form_input" 29 /> 30 setPassword(event.target.value)} 33 placeholder="Password" 34 size="large" 35 type="password" 36 className="form_input" 37 /> 38
39
40 50
51 52
53
54 55
56
57 58
59
60 61
62
63

Don't have an account? Sign up

64
65 )} 66 {currentUser !== null && 67 (
68

{'User Screen'}

69 70

{`Hello ${currentUser.get('username')}!`}

71
72 81
82
) 83 } 84
85 ); 86 }; ``` UserLogIn.tsx ```typescript 1 // Your imports ... 2 export const UserLogin: FC<{}> = (): ReactElement => { 3 // State variables and functions ... 4 5 return ( 6
7
8 Back4App Logo 15

{'React on Back4App'}

16

{'User Login'}

17
18 {currentUser === null && ( 19
20

{'User Login'}

21 22
23 setUsername(event.target.value)} 26 placeholder="Username" 27 size="large" 28 className="form_input" 29 /> 30 setPassword(event.target.value)} 33 placeholder="Password" 34 size="large" 35 type="password" 36 className="form_input" 37 /> 38
39
40 50
51 52
53
54 55
56
57 58
59
60 61
62
63

Don't have an account? Sign up

64
65 )} 66 {currentUser !== null && 67 (
68

{'User Screen'}

69 70

{`Hello ${currentUser.get('username')}!`}

71
72 81
82
) 83 } 84
85 ); 86 }; ``` ::: Go ahead and run your app again. Notice that your app will now show the user screen and welcome message just like this: ::Image[]{src="https://api.main.archbee.co/api/optimize/yD3zCY-NNBBIfd0uqcfR5/iphqrWbJfIa34MW3ei4aL_image.png" size="70" width="702" height="503" position="center" showCaption="false"} ## 4 - Creating a log out function The `logOut` method is simpler than the login since the `Parse.User.logOut` method takes no arguments and clears the `currentUser` data stored locally automatically. Create this function in the `UserLogin` component and call it in the `onClick` attribute of the logout button: :::CodeblockTabs UserLogOut.js ```javascript 1 const doUserLogOut = async function () { 2 try { 3 await Parse.User.logOut(); 4 // To verify that current user is now empty, currentAsync can be used 5 const currentUser = await Parse.User.current(); 6 if (currentUser === null) { 7 alert('Success! No user is logged in anymore!'); 8 } 9 // Update state variable holding current user 10 getCurrentUser(); 11 return true; 12 } catch (error) { 13 alert(`Error! ${error.message}`); 14 return false; 15 } 16 }; ``` UserLogOut.tsx ```typescript 1 const doUserLogOut = async function (): Promise { 2 try { 3 await Parse.User.logOut(); 4 // To verify that current user is now empty, currentAsync can be used 5 const currentUser: Parse.User = await Parse.User.current(); 6 if (currentUser === null) { 7 alert('Success! No user is logged in anymore!'); 8 } 9 // Update state variable holding current user 10 getCurrentUser(); 11 return true; 12 } catch (error: any) { 13 alert(`Error! ${error.message}`); 14 return false; 15 } 16 }; ``` ::: If you perform a successful log out, you will see a message like this: ::Image[]{src="https://api.main.archbee.co/api/optimize/yD3zCY-NNBBIfd0uqcfR5/JmAG22pgR2Pr-TQj0SuB__image.png" size="80" width="732" height="494" position="center" showCaption="false"} Here is the full component code containing all the functions shown before: :::CodeblockTabs UserLogIn.js ```javascript 1 import React, { useState } from 'react'; 2 import Parse from 'parse/dist/parse.min.js'; 3 import './App.css'; 4 import { Button, Divider, Input } from 'antd'; 5 6 export const UserLogin = () => { 7 // State variables 8 const [username, setUsername] = useState(''); 9 const [password, setPassword] = useState(''); 10 const [currentUser, setCurrentUser] = useState(null); 11 12 const doUserLogIn = async function () { 13 // Note that these values come from state variables that we've declared before 14 const usernameValue = username; 15 const passwordValue = password; 16 try { 17 const loggedInUser = await Parse.User.logIn(usernameValue, passwordValue); 18 // logIn returns the corresponding ParseUser object 19 alert( 20 `Success! User ${loggedInUser.get( 21 'username' 22 )} has successfully signed in!` 23 ); 24 // To verify that this is in fact the current user, `current` can be used 25 const currentUser = await Parse.User.current(); 26 console.log(loggedInUser === currentUser); 27 // Clear input fields 28 setUsername(''); 29 setPassword(''); 30 // Update state variable holding current user 31 getCurrentUser(); 32 return true; 33 } catch (error) { 34 // Error can be caused by wrong parameters or lack of Internet connection 35 alert(`Error! ${error.message}`); 36 return false; 37 } 38 }; 39 40 const doUserLogOut = async function () { 41 try { 42 await Parse.User.logOut(); 43 // To verify that current user is now empty, currentAsync can be used 44 const currentUser = await Parse.User.current(); 45 if (currentUser === null) { 46 alert('Success! No user is logged in anymore!'); 47 } 48 // Update state variable holding current user 49 getCurrentUser(); 50 return true; 51 } catch (error) { 52 alert(`Error! ${error.message}`); 53 return false; 54 } 55 }; 56 57 // Function that will return current user and also update current username 58 const getCurrentUser = async function () { 59 const currentUser = await Parse.User.current(); 60 // Update state variable holding current user 61 setCurrentUser(currentUser); 62 return currentUser; 63 }; 64 65 return ( 66
67
68 Back4App Logo 75

{'React on Back4App'}

76

{'User Login'}

77
78 {currentUser === null && ( 79
80

{'User Login'}

81 82
83 setUsername(event.target.value)} 86 placeholder="Username" 87 size="large" 88 className="form_input" 89 /> 90 setPassword(event.target.value)} 93 placeholder="Password" 94 size="large" 95 type="password" 96 className="form_input" 97 /> 98
99
100 110
111 112
113
114 115
116
117 118
119
120 121
122
123

Don't have an account? Sign up

124
125 )} 126 {currentUser !== null && ( 127
128

{'User Screen'}

129 130

{`Hello ${currentUser.get('username')}!`}

131
132 141
142
143 )} 144
145 ); 146 }; ``` UserLogIn.tsx ```typescript 1 import React, { useState, FC, ReactElement } from 'react'; 2 import './App.css'; 3 import { Button, Divider, Input } from 'antd'; 4 const Parse = require('parse/dist/parse.min.js'); 5 6 export const UserLogin: FC<{}> = (): ReactElement => { 7 // State variables 8 const [username, setUsername] = useState(''); 9 const [password, setPassword] = useState(''); 10 const [currentUser, setCurrentUser] = useState(null); 11 12 const doUserLogIn = async function (): Promise { 13 // Note that these values come from state variables that we've declared before 14 const usernameValue: string = username; 15 const passwordValue: string = password; 16 try { 17 const loggedInUser: Parse.User = await Parse.User.logIn(usernameValue, passwordValue); 18 // logIn returns the corresponding ParseUser object 19 alert( 20 `Success! User ${loggedInUser.get('username')} has successfully signed in!`, 21 ); 22 // To verify that this is in fact the current user, `current` can be used 23 const currentUser: Parse.User = await Parse.User.current(); 24 console.log(loggedInUser === currentUser); 25 // Clear input fields 26 setUsername(''); 27 setPassword(''); 28 // Update state variable holding current user 29 getCurrentUser(); 30 return true; 31 } catch (error: any) { 32 // Error can be caused by wrong parameters or lack of Internet connection 33 alert(`Error! ${error.message}`); 34 return false; 35 } 36 }; 37 38 const doUserLogOut = async function (): Promise { 39 try { 40 await Parse.User.logOut(); 41 // To verify that current user is now empty, currentAsync can be used 42 const currentUser: Parse.User = await Parse.User.current(); 43 if (currentUser === null) { 44 alert('Success! No user is logged in anymore!'); 45 } 46 // Update state variable holding current user 47 getCurrentUser(); 48 return true; 49 } catch (error: any) { 50 alert(`Error! ${error.message}`); 51 return false; 52 } 53 }; 54 55 // Function that will return current user and also update current username 56 const getCurrentUser = async function (): Promise { 57 const currentUser: (Parse.User | null) = await Parse.User.current(); 58 // Update state variable holding current user 59 setCurrentUser(currentUser); 60 return currentUser; 61 } 62 63 return ( 64
65
66 Back4App Logo 73

{'React on Back4App'}

74

{'User Login'}

75
76 {currentUser === null && ( 77
78

{'User Login'}

79 80
81 setUsername(event.target.value)} 84 placeholder="Username" 85 size="large" 86 className="form_input" 87 /> 88 setPassword(event.target.value)} 91 placeholder="Password" 92 size="large" 93 type="password" 94 className="form_input" 95 /> 96
97
98 108
109 110
111
112 113
114
115 116
117
118 119
120
121

Don't have an account? Sign up

122
123 )} 124 {currentUser !== null && 125 (
126

{'User Screen'}

127 128

{`Hello ${currentUser.get('username')}!`}

129
130 139
140
) 141 } 142
143 ); 144 }; ``` ::: ## Conclusion At the end of this guide, you learned how to log in and log out Parse users on React. In the next guide, we will show you how to perform useful user queries.