@convex-dev/better-auth 0.6.0

package/src/plugins/cross-domain/index.ts

@@ -0,0 +1,156 @@
+import { setSessionCookie } from "better-auth/cookies";
+import { generateRandomString } from "better-auth/crypto";
+import {
+  BetterAuthPlugin,
+  createAuthEndpoint,
+  createAuthMiddleware,
+  oneTimeToken as oneTimeTokenPlugin,
+} from "better-auth/plugins";
+import { z } from "zod";
+
+export const crossDomain = ({ siteUrl }: { siteUrl: string }) => {
+  const oneTimeToken = oneTimeTokenPlugin();
+
+  const rewriteCallbackURL = (callbackURL?: string) => {
+    if (callbackURL && !callbackURL.startsWith("/")) {
+      return callbackURL;
+    }
+    const relativeCallbackURL = callbackURL || "/";
+    return new URL(relativeCallbackURL, siteUrl).toString();
+  };
+
+  return {
+    id: "cross-domain",
+    hooks: {
+      before: [
+        {
+          matcher(context) {
+            return Boolean(
+              context.request?.headers.get("better-auth-cookie") ||
+                context.headers?.get("better-auth-cookie")
+            );
+          },
+          handler: createAuthMiddleware(async (c) => {
+            const existingHeaders = (c.request?.headers ||
+              c.headers) as Headers;
+            const headers = new Headers({
+              ...Object.fromEntries(existingHeaders?.entries()),
+            });
+            // Skip if the request has an authorization header
+            if (headers.get("authorization")) {
+              return;
+            }
+            const cookie = headers.get("better-auth-cookie");
+            if (!cookie) {
+              return;
+            }
+            headers.append("cookie", cookie);
+            return {
+              context: {
+                headers,
+              },
+            };
+          }),
+        },
+        {
+          matcher: (ctx) => {
+            return (
+              ctx.path.startsWith("/link-social") ||
+              ctx.path.startsWith("/send-verification-email") ||
+              ctx.path.startsWith("/verify-email") ||
+              ctx.path.startsWith("/sign-in/email") ||
+              ctx.path.startsWith("/sign-in/social") ||
+              ctx.path.startsWith("/sign-in/magic-link") ||
+              ctx.path.startsWith("/delete-user") ||
+              ctx.path.startsWith("/change-email")
+            );
+          },
+          handler: createAuthMiddleware(async (ctx) => {
+            const isSignIn = ctx.path.startsWith("/sign-in");
+            ctx.body.callbackURL = rewriteCallbackURL(ctx.body.callbackURL);
+            if (isSignIn && ctx.body.newUserCallbackURL) {
+              ctx.body.newUserCallbackURL = rewriteCallbackURL(
+                ctx.body.newUserCallbackURL
+              );
+            }
+            if (isSignIn && ctx.body.errorCallbackURL) {
+              ctx.body.errorCallbackURL = rewriteCallbackURL(
+                ctx.body.errorCallbackURL
+              );
+            }
+            return { context: ctx };
+          }),
+        },
+      ],
+      after: [
+        {
+          matcher() {
+            return true;
+          },
+          handler: createAuthMiddleware(async (ctx) => {
+            const setCookie = ctx.context.responseHeaders?.get("set-cookie");
+            if (!setCookie) {
+              return;
+            }
+            ctx.context.responseHeaders?.delete("set-cookie");
+            ctx.setHeader("Set-Better-Auth-Cookie", setCookie);
+          }),
+        },
+        {
+          matcher: (ctx) => {
+            return (
+              ctx.path?.startsWith("/callback") ||
+              ctx.path?.startsWith("/oauth2/callback") ||
+              ctx.path?.startsWith("/magic-link/verify")
+            );
+          },
+          handler: createAuthMiddleware(async (ctx) => {
+            // Mostly copied from the one-time-token plugin
+            const session = ctx.context.newSession;
+            if (!session) {
+              console.error("No session found");
+              return;
+            }
+            const token = generateRandomString(32);
+            const expiresAt = new Date(Date.now() + 3 * 60 * 1000);
+            await ctx.context.internalAdapter.createVerificationValue({
+              value: session.session.token,
+              identifier: `one-time-token:${token}`,
+              expiresAt,
+            });
+            const redirectTo = ctx.context.responseHeaders?.get("location");
+            if (!redirectTo) {
+              console.error("No redirect to found");
+              return;
+            }
+            const url = new URL(redirectTo);
+            url.searchParams.set("ott", token);
+            throw ctx.redirect(url.toString());
+          }),
+        },
+      ],
+    },
+    endpoints: {
+      verifyOneTimeToken: createAuthEndpoint(
+        "/cross-domain/one-time-token/verify",
+        {
+          method: "POST",
+          body: z.object({
+            token: z.string(),
+          }),
+        },
+        async (ctx) => {
+          const response = await oneTimeToken.endpoints.verifyOneTimeToken({
+            ...ctx,
+            returnHeaders: false,
+          });
+          await setSessionCookie(ctx, response);
+          return response;
+        }
+      ),
+    },
+    options: {
+      trustedOrigins: [siteUrl],
+    },
+  } satisfies BetterAuthPlugin;
+};

package/src/plugins/index.ts

@@ -0,0 +1,2 @@
+export * from "./convex";
+export * from "./cross-domain";

package/src/react/client.tsx

@@ -0,0 +1,184 @@
+import { ConvexReactClient } from "convex/react";
+import isNetworkError from "is-network-error";
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+} from "react";
+import { createAuthClient } from "better-auth/react";
+import { convexClient, crossDomainClient } from "../client/plugins";
+import { BetterAuthClientPlugin, ClientOptions } from "better-auth";
+
+const ConvexAuthInternalContext = createContext<{
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  fetchAccessToken: ({
+    forceRefreshToken,
+  }: {
+    forceRefreshToken: boolean;
+  }) => Promise<string | null>;
+}>(undefined as any);
+
+export function useAuth() {
+  return useContext(ConvexAuthInternalContext);
+}
+
+export type ConvexAuthClient = {
+  verbose: boolean | undefined;
+  logger?: ConvexReactClient["logger"];
+};
+
+type CrossDomainClient = ReturnType<typeof crossDomainClient>;
+type ConvexClient = ReturnType<typeof convexClient>;
+type PluginsWithCrossDomain = (
+  | CrossDomainClient
+  | ConvexClient
+  | BetterAuthClientPlugin
+)[];
+type PluginsWithoutCrossDomain = (ConvexClient | BetterAuthClientPlugin)[];
+type AuthClientWithPlugins<
+  Plugins extends PluginsWithCrossDomain | PluginsWithoutCrossDomain,
+> = ReturnType<
+  typeof createAuthClient<
+    ClientOptions & {
+      plugins: Plugins;
+    }
+  >
+>;
+export type AuthClient =
+  | AuthClientWithPlugins<PluginsWithCrossDomain>
+  | AuthClientWithPlugins<PluginsWithoutCrossDomain>;
+
+export function AuthProvider({
+  client,
+  authClient,
+  children,
+}: {
+  client: ConvexAuthClient;
+  authClient: AuthClient;
+  children: ReactNode;
+}) {
+  const { data: session, isPending: isSessionPending } =
+    authClient.useSession();
+
+  const verbose: boolean = (client as any).options?.verbose ?? false;
+  const logVerbose = useCallback(
+    (message: string) => {
+      if (verbose) {
+        console.debug(`${new Date().toISOString()} ${message}`);
+        client.logger?.logVerbose(message);
+      }
+    },
+    [verbose]
+  );
+
+  const fetchToken = useCallback(async () => {
+    const initialBackoff = 100;
+    const maxBackoff = 1000;
+    let retries = 0;
+
+    const nextBackoff = () => {
+      const baseBackoff = initialBackoff * Math.pow(2, retries);
+      retries += 1;
+      const actualBackoff = Math.min(baseBackoff, maxBackoff);
+      const jitter = actualBackoff * (Math.random() - 0.5);
+      return actualBackoff + jitter;
+    };
+
+    const fetchWithRetry = async () => {
+      try {
+        const { data } = await authClient.convex.token();
+        return data?.token || null;
+      } catch (e) {
+        if (!isNetworkError(e)) {
+          throw e;
+        }
+        if (retries > 10) {
+          logVerbose(`fetchToken failed with network error, giving up`);
+          throw e;
+        }
+        const backoff = nextBackoff();
+        logVerbose(
+          `fetchToken failed with network error, attempting retrying in ${backoff}ms`
+        );
+        await new Promise((resolve) => setTimeout(resolve, backoff));
+        return fetchWithRetry();
+      }
+    };
+
+    return fetchWithRetry();
+  }, [client]);
+
+  const fetchAccessToken = useCallback(
+    async ({ forceRefreshToken }: { forceRefreshToken: boolean }) => {
+      if (forceRefreshToken) {
+        const token = await fetchToken();
+        logVerbose(`returning retrieved token`);
+        return token;
+      }
+      return null;
+    },
+    [fetchToken]
+  );
+
+  useEffect(
+    () => {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      (async () => {
+        // Return early if cross domain plugin is not configured.
+        // Apparently there's no sane way to do this type check. Only the in
+        // keyword narrows the type effectively but it doesn't work on functions.
+        if (!(authClient as any)["crossDomain"]) {
+          return;
+        }
+        const authClientWithCrossDomain =
+          authClient as AuthClientWithPlugins<PluginsWithCrossDomain>;
+        const url = new URL(window.location.href);
+        const token = url.searchParams.get("ott");
+        if (token) {
+          url.searchParams.delete("ott");
+          const result =
+            await authClientWithCrossDomain.crossDomain.oneTimeToken.verify({
+              token,
+            });
+          const session = result.data?.session;
+          if (session) {
+            await authClient.getSession({
+              fetchOptions: {
+                headers: {
+                  Authorization: `Bearer ${session.token}`,
+                },
+              },
+            });
+            authClientWithCrossDomain.updateSession();
+          }
+          window.history.replaceState({}, "", url);
+        }
+      })();
+    },
+    // Explicitly chosen dependencies.
+    // This effect should mostly only run once
+    // on mount.
+    [client, authClient]
+  );
+
+  const isAuthenticated = session !== null;
+  const isLoading = isSessionPending;
+  const authState = useMemo(
+    () => ({
+      isLoading,
+      isAuthenticated,
+      fetchAccessToken,
+    }),
+    [fetchAccessToken, isLoading, isAuthenticated]
+  );
+
+  return (
+    <ConvexAuthInternalContext.Provider value={authState}>
+      {children}
+    </ConvexAuthInternalContext.Provider>
+  );
+}

package/src/react/index.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ConvexProviderWithAuth, ConvexReactClient } from "convex/react";
+import { PropsWithChildren, useMemo } from "react";
+import {
+  AuthClient,
+  AuthProvider,
+  useAuth,
+  type ConvexAuthClient,
+} from "./client";
+
+export function ConvexBetterAuthProvider({
+  client,
+  authClient,
+  children,
+}: PropsWithChildren<{
+  client: ConvexReactClient;
+  authClient: AuthClient;
+}>) {
+  const convexAuthClient = useMemo(
+    () =>
+      ({
+        verbose: (client as any).options?.verbose,
+        logger: client.logger,
+      }) satisfies ConvexAuthClient,
+    [client]
+  );
+  return (
+    <AuthProvider client={convexAuthClient} authClient={authClient}>
+      <ConvexProviderWithAuth client={client} useAuth={useAuth}>
+        {children}
+      </ConvexProviderWithAuth>
+    </AuthProvider>
+  );
+}
+
+// TODO: Remove, short-lived alias
+export { ConvexBetterAuthProvider as ConvexProviderWithBetterAuth };

package/src/react-start/index.ts

@@ -0,0 +1,51 @@
+import { Auth, betterAuth } from "better-auth";
+import { createCookieGetter } from "better-auth/cookies";
+import { betterFetch } from "@better-fetch/fetch";
+import { GenericActionCtx } from "convex/server";
+
+export const getCookieName = async (
+  createAuth: (ctx: GenericActionCtx<any>) => ReturnType<typeof betterAuth>
+) => {
+  const auth = createAuth({} as any);
+  const createCookie = createCookieGetter(auth.options);
+  const cookie = createCookie("convex_jwt");
+  return cookie.name;
+};
+
+export const fetchSession = async <
+  T extends (ctx: GenericActionCtx<any>) => ReturnType<typeof betterAuth>,
+>(
+  createAuth: T,
+  request?: Request
+) => {
+  type Session = ReturnType<T>["$Infer"]["Session"];
+
+  if (!request) {
+    throw new Error("No request found");
+  }
+  const baseURL = new URL(request.url).origin;
+  const { data: session } = await betterFetch<Session>(
+    "/api/auth/get-session",
+    {
+      baseURL,
+      headers: {
+        cookie: request.headers.get("cookie") ?? "",
+        origin: baseURL,
+      },
+    }
+  );
+  return {
+    session,
+  };
+};
+
+export const reactStartHandler = (
+  request: Request,
+  opts?: { convexSiteUrl?: string }
+) => {
+  const convexSiteUrl = opts?.convexSiteUrl ?? process.env.CONVEX_SITE_URL;
+  const requestUrl = new URL(request.url);
+  const nextUrl = `${convexSiteUrl}${requestUrl.pathname}${requestUrl.search}`;
+  request.headers.set("accept-encoding", "application/json");
+  return fetch(nextUrl, new Request(request, { redirect: "manual" }));
+};