BA
Better Auth•3w ago
Winston

Using useListOrganization() causes API to call `/api/auth/t-o-j-s-o-n`

I am trying to design an org select screen in react: 
export function OrganizationSelectScreen() {
  const organizationsQuery = useQuery({
    queryKey: ["auth", "listAllOrganizations"],
    queryFn: async () => {
      const { data, error } = authClient.useListOrganizations();
      if (error) throw error;
      if (!data) throw new Error("No data");
      return data;
    }
  });

  return (
    <div className="space-y-2">
      {organizationsQuery.data?.map((org) => (
        <div className="rounded-md border px-4 py-3 text-sm" key={org.id}>
          {org.name}
        </div>
      ))}
    </div>
  );
}
export function OrganizationSelectScreen() {
  const organizationsQuery = useQuery({
    queryKey: ["auth", "listAllOrganizations"],
    queryFn: async () => {
      const { data, error } = authClient.useListOrganizations();
      if (error) throw error;
      if (!data) throw new Error("No data");
      return data;
    }
  });

  return (
    <div className="space-y-2">
      {organizationsQuery.data?.map((org) => (
        <div className="rounded-md border px-4 py-3 text-sm" key={org.id}>
          {org.name}
        </div>
      ))}
    </div>
  );
}
But doing so causes the page to call /api/auth/t-o-j-s-o-n about a dozen times rather than the list organizations API: Copied as CURL: 
curl 'http://localhost:3001/api/auth/to-j-s-o-n' \
  -H 'Accept: */*' \
  -H 'Accept-Language: en-US,en;q=0.9' \
  -H 'Cache-Control: no-cache' \
  -H 'Connection: keep-alive' \
  -H 'Cookie: sidebar:state=true; better-auth.session_token=<TOKEN>' \
  -H 'DNT: 1' \
  -H 'Origin: http://localhost:3001' \
  -H 'Pragma: no-cache' \
  -H 'Referer: http://localhost:3001/auth/orgs' \
  ...
  --data-raw '{"0":"a","1":"u","2":"t","3":"h","4":"C","5":"l","6":"i","7":"e","8":"n","9":"t"}'
curl 'http://localhost:3001/api/auth/to-j-s-o-n' \
  -H 'Accept: */*' \
  -H 'Accept-Language: en-US,en;q=0.9' \
  -H 'Cache-Control: no-cache' \
  -H 'Connection: keep-alive' \
  -H 'Cookie: sidebar:state=true; better-auth.session_token=<TOKEN>' \
  -H 'DNT: 1' \
  -H 'Origin: http://localhost:3001' \
  -H 'Pragma: no-cache' \
  -H 'Referer: http://localhost:3001/auth/orgs' \
  ...
  --data-raw '{"0":"a","1":"u","2":"t","3":"h","4":"C","5":"l","6":"i","7":"e","8":"n","9":"t"}'
Relevant client code: 
import { organizationClient } from "better-auth/client/plugins";
import { createAuthClient } from "better-auth/react";
import { ac, admin, member, owner } from "@repo/auth";

export const authClient = createAuthClient({
  baseURL: "",
  plugins: [
    organizationClient({
      ...
    }),
  ],
});
import { organizationClient } from "better-auth/client/plugins";
import { createAuthClient } from "better-auth/react";
import { ac, admin, member, owner } from "@repo/auth";

export const authClient = createAuthClient({
  baseURL: "",
  plugins: [
    organizationClient({
      ...
    }),
  ],
});
Any ideas why?
No description
2 Replies
bekacru
bekacru•3w ago
somewhere in your app it's trying to call authClient.toJSON maybe you're passing authClient from a server component
Winston
WinstonOP•3w ago
I am on non-SSR SPA, so I shouldnt have that issue but I'll double check solved: it turns out this is caused by tanstack router's dev tools trying to serialize the authclient

Did you find this page helpful?