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.

To build a User LogIn and LogOut feature using Parse for a React App.

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.

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.

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:

You can now implement the function that will call the Parse.User.logIn method, using state variables:

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:

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:

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.

Go ahead and run your app again. Notice that your app will now show the user screen and welcome message just like this:

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:

If you perform a successful log out, you will see a message like this:

Here is the full component code containing all the functions shown before:

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.