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?