Better-auth with external backend

wispy-olive · 2025-12-16T17:17:40.767Z

I have backend on sub domain e.g api.example.com and client is tanstack start i setup better-auth client and in vite.config nitro set ruleroute proxy to my backend domain and when try to login everything good i mean when authClient.getSession get data and when use authClient.useSession the data is unreadable and just show questionmark i think it's binary how can fix it. At before in next.js in next.config i set urlRewrite and evrything works. Also in createAuthclinet base url is app url not backend url beacuse i set urlrewrite

W

wispy-oliveOP•12/17/25, 7:51 PM

const config = defineConfig({
  plugins: [
    devtools(),
    nitro({
      routeRules: {
        '/api/**': {
          proxy: 'https://example.com/api/**',
        },
      },
    }),

    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
    tanstackStart(),
    viteReact(),
  ],
})

const config = defineConfig({
  plugins: [
    devtools(),
    nitro({
      routeRules: {
        '/api/**': {
          proxy: 'https://example.com/api/**',
        },
      },
    }),

    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
    tanstackStart(),
    viteReact(),
  ],
})

const config = defineConfig({
  plugins: [
    devtools(),
    nitro({
      routeRules: {
        '/api/**': {
          proxy: 'https://example.com/api/**',
        },
      },
    }),

    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
    tanstackStart(),
    viteReact(),
  ],
})

const config = defineConfig({
  plugins: [
    devtools(),
    nitro({
      routeRules: {
        '/api/**': {
          proxy: 'https://example.com/api/**',
        },
      },
    }),

    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
    tanstackStart(),
    viteReact(),
  ],
})

export default config
import { createAuthClient } from 'better-auth/react'
import {
  customSessionClient,
  emailOTPClient,
  genericOAuthClient,
  inferAdditionalFields,
  lastLoginMethodClient,
  phoneNumberClient,
  usernameClient,
} from 'better-auth/client/plugins'

export const authClient = createAuthClient({
  baseURL: 'http://localhost:3000',
  basePath: '/api/auth',
  plugins: [
    usernameClient(),
    emailOTPClient(),
    phoneNumberClient(),
    customSessionClient(),
    lastLoginMethodClient(),
    genericOAuthClient(),
  ],
})

export default config
import { createAuthClient } from 'better-auth/react'
import {
  customSessionClient,
  emailOTPClient,
  genericOAuthClient,
  inferAdditionalFields,
  lastLoginMethodClient,
  phoneNumberClient,
  usernameClient,
} from 'better-auth/client/plugins'

export const authClient = createAuthClient({
  baseURL: 'http://localhost:3000',
  basePath: '/api/auth',
  plugins: [
    usernameClient(),
    emailOTPClient(),
    phoneNumberClient(),
    customSessionClient(),
    lastLoginMethodClient(),
    genericOAuthClient(),
  ],
})

export default config
import { createAuthClient } from 'better-auth/react'
import {
  customSessionClient,
  emailOTPClient,
  genericOAuthClient,
  inferAdditionalFields,
  lastLoginMethodClient,
  phoneNumberClient,
  usernameClient,
} from 'better-auth/client/plugins'

export const authClient = createAuthClient({
  baseURL: 'http://localhost:3000',
  basePath: '/api/auth',
  plugins: [
    usernameClient(),
    emailOTPClient(),
    phoneNumberClient(),
    customSessionClient(),
    lastLoginMethodClient(),
    genericOAuthClient(),
  ],
})

export default config
import { createAuthClient } from 'better-auth/react'
import {
  customSessionClient,
  emailOTPClient,
  genericOAuthClient,
  inferAdditionalFields,
  lastLoginMethodClient,
  phoneNumberClient,
  usernameClient,
} from 'better-auth/client/plugins'

export const authClient = createAuthClient({
  baseURL: 'http://localhost:3000',
  basePath: '/api/auth',
  plugins: [
    usernameClient(),
    emailOTPClient(),
    phoneNumberClient(),
    customSessionClient(),
    lastLoginMethodClient(),
    genericOAuthClient(),
  ],
})

import { Button } from '@/components/ui/button'
import { authClient } from '@/lib/auth'
import { useNavigate } from '@tanstack/react-router'

export default function Logout() {
  const { data } = authClient.useSession()
  console.log('data', data)
  const navigate = useNavigate()
  return (
    <div>
      <Button
        onClick={async () => {
          const { data, error } = await authClient.signOut()
          console.log('logout', data)
          if (data?.success) {
            navigate({
              to: '/login',
            })
          }

          if (error) {
            console.log('error', error)
          }
        }}
      >
        logout
      </Button>
    </div>
  )
}

import { Button } from '@/components/ui/button'
import { authClient } from '@/lib/auth'
import { useNavigate } from '@tanstack/react-router'

export default function Logout() {
  const { data } = authClient.useSession()
  console.log('data', data)
  const navigate = useNavigate()
  return (
    <div>
      <Button
        onClick={async () => {
          const { data, error } = await authClient.signOut()
          console.log('logout', data)
          if (data?.success) {
            navigate({
              to: '/login',
            })
          }

          if (error) {
            console.log('error', error)
          }
        }}
      >
        logout
      </Button>
    </div>
  )
}

import { Button } from '@/components/ui/button'
import { authClient } from '@/lib/auth'
import { useNavigate } from '@tanstack/react-router'

export default function Logout() {
  const { data } = authClient.useSession()
  console.log('data', data)
  const navigate = useNavigate()
  return (
    <div>
      <Button
        onClick={async () => {
          const { data, error } = await authClient.signOut()
          console.log('logout', data)
          if (data?.success) {
            navigate({
              to: '/login',
            })
          }

          if (error) {
            console.log('error', error)
          }
        }}
      >
        logout
      </Button>
    </div>
  )
}

import { Button } from '@/components/ui/button'
import { authClient } from '@/lib/auth'
import { useNavigate } from '@tanstack/react-router'

export default function Logout() {
  const { data } = authClient.useSession()
  console.log('data', data)
  const navigate = useNavigate()
  return (
    <div>
      <Button
        onClick={async () => {
          const { data, error } = await authClient.signOut()
          console.log('logout', data)
          if (data?.success) {
            navigate({
              to: '/login',
            })
          }

          if (error) {
            console.log('error', error)
          }
        }}
      >
        logout
      </Button>
    </div>
  )
}

const handler = createServerFn().handler(async () => {
  const request= await getRequest()

  const session = await authClient.getSession({
    fetchOptions: {
      headers: {
        cookie: request.headers.get('cookie')?.toString(),
      },
    },
  })

  console.log(session)

  return null
})

const handler = createServerFn().handler(async () => {
  const request= await getRequest()

  const session = await authClient.getSession({
    fetchOptions: {
      headers: {
        cookie: request.headers.get('cookie')?.toString(),
      },
    },
  })

  console.log(session)

  return null
})

const handler = createServerFn().handler(async () => {
  const request= await getRequest()

  const session = await authClient.getSession({
    fetchOptions: {
      headers: {
        cookie: request.headers.get('cookie')?.toString(),
      },
    },
  })

  console.log(session)

  return null
})

const handler = createServerFn().handler(async () => {
  const request= await getRequest()

  const session = await authClient.getSession({
    fetchOptions: {
      headers: {
        cookie: request.headers.get('cookie')?.toString(),
      },
    },
  })

  console.log(session)

  return null
})

W

wispy-oliveOP•12/17/25, 7:52 PM

What did i wrong?

W

wispy-oliveOP•12/17/25, 7:53 PM

In logout component the data show unreadable data i think encoded and show question mark

W

wispy-oliveOP•12/18/25, 12:22 PM

i get this result in client i mean useSession but in serverFn get correct data

Better-auth with external backend

Similar Threads

Similar Threads

Similar Threads