I'm using convex + convex auth.

I'm using convex + convex auth. This is the layout of protected routes:

  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)
  }

// ...

One of the struggles I have is that during submission when logging in, we navigate a bit too fast, causing the protected layout route to run, which in turn redirects us to the register route.

10 Replies

Tiger 🐅OP•7mo ago

Giving more info in this thread. this is the submit function in login

  async function onSubmit(
    event: React.FormEvent<HTMLFormElement>,
    formData: FormData
  ) {
    event.preventDefault()
    setStatus('loading')
    try {
      const result = await signIn('password', formData)
      console.log('result', result)
      setStatus('success')
      // navigate(ROUTES.protected.....)
    } catch (error) {
      setFieldErrors({
        ...fieldErrors,
        email: 'Something went wrong.',
      })

      setStatus('error')

      console.error(error)
    }
  }

  async function onSubmit(
    event: React.FormEvent<HTMLFormElement>,
    formData: FormData
  ) {
    event.preventDefault()
    setStatus('loading')
    try {
      const result = await signIn('password', formData)
      console.log('result', result)
      setStatus('success')
      // navigate(ROUTES.protected.....)
    } catch (error) {
      setFieldErrors({
        ...fieldErrors,
        email: 'Something went wrong.',
      })

      setStatus('error')

      console.error(error)
    }
  }

i see that result gives me signing in so maybe i shouldn't be the one causing the navigation to happen but rather let it happen as a result so guest route would navigate still annoying i can't trigger a toast message here when done 🤔 ---------------------- i think we're having this issue because im navigating before signing in has successfully happened yes that does the job @Michal Srb @Wayne this should be better documented shouldn't be an issue at all like running into this issue yeah

Tiger 🐅OP•7mo ago

nothing in here about redirecting https://labs.convex.dev/auth/config/passwords

Passwords - Convex Auth

Authentication library for your Convex backend

Tiger 🐅OP•7mo ago

@MapleLeaf 🍁 have you encountered a similar issue with aspects vtt? although you were using discord oauth were u can pass the redirectTo as argument

MapleLeaf 🍁•7mo ago

yeah definitely wouldn't redirect during render like this I handle protected routes by rendering either the content or the login/signup form depending on the auth state alternatively, you could redirect away from register/login if they're logged in could risk some UI state flicker, but I tend to do that generally

Tiger 🐅OP•7mo ago

yeah what im doing now is relying on the guest + protected layouts in remix that'd be _protected or _guest.tsx when doing flat routes workes nicely i dont need toast messages for the mvp, all good @MapleLeaf 🍁 now im running into this issue when logging in strangely with the approach mentioned "Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops." cc @Michal Srb @Wayne

Tiger 🐅OP•7mo ago

Cannot update a component (RouterProvider) while rendering a different component (Guest). To locate the bad setState() call inside Guest, follow the stack trace as described in https://react.dev/link/setstate-in-render

GitHub

Bug: too hard to fix "Cannot update a component from inside the fun...

Note: React 16.13.1 fixed some cases where this was overfiring. If upgrading React and ReactDOM to 16.13.1 doesn't fix the warning, read this: #18178 (comment) React version: 16.13.0 Steps To R...

Tiger 🐅OP•7mo ago

ok seems like i need the use effect after all 🙈

MapleLeaf 🍁•7mo ago

oh yeah lol bare navigate call in render will do that

Michal Srb•7mo ago

@Tiger 🐅 have you resolved all your issues?

Tiger 🐅OP•7mo ago

yes all resolved so far building it productively exciting stuff ahead 😁 love me da mutations its going well imma share it in #show-and-tell yall better support when the time comes :3 hahahaha much love :BunnyLove:

I'm using convex + convex auth.

Did you find this page helpful?