Redirection not working properly (React Router Dom v6)

JavaScript
1

Hi there.

I have a website where there is mainly a signin, a basket and a checkout.
What I am trying to do is:

  1. If the user is already signed in, when trying to go to the signin page, will be redirected to home.
  2. To be able to checkout, user must be signed in, so if there is no user, redirect this user to signin.

My problem is that when a non-user tries to check out, and signs in, is taken to the homepage (first point).
So, I did some changes in my signin component using the previous path and the following code does not work (specifically navigate): it takes me to home.

firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(() => {
        if (state.previousPath !== "/checkout") {
          navigate("/");
        } else {
          navigate("/checkout", { replace: true });
        }
      })
      .catch((error) => {
        setEmail("");
        setPassword("");
        setError(error.message);
      });

I replaced the navigate to this following one and it works BUT because is bouncing in a weird way: Signin>Signin>Home>Checkout :

navigate(-1, { replace: true });

I don´t know how to fix this.

Signin component is wrapped like this:

<Route
            path="/signin"
            element={
              <IfUserRedirect user={user} loggedInPath="/" path="/signin">
                <Signin />
              </IfUserRedirect>
            }
          />

This is the IfUserRedirect component:

export function IfUserRedirect({ user, loggedInPath, children }) {
  console.log("SIGNIN");
  if (user) {
    return <Navigate to={{ pathname: loggedInPath }} />;
  }
  return children;
}

Checkout component is wrapped like this:

 <Route
            path="/checkout"
            element={
              <ProtectedRoute
                user={user}
                loggedInPath="/signin"
                path="/checkout"
              >
                <Checkout user={user} />
              </ProtectedRoute>
            }
          />

And this is the ProtectedRoute component:

xport function ProtectedRoute({ user, loggedInPath, children }) {
  console.log("CHECKOUT");
  const { pathname } = useLocation();
  if (!user) {
    return <Navigate to={loggedInPath} state={{ previousPath: pathname }} />;
  }

  return children;
}

Repo in here:

Github repo

Thanks.

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.