Added Descope as OAuth Provider

README.md

@@ -32,6 +32,8 @@ This package includes several entry points for building apps on Convex:
   React component for authenticating users with Auth0.
 - [`convex/react-clerk`](https://docs.convex.dev/api/modules/react_clerk): A
   React component for authenticating users with Clerk.
+- [`convex/react-descope`](https://docs.convex.dev/api/modules/react_descope): A
+  React component for authenticating users with Descope.
 
 This package also includes [`convex`](https://docs.convex.dev/using/cli), the
 command-line interface for managing Convex projects.

package.json

@@ -64,6 +64,16 @@
         "import": "./dist/esm/react-clerk/index.js"
       }
     },
+    "./react-descope": {
+      "require": {
+        "types": "./dist/internal-cjs-types/react-descope/index.d.ts",
+        "require": "./dist/cjs/react-descope/index.js"
+      },
+      "import": {
+        "types": "./dist/internal-esm-types/react-descope/index.d.ts",
+        "import": "./dist/esm/react-descope/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-descope": [
+        "./dist/internal-cjs-types/react-descope/index.d.ts"
+      ],
       "nextjs": [
         "./dist/internal-cjs-types/nextjs/index.d.ts"
       ],
@@ -168,6 +181,7 @@
   "peerDependencies": {
     "@auth0/auth0-react": "^2.0.1",
     "@clerk/clerk-react": "^4.12.8",
+    "@descope/react-sdk": "^2.0.10",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
   },
@@ -183,6 +197,9 @@
     },
     "@clerk/clerk-react": {
       "optional": true
+    },
+    "@descope/react-sdk": {
+      "optional": true
     }
   },
   "@comment devDependencies": [
@@ -193,6 +210,7 @@
     "@auth0/auth0-react": "2.0.1",
     "@babel/parser": "^7.21.3",
     "@clerk/clerk-react": "4.18.0",
+    "@descope/react-sdk": "2.0.10",
     "@commander-js/extra-typings": "^11.1.0",
     "@jest/globals": "^28.1.0",
     "@microsoft/api-extractor": "~7.36.4",

react-descope/package.json

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

src/react-descope/ConvexProviderWithDescope.test.tsx

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

src/react-descope/ConvexProviderWithDescope.tsx

@@ -0,0 +1,61 @@
+import { useSession, useDescope, getSessionToken } from "@descope/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 Descope.
+ *
+ * It must be wrapped by a configured `AuthProvider` from `@descope/react-sdk`.
+ *
+ * See [Convex Descope](https://docs.convex.dev/auth/descope) on how to set up
+ * Convex with Descope.
+ *
+ * @public
+ */
+export function ConvexProviderWithDescope({
+  children,
+  client,
+}: {
+  children: ReactNode;
+  client: IConvexReactClient;
+}) {
+  return (
+    <ConvexProviderWithAuth client={client} useAuth={useAuthFromDescope}>
+      {children}
+    </ConvexProviderWithAuth>
+  );
+}
+
+function useAuthFromDescope() {
+  const { isLoading, isAuthenticated } = useSession();
+  const sdk = useDescope();
+
+  const fetchAccessToken = useCallback(async ({ forceRefreshToken }: { forceRefreshToken: boolean }) => {
+    try {
+      if (forceRefreshToken) {
+        sdk.refresh();
+      }
+
+      const token = getSessionToken();
+      return token as string;
+    } catch (error) {
+      return null;
+    }
+  }, []);
+
+  return useMemo(
+    () => ({ isLoading, isAuthenticated, fetchAccessToken }),
+    [isLoading, isAuthenticated, fetchAccessToken],
+  );
+}

src/react-descope/index.ts

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

src/react/ConvexAuthState.tsx

@@ -48,7 +48,7 @@ export function useConvexAuth(): {
   if (authContext === undefined) {
     throw new Error(
       "Could not find `ConvexProviderWithAuth` (or `ConvexProviderWithClerk` " +
-        "or `ConvexProviderWithAuth0`) " +
+        "or `ConvexProviderWithAuth0`" + "or `ConvexProviderWithDescope`) " +
         "as an ancestor component. This component may be missing, or you " +
         "might have two instances of the `convex/react` module loaded in your " +
         "project.",