@joai/react 1.0.5 → 2.0.0

package/dist/index.d.mts

@@ -378,7 +378,7 @@ type ManagedContentEditorProps = {
   labels?: ContentToolbarProp['labels'];
   messages?: Partial<ContentEditorMessages>;
   reauthenticateLabel?: string;
-  reauthenticateUrl?: string | ((returnTo: string) => string);
+  reauthenticateUrl?: string | ((returnTo: string) => string | Promise<string>);
   sessionStore?: SessionTokenStore;
   sessionExpiredMessage?: string;
   title?: string;
@@ -404,7 +404,21 @@ declare function ManagedContentEditor({
 }: ManagedContentEditorProps): _$react.JSX.Element;
 //#endregion
 //#region src/content/return-url.d.ts
-declare const getContentSessionReturnUrl: (currentUrl: string) => string;
+type ContentSessionReturnUrlOptions = {
+  currentUrl: string;
+  env?: AppEnv;
+  team: string;
+  sessionStorageKey: string;
+  brand?: string;
+};
+/** Builds a JoAi login URL for the content editor and stores the PKCE secret for the callback. */
+declare const getContentSessionReturnUrl: ({
+  currentUrl,
+  env,
+  team,
+  sessionStorageKey,
+  brand
+}: ContentSessionReturnUrlOptions) => Promise<string>;
 //#endregion
 //#region src/content/draft-store.d.ts
 type BrowserStorage = Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
@@ -413,7 +427,6 @@ declare const createContentDraftStore: (storageKey: string, storage?: BrowserSto
 //#region src/content/use-content-session.d.ts
 type ContentSessionOptions = {
   env?: AppEnv;
-  exchange?: (handoffToken: string) => Promise<string>;
   sessionStore?: SessionTokenStore;
   sessionStorageKey: string;
   team: string;
@@ -425,10 +438,9 @@ type ContentSession = {
 };
 declare const useContentSession: ({
   env,
-  exchange,
   sessionStore,
   sessionStorageKey,
   team
 }: ContentSessionOptions) => ContentSession;
 //#endregion
-export { ContentClient, ContentContext, ContentContextValue, ContentDraft, ContentDraftStore, ContentEditor, ContentEditorConfig, ContentEditorMessages, ContentEditorProp, ContentImagePickerLabels, ContentProvider, ContentProviderProp, ContentResource, ContentResponse, ContentSession, ContentSessionOptions, ContentToolbar, ContentToolbarProp, EditableContent, EditableContentProp, EditableImage, EditableImageProp, EmbedChatInput, EmbedChatItem, EmbedChatList, type ImageCompressionOptions, type ImageCropOptions, type ImageCropRectangle, type ImageCropState, type ImageDimensionRules, type ImageDimensions, ImageProcessingOptions, ManagedContentEditor, ManagedContentEditorProps, SessionTokenStore, StreamDataHandler, clearRoom, containedImageDimensions, createContentDraftStore, createSessionTokenStore, cropOutputDimensions, getContentSessionReturnUrl, getOrCreateGuestId, imageCropRectangle, loadRoom, openEventSourceStream, processImageFile, readImageDimensions, saveRoom, useContent, useContentSession, useContentValue, useEmbedChat, useUnsavedNavigation, validateImageDimensions, validateImageFile };
+export { ContentClient, ContentContext, ContentContextValue, ContentDraft, ContentDraftStore, ContentEditor, ContentEditorConfig, ContentEditorMessages, ContentEditorProp, ContentImagePickerLabels, ContentProvider, ContentProviderProp, ContentResource, ContentResponse, ContentSession, ContentSessionOptions, ContentSessionReturnUrlOptions, ContentToolbar, ContentToolbarProp, EditableContent, EditableContentProp, EditableImage, EditableImageProp, EmbedChatInput, EmbedChatItem, EmbedChatList, type ImageCompressionOptions, type ImageCropOptions, type ImageCropRectangle, type ImageCropState, type ImageDimensionRules, type ImageDimensions, ImageProcessingOptions, ManagedContentEditor, ManagedContentEditorProps, SessionTokenStore, StreamDataHandler, clearRoom, containedImageDimensions, createContentDraftStore, createSessionTokenStore, cropOutputDimensions, getContentSessionReturnUrl, getOrCreateGuestId, imageCropRectangle, loadRoom, openEventSourceStream, processImageFile, readImageDimensions, saveRoom, useContent, useContentSession, useContentValue, useEmbedChat, useUnsavedNavigation, validateImageDimensions, validateImageFile };

package/dist/index.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { containedImageDimensions, containedImageDimensions as containedImageDimensions$1, cropOutputDimensions, cropOutputDimensions as cropOutputDimensions$1, getLoginUrl, imageCropRectangle, imageCropRectangle as imageCropRectangle$1, validateImageDimensions } from "@joai/core";
-import { createClient, getAuthFragmentToken } from "@joai/sdk";
+import { containedImageDimensions, containedImageDimensions as containedImageDimensions$1, cropOutputDimensions, cropOutputDimensions as cropOutputDimensions$1, imageCropRectangle, imageCropRectangle as imageCropRectangle$1, validateImageDimensions } from "@joai/core";
+import { beginBrowserAppAuth, completeBrowserAppAuth } from "@joai/sdk";
 //#region src/guest.ts
 function safeGet(key) {
 	try {
@@ -1592,10 +1592,17 @@ const createContentDraftStore = (storageKey, storage) => {
 };
 //#endregion
 //#region src/content/return-url.ts
-const getContentSessionReturnUrl = (currentUrl) => {
-	const returnUrl = new URL(currentUrl);
-	returnUrl.searchParams.set("platform", "app");
-	return returnUrl.toString();
+/** Builds a JoAi login URL for the content editor and stores the PKCE secret for the callback. */
+const getContentSessionReturnUrl = async ({ currentUrl, env, team, sessionStorageKey, brand }) => {
+	const callback = new URL(currentUrl);
+	callback.hash = "";
+	return beginBrowserAppAuth({
+		callbackUrl: callback.toString(),
+		env,
+		team,
+		brand,
+		storageKey: `${sessionStorageKey}:auth`
+	});
 };
 //#endregion
 //#region src/content/session-store.ts
@@ -1659,24 +1666,24 @@ const createSessionTokenStore = (storageKey, storage) => {
 };
 //#endregion
 //#region src/content/use-content-session.ts
-const useContentSession = ({ env = "mainnet", exchange, sessionStore, sessionStorageKey, team }) => {
+const useContentSession = ({ env = "mainnet", sessionStore, sessionStorageKey, team }) => {
 	const defaultStore = useMemo(() => createSessionTokenStore(sessionStorageKey), [sessionStorageKey]);
 	const store = sessionStore ?? defaultStore;
 	const storedToken = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
 	const [handoffToken, setHandoffToken] = useState(null);
 	const [error, setError] = useState(null);
 	useEffect(() => {
-		const handoff = getAuthFragmentToken(window.location.href);
-		if (!handoff) return;
-		window.history.replaceState(null, "", `${window.location.pathname}${window.location.search}`);
 		const completeExchange = async () => {
-			const token = await (exchange ? exchange(handoff) : createClient({
+			const token = await completeBrowserAppAuth({
+				url: window.location.href,
 				env,
-				team
-			}).auth.exchangeNativeSession(handoff).then((response) => {
-				if (!response.ok || !response.data?.token) throw new Error("Session exchange failed.");
-				return response.data.token;
-			}));
+				storageKey: `${sessionStorageKey}:auth`
+			});
+			if (!token) return;
+			const clean = new URL(window.location.href);
+			clean.searchParams.delete("code");
+			clean.searchParams.delete("state");
+			window.history.replaceState(null, "", `${clean.pathname}${clean.search}${clean.hash}`);
 			if (!store.set(token)) throw new Error("Session storage is unavailable.");
 			setHandoffToken(token);
 		};
@@ -1723,7 +1730,7 @@ function createLazyContentClient(env, team, apiToken) {
 			},
 			set onUnauthorized(value) {
 				unauthorized = value;
-				if (real) real.http.onUnauthorized = value;
+				if (real && value) real.http.onUnauthorized = value;
 			}
 		},
 		content: {
@@ -1767,11 +1774,28 @@ function ManagedContentEditor({ authErrorClassName, authErrorMessage = "The sess
 	}, [token]);
 	useEffect(() => {
 		if (!sessionExpired || typeof window === "undefined") return;
-		const returnTo = getContentSessionReturnUrl(window.location.href);
-		setLoginUrl(typeof reauthenticateUrl === "function" ? reauthenticateUrl(returnTo) : reauthenticateUrl ?? getLoginUrl(env, returnTo, { team }));
+		const resolveLoginUrl = async () => {
+			if (typeof reauthenticateUrl === "function") {
+				setLoginUrl(await reauthenticateUrl(window.location.href));
+				return;
+			}
+			if (reauthenticateUrl) {
+				setLoginUrl(reauthenticateUrl);
+				return;
+			}
+			setLoginUrl(await getContentSessionReturnUrl({
+				currentUrl: window.location.href,
+				env,
+				team,
+				sessionStorageKey
+			}));
+		};
+		resolveLoginUrl();
 	}, [
 		env,
+		reauthenticateUrl,
 		sessionExpired,
+		sessionStorageKey,
 		team
 	]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joai/react",
-  "version": "1.0.5",
+  "version": "2.0.0",
   "description": "Reusable React building blocks for JoAi applications",
   "license": "MIT",
   "type": "module",
@@ -21,8 +21,8 @@
     "test": "jest"
   },
   "dependencies": {
-    "@joai/core": "^5.4.0",
-    "@joai/sdk": "^13.0.0"
+    "@joai/core": "^5.4.6",
+    "@joai/sdk": "^14.2.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0"