jason Comments - Answer Overflow

jason

Explore posts from servers

•Created by jason on 3/27/2025 in #general

Have you had a chance to explore `Better Auth`

Any guidance on how to set up the provider for Tanstack? It's a bit more complicated than the Next or Vite examples. Stuck on error of Type 'QueryClient' is missing the following properties from type 'IConvexReactClient': setAuth, clearAuth

import { createRouter as createTanStackRouter } from "@tanstack/react-router";
import { QueryClient } from "@tanstack/react-query";
import { routerWithQueryClient } from "@tanstack/react-router-with-query";
import { ConvexQueryClient } from "@convex-dev/react-query";
import { ConvexProviderWithAuth } from "convex/react";
import { useBetterAuth } from "@erquhart/convex-better-auth/react";
import { authClient } from "~/lib/auth-client";
import { routeTree } from "./routeTree.gen";
import { NotFound } from "~/components/not-found";
import { Error as ErrorBoundary } from "~/components/error";

export function createRouter() {
  const PUBLIC_CONVEX_URL = import.meta.env.PUBLIC_CONVEX_URL;
  const convexQueryClient = new ConvexQueryClient(PUBLIC_CONVEX_URL);

  const queryClient: QueryClient = new QueryClient({
    defaultOptions: {
      queries: {
        queryKeyHashFn: convexQueryClient.hashFn(),
        queryFn: convexQueryClient.queryFn(),
      },
    },
  });
  convexQueryClient.connect(queryClient);

  const router = routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      defaultPreload: "intent", 
      context: { queryClient },
      Wrap: ({ children }) => (
        <ConvexProviderWithAuth client={queryClient} useAuth={useBetterAuth(authClient)}> // Error is here
          {children}
        </ConvexProviderWithAuth>
      ),
      defaultNotFoundComponent: NotFound,
      defaultErrorComponent: ErrorBoundary,
      scrollRestoration: false,
    }),
    queryClient,
  );

  return router;
}

declare module "@tanstack/react-router" {
  interface Register {
    router: ReturnType<typeof createRouter>;
  }
}

import { createRouter as createTanStackRouter } from "@tanstack/react-router";
import { QueryClient } from "@tanstack/react-query";
import { routerWithQueryClient } from "@tanstack/react-router-with-query";
import { ConvexQueryClient } from "@convex-dev/react-query";
import { ConvexProviderWithAuth } from "convex/react";
import { useBetterAuth } from "@erquhart/convex-better-auth/react";
import { authClient } from "~/lib/auth-client";
import { routeTree } from "./routeTree.gen";
import { NotFound } from "~/components/not-found";
import { Error as ErrorBoundary } from "~/components/error";

export function createRouter() {
  const PUBLIC_CONVEX_URL = import.meta.env.PUBLIC_CONVEX_URL;
  const convexQueryClient = new ConvexQueryClient(PUBLIC_CONVEX_URL);

  const queryClient: QueryClient = new QueryClient({
    defaultOptions: {
      queries: {
        queryKeyHashFn: convexQueryClient.hashFn(),
        queryFn: convexQueryClient.queryFn(),
      },
    },
  });
  convexQueryClient.connect(queryClient);

  const router = routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      defaultPreload: "intent", 
      context: { queryClient },
      Wrap: ({ children }) => (
        <ConvexProviderWithAuth client={queryClient} useAuth={useBetterAuth(authClient)}> // Error is here
          {children}
        </ConvexProviderWithAuth>
      ),
      defaultNotFoundComponent: NotFound,
      defaultErrorComponent: ErrorBoundary,
      scrollRestoration: false,
    }),
    queryClient,
  );

  return router;
}

declare module "@tanstack/react-router" {
  interface Register {
    router: ReturnType<typeof createRouter>;
  }
}

166 replies

CDCloudflare Developers

•Created by DiamondDragon on 4/8/2025 in #workers-and-pages-discussions

shoutout for tanstack start

oh yeah +1

3 replies

CDCloudflare Developers

•Created by DiamondDragon on 4/8/2025 in #workers-and-pages-discussions

shoutout for tanstack start

3 replies

CDCloudflare Developers

•Created by Giraffe on 1/26/2025 in #workers-help

Bun install or Skip NPM install for Workers

Still required today. Thanks for the instructions ghostCamel

10 replies

CCConvex Community

•Created by jason on 3/27/2025 in #general

Have you had a chance to explore `Better Auth`

RE cookies: I'm assuming a Convex custom domain would solve that. But this makes me curious...how does Convex Auth handle cookies, given a user's website domain differs from their *.convex.cloud backend? Does that use JWT or something instead? (I personally like Better Auth being cookie-based especially with their cookie caching feature. Just curious.)

166 replies

CCConvex Community

•Created by jason on 3/27/2025 in #general

Have you had a chance to explore `Better Auth`

I can also create a repo from my current TanstackStart+Convex+BetterAuth project, that has working Email OTP and redact my private stuff, if you'd like to hack on it to create an example. Might help us both out

166 replies

CCConvex Community

•Created by jason on 3/27/2025 in #general

Have you had a chance to explore `Better Auth`

Would this limit ability to alter the users table, like to add an active planId for a SaaS? Otherwise sounds cool

166 replies

CCConvex Community

•Created by jason on 3/27/2025 in #general

Have you had a chance to explore `Better Auth`

- TanStack Start + BetterAuth + Convex. - Goal is Email OTP & Github OAuth. But for now, just Email OTP, b/c OAuth has runtime errors (already reported on the better-auth-kit repo). I have Email OTP working to sign in/out, just not the 3 aspects listed in my previous message. - An example of Convex+BetterAuth with any JS framework, that's full enough to cover protecting private routes and protecting convex mutations & queries, would be immensely helpful as a reference - Non-goal for MVP, but security critical for production: getting BetterAuth's rateLimiter working with its database adapter. BetterAuth uses memory as the default store for its rate limiter, which isn't effective for serverless hosts. (I updated BetterAuth's config to use database storage, but this table is not created automatically which I assume it should be, on Convex, if in use. I haven't tried to create the table manually yet b/c I'm focused on the 3 items in my previous message. But Email OTP will need rate limiting to be secure in production, so I'll spend some time on this later.)

166 replies

CCConvex Community

•Created by jason on 3/27/2025 in #general

Have you had a chance to explore `Better Auth`

Update on my end: I have Better Auth's Email OTP plugin working, to create a user, create a session, and delete a session on logout. (Better Auth's OAuth still encounters runtime errors, so I'll just hide that option on my login page for now.) Remaining to sort out: 1.) protecting private routes--i.e. to redirect to /login if unauthenticated, 2.) writing a helper to require authentication for certain Convex mutations & queries, 3.) making user object available to all routes. Do y'all have more clarity now on if a deeper integration between Convex & Better Auth is required? Asking b/c if so, that'd help me know to just pause my attempts for now.

166 replies

BABetter Auth

•Created by jason on 4/2/2025 in #help

Best way to protect routes in TanStack Start?

This looks useful: https://discord.com/channels/719702312431386674/1356082423338893543 Will explore this path

26 replies

BABetter Auth

•Created by jason on 4/2/2025 in #help

Best way to protect routes in TanStack Start?

I found the Clerk + TanStackStart example. Unfortuantely, it takes a totally different approach with some createClerkHandler() function, so it not possible to extrapolate much from it. I'll ask in TanStack's Discord and report back if I learn something https://tanstack.com/start/latest/docs/framework/react/examples/start-clerk-basic?path=examples%2Freact%2Fstart-clerk-basic%2Fsrc%2Froutes%2F_authed.tsx

26 replies

BABetter Auth

•Created by jason on 4/2/2025 in #help

Best way to protect routes in TanStack Start?

Tested it: it does depend on whether you navigate directly to it (SSR) or use the client sidse router 1. visit /dashboard directly - logged on server 2. visit to / and then click Link to /dashboard - logged in browser

26 replies

BABetter Auth

•Created by jason on 4/2/2025 in #help

Best way to protect routes in TanStack Start?

I believe it depends if you hit the route directly (ssr) or navigate to it using the client side router

26 replies

BABetter Auth

•Created by jason on 4/2/2025 in #help

Best way to protect routes in TanStack Start?

I don't know the answer to that. If I need to use two different better auth methods, I can pursue that question in TanStack's discord

26 replies

BABetter Auth