Estoy tratando de hacer una autenticación de inicio de sesión. Estoy usando un servidor express que le da un token al usuario cuando envía su nombre de usuario y contraseña. Mi problema es que cuando envío esos datos, aparece el siguiente error:

POST http://localhost:3000/api 404 (No encontrado) No capturado (en promesa) SyntaxError: Token inesperado < en JSON en la posición 0

Esto tiene que ser un problema con ambas partes de mi aplicación interactuando. Pero he intentado cambiar "app.get" por "app.use" o cambiar "/api" por otro tipo de nombre. No pude resolverlo. Escribiré las rutas para cada archivo en caso de que creas que tengo un error de enrutamiento.

Este es mi código de nodo (app/server/server.js)

 const express = require('express'); const PORT = process.env.PORT || 8080; const app = express(); const cors = require('cors'); app.use(cors()); app.get("/api", (req, res) => { res.send({ token: 'test123' }) }); app.listen(PORT, () => { console.log(`Server is running on ${PORT}`) });

Esta es la parte de mi aplicación React que interactúa con el nodo (app/client/src/Login.js)

 const loginUser = async (credentials) => { return fetch('/api', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(credentials) }) .then(data => data.json()) } const Login = ({ setToken }) => { const [username, setUserName] = useState(); const [password, setPassword] = useState(); const handleSubmit = async e => { e.preventDefault(); const token = await loginUser({ username, password }); setToken(token); } return ( <div>Here is the login container</div> )

Un gancho personalizado que estoy usando

 import { useState } from 'react'; const useToken = () => { const getToken = () => { const tokenString = localStorage.getItem('token'); const userToken = JSON.parse(tokenString); return userToken?.token }; const [token, setToken] = useState(getToken()); const saveToken = userToken => { localStorage.setItem('token', JSON.stringify(userToken)); setToken(userToken.token); }; return { setToken: saveToken, token } } export default useToken;

Finalmente, mi App.js (app/client/src/App.js)

 const App = () => { const { token, setToken } = useToken(); if(!token) { return <Login setToken={setToken} /> } return ( <> here is my app </> )