Fixing TypeScript Inference for Custom Session Fields in Separate Client/Server Projects
The Problem
When your server and client code are in separate projects or repositories, you cannot import the auth instance directly for type reference. This breaks TypeScript inference for custom session fields on the client side.
As mentioned in the Better Auth documentation, you'll encounter type inference issues when trying to access custom session data you've added via additionalFields.
The Solution
Instead of losing type safety, you can extend the client types manually using TypeScript's type inference:
---------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------
This extends the current TypeScript and adds your custom data type
When You Need This
This approach is necessary when:
Your client and server are in separate repos
You can't import your server auth instance for type reference
You've extended the session with additionalFields on the server
You want type safety on the client without code duplication
When your server and client code are in separate projects or repositories, you cannot import the auth instance directly for type reference. This breaks TypeScript inference for custom session fields on the client side.
As mentioned in the Better Auth documentation, you'll encounter type inference issues when trying to access custom session data you've added via additionalFields.
The Solution
Instead of losing type safety, you can extend the client types manually using TypeScript's type inference:
---------------------------------------------------------------------------------------------------
//server side
//fetch db for extended data
plugins:[
customSession(async ({ user, session }) => {
const resumeCount = 10;
return {
user: {
...user,
extended data
},
session
};
}),
]---------------------------------------------------------------------------------------------------
//client side
// ... imports
const client = createAuthClient({
baseURL: "http://localhost:5000",
// ...
});
type Session = typeof client.$Infer.Session;
export const auth = client as Omit<typeof client, "useSession"> & {
useSession: () => {
data: (Session & {
user: Session["user"] & { yourcustomdata: number };
}) | null;
isPending: boolean;
error: any;
refetch: () => void;
};
};---------------------------------------------------------------------------------------------------
This extends the current TypeScript and adds your custom data type
When You Need This
This approach is necessary when:
Your client and server are in separate repos
You can't import your server auth instance for type reference
You've extended the session with additionalFields on the server
You want type safety on the client without code duplication
