0

It's difficult for me to figure out why the login functionality is not working in the simple authentication programme I'm building with react and redux. I used django to create APIs, but I'm just starting out with react and redux. Whenever I try to login from the frontend I get 404 Page Not Found error.

I have the following as part of the redux action (auth.jsx)

export const login = (email, password) => async dispatch => {
    const config = {
        headers: {
            'Content-Type':'application/json'
        }
    };
    const body = JSON.stringify({email, password});
    try{
        const res = await axios.post(`${process.env.REACT_APP_API_URL}/user/login`, body, config)

        dispatch({
            type: LOGIN_SUCCESS,
            payload: res.data
        })
        dispatch(load_user());
    }   catch (err){
        dispatch({
            type: LOGIN_FAIL,
    
        })
    }
        console.log('You hit the wrong url')
}

Redux DevTools displays the catch in the try and catch block``type(pin):"LOGIN_FAIL"`

Login.jsx

const Login = ({ login }) => {
  const [formData, setFormData] = useState({
      email: '',
      password: ''

  });

  const {email, password} = formData;
  

  const onChange = e => setFormData ({ ...formData, [e.target.name]: e.target.value});
  const onSubmit = e => {
        e.preventDefault();
        login(email, password);
  }
  return(
      <div className='container'>
          <Form onSubmit={e => onSubmit(e)}>
                <Form.Group className="mb-3" controlId="formBasicEmail">
                    <Form.Control type="email" placeholder="example@email.com" onChange={e => onChange(e)} required />
                </Form.Group>
                <Form.Group className="mb-3" controlId="formBasicPassword">
                    <Form.Control type="password" placeholder="Password" minLength='6' onChange={e => onChange(e)} required />
                </Form.Group>
                <Button variant="primary" type="submit">
                    Login
                </Button>
                <p>Don't have an account? <Link to='/account/register'>Register</Link></p>
                <p>Forgotten password? <Link to = '/account/password-reset'>Reset your password</Link></p>
        </Form>
      </div>
  )
//  const mapStateToProps = state => ({

//  })
}

export default connect(null, {login}) (Login)

When I click on the submit button I get 404 Page Not Found error. And I know that the axios function is not functioning properly because the url for the login page is http://localhost:3000/user/login and the the API is process.env.REACT_APP_API_URL}/user/login as shown in the code above. Also, REACT_APP_API_URL = 'http://localhost:8000' It's now obvious that the API I'm sending the post request to is http://localhost:8000/user/login. If the registered user login details email is example@gmail.com and the password react-redux12345! when I try to login with those details I get the following url output on the console http://localhost:3000/account/undefined/user/login (1)I dont't know why undefined is appearing in the middle of the url instead of at the end. (2) I still don't know why undefined is present in the requested url. Please I want a solution to this.

C-Bizz
  • 624
  • 9
  • 25
  • 1
    Since the REACT_APP_API_URL has a port of 8000 and you are getting an error that still uses an url that has the 3000 port, I would make sure that you have the correct .env setup as mentioned in this answer: https://stackoverflow.com/a/53237511/933941 – Christian Ipanaque Nov 08 '21 at 15:30
  • 1) where do you get this `http://localhost:3000/account/undefined/user/login`? 2) could you add `console.log` to debug the error here `} catch (err){ console.log(err) dispatch({ type: LOGIN_FAIL, }) }` – Georgy Nov 08 '21 at 15:33
  • 1
    also you don't need to stringify `body` to pass it to `axios.post` here `const body = JSON.stringify({email, password});` – Georgy Nov 08 '21 at 15:35
  • I got `http://localhost:3000/account/undefined/user/login` in the browser console. Thanks for the stringify aspect too – C-Bizz Nov 08 '21 at 16:01

0 Answers0