{"id":3495,"date":"2024-04-05T12:59:24","date_gmt":"2024-04-05T16:59:24","guid":{"rendered":"https:\/\/blog.logrocket.com\/?p=3495"},"modified":"2024-06-04T16:47:19","modified_gmt":"2024-06-04T20:47:19","slug":"adding-login-authentication-secure-react-apps","status":"publish","type":"post","link":"https:\/\/blog.logrocket.com\/adding-login-authentication-secure-react-apps\/","title":{"rendered":"Adding login authentication to secure React apps"},"content":{"rendered":"\n

Editor\u2019s note<\/strong>: This React and Express.js login authentication tutorial was last updated by David Omotayo<\/a> on 5 April 2024 to detail the creation of a login component using the React Context API and React Router DOM. Additionally, it covers the integration of form validation on both the client and server side, as well as how to implement role-based access controls. It was previously updated to evaluate the benefits of server-side login authentication in React apps, as well as to include information about logging out and how to connect to a MongoDB database.<\/em><\/p>\"Adding\n

It\u2019s well-known that the client side is unsafe due to its exposed nature. In your web application, you can conditionally render views to show different content to different users. But, if that information is already stored on the client side, it\u2019s no longer secure.<\/p>\n

To ensure that only users with a secure login can see the limited content, you should ship the content data from your server upon authentication.<\/p>\n

In this tutorial, we\u2019ll show you how to secure your React app by implementing basic server-side authentication for an Express.js server. Although the client side will be a React app, you can apply it to virtually any other type of client-side application. We\u2019ll also discuss some React authentication best practices for implementing secure login functionality on the server side.<\/p>\n

What is server-side login authentication?<\/h2>\n

Server-side login authentication is a method of authenticating<\/a> the identity of a user attempting to log in to a server. This type of authentication typically involves the user providing a username and password, which are then sent to the server for verification. If the credentials are valid, the server allows the user to log in and access the resources on the server.<\/p>\n

Benefits of using server-side login authentication<\/h2>\n

There are several uses for and benefits to using server-side login authentication. First and foremost, it helps ensure the security of the server and the resources it contains. By requiring users to provide a username and password, the server can verify that the person attempting to log in is authorized to do so.<\/p>\n

Another benefit of server-side login authentication is that it can provide a centralized system for managing user accounts. This means that the server administrator can easily add, remove, or update user accounts, and the changes will be immediately reflected across the entire server. This can make it easier to manage user access and ensure that only authorized users have access to the server and its resources.<\/p>\n

In addition, server-side login authentication can provide a way for users to securely access resources from any device \u2014 as long as they have the necessary credentials. This can be especially useful for organizations with multiple locations or employees needing to access resources remotely.<\/p>\n

React authentication server-side login setup<\/h2>\n

The easiest way to bootstrap a React project is to use the Vite Create<\/a> package. When you create a project with this package and run npm start<\/code>, you essentially start a Vite server. This works fine on your local machine, but when you want to deploy it to a remote server, you need your own server to serve your React application. This is basically a package of HTML, JavaScript, and CSS.<\/p>\n

We\u2019ll refer to the following folder structure for this React authentication example project:<\/p>\n

--- Project Folder\n |__ client (React App)\n |__ server.js\n |__ package.json\n<\/pre>\n
There is a Project Folder<\/code> and, inside it, a client<\/code> folder containing the React app. The folder also contains server.js<\/code> and package.json<\/code> files, which you can create by using the following commands on the terminal in the project directory:<\/p>\n
npm init -y\ntouch server.js\n<\/pre>\n
Serving the React app<\/h2>\n
There are two primary approaches to serving the React application when building with the MERN stack:<\/p>\n