1

I want to authenticate the user and redirect them to the home page after. When I submit this form redux state is being set, but the user is not redirected to the home page on first submit; I have to submit twice or sometimes three times for it to properly redirect me to the home page.

Any ideas as to what I may be doing wrong?

async function login(e) {
  e.preventDefault()
  const response = await axios.post("http://localhost:3001/login", {
    email,
    password
  }, {
    withCredentials: true
  })
  if (response.data.auth) {
    history.push("/")
    store.dispatch({
      type: "setUser",
      payload: response.data
    })
  }
}

Here is my code for the login form.

<form className="login_form" onSubmit={(e)=> login(e)}>
  <label>Email</label>
  <input type="text" onChange={e=> setEmail(e.target.value)} required placeholder="enter your email"/>
  <label>Password</label>
  <input type="password" onChange={e=> setPassword(e.target.value)} required placeholder="enter your password"/>
  <div className="login_btn_div">
    <button className="route_to_register_btn" onClick={()=> history.push("/register")} type="button">Create account</button>
    <button className="login_submit_btn" type="submit">Sign in</button>
  </div>
</form>

Here I initialize history in its own file and pass it to the root component as a prop.

const createHistory = require("history").createBrowserHistory 
export default createHistory();
Arcanus
  • 642
  • 5
  • 20
  • Does this answer your question? [Programmatically navigate using React router](https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) – Phil Sep 16 '21 at 04:30
  • It does not. I have history working elsewhere flawlessly, however, here it does not reroute on first submission. – Arcanus Sep 16 '21 at 04:37
  • Use `useState` hook to update a state variable, and then is a `useEffect` hook with that state variable as dependency, check and redirect – BlackMath Sep 16 '21 at 04:38
  • 2
    @BlackMath That doesn't seem to be necessary. Why add the extra complexity? – Cully Sep 16 '21 at 04:40
  • Where you getting `history` from? Can you post the code for the entire component? – Cully Sep 16 '21 at 04:41
  • @Arcanus what does your `setUser` action do? Is there a reason you don't call `history.push()` _after_ the dispatch? – Phil Sep 16 '21 at 04:47
  • It sets redux state to current user. I tried moving it after dispatch action and I still needed two submissions. – Arcanus Sep 16 '21 at 04:49
  • Have you tried just calling `history.push("/")` in the component, without submitting? To make sure it's actually working. – Cully Sep 16 '21 at 04:54
  • yes. When I run it before calling the backend it works on first submit. Obviously I cannot leave it that way because I need to first authenticate the user. – Arcanus Sep 16 '21 at 04:57
  • Can you include all of your component code? I imagine something is happening in some code not included in the question. – Cully Sep 16 '21 at 04:58
  • I believe it is a problem with the dispatch action because when I removed it history worked perfectly every time. The question is how does dispatch effect history? – Arcanus Sep 16 '21 at 05:03

0 Answers0