RJR
Convex Community•3y ago•
7 replies
RJ

`useConvexAuth` reinitializing on page nav with Clerk and Remix

I'm using Remix (and Clerk), and I have the following setup:

// root.tsx

const App = () => (
  <ClerkProvider>
    <ConvexProviderWithClerk>
      <Outlet />
    </ConvexProviderWithClerk>
  </ClerkProvider>
);


// _layout.tsx

const Layout = () => (
  <>
    <AuthLoading>
      <div>Loading…</div>
    </AuthLoading>

    <Unauthenticated>
      <RedirectToSignIn />
    </Unauthenticated>

    <Authenticated>
      <Outlet />
    </Authenticated>
  </>
);


And I'm noticing that whenever I navigate between pages (e.g. from _layout.page-one.tsx to _layout.page-two.tsx), the value of 
convexAuth
 resets (to { isLoading: true, isAuthenticated: false }, and then eventually settles to { isLoading: false, isAuthenticated: true }).

If I try to navigate (using Remix's/Remix Router's <Link /> component) to the same page from the same page (e.g. from _layout.page-one.tsx to layout.page-two.tsx, the value of 
convexAuth
 changes to { isLoading: false, isAuthenticated: false } (which then redirects to the sign-in page, which then causes Clerk to redirect to the home page [because you're already signed in], which then eventually results in a status of { isLoading: false, isAuthenticated: true }).

I've tried a lot of different permutations of this setup, and have done a lot of Remix and React Router reading, and I'm really quite baffled as to what's going on here. The Root component is not being unmounted during page navigation. Why might the value returned by useConvexAuth be changing upon page navigation?
Was this page helpful?