Error "POST http://localhost:3000/api/auth/createuser (same with /api/auth/login path) 404 (Not Found)" & "Uncaught in Promise: Syntax Error"

Question

Unable to resolve the errors. All the method are set correctly but still gettng the error of "Cannot POST" AND Uncaught (in promise) SyntaxError: Unexpected token '<', "

Also Note: Error is causing an issue to login/signup the users. The APIs are working fine in backend. It seems to be an issue of frontend.

SignUp.js File:

   import React, { useState } from "react";
   import { useNavigate } from "react-router-dom";

 export const SignUp = (props) => {
const host = "http://localhost:3000";

  let navigate = useNavigate();
   const [credentials, setCredentials] = useState({
   name: "",
   email: "",
   password: "",
   cpasswortd: "",
 });
  const handleSubmit = async (e) => {
e.preventDefault();
const { name, email, password } = credentials;
const response = await fetch(`${host}/api/auth/createuser`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name,
    email,
    password,
  }),
});
const json = await response.json();
console.log(json);
if(json.success){
// Save the auth token and redirect
localStorage.setItem("token", json.authtoken);
navigate("/login");
props.showAlert("Account created successfully" , "success")
} else {
    props.showAlert("Invalid Details" , "danger")
}
};

 const onChange = (e) => {
  setCredentials({ ...credentials, [e.target.name]: e.target.value });
   };

 return (
   <>
  
    
      
        
          
            
              
                
                  
                    Sign up
                  

                  
                    
                      
                        
                        
                          Your Name
                        
                      
                    

                    
                      
                        
                        
                          Your Email
                        
                      
                    

                    
                      
                        
                        
                          Password
                        
                      
                    

                    
                      
                        
                        
                          Confirm your password
                        
                      
                    

                    
                      
                    
                  
                 
              
            
          
        
      
    
  

);
};

Login.js File:

 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";

export const Login = (props) => {
 const host = "http://localhost:3000";

  const [credentials, setCredentials] = useState({ email: "", password: "" });
  let navigate = useNavigate();

   const handleSubmit = async (e) => {
   e.preventDefault();
   const response = await fetch(`${host}/api/auth/login`, {
     method: "POST",
       headers: {
      "Content-Type": "application/json"
     },
     body: JSON.stringify({
      email: credentials.email,
       password: credentials.password,
    }),
  });
   const json = await response.json();
   console.log(json);
   if (json.success) {
     // Save the auth token and redirect
     localStorage.setItem("token", json.authtoken);
     navigate("/");
     props.showAlert("Logged In Successfully", "success");
    } else {
    props.showAlert("Invalid Credentials", "danger");
   }
  };

 const onChange = (e) => {
    setCredentials({ ...credentials, [e.target.name]: e.target.value });
 };

  return (
  
  
    
      
        
          
          iNotebook
        

        
          
            
              Log in
            

            
              
              
                Email address
              
            

            
              
              
                Password
              
            

            
              
            
            
              Don't have an account?
              
                Signup here
              
            
          
        
      
    
  

 );
};

auth.js (backend file):

 const express = require("express");
 const router = express.Router();
 const User = require("../models/User");
 const { body, validationResult } = require("express-validator");
 const bcrypt = require("bcryptjs");
 const jwt = require("jsonwebtoken");
 const fetchUser = require("../middleware/fetchUser");

 const JWT_SECRET = "Harryisagoodboy";

 // ROUTE 1: Create a User using: POST "/api/auth/createuser" . No login required.
  router.post(
   "/createuser",
   [
   body("name", "Enter a valid name.").isLength({ min: 3 }),
    body("email", "Enter a valid email").isEmail(),
   body("password", "Enter a password of minimum 5 characters.").isLength({
     min: 5,
    }),
      ],
   async (req, res) => {
     // If there are errors, return the Bad request and the errors
      let success = false;
     const errors = validationResult(req);
     if (!errors.isEmpty()) {
      return res.status(400).json({success, errors: errors.array() });
     }
       try {
     // Check whether the user with this email exist already
      let user = await User.findOne({ email: req.body.email });
      if (user) {
      return res
        .status(400)
        .json("Sorry a user with this email already exists.");
     }
     const salt = await bcrypt.genSalt(10);
     const secPass = await bcrypt.hash(req.body.password, salt);
    user = await User.create({
      name: req.body.name,
      password: secPass,
      email: req.body.email,
     });
    const data = {
     user: {
       id: user.id,
     },
    };
     const authToken = jwt.sign(data, JWT_SECRET);
    //   .then(user => res.json(user))
    //   .catch(err => {console.log(err),
    // res.json({error: "Please enter a unique email ID"})})
   success=true;
   res.json({ success, authToken });
  } catch (error) {
    console.error(error.message);
   res.status(500).send("Internal Server Error");
  }
  }
  );


   // ROUTE 2: Authenticate a User using: POST "/api/auth/login" . No login required.
   router.post(
    "/login",
      [
    body("email", "Enter a valid email").isEmail(),
    body("password", "Password cannot be blank").exists(),
    ],
    async (req, res) => {
    let success = false;
   // If there are errors, return the Bad request and the errors
   const errors = validationResult(req);
   if (!errors.isEmpty()) {
     return res.status(400).json({success , errors: errors.array() });
   }

const {email , password} = req.body; 
try {
  // Checks if the email already exists
  let user = await User.findOne({email})
  if(!user){
    res.status(400).json({success, error: "Please enter correct credentials"})
  }

  // Compares the password entered by the user with stored password in database.
  const comparePassword = await bcrypt.compare(password , user.password);
  // If password does not matches.
  if(!comparePassword){
    res.status(400).json({success, error: "Please enter correct credentials"})
  }
  const data = {
    user: {
      id: user.id,
    },
  };
  // Getting an Authentication token on the basis of user's id as 'Payload' and 'JWT SECRET'
  const authToken = jwt.sign(data, JWT_SECRET);
  success=true;
  res.json({ success, authToken });
} catch (error) {
  console.error(error.message);
  res.status(500).send("Internal Server Error");
   }
  }
 );

 // ROUTE 3: Get Logged-in User Details using: POST "/api/auth/getuser" . Login required.
 router.post(
 "/getuser",
 fetchUser,
  async (req, res) => {
  try {
  userID = req.user.id;
  const user = await User.findById(userID).select("-password")
  res.send(user);
 } catch (error) {
  console.error(error.message);
  res.status(500).send("Internal Server Error");
  }
 }
 )
  module.exports = router;

middleware fetchUser.js file:

 const jwt = require("jsonwebtoken");

 const JWT_SECRET = "Harryisagoodboy";

 const fetchUser = (req, res, next) => {
// Get the user from the JWT token and add id to req object
 const token = req.header("auth-token");
 if (!token) {
  res.status(401).send({ error: "Please authenticate using a valid token" });
}
try {
  const data = jwt.verify(token, JWT_SECRET);
  req.user = data.user;
   next();
 } catch (error) {
  res.status(401).send({ error: "Please authenticate using a valid token" });
  }
 };

 module.exports = fetchUser;

Benjamin Caure · Answer

Maybe you're not requesting the correct URL. I see

const host = "http://localhost:3000";

Which is typically the host for your frontend, not backend, which might be something like

const host = "http://localhost:8080";

Error "POST http://localhost:3000/api/auth/createuser (same with /api/auth/login path) 404 (Not Found)" & "Uncaught in Promise: Syntax Error"

1 Answers