rovrav•2w ago

Stuck trying to get Tanstack Start + Clerk working

All I did was the following pnpm create convex@latest Then chose tanstack start and clerk auth below is all the keys I have in the .env files

# Deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=""

VITE_CONVEX_URL=""

VITE_CLERK_PUBLISHABLE_KEY=""
CLERK_SECRET_KEY=""
VITE_CLERK_FRONTEND_API_URL=""

# Deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=""

VITE_CONVEX_URL=""

VITE_CLERK_PUBLISHABLE_KEY=""
CLERK_SECRET_KEY=""
VITE_CLERK_FRONTEND_API_URL=""

I changed the auth.config.ts file

export default {
  providers: [
    {
      // Replace with your own Clerk Issuer URL from your "convex" JWT template
      // or with `process.env.CLERK_JWT_ISSUER_DOMAIN`
      // and configure CLERK_JWT_ISSUER_DOMAIN on the Convex Dashboard
      // See https://docs.convex.dev/auth/clerk#configuring-dev-and-prod-instances
      // Should look similar to 'https://main-swine-30.clerk.accounts.dev'.
      // domain: process.env.VITE_CLERK_FRONTEND_API_URL,
      domain: process.env.CLERK_JWT_ISSUER_DOMAIN,
      applicationID: 'convex',
    },
  ],
}

export default {
  providers: [
    {
      // Replace with your own Clerk Issuer URL from your "convex" JWT template
      // or with `process.env.CLERK_JWT_ISSUER_DOMAIN`
      // and configure CLERK_JWT_ISSUER_DOMAIN on the Convex Dashboard
      // See https://docs.convex.dev/auth/clerk#configuring-dev-and-prod-instances
      // Should look similar to 'https://main-swine-30.clerk.accounts.dev'.
      // domain: process.env.VITE_CLERK_FRONTEND_API_URL,
      domain: process.env.CLERK_JWT_ISSUER_DOMAIN,
      applicationID: 'convex',
    },
  ],
}

I also set up clerk too by setting up the JWT tokens in Clerk

6 Replies

Convex Bot•2w ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

rovravOP•2w ago

Below I'm getting this error

There are few workarounds for this problem:
- Transform the value in a way that it can be serialized.
- If the reference is present on multiple runtimes (isomorphic), you can use the Reference API to map the references.
    at G.parseObject (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:31059)
    at G.parse (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:31430)
    at G.parseProperties (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:32428)
    at G.parsePlainObject (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:28700)
    at G.parseObject (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:29897)
    at G.parse (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:31430)
    at G.parseItems (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:27974)
    at G.parseArray (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:28031)
    at G.parseObject (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:29705)
    at G.parse (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:31430) {
  value: Response {
    routerCode: 'BEFORE_LOAD',
    [Symbol(state)]: {
      aborted: false,
      rangeRequested: false,
      timingAllowPassed: false,
      requestIncludesCredentials: false,
      type: 'default',
      status: 307,
      timingInfo: null,
      cacheState: '',
      statusText: '',
      headersList: HeadersList {
        cookies: [
          '__clerk_redirect_count=1; SameSite=Lax; HttpOnly; Max-Age=3'
        ],
        [Symbol(headers map)]: Map(5) {
          'location' => {
            name: 'location',
            value: 'https://devoted-halibut-36.clerk.accounts.dev/v1/client/handshake?redirect_url=http%3A%2F%2Flocalhost%3A3000%2F&__clerk_api_version=2025-04-10&suffixed_cookies=true&__clerk_hs_reason=dev-browser-missing&format=nonce'
          },
          'cache-control' => { name: 'cache-control', value: 'no-store' },
          'set-cookie' => {
            name: 'Set-Cookie',
            value: '__clerk_redirect_count=1; SameSite=Lax; HttpOnly; Max-Age=3'
          },
          'x-clerk-auth-reason' => { name: 'x-clerk-auth-reason', value: 'dev-browser-missing' },
          'x-clerk-auth-status' => { name: 'x-clerk-auth-status', value: 'handshake' }
        },
        [Symbol(headers map sorted)]: null
      },
      urlList: []
    },
    [Symbol(headers)]: Headers {}
  }
}

There are few workarounds for this problem:
- Transform the value in a way that it can be serialized.
- If the reference is present on multiple runtimes (isomorphic), you can use the Reference API to map the references.
    at G.parseObject (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:31059)
    at G.parse (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:31430)
    at G.parseProperties (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:32428)
    at G.parsePlainObject (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:28700)
    at G.parseObject (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:29897)
    at G.parse (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:31430)
    at G.parseItems (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:27974)
    at G.parseArray (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:28031)
    at G.parseObject (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:29705)
    at G.parse (file:///Users/remusrisnov/Development/convex-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:31430) {
  value: Response {
    routerCode: 'BEFORE_LOAD',
    [Symbol(state)]: {
      aborted: false,
      rangeRequested: false,
      timingAllowPassed: false,
      requestIncludesCredentials: false,
      type: 'default',
      status: 307,
      timingInfo: null,
      cacheState: '',
      statusText: '',
      headersList: HeadersList {
        cookies: [
          '__clerk_redirect_count=1; SameSite=Lax; HttpOnly; Max-Age=3'
        ],
        [Symbol(headers map)]: Map(5) {
          'location' => {
            name: 'location',
            value: 'https://devoted-halibut-36.clerk.accounts.dev/v1/client/handshake?redirect_url=http%3A%2F%2Flocalhost%3A3000%2F&__clerk_api_version=2025-04-10&suffixed_cookies=true&__clerk_hs_reason=dev-browser-missing&format=nonce'
          },
          'cache-control' => { name: 'cache-control', value: 'no-store' },
          'set-cookie' => {
            name: 'Set-Cookie',
            value: '__clerk_redirect_count=1; SameSite=Lax; HttpOnly; Max-Age=3'
          },
          'x-clerk-auth-reason' => { name: 'x-clerk-auth-reason', value: 'dev-browser-missing' },
          'x-clerk-auth-status' => { name: 'x-clerk-auth-status', value: 'handshake' }
        },
        [Symbol(headers map sorted)]: null
      },
      urlList: []
    },
    [Symbol(headers)]: Headers {}
  }
}

Alex 1318•4d ago

@rovrav im facing the same issue - were you able to able to solve it?

rovravOP•4d ago

I found a workaround

export const Route = createFileRoute('/_authed')({
  // this way seems to be broken and causing issues
  /* beforeLoad: ({ context }) => {
    if (!context.userId) {
      throw new Error('Not authenticated')
    }    
  }, */
  beforeLoad: async () => await authStateFn(),
  errorComponent: ({ error }) => {
    if (error.message === 'Not authenticated') {
      console.log('error from _authed.tsx', error)
      return (
        <div className="flex items-center justify-center p-12">
          <SignIn routing="hash" forceRedirectUrl={window.location.href} />
        </div>
      )
    }

    throw error
  },
  component: AuthenticatedLayout,
  loader: async ({ context }) => {
    return { userId: context.userId }
  },
})

export const Route = createFileRoute('/_authed')({
  // this way seems to be broken and causing issues
  /* beforeLoad: ({ context }) => {
    if (!context.userId) {
      throw new Error('Not authenticated')
    }    
  }, */
  beforeLoad: async () => await authStateFn(),
  errorComponent: ({ error }) => {
    if (error.message === 'Not authenticated') {
      console.log('error from _authed.tsx', error)
      return (
        <div className="flex items-center justify-center p-12">
          <SignIn routing="hash" forceRedirectUrl={window.location.href} />
        </div>
      )
    }

    throw error
  },
  component: AuthenticatedLayout,
  loader: async ({ context }) => {
    return { userId: context.userId }
  },
})

rovravOP•4d ago

https://clerk.com/docs/quickstarts/tanstack-react-start

TanStack React Start: TanStack React Start Quickstart (beta)

Learn how to use Clerk to quickly and easily add secure authentication and user management to your TanStack React Start application.

Alex 1318•4d ago

thanks, ill give it a try!

Stuck trying to get Tanstack Start + Clerk working

Did you find this page helpful?