Better auth routes end up with 404 while trying to test it via ngrok

[orangecoloured]

As the title says, I update the baseUrl to the temp ngrok url while testing. The cookies work fine, I can use the app with a registered user. But none of the BA routes work. I have the email verification enabled and I can't verify emails, because the verify link lands on 404. The url itself is correct, it has the correct domain, but it just throws 404.

[mg1986jp]

The 404 on Better Auth routes (like email verification links) through ngrok is almost always a trustedOrigins / CORS issue, not a routing issue.

Better Auth validates the origin of incoming requests. When you use ngrok, the domain changes from localhost:5173 to something like abc123.ngrok.io, and if Better Auth's trustedOrigins config doesn't include the ngrok URL, it rejects the request — which can surface as a 404 instead of a proper CORS error.

Fix: update your Better Auth config to include the ngrok URL:

// src/lib/auth.ts (or wherever your auth config is)
export const auth = betterAuth({
  baseURL: process.env.BETTER_AUTH_URL, // set this to your ngrok URL
  trustedOrigins: [
    "http://localhost:5173",
    "https://your-ngrok-subdomain.ngrok-free.app" // add ngrok URL
  ],
  // ...
});

Also make sure BETTER_AUTH_URL (or ORIGIN) in your env points to the ngrok URL, not localhost. Better Auth uses this to generate links (like the email verification URL), and if it's pointing to localhost, the link will resolve correctly from ngrok but the server-side validation will reject it.

For the email verification specifically, the flow is:

1. BA generates a verification link with baseURL as the host
2. User clicks the link → ngrok → your SvelteKit server
3. BA handles the route via its SvelteKit plugin
4. If the request origin doesn't match trustedOrigins, it 404s

Check your .env:

BETTER_AUTH_URL=https://your-ngrok-subdomain.ngrok-free.app

If you're using ngrok's free tier, note that the URL changes each session. You'd need to update the config each time, or use a fixed subdomain with a paid plan.

[mg1986jp]

@orangecoloured Your config looks correct — trustedOrigins and baseURL are both pointing to ngrok. So it's not the origin issue I originally mentioned.

Since you're getting [404] GET /api/auth/verify-email, the request is reaching SvelteKit but BA isn't handling it. Can you check that your catch-all route exists at src/routes/api/auth/[...all]/+server.ts? It should look something like:

import { auth } from '$lib/auth';
import { svelteKitHandler } from 'better-auth/svelte-kit';

export const GET = async (event) => svelteKitHandler({ event, resolve: () => auth.handler(event.request) });
export const POST = async (event) => svelteKitHandler({ event, resolve: () => auth.handler(event.request) });

If that file exists and looks right, try hitting https://a8b2-...ngrok-free.app/api/auth/ok directly in the browser — BA exposes that as a health check. If that also 404s, the handler isn't mounted properly.

One more thing — ngrok's free tier shows an interstitial "Visit Site" page on first access, which can mess with redirects. Try adding ngrok-skip-browser-warning: true header or use --request-header-add "ngrok-skip-browser-warning:true" when starting ngrok.

[orangecoloured]

@mg1986jp the latest BA package doesn't require having the explicit route handlers. Its handler mounts on start via hooks.server.ts. If you are using an AI to prompt for solution, don't bother, I've already tried it. It has outdated docs, so you need to mention that it's the latest BA version. But even with this data it's of no use.

And the ngrok header didn't help, 404 is still there.

[mg1986jp]

@orangecoloured Ah my bad, I was thinking of the older setup with explicit route handlers. Good to know the latest BA mounts via hooks.server.ts directly.

Can you share what your hooks.server.ts looks like? If the handler is mounted there and /api/auth/ok also 404s, I'm wondering if the handle function might be getting short-circuited by another handler in the sequence (if you're using sequence() from @sveltejs/kit/hooks). Or maybe the basePath in your BA config doesn't match /api/auth.

[orangecoloured]

@mg1986jp

hooks.server.ts

import type { Handle } from '@sveltejs/kit';
import { building } from '$app/environment';
import { auth } from '$lib/server/auth';
import { svelteKitHandler } from 'better-auth/svelte-kit';

const handleBetterAuth: Handle = async ({ event, resolve }) => {
	const session = await auth.api.getSession({ headers: event.request.headers });

	if (session) {
		event.locals.session = session.session;
		event.locals.user = session.user;
	}

	return svelteKitHandler({ event, resolve, auth, building });
};

export const handle: Handle = handleBetterAuth;

[mg1986jp]

@orangecoloured Your hooks.server.ts looks fine to me — no sequence issue, handler is exported directly. At this point I'm guessing it's something inside BA's svelteKitHandler not matching the route, maybe a basePath mismatch or something version-specific, but I don't have enough context on the latest BA internals to say for sure. Sorry I can't be more help here — might be worth asking in the Better Auth repo/discord since this seems like a BA-specific issue rather than a SvelteKit one.

[NatoBoram]

I've been struggling with BetterAuth not registering its routes for a few hours now and I think I found the issue.

This is the code at node_modules/.pnpm/better-auth@1.7.2_@sveltejs+kit@2.70.3_@sveltejs+vite-plugin-svelte@7.3.0_svelte@5.57.0_9f13ac95f70f800c47c8a0ff18b45467/node_modules/better-auth/dist/integrations/svelte-kit.mjs:

const toSvelteKitHandler = auth => {
	return event => auth.handler(event.request)
}

const svelteKitHandler = async ({ auth, event, resolve, building }) => {
	if (building) return resolve(event)
	const { request, url } = event
	if (isAuthPath(url.toString(), auth.options)) return auth.handler(request)
	return resolve(event)
}

function isAuthPath(url, options) {
	const _url = new URL(url)
	const baseURLStr =
		typeof options.baseURL === "string" ? options.baseURL : void 0
	const baseURL = new URL(
		`${baseURLStr || _url.origin}${options.basePath || "/api/auth"}`,
	)
	if (_url.origin !== baseURL.origin) return false
	if (
		!_url.pathname.startsWith(
			baseURL.pathname.endsWith("/")
				? baseURL.pathname
				: `${baseURL.pathname}/`,
		)
	)
		return false
	return true
}

The function isAuthPath looks complicated. Could it be buggy?

We can verify this by completely removing baseURL:

export const authOptions: BetterAuthOptions & {
	readonly plugins: readonly [AdminPlugin, UsernamePlugin, SvelteKitCookiesPlugin]
	readonly database: Database<DB>
} = {
	appName: pkg.name,
	// baseURL: BETTER_AUTH_URL.toString(),

Result:

[19:58:28.390] INFO (396320): ::1 - admin "POST /api/auth/sign-out http" 200 null 34ms
[19:58:28.501] INFO (396320): ::1 - - "GET / http" 200 105 2ms

But if we add it back:

logger.info({ BETTER_AUTH_URL }, 'BETTER_AUTH_URL')

export const authOptions: BetterAuthOptions & {
	readonly plugins: readonly [AdminPlugin, UsernamePlugin, SvelteKitCookiesPlugin]
	readonly database: Database<DB>
} = {
	appName: pkg.name,
	baseURL: BETTER_AUTH_URL.toString(),

We get a 404:

[19:59:44.796] INFO (396320): BETTER_AUTH_URL {"BETTER_AUTH_URL":"http://localhost:5173/"}
[404] POST /api/auth/sign-out
[19:59:44.852] INFO (396320): ::1 - admin "POST /api/auth/sign-out http" 404 15829 49ms

To fix it, we can copy svelteKitHandler to src/hooks.server.ts:

const handleBetterAuth: Handle = (async ({ event, resolve }) => {
	if (building) return resolve(event)
	const { request, url } = event
	if (isAuthPath(url, auth.options)) return auth.handler(request)
	return resolve(event)
}) satisfies Handle

function isAuthPath(url: URL, options: BetterAuthOptions) {
	return url.pathname.startsWith(options.basePath || "/api/auth/")
}

We can replace isAuthPath by a much simpler version that does exactly the same thing.