Additional Fields on Client

$Infer for adding additional type works, on api but not on client.

// lib/auth.ts
import { betterAuth } from 'better-auth';
import { drizzleAdapter } from 'better-auth/adapters/drizzle';

import { db } from '#db';

import { nextCookies } from 'better-auth/next-js';

import * as schema from '@/db/auth-schema';

export const auth = betterAuth({
database: drizzleAdapter(db, {
provider: 'pg',
usePlural: true,
schema
}),
emailAndPassword: {
enabled: true,
minPasswordLength: 0 //TODO set this to 8
},
user: {
additionalFields: {
role: {
type: 'string',
enum: ['new_member', 'customer', 'supplier', 'admin'],
required: true,
defaultValue: 'new_member'
}
}
},
plugins: [nextCookies()]
});

export type Session = typeof auth.$Infer.Session;`

// lib/auth-client.ts
`import { createAuthClient } from 'better-auth/react';
export const authClient = createAuthClient({
baseURL: process.env.BETTER_AUTH_URL // the base url of your auth server
});
export type Session = typeof authClient.$Infer.Session;

My problematic implementation: client page component
//page.tsx
import { authClient } from '@/lib/auth-client';

export async function User() {
const { data: session, error } = await authClient.getSession()
const user = session?.user;
const isAdmin = user?.role === 'admin';
...

"message": "Property 'role' does not exist on type '{ id: string; email: string; emailVerified: boolean; name: string; createdAt: Date; updatedAt: Date; image?: string | null | undefined; }'.",

But it works on my server component:
//layout.tsx
export default async function AdminLayout(
...
const session = await auth.api.getSession({ headers: await headers() });
if (session?.user.role !== 'admin') {
redirect('/redirect');
}
...

Is this a bug?
Thank you for your patience!
Solution
It looks like you need to add the inferAdditionalFields plugin on the client https://www.better-auth.com/docs/concepts/typescript#inferring-additional-fields-on-client
Better Auth TypeScript integration.
Was this page helpful?