[GH-ISSUE #677] Better-auth Not Working with React Router v7 #17004

Closed
opened 2026-04-15 14:56:49 -05:00 by GiteaMirror · 3 comments
Owner

Originally created by @ASgmbv on GitHub (Nov 27, 2024).
Original GitHub issue: https://github.com/better-auth/better-auth/issues/677

Describe the bug
I am getting the following error when trying to use integrate with React Router v7

[better-call]: Make sure the URL has the basePath (//api/auth).

My setup:

// auth.ts
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "~/db";

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "sqlite",
  }),
  emailAndPassword: {
    enabled: true,
  },
});
// auth-client.ts
import { createAuthClient } from "better-auth/react";

export const authClient = createAuthClient({
  baseURL: "http://localhost:5173",
});

// auth-routes.tsx
import { auth } from "~/lib/auth";
import { Route } from "./+types/auth";

export async function loader({ request }: Route.LoaderArgs) {
  return auth.handler(request);
}

export async function action({ request }: Route.ActionArgs) {
  return auth.handler(request);
}

// routes.ts
export default [
  route("api/auth/*", "./routes/auth.tsx"),
   ...
]
Originally created by @ASgmbv on GitHub (Nov 27, 2024). Original GitHub issue: https://github.com/better-auth/better-auth/issues/677 **Describe the bug** I am getting the following error when trying to use integrate with React Router v7 ``` [better-call]: Make sure the URL has the basePath (//api/auth). ``` My setup: ``` // auth.ts import { betterAuth } from "better-auth"; import { drizzleAdapter } from "better-auth/adapters/drizzle"; import { db } from "~/db"; export const auth = betterAuth({ database: drizzleAdapter(db, { provider: "sqlite", }), emailAndPassword: { enabled: true, }, }); ``` ``` // auth-client.ts import { createAuthClient } from "better-auth/react"; export const authClient = createAuthClient({ baseURL: "http://localhost:5173", }); ``` ``` // auth-routes.tsx import { auth } from "~/lib/auth"; import { Route } from "./+types/auth"; export async function loader({ request }: Route.LoaderArgs) { return auth.handler(request); } export async function action({ request }: Route.ActionArgs) { return auth.handler(request); } ``` ``` // routes.ts export default [ route("api/auth/*", "./routes/auth.tsx"), ... ] ```
GiteaMirror added the locked label 2026-04-15 14:56:49 -05:00
Author
Owner

@Bekacru commented on GitHub (Nov 28, 2024):

what framework are you using to run the backend?

<!-- gh-comment-id:2505315282 --> @Bekacru commented on GitHub (Nov 28, 2024): what framework are you using to run the backend?
Author
Owner

@ASgmbv commented on GitHub (Nov 28, 2024):

React Router v7 itself, it is the next major version of Remix after v2.

<!-- gh-comment-id:2505349989 --> @ASgmbv commented on GitHub (Nov 28, 2024): React Router v7 itself, it is the next major version of Remix after v2.
Author
Owner

@jwstn commented on GitHub (Jan 3, 2025):

@ASgmbv how did you resolve this issue?

<!-- gh-comment-id:2569939056 --> @jwstn commented on GitHub (Jan 3, 2025): @ASgmbv how did you resolve this issue?
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/better-auth#17004