inject-aws.js:11 
        
        
        POST http://192.168.7.206:3006/api/auth/login 404 (Not Found)   this error  import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import './Login.css';

const Login = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const navigate = useNavigate();
    // Added useLocation to handle state from redirects
    const location = useLocation();

    // Added useEffect to handle redirect messages
    useEffect(() => {
        // Check if there's a message from redirect
        const state = location.state;
        if (state?.message) {
            setError(state.message);
        }
    }, [location]);

    const handleLogin = async (e) => {
        e.preventDefault();
        setError('');

        try {
            const response = await fetch('http://192.168.7.206:3006/api/auth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ username, password }),
            });

            const data = await response.json();
            if (response.ok) {
                // Store token and user info in localStorage
                localStorage.setItem('token', data.token);
                localStorage.setItem('userId', data.userId);
                localStorage.setItem('username', data.username);

                // Added check for redirect after login
                const state = location.state;
                if (state?.redirectAfterLogin) {
                    // Redirect to the page that required login
                    navigate(state.redirectAfterLogin, { replace: true });
                } else {
                    // Default redirect to library
                    navigate('/library');
                }
            } else {
                setError(data.message || 'Login failed');
            }
        } catch (err) {
            setError('Network error. Please try again.');
        }
    };

    // Rest of the component remains the same
    return (
            <div className="login-container">
              <form onSubmit={handleLogin}>
                <h2>Login</h2>
                {error && <p style={{ color: 'red' }}>{error}</p>}
                <input
                  type="text"
                  placeholder="Username"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  required
                />
                <input
                  type="password"
                  placeholder="Password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                />
                <button type="submit">Login</button>
                <p>
                  Don't have an account? 
                  <span 
                    onClick={() => navigate('/signup')} 
                    style={{ color: 'blue', cursor: 'pointer' }}
                  >
                    Sign up
                  </span>
                </p>
              </form>
            </div>
          );
        };
        
        export default Login;   this is login.js compoennt