This content originally appeared on DEV Community and was authored by Lucas Pereira de Souza
A autenticação via JSON Web Token (JWT) é amplamente utilizada para proteger APIs e garantir que apenas usuários autorizados possam acessar determinados dados. Neste post, vamos mostrar como configurar o JWT no backend com Node.js e no frontend com ReactJS usando TypeScript, desde a geração do token até o gerenciamento seguro de sessões de usuário.
Configurando o Backend com Node.js
Primeiro, vamos criar uma API com Node.js, Express e TypeScript que gere e valide tokens JWT.
Passo 1: Configurando o Ambiente
Crie um novo projeto e instale as dependências principais:
npm init -y
npm install express jsonwebtoken bcryptjs dotenv
npm install -D typescript @types/node @types/express @types/jsonwebtoken @types/bcryptjs ts-node
Crie um arquivo tsconfig.json para a configuração do TypeScript:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules"]
}
Passo 2: Estruturando o Backend
Crie uma estrutura simples, começando com um arquivo server.ts e uma pasta routes para organizar as rotas de autenticação.
server.ts
import express, { Application } from 'express';
import dotenv from 'dotenv';
import authRoutes from './routes/authRoutes';
dotenv.config();
const app: Application = express();
app.use(express.json());
app.use('/api/auth', authRoutes);
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Servidor rodando na porta ${PORT}`));
routes/authRoutes.ts
Crie um arquivo para as rotas de autenticação. Aqui, teremos uma rota de login que validará o usuário e retornará o token JWT.
import express, { Request, Response } from 'express';
import jwt from 'jsonwebtoken';
import bcrypt from 'bcryptjs';
const router = express.Router();
// Simulação de banco de dados
const users = [{ username: 'usuario', password: 'senha123' }];
router.post('/login', async (req: Request, res: Response) => {
const { username, password } = req.body;
const user = users.find(u => u.username === username);
if (!user || !(await bcrypt.compare(password, user.password))) {
return res.status(401).json({ message: 'Credenciais inválidas' });
}
const token = jwt.sign({ username }, process.env.JWT_SECRET as string, { expiresIn: '1h' });
res.json({ token });
});
export default router;
Passo 3: Protegendo Rotas com Middleware
Adicione um middleware para proteger rotas que exigem autenticação.
middleware/authMiddleware.ts
import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';
interface JwtPayload {
username: string;
}
export const authMiddleware = (req: Request, res: Response, next: NextFunction): void => {
const token = req.headers['authorization'];
if (!token) {
res.status(403).json({ message: 'Token não fornecido' });
return;
}
jwt.verify(token, process.env.JWT_SECRET as string, (err, decoded) => {
if (err) {
res.status(401).json({ message: 'Token inválido' });
return;
}
req.user = decoded as JwtPayload;
next();
});
};
Configurando o Frontend com ReactJS
No frontend, usaremos React para lidar com a autenticação, envio de credenciais e armazenamento do token JWT.
Passo 1: Configurando a Interface de Login
Primeiro, crie um componente Login.tsx para capturar as credenciais do usuário e enviar uma solicitação de login para o backend.
Login.tsx
import React, { useState } from 'react';
import axios from 'axios';
const Login: React.FC = () => {
const [username, setUsername] = useState<string>('');
const [password, setPassword] = useState<string>('');
const [error, setError] = useState<string>('');
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
try {
const response = await axios.post('/api/auth/login', { username, password });
localStorage.setItem('token', response.data.token);
window.location.href = '/dashboard';
} catch (err) {
setError('Credenciais inválidas');
}
};
return (
<form onSubmit={handleLogin}>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Login</button>
{error && <p>{error}</p>}
</form>
);
};
export default Login;
Passo 2: Proteger Rotas no Frontend
Crie uma função para rotas protegidas, utilizando o token JWT para acessar a API.
PrivateRoute.tsx
import React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';
interface PrivateRouteProps extends RouteProps {
component: React.ComponentType<any>;
}
const PrivateRoute: React.FC<PrivateRouteProps> = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={(props) =>
localStorage.getItem('token') ? (
<Component {...props} />
) : (
<Redirect to="/login" />
)
}
/>
);
export default PrivateRoute;
Passo 3: Enviar o Token JWT nas Requisições
Configure o axios para incluir automaticamente o token JWT nas requisições protegidas.
axiosConfig.ts
import axios from 'axios';
const token = localStorage.getItem('token');
if (token) {
axios.defaults.headers.common['Authorization'] = token;
}
export default axios;
Passo 4: Exemplo de Uso com uma Rota Protegida
Agora, crie um exemplo de página protegida que exija o token para acessar.
Dashboard.tsx
import React, { useEffect, useState } from 'react';
import axios from './axiosConfig';
const Dashboard: React.FC = () => {
const [data, setData] = useState<string>('');
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('/api/protected');
setData(response.data.message);
} catch (error) {
console.error(error);
}
};
fetchData();
}, []);
return <h1>{data || 'Carregando...'}</h1>;
};
export default Dashboard;
Conclusão
Com essas etapas, configuramos uma autenticação JWT completa em TypeScript para um projeto que utiliza Node.js no backend e React no frontend. Essa abordagem é altamente segura, eficiente e amplamente adotada para proteger aplicações modernas.
This content originally appeared on DEV Community and was authored by Lucas Pereira de Souza
Lucas Pereira de Souza | Sciencx (2024-10-27T19:33:08+00:00) Autenticação com JWT no Frontend e Backend: Implementando com Node.js e ReactJS (em TypeScript). Retrieved from https://www.scien.cx/2024/10/27/autenticacao-com-jwt-no-frontend-e-backend-implementando-com-node-js-e-reactjs-em-typescript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.