POST http://localhost:5000/api/auth/login 404 (Not Found)

I am trying to do a login page.After login, the data is obtained from mongodb.After I input my credentials to the login page,it should direct me to the home page but instead it is giving me this error

This is the error I got in my browser.

POST http://localhost:5000/api/auth/login 404 (Not Found)
dispatchXhrRequest @ xhr.js:210
xhrAdapter @ xhr.js:15
dispatchRequest @ dispatchRequest.js:58
request @ Axios.js:108
Axios.<computed> @ Axios.js:140
wrap @ bind.js:9
login @ apiCalls.js:7
handleClick @ Login.jsx:78
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889

This is my router file.

//LOGIN

router.post('/login', async (req, res) => {
    try{
        const user = await User.findOne(
            {
                userName: req.body.user_name
            }
        );

        !user && res.status(401).json("Wrong User Name");

        const originalPassword = user.password
        const inputPassword = req.body.password;
        
        originalPassword != inputPassword && 
            res.status(401).json("Wrong Password");

  
        const { password, ...others } = user._doc;  
 ;

    }catch(err){
        res.status(500).json(err);
    }

});

This is my index.js file.

app.use("/api/authentication" , authenticationRoute);

This is my frontend login page section.

const Login = () => {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const dispatch = useDispatch();
    const { isFetching, error} = useSelector((state) => state.user);

    const handleClick =(e) =>{
        e.preventDefault();
        login(dispatch, {username,password});
    }

The frontend login page tags section is basically like this

                     placeholder = "Username"
                     onChange={(e)=> setUsername(e.target.value)}/>
                    <Input 
                     placeholder = "Password" 
                     type = "password"
                     onChange={(e)=> setPassword(e.target.value)}/>
                    <Button onClick={handleClick} disabled={isFetching}>LOGIN </Button>
                    {error && <Error>Something went wrong!</Error>}

Solution 1:

In your backend you had declared your login route like http://localhost:5000/api/authentication/login , but in the frontend you call to http://localhost:5000/api/auth/login so you had that 404 Not Found.