Estoy tratando de crear un sistema de inicio de sesión con MERN. Mi ruta de inicio de sesión:
const express = require("express"); const bcrypt = require("bcrypt"); const { User } = require("../models/user"); const Joi = require("joi"); const router = express.Router(); //login route router.post("/", async (req, res) => { const { error } = validate(req.body); if (error) return res.status(400).send(error.details[0].message); // login const user = await User.findOne({ email: req.body.email }); if (!user) return res.status(400).send("Invalid Email or Psssword"); // comparing password const validPassword = await bcrypt.compare(req.body.password, user.password); if (!validPassword) return res.status(400).send("Invalid Email or password"); // generating the auth token const token = user.generateAuthToken() res.send(token) }); // input validation const validate = (req) => { const schema = Joi.object({ email: Joi.string() .min(5) .max(100) .required() .email({ minDomainSegments: 2, tlds: { allow: ["com", "net", "org"] } }), password: Joi.string() .min(6) .max(100) .required() }); return schema.validate(req); }; module.exports = router;
Estoy usando formik en la parte delantera como mi controlador de formularios
const formik = useFormik({ initialValues: { email: "", password: "", }, validationSchema: Yup.object({ email: Yup.string() .email() .min(5) .max(100) .required(), password: Yup.string() .min(6) .max(100) .required(), }), onSubmit: (values, {resetForm}) => { axios.post("http://localhost:8080/api/login", values) .then((values) => { console.log(values) // localStorage.setItem(values) }) .catch (er => console.log(er)) }, });
Cuando hago el inicio de sesión usando cartero todo es exitoso. Necesito implementar esto en mi interfaz de tal manera que si el usuario ingresa credenciales incorrectas, los errores 400 se muestran como una alerta que no está en la consola y redirige a los usuarios a la página de inicio de sesión y si es un usuario 200 se redirige al tablero.
El código completo de GitHub es: https://github.com/Joseph-muvevi/rhino-jon
Esto es para un proyecto escolar.