Integrando React con Flask y JWT - Episodio 36

✨ Hoy he dado un gran paso: frontend y backend ya se hablan

Llevaba varios días afinando el backend en Flask, limpiando el entorno y preparando el momento.

Diario de un SaaS - Integrando React con Flask y JWT

Hoy tocaba uno de esos hitos importantes: conectar React con Flask usando JWT.

Y no solo que se hablen, sino que se entiendan, se autentiquen y devuelvan lo que tienen que devolver.

Obviamente, nada de eso fue inmediato, ni a la primera.

Pero ahora sí: el login funciona, los tokens vuelan, y /parts responde con piezas como debe.

🔌 1. Conexión entre React y Flask

• Creé el archivo api.js en el frontend y configuré axios.
• Definí API_URL apuntando al backend.
• Usé interceptores de axios para añadir automáticamente el token JWT desde localStorage en cada petición.

🔐 2. Middleware y rutas seguras en Flask

• Implementé un @app.before_request para interceptar rutas protegidas.
• Declaré una lista open_routes para permitir el acceso sin token a /login, /register, /health, /favicon.ico y /.
• Todo lo demás requiere un Bearer token en el header.

🚫 3. Evitando errores tontos

• Como el navegador pide automáticamente / y /favicon.ico, creé rutas dedicadas para evitar errores 401 y 500.

@app.route('/')
def index():
    return jsonify({"message": "Bienvenido a la API"}), 200

@app.route('/favicon.ico')
def favicon():
    return '', 204

🔑 4. Login funcional con JWT

• Registré un usuario con credenciales seguras.
• Probé el login con curl y obtuve el token JWT.
• Confirmé que se devuelve correctamente el token, user_id y role.

curl -X POST http://127.0.0.1:5000/login \
 -H "Content-Type: application/json" \
 -d '{"email": "miemail@example.com", "password": "MiPassword123!"}'

🔍 5. Ruta protegida /parts

Creé una ruta protegida con JWT que devuelve piezas simuladas para pruebas:

@app.route('/parts', methods=['GET'])
@jwt_required()
def get_parts():
    return jsonify([...])

Y la consumí desde React tras el login.

🛠️ 6. Errores encontrados y resueltos

• ❌ 500 Internal Server Error en /parts: faltaba definir la ruta.
• ❌ 401 Unauthorized en /favicon.ico: el navegador la pedía sin token.
• ❌ ERR_CONNECTION_REFUSED: Flask no estaba escuchando o el puerto estaba en uso.
• ❌ CORS o puertos bloqueados: usé un túnel SSH para exponer Flask a React.

ssh -L 5000:localhost:5000 usuario@mi-vps -p PUERTO

✅ Estado actual

• React y Flask están conectados vía JWT
• Login funcional y token persistente
• Piezas devueltas desde /parts y visibles en consola
• Backend limpio, sin errores innecesarios

🧠 Próximos pasos

• Mostrar las piezas en pantalla desde React
• Implementar filtros y búsquedas
• Conectar con la base de datos real
• Construir el sistema de valoraciones y perfiles

📓 Cierre del día

Hoy el sistema no solo existe. Responde.

Los errores ya no asustan: se entienden.

El backend y el frontend ya no se ignoran: se respetan, se entienden y se autentican.

Y como siempre, todo documentado.

Orgulloso me hallo

#DiarioDeUnSaaS

Si quieres conocer otros artículos parecidos a Integrando React con Flask y JWT - Episodio 36 puedes visitar la categoría Proyecto-IA.