RJ•2y ago

`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>
);

// root.tsx

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

// _layout.tsx

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

    <Unauthenticated>
      <RedirectToSignIn />
    </Unauthenticated>

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

// _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?

5 Replies

Michal Srb•2y ago

Hey @RJ , I'll try to repro the issue to see what's up.

Michal Srb•2y ago

Hey @RJ , I was not able to reproduce the issue, navigation works fine for me. Here's how I set up Convex with Remix and Clerk (we'll add this to our docs): https://gist.github.com/xixixao/44c50a175e7c0d7ad561bfd4e3646bf5

Gist

_index.jsx

GitHub Gist: instantly share code, notes, and snippets.

RJOP•2y ago

Thank you so much for looking into this for me! A notable difference I see between my setup and yours in that example is that <Tester /> is not conditionally rendering <Outlet />. Do you see the same (positive) results if you refactor it like so?

function App() {
  ...
      <body>
        <ConvexProviderWithClerk client={convex}>
          <Tester />
-         <Outlet />
        </ConvexProviderWithClerk>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
  ...
}

function Tester() {
  return (
    <div>
      <Unauthenticated>
        <SignInButton mode="modal" />
      </Unauthenticated>
      <Authenticated>
        User:
        <UserButton />
+       <Outlet />
      </Authenticated>
      <AuthLoading>...</AuthLoading>
    </div>
  );
}

function App() {
  ...
      <body>
        <ConvexProviderWithClerk client={convex}>
          <Tester />
-         <Outlet />
        </ConvexProviderWithClerk>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
  ...
}

function Tester() {
  return (
    <div>
      <Unauthenticated>
        <SignInButton mode="modal" />
      </Unauthenticated>
      <Authenticated>
        User:
        <UserButton />
+       <Outlet />
      </Authenticated>
      <AuthLoading>...</AuthLoading>
    </div>
  );
}

(Updated my original post with a more accurate and detailed depiction of my setup)

Michal Srb•2y ago

I still don't see the problem, even with:

<ConvexProviderWithClerk client={convex}>
  <Unauthenticated>
    <SignInButton mode="modal" />
  </Unauthenticated>
  <Authenticated>
    User:
    <UserButton />
    <Outlet />
  </Authenticated>
  <AuthLoading>...</AuthLoading>
</ConvexProviderWithClerk>

<ConvexProviderWithClerk client={convex}>
  <Unauthenticated>
    <SignInButton mode="modal" />
  </Unauthenticated>
  <Authenticated>
    User:
    <UserButton />
    <Outlet />
  </Authenticated>
  <AuthLoading>...</AuthLoading>
</ConvexProviderWithClerk>

Do you have the convex client memoized (or otherwise made static) like in my code?

RJOP•2y ago

I didn't, but now do and that fixed it 🤦‍♂️ Sorry for the trouble @Michal Srb, very much appreciate the help 🙇‍♂️

`useConvexAuth` reinitializing on page nav with Clerk and Remix

Did you find this page helpful?