RJR
Convex Community•3y ago•
19 replies
RJ

`<Unauthenticated>` renders after sign in redirect

I'm using Clerk's <SignIn /> and <SignUp /> components on their own dedicated routes (using Remix)—
/sign-in
 and /sign-up respectively. When a user navigates to the index route 
/
, I use the <Unauthenticated /> component to conditionally render Clerks' <RedirectToSignIn /> component, which does what it sounds like. This all works great without issue, until the user signs in—once that happens, the user is redirected back to 
/
, and then—apparently because there is some delay between this redirect and the <Unauthenticated /> component registering that the user is now authenticated—the <Unauthenticated /> component redirects the user to the the sign in route, which then redirects the user to the index route (because Clerk realizes they're already logged in), which then redirects the user to the sign in route, etc.

I was able to break this loop by replacing

<Unauthenticated>
  <RedirectToSignIn />
</Unauthenticated>


with

<Unauthenticated>
  <UnauthenticatedApp />
</Unauthenticated>

...

const UnauthenticatedApp = () => {
  const [delayElapsed, setDelayElapsed] = useState(false);

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setDelayElapsed(true);
    }, 2000);

    return () => {
      clearTimeout(timeoutId);
    };
  }, []);

  return delayElapsed ? <RedirectToSignIn /> : null;
};


But of course that's not ideal!
Was this page helpful?