#Can't get better-auth working with the Tanstack Start and Convex stack

73 messages · Page 1 of 1 (latest)

humble yew
#

The weird part is the error gives me to nothing to work with, just fetch failed and even weirder is that it wouldn't happen on every reload, but when the page does reload, client interactivity wouldn't work, meaning no onClick handler stuff is working.
Neither server nor browser console tells me anything. Have followed, checked and rechecked the setup process. https://convex-better-auth.netlify.app/framework-guides/tanstack-start

image.png
TanStack Start | Convex + Better Auth

Install and configure Convex + Better Auth for TanStack Start.

#

Can't get better-auth working with the Tanstack Start and Convex stack

humble yew
#

Update: Every single call to the api/auth/$.ts path gives 500 internal server error.

midnight mason
#

I'm sorry I don't know tanstack

fervent jetty
#

What version of TanStack Start are you using

humble yew
humble yew
fervent jetty
#

not live yet

cedar hedge
#

it happens in Node because when the route is built, it uses the WebAPI Request and undici, the default HTTP client in Node, doesn't like that.

#

After the Vercel CEO fiasco I finally moved to Cloudflare and to be done with it

atomic vale
#

I've also tested it with social and email sign in,
My environment variable are correct as far as i can tell, but for both cases i get dom exception

cedar hedge
#

If you wrap that in a try catch you will see that the error comes from undici. I don't remember exactly what the error was, but it had to do with the different implementation of Request in undici compared to the WebAPI. What I did was to just copy the code in reactStartHandler and modified to work with undici/Node

#

so if you're in a Node environment, as you probably are, just import Request from undici and modify the code accordingly

atomic vale
atomic vale
#

Thank you

cedar hedge
# 
import { createFileRoute } from '@tanstack/solid-router'

const convexSiteUrl =
  import.meta.env.PUBLIC_CONVEX_SITE_URL! ||
  process.env.PUBLIC_CONVEX_SITE_URL! ||
  import.meta.env.VITE_CONVEX_SITE_URL! ||
  process.env.VITE_CONVEX_SITE_URL!

async function handler({ request }: { request: Request }) {
  try {
    const requestUrl = new URL(request.url)

    if (!convexSiteUrl) {
      throw new Error('VITE_CONVEX_SITE_URL is not set')
    }
    const nextUrl = `${convexSiteUrl}${requestUrl.pathname}${requestUrl.search}`

    const newRequest = new Request(request, { redirect: 'manual' })
    newRequest.headers.set('accept-encoding', 'application/json')

    const response = await fetch(nextUrl, newRequest)

    const body = response.body
    const status = response.status
    const statusText = response.statusText

    const headers = new Headers(response.headers)

    // Ensure no caching
    headers.set('Cache-Control', 'no-cache, no-store, must-revalidate')
    headers.set('Pragma', 'no-cache')
    headers.set('Expires', '0')

    return new Response(body, {
      status,
      statusText,
      headers,
    })
  } catch (e: any) {
    console.error(e)

    let message = 'Internal Server Error'

    if (import.meta.env.MODE !== 'production') {
      message = e?.message || message
    }

    return new Response(message, { status: 500 })
  }
}

export const Route = createFileRoute('/api/auth/$')({
  server: {
    handlers: {
      GET: handler,
      POST: handler,
    },
  },
})
#

this is my current code, but it's for cloudflare workers

#

instead of using Request directly, you would have to import it from unidici and modify it to fit your needs

atomic vale
#

Let me run this and I'll get back to you

humble yew
#

After updating to RC, TS is screaming at me, seems a lot of schema has been changed, so will wait for the docs to get updated prolly.

atomic vale
midnight mason
humble yew
#

The better auth library not being compatible with Tanstack RC is my current barrier rn.

humble yew
midnight mason
#

Thanks to the patch I made thanks to claude and put on the github now it's working

#

I got some issues with the detection of the fact I'm signed in but now it's working

humble yew
#

could you share the final code of it, code and screenshots look a little confusing, just checked, if its not too much work

fervent jetty
humble yew
#

I have made the necessary migration changes for 0.9, but get this error when any route is loaded

fervent jetty
#

That error looks like TanStack isn't finding that function where it expects it.

#

Oh hmm the example app has src/router.tsx, but the docs have src/routes/router.tsx, maybe that's it

humble yew
#

hmm, I did compare my code with the docs one, and indeed getRouter() function wasn't being exported. While that has been taken care of, another unhelpful erroir is being thrown now. I am literally going to cry

image.png
fervent jetty
#

If there are one or more places where your implementation doesn't match what's documented, you're going to have some issues

#

getWebRequest isn't mentioned anywhere in the docs or examples currently

#

Did you go from 0.7 to 0.9 or were you already on 0.8?

humble yew
fervent jetty
humble yew
#

I honestly am clueless now, till last night it was entirely different shit. I even tracked the getWebRequest part and may have fixed it. But, back to square one, getting the fetch failed error due to the same undici related stuff

#

Went through the guide so many times, not sure where the discrepancy is...

image.png
fervent jetty
humble yew
#

bun: it is in a monorepo architecture

fervent jetty
#

Yeah bun would have been my guess. Look for multiple convex dependencies and see if they're conflicting.

#

oh yeah it's right there in the error, convex is installed as a dependency in both the root and apps/web

#

you'll want to limit it to just installing in apps/web and wherever your backend is, probably packages/backend

humble yew
#

huh, that's weird since I used Better-T-Stack to scaffold the project. Wasn't even sure about this.

fervent jetty
#

Try pnpm instead of Bun. I think Bun is great, but I've seen a fair amount of esoteric issues come through that are Bun specific.

humble yew
#

yeah… I think too, though I think changing the runtime and package manager will add another overhead.

#

I think I should’ve gone with Astro, and then used React inside. Way too many new technologies in one stack got me overwhelmed

fervent jetty
#

I really think Bun is your only issue here, fwiw

#

Obviously can't be certain, but that's my suspicion

#

But yeah, definitely make the moves you need to make to ship! 🫡

humble yew
#

Does the Tanstack plus convex example uses pnpm for its PM?

humble yew
fervent jetty
#

No, npm for everything, but you're doing monorepo, hence the pnpm recommendation

#

I haven't really seen issues come down to "oh it's pnpm", I've seen many where the culprit is Bun

#

And to be fair to Bun, maybe it's just config errors and not Bun itself. But again, it's the only package manager I've seen a good amount of issues from.

humble yew
#

haha fair, will check into this…

humble yew
#

Hey do we need to explicitly build the core schema that better auth requires, like user, session, account, or the package handles it for us?

humble yew
#

So, I did scaffold a project using pnpm this time, it scaffolds a todo app, runs fine as long as you are in the homepage, but navigate to dashboard or todos page, and it throws an unhandled, 500 HTTPError

#

scaffold using pnpm

humble yew
#

Hey @fervent jetty I am confused between if I should have two user table, one in betterAuth component and one in app?

fervent jetty
#

Most folks go that route

hard trench
muted dew
#

@hard trench "the appropriate location" being src/router.tsx, right? I already have mine there.