Better Auth•4d ago•

9 replies

Tanstack Start + HonoJS + BetterAuth

Tanstack Start

Hono

Hey everyone

I'm building a platform with TanStack Start (SSR frontend on

:3000

:3000

) and a separate Hono API (

:5000

:5000

) where Better Auth is mounted.

The Problem

After email verification, Better Auth on

:5000

:5000

validates the token, creates a session, sets a session cookie, and redirects (302) the user to

localhost:3000/identity-verification

localhost:3000/identity-verification

.

The issue is that my

/identity-verification

/identity-verification

route has a

beforeLoad

beforeLoad

guard that calls

authClient.getSession()

authClient.getSession()

to check if the user is authenticated. This runs during SSR on the TanStack Start server. During SSR, the server makes a fetch to

localhost:5000/api/auth/get-session

localhost:5000/api/auth/get-session

— but without any cookies. So Better Auth returns "no session" → redirects to

/login

/login

=> user is stuck in a loop.

TL;DR:

beforeLoad

beforeLoad

runs server-side during SSR, not in the browser. The SSR server doesn't have the user's cookies, so it can't prove the user is authenticated when calling the auth API.

My Solution

I created a server function using

createServerFn

createServerFn

getRequestHeaders()

getRequestHeaders()

from

@tanstack/react-start/server

@tanstack/react-start/server

that grabs the cookies from the incoming browser request during SSR and forwards them to the Hono API:

import { createServerFn } from '@tanstack/react-start';
import { getRequestHeaders } from '@tanstack/react-start/server';

const API_BASE_URL = process.env.VITE_API_URL
  ? new URL(process.env.VITE_API_URL).origin
  : 'http://localhost:5000';

export const getSession = createServerFn({ method: 'GET' }).handler(
  async () => {
    const headers = getRequestHeaders();
    const cookie = (headers as Record<string, string | undefined>).cookie ?? '';

    if (!cookie) return null;

    const response = await fetch(`${API_BASE_URL}/api/auth/get-session`, {
      headers: { cookie },
    });

    if (!response.ok) return null;
    return await response.json();
  },
);

import { createServerFn } from '@tanstack/react-start';
import { getRequestHeaders } from '@tanstack/react-start/server';

const API_BASE_URL = process.env.VITE_API_URL
  ? new URL(process.env.VITE_API_URL).origin
  : 'http://localhost:5000';

export const getSession = createServerFn({ method: 'GET' }).handler(
  async () => {
    const headers = getRequestHeaders();
    const cookie = (headers as Record<string, string | undefined>).cookie ?? '';

    if (!cookie) return null;

    const response = await fetch(`${API_BASE_URL}/api/auth/get-session`, {
      headers: { cookie },
    });

    if (!response.ok) return null;
    return await response.json();
  },
);

Then in my route guards I use this instead of

authClient.getSession()

authClient.getSession()

import { getSession } from '#/lib/auth.server';

export const Route = createFileRoute('/identity-verification')({
  beforeLoad: async ({ location }) => {
    const session = await getSession();
    if (!session?.user) {
      throw redirect({ to: '/login', search: { redirect: location.href } });
    }
    return { user: session.user };
  },
  component: IdentityVerificationLayout,
});

import { getSession } from '#/lib/auth.server';

export const Route = createFileRoute('/identity-verification')({
  beforeLoad: async ({ location }) => {
    const session = await getSession();
    if (!session?.user) {
      throw redirect({ to: '/login', search: { redirect: location.href } });
    }
    return { user: session.user };
  },
  component: IdentityVerificationLayout,
});

I also added

crossSubDomainCookies

crossSubDomainCookies

in the Better Auth config for production (so

app.domain.com

app.domain.com

and

api.domain.com

api.domain.com

share cookies), and fixed

trustedOrigins

trustedOrigins

to default to

['http://localhost:3000']

['http://localhost:3000']

instead of an empty array.

advanced: {
  crossSubDomainCookies: {
    enabled: true,
    domain: process.env.NODE_ENV === 'production' ? '.domain.com' : undefined,
  },
  defaultCookieAttributes: {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax' as const,
  },
},
trustedOrigins: process.env.CORS_ORIGIN
  ? [process.env.CORS_ORIGIN]
  : ['http://localhost:3000'],

advanced: {
  crossSubDomainCookies: {
    enabled: true,
    domain: process.env.NODE_ENV === 'production' ? '.domain.com' : undefined,
  },
  defaultCookieAttributes: {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax' as const,
  },
},
trustedOrigins: process.env.CORS_ORIGIN
  ? [process.env.CORS_ORIGIN]
  : ['http://localhost:3000'],

Questions

1. Is manually forwarding cookies via

getRequestHeaders()

getRequestHeaders()

in a

createServerFn

createServerFn

the right/recommended pattern when Better Auth lives on a separate server?
2. Are there any gotchas I should be aware of with this approach? (security, cookie expiry edge cases, etc.)
3. Has anyone else run this split architecture (TanStack Start SSR + separate Hono API with Better Auth) and found a better way to handle SSR auth guards?

Any advice or best practices would be much appreciated

Tanstack Start + HonoJS + BetterAuth

Tanstack Start

Hono

Hey everyone

I'm building a platform with TanStack Start (SSR frontend on

:3000

:3000

) and a separate Hono API (

:5000

:5000

) where Better Auth is mounted.

The Problem

After email verification, Better Auth on

:5000

:5000

validates the token, creates a session, sets a session cookie, and redirects (302) the user to

localhost:3000/identity-verification

localhost:3000/identity-verification

.

The issue is that my

/identity-verification

/identity-verification

route has a

beforeLoad

beforeLoad

guard that calls

authClient.getSession()

authClient.getSession()

to check if the user is authenticated. This runs during SSR on the TanStack Start server. During SSR, the server makes a fetch to

localhost:5000/api/auth/get-session

localhost:5000/api/auth/get-session

— but without any cookies. So Better Auth returns "no session" → redirects to

/login

/login

=> user is stuck in a loop.

TL;DR:

beforeLoad

beforeLoad

runs server-side during SSR, not in the browser. The SSR server doesn't have the user's cookies, so it can't prove the user is authenticated when calling the auth API.

My Solution

I created a server function using

createServerFn

createServerFn

getRequestHeaders()

getRequestHeaders()

from

@tanstack/react-start/server

@tanstack/react-start/server

that grabs the cookies from the incoming browser request during SSR and forwards them to the Hono API:

import { createServerFn } from '@tanstack/react-start';
import { getRequestHeaders } from '@tanstack/react-start/server';

const API_BASE_URL = process.env.VITE_API_URL
  ? new URL(process.env.VITE_API_URL).origin
  : 'http://localhost:5000';

export const getSession = createServerFn({ method: 'GET' }).handler(
  async () => {
    const headers = getRequestHeaders();
    const cookie = (headers as Record<string, string | undefined>).cookie ?? '';

    if (!cookie) return null;

    const response = await fetch(`${API_BASE_URL}/api/auth/get-session`, {
      headers: { cookie },
    });

    if (!response.ok) return null;
    return await response.json();
  },
);

import { createServerFn } from '@tanstack/react-start';
import { getRequestHeaders } from '@tanstack/react-start/server';

const API_BASE_URL = process.env.VITE_API_URL
  ? new URL(process.env.VITE_API_URL).origin
  : 'http://localhost:5000';

export const getSession = createServerFn({ method: 'GET' }).handler(
  async () => {
    const headers = getRequestHeaders();
    const cookie = (headers as Record<string, string | undefined>).cookie ?? '';

    if (!cookie) return null;

    const response = await fetch(`${API_BASE_URL}/api/auth/get-session`, {
      headers: { cookie },
    });

    if (!response.ok) return null;
    return await response.json();
  },
);

Then in my route guards I use this instead of

authClient.getSession()

authClient.getSession()

import { getSession } from '#/lib/auth.server';

export const Route = createFileRoute('/identity-verification')({
  beforeLoad: async ({ location }) => {
    const session = await getSession();
    if (!session?.user) {
      throw redirect({ to: '/login', search: { redirect: location.href } });
    }
    return { user: session.user };
  },
  component: IdentityVerificationLayout,
});

import { getSession } from '#/lib/auth.server';

export const Route = createFileRoute('/identity-verification')({
  beforeLoad: async ({ location }) => {
    const session = await getSession();
    if (!session?.user) {
      throw redirect({ to: '/login', search: { redirect: location.href } });
    }
    return { user: session.user };
  },
  component: IdentityVerificationLayout,
});

I also added

crossSubDomainCookies

crossSubDomainCookies

in the Better Auth config for production (so

app.domain.com

app.domain.com

and

api.domain.com

api.domain.com

share cookies), and fixed

trustedOrigins

trustedOrigins

to default to

['http://localhost:3000']

['http://localhost:3000']

instead of an empty array.

advanced: {
  crossSubDomainCookies: {
    enabled: true,
    domain: process.env.NODE_ENV === 'production' ? '.domain.com' : undefined,
  },
  defaultCookieAttributes: {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax' as const,
  },
},
trustedOrigins: process.env.CORS_ORIGIN
  ? [process.env.CORS_ORIGIN]
  : ['http://localhost:3000'],

advanced: {
  crossSubDomainCookies: {
    enabled: true,
    domain: process.env.NODE_ENV === 'production' ? '.domain.com' : undefined,
  },
  defaultCookieAttributes: {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax' as const,
  },
},
trustedOrigins: process.env.CORS_ORIGIN
  ? [process.env.CORS_ORIGIN]
  : ['http://localhost:3000'],

Questions

1. Is manually forwarding cookies via

getRequestHeaders()

getRequestHeaders()

in a

createServerFn

createServerFn

Tanstack Start + HonoJS + BetterAuth

The Problem

My Solution

Questions

Tanstack Start + HonoJS + BetterAuth

The Problem

My Solution

Questions

Similar Threads

Similar Threads

Similar Threads