Topics

Better Auth•3w ago

better-auth-ui & Tanstack Start query issue

@daveycodez I'm trying to setup better-auth-ui with tanstack start and tanstack query. I followed exactly whats on the docs and the issue is when i log in and it re-directs me to "/" which i set in the redirectTo="/" of AuthView, using the tanstack query devtools the ["session"] data is always null. if i have the redirectTo="/dashboard" set, then it does have the data. So something to do with the home page that it resets the data to null. any idea? Thank you

42 Replies

Joey9OP•3w ago

here is the project, please let me know if you have any idea. thank you

Joey9OP•3w ago

https://github.com/Anonymous2416/test2

GitHub

GitHub - Anonymous2416/test2

Contribute to Anonymous2416/test2 development by creating an account on GitHub.

Joey9OP•3w ago

providers.tsx is in src/lib/providers.tsx

daveycodez•3w ago

are you using authClient.useSession to get the session

Joey9OP•3w ago

no, im not using that anywhere

daveycodez•3w ago

That might be why I'm not sure exactly how you are getting session in TanStack but you should be receiving a new session via authClient.useSession after sign in

Joey9OP•3w ago

but i thought better-auth-ui with better-auth-tanstack does all of this automatically? or no? im using these

"@daveyplate/better-auth-tanstack": "^1.3.6",
"@daveyplate/better-auth-ui": "^3.2.5",

"@daveyplate/better-auth-tanstack": "^1.3.6",
"@daveyplate/better-auth-ui": "^3.2.5",

mb, i thought i specified i was using better-auth-tanstack but i didnt. sorry

daveycodez•3w ago

And you're using the AuthUIProviderTanstack? Hmm this is weird I'm looking at the code and I can't identify an issue

Joey9OP•3w ago

yea yea idk whats happening

daveycodez•3w ago

after you sign in what happens if you go to /api/auth/get-session

Joey9OP•3w ago

i get the session correctly with all the values

daveycodez•3w ago

Where are you not getting the session exactly then

Joey9OP•3w ago

also when the "/" page loads, it prints this in the server log too tried to stream query ["session"] after stream was already closed in the home page /

daveycodez•3w ago

Like in SSR?

Joey9OP•3w ago

after logging in and i put it to redirect to /

daveycodez•3w ago

I don't see where you're trying to log this If you put useSession() from better-auth-tanstack in your / page you should be able to get the session just fine Oh you mean in TS Query the data isn't present Do you see a fetch to get-session after you sign in in chrome network tab

Joey9OP•3w ago

yes

daveycodez•3w ago

Or if you refresh the page on "/" does it fix it

Joey9OP•3w ago

also jus tried doing ths in __root.tsx in RootDocument and it gives error

 const { hooks } = useContext(AuthUIContext);
const { data: session } = hooks.useSession();
console.log(session);

 const { hooks } = useContext(AuthUIContext);
const { data: session } = hooks.useSession();
console.log(session);

Error in renderToPipeableStream: TypeError: Cannot read properties of undefined (reading 'useSession')
    at RootDocument (/src/routes/__root.tsx:44:35)

Error in renderToPipeableStream: TypeError: Cannot read properties of undefined (reading 'useSession')
    at RootDocument (/src/routes/__root.tsx:44:35)

daveycodez•3w ago

Yea cause that has to go inside of Providers AuthUIContext is null outside of the Providers scope Maybe you need to put your TanstackDevTools inside of Providers Cause it needs access to the QueryClient I would even move those devtools directly into providers.tsx as a child of AuthQueryProvider

Joey9OP•3w ago

same error?

Error in renderToPipeableStream: TypeError: Cannot read properties of undefined (reading 'useSession')
    at Providers (/src/lib/providers.tsx:14:35)

Error in renderToPipeableStream: TypeError: Cannot read properties of undefined (reading 'useSession')
    at Providers (/src/lib/providers.tsx:14:35)

daveycodez•3w ago

useSession has to be a child of providers if you do it before you render your QueryProvider it won't work You're trying to access the context before it is initialized

Joey9OP•3w ago

oh true mb, let me do it in index, lets see now that could be it, let me try,. 1 sec

daveycodez•3w ago

It likely is the issue since TanstackDevTools probably does "useQueryClient" and if it's outside of providers your queryclient will be null

Joey9OP•3w ago

same issue 🙁 i did log in index.tsx and it does get it, but then its null.

Joey9OP•3w ago

No description

Joey9OP•3w ago

and this keeps logging in server logs

Joey9OP•3w ago

No description

daveycodez•3w ago

It looks like you’re trying to read the session in server context but in the client idk I need to make a new example for the latest TanStack start anyway. Maybe when I’m done with my current project. But if you keep all your Auth client side it should work for now Like React hooks only

Joey9OP•3w ago

thats the thing though im only accessing the context here, im not doing anything else anywhere just what better-auth-tanstack does behind the scenes https://github.com/Anonymous2416/test2/blob/main/src/routes/index.tsx#L11

GitHub

test2/src/routes/index.tsx at main · Anonymous2416/test2

Contribute to Anonymous2416/test2 development by creating an account on GitHub.

Joey9OP•3w ago

alright please let me know, thank you 🙏 i still havent updated to the new RC version. im on 1.131.50 @daveycodez hey sorry to bother you about this, its just been really frustrating. do you have an example project i can clone with tanstack start (im using version 1.131.50) i can try out to see if it works or if something wrong im doing on my part

daveycodez•3w ago

It hasn't been updated in a while https://github.com/daveyplate/better-auth-tanstack-starter

Joey9OP•3w ago

after some testing around the problem has something to do with where/when im creating the QueryClient and where/when im importing to use it thats what causes the tried to stream query ["session"] after stream was already closed message and issue with data being null in the query @daveycodez hey i managed to get things working. I had a question regarding prefetching in beforeLoad, what does it provide so i can make it work, since beforeLoad runs on both server and client. Im trying to avoid the flickering/wrong ui showing of the user avatar button on page load

Joey9OP•3w ago

kinda like in the demo, a flicker happens of the user avatar https://newtech.dev/auth/sign-in

NEW-TECH

Best PWA app in the world!

Joey9OP•3w ago

Joey9OP•3w ago

<SignedIn>
  <UserButton size="icon" />
</SignedIn>

<SignedIn>
  <UserButton size="icon" />
</SignedIn>

<SignedOut>
  <Button asChild variant="outline">
    <Link to={auth.login.url}>{auth.login.title}</Link>
  </Button>
  <Button asChild>
    <Link to={auth.signup.url}>{auth.signup.title}</Link>
  </Button>
</SignedOut>

<SignedOut>
  <Button asChild variant="outline">
    <Link to={auth.login.url}>{auth.login.title}</Link>
  </Button>
  <Button asChild>
    <Link to={auth.signup.url}>{auth.signup.title}</Link>
  </Button>
</SignedOut>

daveycodez•3w ago

You likely want to show a loader skeleton

Joey9OP•3w ago

im trying to prefetch like this

import { auth } from "@/lib/auth";
import { prefetchSession } from "@daveyplate/better-auth-tanstack/server";
import { createFileRoute } from "@tanstack/react-router";
import { getWebRequest } from "@tanstack/react-start/server";

export const Route = createFileRoute("/")({
  component: RouteComponent,
  beforeLoad: async ({ context }) => {
    await prefetchSession(auth, context.queryClient, {
      headers: getWebRequest().headers,
    });
  },
});

import { auth } from "@/lib/auth";
import { prefetchSession } from "@daveyplate/better-auth-tanstack/server";
import { createFileRoute } from "@tanstack/react-router";
import { getWebRequest } from "@tanstack/react-start/server";

export const Route = createFileRoute("/")({
  component: RouteComponent,
  beforeLoad: async ({ context }) => {
    await prefetchSession(auth, context.queryClient, {
      headers: getWebRequest().headers,
    });
  },
});

but it gives this error:

Uncaught (in promise) SyntaxError: The requested module '/node_modules/use-sync-external-store/shim/with-selector.js?v=48f0a9bf' does not provide an export named 'useSyncExternalStoreWithSelector' (at index.js?v=48f0a9bf:1:10)

Uncaught (in promise) SyntaxError: The requested module '/node_modules/use-sync-external-store/shim/with-selector.js?v=48f0a9bf' does not provide an export named 'useSyncExternalStoreWithSelector' (at index.js?v=48f0a9bf:1:10)

const prefetch = createServerFn({ method: "GET" })
  .validator(
    z.object({
      queryClient: z.instanceof(QueryClient),
    }),
  )
  .handler(async ({ data }) => {
    await prefetchSession(auth, data.queryClient as QueryClient, {
      headers: getWebRequest().headers,
    });
  });

export const Route = createFileRoute("/")({
  component: RouteComponent,
  beforeLoad: async ({ context }) => {
    await prefetch({ data: { queryClient: context.queryClient } });
  },
});

const prefetch = createServerFn({ method: "GET" })
  .validator(
    z.object({
      queryClient: z.instanceof(QueryClient),
    }),
  )
  .handler(async ({ data }) => {
    await prefetchSession(auth, data.queryClient as QueryClient, {
      headers: getWebRequest().headers,
    });
  });

export const Route = createFileRoute("/")({
  component: RouteComponent,
  beforeLoad: async ({ context }) => {
    await prefetch({ data: { queryClient: context.queryClient } });
  },
});

was able to get it working by doing this. not sure if this is the right approach or what you recommend, but it worked

daveycodez•3w ago

Honestly I have no idea I'm a TanStack start noob but I'm glad that's working I mainly use Next.js but I do want to update everything to work very cleanly with TanStack Start, but it changed a lot since my initial integrations so I've been waiting for it to stablize before diving into any significant updates there End goal is to have everything perfected across the board for Next.js / TSS / RR7 along with simple demos

Joey9OP•3w ago

thats great to hear, thank you for everything you do!

Joey9OP•3w ago

@daveycodez hey sorry to bother you again, when using the UserButton component, when it tries to load the avatar image that it got from signing in with google, it shows this in the network requests, you know what could be causing this?

No description

daveycodez•3w ago

You might see this in dev sometimes It's Google rate limiting

Better Auth Join

8.6KMembers

View on Discord

Did you find this page helpful?