ras-stack 0.13.0 → 0.15.0

package/README.md

@@ -100,6 +100,19 @@ Applications still own their auth clients, authorization, file-route declaration
 
 Only enable `trustForwardedHeaders` behind a proxy that replaces incoming forwarded headers. Otherwise a client could choose the origin used by the check.
 
+Browser auth flows can share failure classification and pending/error state without sharing forms or navigation:
+
+```tsx
+import { classifySignInFailure } from 'ras-stack/auth/client'
+import { useAuthAction } from 'ras-stack/auth/react'
+
+const signIn = useAuthAction({ failureMessage: (failure) => messageFor(classifySignInFailure(failure)) })
+const result = await signIn.run(() => authClient.signIn.email({ email, password }))
+if (!result.error) await navigateAfterSignIn()
+```
+
+Applications retain field models, validation, password-reset disclosure policy, two-factor transitions, telemetry, copy, and success navigation.
+
 ## Database lifecycle
 
 The SQLite entrypoint owns the native client lifecycle, standard safety PRAGMAs, and optional Drizzle migrations while returning the upstream typed database:
@@ -182,6 +195,20 @@ live.close()
 disconnect()
 ```
 
+React applications can keep transport ownership equally small while retaining the native client and subscription:
+
+```tsx
+import { useCallback } from 'react'
+import { useConnectedRealtimeClient, useRealtimePresence, useRealtimeSubscription } from 'ras-stack/realtime/react'
+
+const createClient = useCallback(() => createSameOriginRealtimeClient({ getToken }), [workspaceId])
+const client = useConnectedRealtimeClient(createClient)
+const subscription = useRealtimeSubscription({ client, channel, options, configure })
+const clients = useRealtimePresence(subscription)
+```
+
+The factory, subscription options, and configure callback should have stable identities and change only when their corresponding lifecycle should restart.
+
 The client helpers return the underlying Centrifuge client and subscription. React ownership, channel conventions, ticket validation, event parsing, presence models, and query invalidation remain application code. `publish()` returns `false` when the publisher is closed, disabled, or at capacity. `close()` rejects new work and waits for accepted publications and their bounded retries to finish.
 
 ## Email and uploads

package/dist/auth/client.d.ts

@@ -0,0 +1,8 @@
+export type AuthFailure = {
+    status?: number;
+    code?: string;
+    message?: string;
+} | null | undefined;
+export type SignInFailureReason = 'invalid_credentials' | 'rate_limited' | 'error';
+export declare function classifySignInFailure(failure: unknown): SignInFailureReason;
+export declare function authFailureMessage(failure: unknown, fallback: string): string;

package/dist/auth/client.js

@@ -0,0 +1,17 @@
+export function classifySignInFailure(failure) {
+    if (!failure || typeof failure !== 'object')
+        return 'error';
+    const status = 'status' in failure ? failure.status : undefined;
+    const code = 'code' in failure ? failure.code : undefined;
+    if (status === 429)
+        return 'rate_limited';
+    if (status === 401 || code === 'INVALID_EMAIL_OR_PASSWORD')
+        return 'invalid_credentials';
+    return 'error';
+}
+export function authFailureMessage(failure, fallback) {
+    if (!failure || typeof failure !== 'object' || !('message' in failure))
+        return fallback;
+    return typeof failure.message === 'string' && failure.message.trim() ? failure.message : fallback;
+}
+//# sourceMappingURL=client.js.map

package/dist/auth/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../../src/auth/client.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,qBAAqB,CAAC,OAAgB;IACpD,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ;QAAE,OAAO,OAAO,CAAA;IAC3D,MAAM,MAAM,GAAG,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAA;IAC/D,MAAM,IAAI,GAAG,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAA;IACzD,IAAI,MAAM,KAAK,GAAG;QAAE,OAAO,cAAc,CAAA;IACzC,IAAI,MAAM,KAAK,GAAG,IAAI,IAAI,KAAK,2BAA2B;QAAE,OAAO,qBAAqB,CAAA;IACxF,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,OAAgB,EAAE,QAAgB;IACnE,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,CAAC,CAAC,SAAS,IAAI,OAAO,CAAC;QAAE,OAAO,QAAQ,CAAA;IACvF,OAAO,OAAO,OAAO,CAAC,OAAO,KAAK,QAAQ,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAA;AACnG,CAAC","sourcesContent":["export type AuthFailure = { status?: number; code?: string; message?: string } | null | undefined\nexport type SignInFailureReason = 'invalid_credentials' | 'rate_limited' | 'error'\n\nexport function classifySignInFailure(failure: unknown): SignInFailureReason {\n  if (!failure || typeof failure !== 'object') return 'error'\n  const status = 'status' in failure ? failure.status : undefined\n  const code = 'code' in failure ? failure.code : undefined\n  if (status === 429) return 'rate_limited'\n  if (status === 401 || code === 'INVALID_EMAIL_OR_PASSWORD') return 'invalid_credentials'\n  return 'error'\n}\n\nexport function authFailureMessage(failure: unknown, fallback: string) {\n  if (!failure || typeof failure !== 'object' || !('message' in failure)) return fallback\n  return typeof failure.message === 'string' && failure.message.trim() ? failure.message : fallback\n}\n"]}

package/dist/auth/react.d.ts

@@ -0,0 +1,18 @@
+export type AuthActionResult<T, TFailure = unknown> = {
+    data?: T;
+    error?: TFailure | null;
+};
+export type AuthActionState = {
+    busy: boolean;
+    error?: string;
+};
+export declare function useAuthAction(options?: {
+    failureMessage?: (failure: unknown) => string;
+}): {
+    busy: boolean;
+    error?: string;
+    clearError: () => void;
+    run: <T, TFailure>(work: () => Promise<AuthActionResult<T, TFailure>>) => Promise<AuthActionResult<T, TFailure> | {
+        error: unknown;
+    }>;
+};

package/dist/auth/react.js

@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { authFailureMessage } from './client.js';
+const defaultFailureMessage = (failure) => authFailureMessage(failure, 'That did not work. Try again.');
+export function useAuthAction(options = {}) {
+    const failureMessage = options.failureMessage ?? defaultFailureMessage;
+    const [state, setState] = useState({ busy: false });
+    const active = useRef(true);
+    const invocation = useRef(0);
+    useEffect(() => {
+        active.current = true;
+        return () => {
+            active.current = false;
+        };
+    }, []);
+    const clearError = useCallback(() => setState((current) => ({ busy: current.busy })), []);
+    const run = useCallback(async (work) => {
+        const current = ++invocation.current;
+        setState({ busy: true });
+        try {
+            const result = await work();
+            if (active.current && current === invocation.current) {
+                setState(result.error ? { busy: false, error: failureMessage(result.error) } : { busy: false });
+            }
+            return result;
+        }
+        catch (error) {
+            if (active.current && current === invocation.current)
+                setState({ busy: false, error: failureMessage(error) });
+            return { error };
+        }
+    }, [failureMessage]);
+    return { ...state, clearError, run };
+}
+//# sourceMappingURL=react.js.map

package/dist/auth/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../src/auth/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAKhD,MAAM,qBAAqB,GAAG,CAAC,OAAgB,EAAE,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,+BAA+B,CAAC,CAAA;AAEhH,MAAM,UAAU,aAAa,CAAC,OAAO,GAAsD,EAAE;IAC3F,MAAM,cAAc,GAAG,OAAO,CAAC,cAAc,IAAI,qBAAqB,CAAA;IACtE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAkB,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAA;IACpE,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC3B,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAC5B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,OAAO,GAAG,IAAI,CAAA;QACrB,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,OAAO,GAAG,KAAK,CAAA;QACxB,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;IACzF,MAAM,GAAG,GAAG,WAAW,CACrB,KAAK,EAAe,IAAkD,EAAE,EAAE;QACxE,MAAM,OAAO,GAAG,EAAE,UAAU,CAAC,OAAO,CAAA;QACpC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;QACxB,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,IAAI,EAAE,CAAA;YAC3B,IAAI,MAAM,CAAC,OAAO,IAAI,OAAO,KAAK,UAAU,CAAC,OAAO,EAAE,CAAC;gBACrD,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAA;YACjG,CAAC;YACD,OAAO,MAAM,CAAA;QACf,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,MAAM,CAAC,OAAO,IAAI,OAAO,KAAK,UAAU,CAAC,OAAO;gBAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;YAC7G,OAAO,EAAE,KAAK,EAAoC,CAAA;QACpD,CAAC;IACH,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAA;IACD,OAAO,EAAE,GAAG,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,CAAA;AACtC,CAAC","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { authFailureMessage } from './client.js'\n\nexport type AuthActionResult<T, TFailure = unknown> = { data?: T; error?: TFailure | null }\nexport type AuthActionState = { busy: boolean; error?: string }\n\nconst defaultFailureMessage = (failure: unknown) => authFailureMessage(failure, 'That did not work. Try again.')\n\nexport function useAuthAction(options: { failureMessage?: (failure: unknown) => string } = {}) {\n  const failureMessage = options.failureMessage ?? defaultFailureMessage\n  const [state, setState] = useState<AuthActionState>({ busy: false })\n  const active = useRef(true)\n  const invocation = useRef(0)\n  useEffect(() => {\n    active.current = true\n    return () => {\n      active.current = false\n    }\n  }, [])\n  const clearError = useCallback(() => setState((current) => ({ busy: current.busy })), [])\n  const run = useCallback(\n    async <T, TFailure>(work: () => Promise<AuthActionResult<T, TFailure>>) => {\n      const current = ++invocation.current\n      setState({ busy: true })\n      try {\n        const result = await work()\n        if (active.current && current === invocation.current) {\n          setState(result.error ? { busy: false, error: failureMessage(result.error) } : { busy: false })\n        }\n        return result\n      } catch (error) {\n        if (active.current && current === invocation.current) setState({ busy: false, error: failureMessage(error) })\n        return { error } satisfies AuthActionResult<never>\n      }\n    },\n    [failureMessage],\n  )\n  return { ...state, clearError, run }\n}\n"]}

package/dist/realtime/react.d.ts

@@ -0,0 +1,13 @@
+import type { Centrifuge, ClientInfo, Subscription, SubscriptionOptions } from 'centrifuge';
+export declare function useConnectedRealtimeClient(create: () => Centrifuge, enabled?: boolean): Centrifuge | undefined;
+export type RealtimeSubscriptionHookOptions = {
+    client?: Centrifuge;
+    channel?: string;
+    enabled?: boolean;
+    options?: SubscriptionOptions;
+    configure?: (subscription: Subscription) => void | (() => void);
+};
+export declare function useRealtimeSubscription(options: RealtimeSubscriptionHookOptions): Subscription | undefined;
+export declare function useRealtimePresence(subscription: Subscription | undefined, options?: {
+    onError?: (error: unknown) => void;
+}): Record<string, ClientInfo>;

package/dist/realtime/react.js

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import { connectRealtimeClient, openRealtimeSubscription, watchSubscriptionPresence } from './client.js';
+export function useConnectedRealtimeClient(create, enabled = true) {
+    const [client, setClient] = useState();
+    useEffect(() => {
+        if (!enabled) {
+            setClient(undefined);
+            return undefined;
+        }
+        const next = create();
+        setClient(next);
+        return connectRealtimeClient(next);
+    }, [create, enabled]);
+    return client;
+}
+export function useRealtimeSubscription(options) {
+    const [subscription, setSubscription] = useState();
+    const { channel, client, configure, enabled = true, options: subscriptionOptions } = options;
+    useEffect(() => {
+        if (!enabled || !client || !channel) {
+            setSubscription(undefined);
+            return undefined;
+        }
+        const opened = openRealtimeSubscription(client, channel, subscriptionOptions, configure);
+        setSubscription(opened.subscription);
+        return opened.close;
+    }, [channel, client, configure, enabled, subscriptionOptions]);
+    return subscription;
+}
+export function useRealtimePresence(subscription, options = {}) {
+    const [clients, setClients] = useState({});
+    const onError = options.onError;
+    useEffect(() => {
+        if (!subscription) {
+            setClients({});
+            return undefined;
+        }
+        let active = true;
+        const stop = watchSubscriptionPresence(subscription, (next) => {
+            if (active)
+                setClients(next);
+        }, onError ? { onError } : {});
+        return () => {
+            active = false;
+            stop();
+        };
+    }, [onError, subscription]);
+    return clients;
+}
+//# sourceMappingURL=react.js.map

package/dist/realtime/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../src/realtime/react.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAA;AAExG,MAAM,UAAU,0BAA0B,CAAC,MAAwB,EAAE,OAAO,GAAG,IAAI;IACjF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAc,CAAA;IAClD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,SAAS,CAAC,SAAS,CAAC,CAAA;YACpB,OAAO,SAAS,CAAA;QAClB,CAAC;QACD,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;QACrB,SAAS,CAAC,IAAI,CAAC,CAAA;QACf,OAAO,qBAAqB,CAAC,IAAI,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;IACrB,OAAO,MAAM,CAAA;AACf,CAAC;AAUD,MAAM,UAAU,uBAAuB,CAAC,OAAwC;IAC9E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAgB,CAAA;IAChE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,OAAO,CAAA;IAC5F,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;YACpC,eAAe,CAAC,SAAS,CAAC,CAAA;YAC1B,OAAO,SAAS,CAAA;QAClB,CAAC;QACD,MAAM,MAAM,GAAG,wBAAwB,CAAC,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,SAAS,CAAC,CAAA;QACxF,eAAe,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;QACpC,OAAO,MAAM,CAAC,KAAK,CAAA;IACrB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAC9D,OAAO,YAAY,CAAA;AACrB,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,YAAsC,EAAE,OAAO,GAA2C,EAAE;IAC9H,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA6B,EAAE,CAAC,CAAA;IACtE,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAA;IAC/B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,UAAU,CAAC,EAAE,CAAC,CAAA;YACd,OAAO,SAAS,CAAA;QAClB,CAAC;QACD,IAAI,MAAM,GAAG,IAAI,CAAA;QACjB,MAAM,IAAI,GAAG,yBAAyB,CACpC,YAAY,EACZ,CAAC,IAAI,EAAE,EAAE;YACP,IAAI,MAAM;gBAAE,UAAU,CAAC,IAAI,CAAC,CAAA;QAC9B,CAAC,EACD,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAC3B,CAAA;QACD,OAAO,GAAG,EAAE;YACV,MAAM,GAAG,KAAK,CAAA;YACd,IAAI,EAAE,CAAA;QACR,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAA;IAC3B,OAAO,OAAO,CAAA;AAChB,CAAC","sourcesContent":["import type { Centrifuge, ClientInfo, Subscription, SubscriptionOptions } from 'centrifuge'\nimport { useEffect, useState } from 'react'\nimport { connectRealtimeClient, openRealtimeSubscription, watchSubscriptionPresence } from './client.js'\n\nexport function useConnectedRealtimeClient(create: () => Centrifuge, enabled = true) {\n  const [client, setClient] = useState<Centrifuge>()\n  useEffect(() => {\n    if (!enabled) {\n      setClient(undefined)\n      return undefined\n    }\n    const next = create()\n    setClient(next)\n    return connectRealtimeClient(next)\n  }, [create, enabled])\n  return client\n}\n\nexport type RealtimeSubscriptionHookOptions = {\n  client?: Centrifuge\n  channel?: string\n  enabled?: boolean\n  options?: SubscriptionOptions\n  configure?: (subscription: Subscription) => void | (() => void)\n}\n\nexport function useRealtimeSubscription(options: RealtimeSubscriptionHookOptions) {\n  const [subscription, setSubscription] = useState<Subscription>()\n  const { channel, client, configure, enabled = true, options: subscriptionOptions } = options\n  useEffect(() => {\n    if (!enabled || !client || !channel) {\n      setSubscription(undefined)\n      return undefined\n    }\n    const opened = openRealtimeSubscription(client, channel, subscriptionOptions, configure)\n    setSubscription(opened.subscription)\n    return opened.close\n  }, [channel, client, configure, enabled, subscriptionOptions])\n  return subscription\n}\n\nexport function useRealtimePresence(subscription: Subscription | undefined, options: { onError?: (error: unknown) => void } = {}) {\n  const [clients, setClients] = useState<Record<string, ClientInfo>>({})\n  const onError = options.onError\n  useEffect(() => {\n    if (!subscription) {\n      setClients({})\n      return undefined\n    }\n    let active = true\n    const stop = watchSubscriptionPresence(\n      subscription,\n      (next) => {\n        if (active) setClients(next)\n      },\n      onError ? { onError } : {},\n    )\n    return () => {\n      active = false\n      stop()\n    }\n  }, [onError, subscription])\n  return clients\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ras-stack",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Composable full-stack primitives shared across Richard Solomou's applications.",
   "keywords": [
     "authentication",
@@ -30,6 +30,14 @@
       "types": "./dist/auth/index.d.ts",
       "default": "./dist/auth/index.js"
     },
+    "./auth/client": {
+      "types": "./dist/auth/client.d.ts",
+      "default": "./dist/auth/client.js"
+    },
+    "./auth/react": {
+      "types": "./dist/auth/react.d.ts",
+      "default": "./dist/auth/react.js"
+    },
     "./email": {
       "types": "./dist/email/index.d.ts",
       "default": "./dist/email/index.js"
@@ -58,6 +66,10 @@
       "types": "./dist/realtime/client.d.ts",
       "default": "./dist/realtime/client.js"
     },
+    "./realtime/react": {
+      "types": "./dist/realtime/react.d.ts",
+      "default": "./dist/realtime/react.js"
+    },
     "./server": {
       "types": "./dist/server/index.d.ts",
       "default": "./dist/server/index.js"
@@ -109,6 +121,8 @@
     "@types/better-sqlite3": "9.6.0",
     "@types/node": "^26.0.0",
     "@types/nodemailer": "^8.0.1",
+    "@types/react": "19.2.8",
+    "@types/react-test-renderer": "19.1.0",
     "better-sqlite3": "12.11.1",
     "centrifuge": "5.7.0",
     "drizzle-orm": "0.45.2",
@@ -117,6 +131,8 @@
     "oxlint": "^1.74.0",
     "oxlint-tsgolint": "^7.0.2001",
     "postgres": "3.4.9",
+    "react": "19.2.8",
+    "react-test-renderer": "19.2.8",
     "tus-js-client": "^4.3.1",
     "typescript": "^7.0.2",
     "vite": "8.2.1",
@@ -130,6 +146,7 @@
     "drizzle-orm": ">=0.45 <1",
     "nodemailer": ">=9 <10",
     "postgres": ">=3.4 <4",
+    "react": ">=19 <20",
     "tus-js-client": ">=4 <5"
   },
   "peerDependenciesMeta": {
@@ -154,6 +171,9 @@
     "postgres": {
       "optional": true
     },
+    "react": {
+      "optional": true
+    },
     "tus-js-client": {
       "optional": true
     }