Random TS errors for `createAuth` and `authClient`

[dragidavid]

Sorry if this was reported already but I came across 2 stubborn and possibly false positive TS errors while setting up better auth with convex.

Basically if you follow this official setup guide, at step 5 and 6, when you define createAuth and the authClient TS throws the following errors.

The inferred type of 'authClient' cannot be named without a reference to '.pnpm/jose@5.10.0/node_modules/jose'. This is likely not portable. A type annotation is necessary.ts(2742)

The inferred type of 'createAuth' cannot be named without a reference to '.pnpm/jose@5.10.0/node_modules/jose'. This is likely not portable. A type annotation is necessary.ts(2742)

To reproduce, just follow the steps here.

Version: 0.8.6 and also 0.8.8 (latest)
Better Auth version is what is recommended: 1.3.8

[olivierlesnicki]

I resolved it by manually installing jose5..10.0 as a dependency

[dragidavid]

Yea I ended up doing that too but forgot to mention it here. Maybe we should have it as a peerdep?

[olivierlesnicki]

I have an other TS error though at:

<ConvexBetterAuthProvider client={convex} authClient={authClient}>

The type of authClient doesn't conform, did you experience this as well?

[dragidavid]

I don't have that issue now 🤔

What does your authClient look like?

import { convexClient } from "@convex-dev/better-auth/client/plugins";
import { createAuthClient } from "better-auth/react";

export const authClient = createAuthClient({
  plugins: [convexClient()],
});

Mine is pretty simple.

[olivierlesnicki]

My bad, it was a better-auth version mismatch within the project.

[RodrigoRafaelSantos7]

@dragidavid you were running in a turborepo setting or in a standalone app?

[dragidavid]

Turborepo

[RodrigoRafaelSantos7]

Sorry for the question but are you using pnpm if that is the case you need to hard type your files.

your auth.ts should look like this:

import { createClient, type GenericCtx } from "@convex-dev/better-auth";
import { convex } from "@convex-dev/better-auth/plugins";
import { betterAuth } from "better-auth";
import { components } from "./_generated/api";
import type { DataModel } from "./_generated/dataModel";
import { query } from "./_generated/server";

const siteUrl = process.env.SITE_URL ?? "";

// The component client has methods needed for integrating Convex with Better Auth,
// as well as helper methods for general use.
export const authComponent: ReturnType<typeof createClient<DataModel>> =
  createClient<DataModel>(components.betterAuth);

export const createAuth = (
  ctx: GenericCtx<DataModel>,
  { optionsOnly } = { optionsOnly: false }
): ReturnType<typeof betterAuth> => {
  return betterAuth({
    // disable logging when createAuth is called just to generate options.
    // this is not required, but there's a lot of noise in logs without it.
    logger: {
      disabled: optionsOnly,
    },
    baseURL: siteUrl,
    database: authComponent.adapter(ctx),
    // Configure simple, non-verified email/password to get started
    emailAndPassword: {
      enabled: true,
      requireEmailVerification: false,
    },
    plugins: [
      // The Convex plugin is required for Convex compatibility
      convex(),
    ],
  });
};

// Example function for getting the current user
// Feel free to edit, omit, etc.
export const getCurrentUser = query({
  args: {},
  handler: async (ctx) => authComponent.getAuthUser(ctx),
});

and the convex.config.ts should look like this:

import betterAuth from "@convex-dev/better-auth/convex.config";
import { defineApp } from "convex/server";

const app: ReturnType<typeof defineApp> = defineApp();
app.use(betterAuth);

export default app;