initial fusionauth add

package.json

@@ -64,6 +64,16 @@
         "import": "./dist/esm/react-clerk/index.js"
       }
     },
+    "./react-fusionauth": {
+      "require": {
+        "types": "./dist/internal-cjs-types/react-fusionauth/index.d.ts",
+        "require": "./dist/cjs/react-fusionauth/index.js"
+      },
+      "import": {
+        "types": "./dist/internal-esm-types/react-fusionauth/index.d.ts",
+        "import": "./dist/esm/react-fusionauth/index.js"
+      }
+    },
     "./nextjs": {
       "require": {
         "types": "./dist/internal-cjs-types/nextjs/index.d.ts",
@@ -119,6 +129,9 @@
       "react-clerk": [
         "./dist/internal-cjs-types/react-clerk/index.d.ts"
       ],
+      "react-fusionauth": [
+        "./dist/internal-cjs-types/react-fusionauth/index.d.ts"
+      ],
       "nextjs": [
         "./dist/internal-cjs-types/nextjs/index.d.ts"
       ],
@@ -169,6 +182,7 @@
   "peerDependencies": {
     "@auth0/auth0-react": "^2.0.1",
     "@clerk/clerk-react": "^4.12.8 || ^5.0.0",
+    "@fusionauth/react-sdk": "^2.1.0",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
   },
@@ -184,6 +198,9 @@
     },
     "@clerk/clerk-react": {
       "optional": true
+    },
+    "@fusionauth/react-sdk": {
+      "optional": true
     }
   },
   "@comment devDependencies": [
@@ -196,6 +213,7 @@
     "@babel/types": "7.24.0",
     "@clerk/clerk-react": "4.18.0",
     "@commander-js/extra-typings": "^11.1.0",
+    "@fusionauth/react-sdk": "^2.1.0",
     "@jest/globals": "^28.1.0",
     "@microsoft/api-extractor": "~7.36.4",
     "@sentry/node": "^7.23.0",
@@ -263,4 +281,4 @@
     "npm": ">=7.0.0",
     "node": ">=16.15.1"
   }
-}
+}

src/react-fusionauth/ConvexProviderWithFusionAuth.test.tsx

@@ -0,0 +1,17 @@
+/**
+ * @jest-environment jsdom
+ */
+import { test } from "@jest/globals";
+import React from "react";
+import { ConvexProviderWithFusionAuth } from "./ConvexProviderWithFusionAuth.js";
+import { ConvexReactClient } from "../react/index.js";
+
+test("Helpers are valid children", () => {
+  const convex = new ConvexReactClient("https://localhost:3001");
+
+  const _ = (
+    <ConvexProviderWithFusionAuth client={convex}>
+      Hello world
+    </ConvexProviderWithFusionAuth>
+  );
+});

src/react-fusionauth/ConvexProviderWithFusionAuth.tsx

@@ -0,0 +1,58 @@
+import { useFusionAuth } from "@fusionauth/react-sdk";
+import React from "react";
+
+import { ReactNode, useCallback, useMemo } from "react";
+import { AuthTokenFetcher } from "../browser/sync/client.js";
+import { ConvexProviderWithAuth } from "../react/ConvexAuthState.js";
+
+// Until we can import from our own entry points (requires TypeScript 4.7),
+// just describe the interface enough to help users pass the right type.
+type IConvexReactClient = {
+  setAuth(fetchToken: AuthTokenFetcher): void;
+  clearAuth(): void;
+};
+
+/**
+ * A wrapper React component which provides a {@link react.ConvexReactClient}
+ * authenticated with FusionAuth.
+ *
+ * It must be wrapped by a configured `FusionAuthProvider` from `@fusionauth/react-sdk`.
+ *
+ * See [Convex FusionAuth](https://docs.convex.dev/auth/fusionauth) on how to set up
+ * Convex with FusionAuth.
+ *
+ * @public
+ */
+export function ConvexProviderWithFusionAuth({
+  children,
+  client,
+}: {
+  children: ReactNode;
+  client: IConvexReactClient;
+}) {
+  return (
+    <ConvexProviderWithAuth client={client} useAuth={useAuthFromFusionAuth}>
+      {children}
+    </ConvexProviderWithAuth>
+  );
+}
+
+function useAuthFromFusionAuth() {
+  const { isFetchingUserInfo, isLoggedIn } = useFusionAuth();
+  const fetchAccessToken = useCallback(async () => {
+    try {
+      //Need solution for this part
+      return "cookie has app.at in HttpOnly";
+    } catch (error) {
+      return null;
+    }
+  }, []);
+  return useMemo(
+    () => ({
+      isLoading: !isFetchingUserInfo,
+      isAuthenticated: isLoggedIn ?? false,
+      fetchAccessToken,
+    }),
+    [isFetchingUserInfo, isLoggedIn, fetchAccessToken],
+  );
+}

src/react-fusionauth/index.ts

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