authkitLoader JSON serialization negates Single Fetch capabilities

[ZahraTee]

Hey team, we're currently using Authkit with Next and looking into switching over to Remix, so have started using this package while we try it out.

We're taking advantage of Remix's Single Fetch data loading strategy, which is currently feature flagged but is turned on by default for new Remix projects and will be the default in React Router 7. The upshot is that you can return a naked object from loaders with non-JSON serializable data types (like Date, Map or Set), which previously would've been automatically serialized to JSON, even if you didn't explicitly wrap it in json(). We leverage this quite a bit as we were already doing these conversions in Next's BFF to make the data ready to consume in the frontend.

However, since authkitLoader actually does serialize the data explicitly using json(), and since we use it pretty heavily, this means we can't get the benefits of Single Fetch. Our team can work around this temporarily, but I wanted to see if this was on your radar and if this is something you plan to support in the near future.

[PaulAsjes]

Thanks for the heads up! We're hoping on doing a bit of a sprint on features for this library soon and I think this is a great candidate. Will keep you updated as we scope out further.

[ZahraTee]

Hi again, just wanted to flag that React Router 7 has been officially released now so this might start coming up more as people try to migrate.

We've worked around it by moving the authkitLoader call into a utility function that we call at the start of our loaders instead of wrapping our loaders in it. Here's a slightly more generic version of it:

export async function getAuthOrRedirect(args: LoaderFunctionArgs) {
  const authkitPromise = await authkitLoader(
    // RR7 made context optional, but in authkit-remix it's still required.
    { ...args, context: {} },
    async ({ auth }) => {
      if (auth.user !== null) {
        return auth;
      }

      // Handle unauthenticated user
      const signInUrl = await getSignInUrl();
      throw redirect(signInUrl);
    },
  );

  const authkitData = await authkitPromise.json();

  return authkitData;
}

You'll notice it's basically a homemade solution for #19. 😅