Redux Instead Prop Drilling
Redux feat Prop Drilling
This repository contains an example of user authentication implementation using TypeScript, Next.js/React, and Tailwind CSS. The login process is managed through actions, reducers, and secure storage of the authentication token. The code demonstrates good security practices and redirection after successful login. š¤©
userLogin diagram
+------------------------------------+
| |
| Componente |
| de FormulƔrio |
| |
+------------------------------------+
|
| (UsuƔrio preenche o formulƔrio)
|
v
+------------------------------------+
| |
| AĆ§Ć£o de Login |
| |
+------------------------------------+
|
| (Chama a API de autenticaĆ§Ć£o)
|
v
+------------------------------------+
| |
| Reducer de AutenticaĆ§Ć£o |
| |
+------------------------------------+
|
| (Atualiza o estado global com o token de autenticaĆ§Ć£o)
|
v
+------------------------------------+
| |
| Componentes de Roteamento |
| |
+------------------------------------+
|
| (Redireciona o usuĆ”rio apĆ³s o login)
|
v
+------------------------------------+
| |
| PƔgina Inicial |
| |
+------------------------------------+
Description of the User Login Process (userLogin)
The user login process is essential to allow users to securely access systems, applications, or platforms. Let's looking down the detail of each step of this process.
Presentation of the Login Form:
The user accesses the login page.
A form is presented, asking the user to enter their credentials (usually email/username and password).
Collection of Credentials:
The user fills in the form fields with their login information.
The credentials are collected and sent to the server.
Login Action:
On the server side, a login action is triggered.
The credentials are verified in a database or another authentication system.
Validation of Credentials:
The server checks if the credentials are valid.
If the credentials are correct, the user is authenticated.
Generation of Authentication Token:
After successful authentication, an authentication token is generated.
This token is used to identify the user in subsequent requests.
Storage of the Token:
The authentication token is stored on the client side (usually in cookies, local storage, or session storage).
It will be used to authorize access to protected resources.
Redirection to the Home Page:
The user is redirected to the home page or to the page they were trying to access.
Now they have access to the system's restricted functionalities.
Session Management and Logout:
During the session, the token is used to validate the user's requests.
When the user logs out, the token is invalidated, and the session is ended.
It's always good to remember that security is crucial in this process. It's important to protect credentials, use HTTPS, avoid vulnerabilities such as brute force attacks, and implement recommended authentication practices." š
