I'm using convex + convex auth.

  const user = useQuery(api.users.currentUser)
  const state = useConvexAuth()
  const navigate = useNavigate()
  const isLoading = user === undefined || state.isLoading

  if (isLoading) {
    return (
      <div className="relative h-full w-full">
        <img
          src={Bird}
          alt="loading"
          className="absolute left-1/2 top-1/3 h-36 w-36 -translate-x-1/2 -translate-y-1/2"
        />
      </div>
    )
  }

  if (!user) {
    // This runs during logging in submission.
    // Causes redirect to the desired route to happen after we land on register.
    // 1. login page
    // 2. login submission
    // 3. redirected to register page
    // 4. redirected to the desired end route
    return navigate(ROUTES.guest.register)
  }

// ...

  const user = useQuery(api.users.currentUser)
  const state = useConvexAuth()
  const navigate = useNavigate()
  const isLoading = user === undefined || state.isLoading

  if (isLoading) {
    return (
      <div className="relative h-full w-full">
        <img
          src={Bird}
          alt="loading"
          className="absolute left-1/2 top-1/3 h-36 w-36 -translate-x-1/2 -translate-y-1/2"
        />
      </div>
    )
  }

  if (!user) {
    // This runs during logging in submission.
    // Causes redirect to the desired route to happen after we land on register.
    // 1. login page
    // 2. login submission
    // 3. redirected to register page
    // 4. redirected to the desired end route
    return navigate(ROUTES.guest.register)
  }

// ...