Navigate is too fast...

So I have a login page which calls a login endpoint on the server using useMutation. My server returns a cookie and I can see it in my browser storage. After I call mutation.mutate() I navigate to my dashboard page, which has a beforeLoad that checks for the cookie. I think I'm redirecting too fast and the cookie hasnt been saved by the browser. I added a 500ms sleep which seems to fix the issue but I'm wondering if there are more elegant methods to ensure that the browser has saved the cookie before I redirect.

this is my related code

  const mutation = useMutation({
    mutationFn: async () => {
      try {
        const r = await axios
          .postForm<LoginType>("http://localhost:8000/login", {
            username: name,
            password: "100"
          }, {
            withCredentials: true,
          })
        return r.data
      } catch (err) {
        console.log(err)
      }
    },
    onSuccess: async () => {
      await sleep(500)
      navigate({ to: "/" })
    }
  })

  const handleLogin = async (evt: React.FormEvent<HTMLFormElement>) => {
    evt.preventDefault()
    setIsSubmitting(true)
    mutation.mutate()
  }

  const mutation = useMutation({
    mutationFn: async () => {
      try {
        const r = await axios
          .postForm<LoginType>("http://localhost:8000/login", {
            username: name,
            password: "100"
          }, {
            withCredentials: true,
          })
        return r.data
      } catch (err) {
        console.log(err)
      }
    },
    onSuccess: async () => {
      await sleep(500)
      navigate({ to: "/" })
    }
  })

  const handleLogin = async (evt: React.FormEvent<HTMLFormElement>) => {
    evt.preventDefault()
    setIsSubmitting(true)
    mutation.mutate()
  }

Navigate is too fast...

Similar Threads

Navigate is too fast...

Similar Threads

Similar Threads

Similar Threads