Add ConvexProviderWithAuthKit for WorkOS AuthKit integration

api-extractor-configs/react-authkit-api-extractor.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./api-extractor-base.json",
+  "mainEntryPointFilePath": "<projectFolder>/dist/types/react-authkit/index.d.ts",
+  "dtsRollup": {
+    "untrimmedFilePath": "<projectFolder>/dist/types/react-authkit/react-authkit-internal.d.ts",
+    "publicTrimmedFilePath": "<projectFolder>/dist/types/react-authkit/react-authkit.d.ts"
+  },
+  /**
+   * Enable the apiReport but use the same reportFolder and tempFolder to make it a no-op.
+   * This way forgotten exports are a warning instead of an error.
+   */
+  "apiReport": {
+    "enabled": true,
+    "reportFileName": "react-authkit-tmp.api.md",
+    "reportFolder": "temp",
+    "reportTempFolder": "temp"
+  }
+}

package.json

@@ -285,6 +285,7 @@
     "@types/serve-handler": "~6.1.4",
     "@types/ws": "^8.5.13",
     "@vitest/eslint-plugin": "~1.3.0",
+    "@workos-inc/authkit-react": "^0.11.0",
     "adm-zip": "^0.5.10",
     "bufferutil": "^4.0.7",
     "chalk": "5",

react-authkit/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/cjs/react-authkit/index.js",
+  "module": "../dist/esm/react-authkit/index.js",
+  "types": "../dist/cjs-types/react-authkit/index.d.ts"
+}

src/react-authkit/ConvexProviderWithAuthKit.test.tsx

@@ -0,0 +1,18 @@
+/**
+ * @vitest-environment custom-vitest-environment.ts
+ */
+import { test } from "vitest";
+import React from "react";
+import { ConvexProviderWithAuthKit } from "./ConvexProviderWithAuthKit.js";
+import { ConvexReactClient } from "../react/index.js";
+import { useAuth } from "@workos-inc/authkit-react";
+
+test("Helpers are valid children", () => {
+  const convex = new ConvexReactClient("https://localhost:3001");
+
+  const _ = (
+    <ConvexProviderWithAuthKit client={convex} useAuth={useAuth}>
+      Hello world
+    </ConvexProviderWithAuthKit>
+  );
+});

src/react-authkit/ConvexProviderWithAuthKit.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+
+import { ReactNode, useCallback, useMemo } from "react";
+import { AuthTokenFetcher } from "../browser/sync/client.js";
+import { ConvexProviderWithAuth } from "../react/ConvexAuthState.js";
+
+type IConvexReactClient = {
+  setAuth(fetchToken: AuthTokenFetcher): void;
+  clearAuth(): void;
+};
+
+// Modified to match WorkOS's auth hook structure
+type UseAuth = () => {
+  isLoading: boolean;
+  user: any | null;
+  getAccessToken: () => Promise<string | null>;
+};
+
+/**
+ * A wrapper React component which provides a {@link react.ConvexReactClient}
+ * authenticated with WorkOS AuthKit.
+ *
+ * It must be wrapped by a configured `AuthKitProvider`, from
+ * `@workos-inc/authkit-react`.
+ *
+ * @public
+ */
+export function ConvexProviderWithAuthKit({
+  children,
+  client,
+  useAuth,
+}: {
+  children: ReactNode;
+  client: IConvexReactClient;
+  useAuth: UseAuth;
+}) {
+  const useAuthFromWorkOS = useUseAuthFromAuthKit(useAuth);
+  return (
+    <ConvexProviderWithAuth client={client} useAuth={useAuthFromWorkOS}>
+      {children}
+    </ConvexProviderWithAuth>
+  );
+}
+
+function useUseAuthFromAuthKit(useAuth: UseAuth) {
+  return useMemo(
+    () =>
+      function useAuthFromWorkOS() {
+        const { isLoading, user, getAccessToken } = useAuth();
+
+        const fetchAccessToken = useCallback(async () => {
+          try {
+            const token = await getAccessToken();
+            return token;
+          } catch {
+            return null;
+          }
+        }, [getAccessToken]);
+
+        return useMemo(
+          () => ({
+            isLoading,
+            isAuthenticated: !!user,
+            fetchAccessToken,
+          }),
+          [isLoading, user, fetchAccessToken],
+        );
+      },
+    [useAuth],
+  );
+}

src/react-authkit/index.ts

@@ -0,0 +1,6 @@
+/**
+ * React login component for use with WorkOS AuthKit
+ *
+ * @module
+ */
+export { ConvexProviderWithAuthKit } from "./ConvexProviderWithAuthKit.js";