[React × Login Authentication] A thorough explanation of how anyone can easily create a user management app!

programming

"Login authentication seems difficult" "I don't think I can implement user management"
Do you feel that way?

In fact, if you use React and a simple mechanism,A simple user management app for everyoneYou can make it.

In this article, I will explain the following so that even elementary school students can understand:Screen design, user registration, login process, logout, protection pageWe will explain everything in detail.

If you want to create a login function with React or learn how authentication works,Just by reading this article you will gain some knowledge.

All the code is included, so you can just copy and paste it to run.is.

What does it mean to implement user management with React?

Reasons for the growing demand for user management apps

Conclusion: User management is the foundation of any web serviceis.

Nowadays, membership and login features are commonplace for online services. For example:

  • Social media and bulletin boards
  • E-commerce website
  • Online learning site
  • Attendance management/internal tools

What these services have in common is thatA mechanism for "identifying individuals and recording their status"is.
At the heart of this is user management.

In Japan,Digital Agency (https://www.digital.go.jp/policies/digital-id/)has been stressing the importance of "digital ID,"
Personal authentication skills are a promising fieldIt can be said that.

Benefits and suitability of using React

Conclusion: React is a versatile tool for small to medium scale projectsis.

React offers the following benefits:

  • Good at managing status(Easy to switch login status, etc.)
  • Easy to modularize(Login forms and protected pages can be reused as parts)
  • Relatively low learning costs(Official documentation is comprehensive)

How to learn the authentication process while building a small to medium-sized appThe right frameworkis.

How to set up a React environment and configure basic settings

Creating a project and preparing libraries

Bottom line: with the CLI and any additional packages you need you are ready to go.

First, create a React app by running the following in your terminal:

1

Next, add the following libraries:

1

ThisScreen transition and routing possibleIt will be.

Routing and screen transition design

Conclusion: Have separate login, registration and home pages.

An example of the file structure is as follows:

1

The route setting isApp.jsWrite:

1
; ; ; ;

Steps to implement login authentication with React

User registration and password storage

Bottom line: let’s start by creating a sign-up form.

1
2
3
4
5
6
7
8
9
    <>
      
      
      
      
    </>
  );
}

The password should be encryptedBut this time it's a simplified version.

Login process and session management

Conclusion: Check that the information matches your saved information and log in.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  '');
  '');
  
    ));
    
      , );
      );
    } {
      );
    }
  };
   (
    <>
      
      
       />
      
    </>
  );
}

How to manage user information with React

Maintaining user state and setting protected pages

Conclusion: It is important to always check whether you are logged in and switch the display.

Protected pages are restricted so that they can only be accessed by logged in users.

1

App.jsAnd use it like this:

1

Now, if you are not logged in/homeYou will no longer be able to access.

How to create a logout function

Conclusion: Delete the localStorage information and reset your login state.

1
2
3
4
5
6
7
    <>
      
      
    </>
  );
}

When you press the button, you will be logged out and will need to log in again.

Points to note and examples of improvements for the React user management app

Security measures and why

Bottom line: never store passwords in plain text.

This example uses localStorage for learning purposes, but in actual operation, the following measures are required:

  • Passwords are encrypted (hashed) and stored
  • Token-based authentication (e.g. JWT)
  • Use of HTTPS communication
  • Authentication is performed on the server side

If localStorage information is leaked, all user information will be at risk.
ThereforeLocal authentication only is not recommended..

What are some easy improvements that can be made?

Examples of improvements include:

  • Validation during registration (check for missing fields and character limit)
  • Display an error message when login fails
  • Automatically redirect to home page after logging in
  • Set a session expiration time

By implementing these,This will be a more practical user management app.

The finished user management app created with React

All the codes together

Here we will introduce the structure and contents of each file.

App.js

1
; ; ; ; ;

ProtectedRoute.js

1
; ) === ;

(Login.js, Signup.js, and Home.js are as described above.)

Introducing ideas for adding functions that can be applied

For those who want to take it a step further:

  • Integration with the server (Firebase or Node.js)
  • Adding email address verification
  • Profile image registration and editing function
  • Multiple user management (implementation of administrator screen)

If you implement these,Can also be applied to full-scale web service developmentis.

summary

In this article, we introduced a user management app that anyone can create using React.

Let's review the key points:

  • React is good at state management and is good at authentication.
  • Using localStorage allows for simple authentication
  • Login, registration and protection pages can be set up in just a few steps
  • It is important to implement with security and improvement points in mind

Try out "Login Authentication with React" today!

Related links:

[Introduction to React] A complete guide to creating a quiz app | Easily implement score display and question management!
A beginner-friendly explanation of how to create a quiz app with a score function using React. Learn about useState and event handling, and have fun while improving your implementation skills!
programmingschool21.com
Copied title and URL