Fix/set tokens

.changeset/slow-masks-film.md

@@ -0,0 +1,5 @@
+---
+'@flatfile/react': minor
+---
+
+include new methods - setAccessToken and setPublishableKey - exposed via the useFlatfileHook to allow updates to keys when supporting both create and re-use space scenarios

packages/react/src/components/FlatfileContext.tsx

@@ -42,6 +42,7 @@ export interface FlatfileContextType {
   listener: FlatfileListener
   setListener: (listener: FlatfileListener) => void
   accessToken?: string
+  setPublishableKey: (publishableKey?: string | null) => void
   setAccessToken: (accessToken?: string | null) => void
   addSheet: (config: any) => void
   removeSheet: (sheetSlug: string) => void
@@ -75,6 +76,7 @@ export const FlatfileContext = createContext<FlatfileContextType>({
   listener: new FlatfileListener(),
   setListener: () => {},
   accessToken: undefined,
+  setPublishableKey: () => {},
   setAccessToken: () => {},
   addSheet: () => {},
   removeSheet: () => {},

packages/react/src/components/FlatfileProvider.tsx

@@ -47,6 +47,9 @@ export const FlatfileProvider: React.FC<ExclusiveFlatfileProviderProps> = ({
 }) => {
   const onClose = useRef<undefined | (() => void)>()
   useAttachStyleSheet(config?.styleSheetOptions)
+  const [internalPublishableKey, setInternalPublishableKey] = useState<
+    string | undefined | null
+  >(publishableKey)
   const [internalAccessToken, setInternalAccessToken] = useState<
     string | undefined | null
   >(accessToken)
@@ -90,20 +93,17 @@ export const FlatfileProvider: React.FC<ExclusiveFlatfileProviderProps> = ({
   const [ready, setReady] = useState<boolean>(false)
 
   const handleCreateSpace = async () => {
-    if (!publishableKey) {
+    if (!internalPublishableKey) {
       return
     }
     // autoConfigure if no workbook or workbook.sheets are provided as they should be handled in the listener space:configure event
     const autoConfigure = !createSpace.workbook?.sheets
     const createSpaceConfig = {
       apiUrl,
-      publishableKey,
+      publishableKey: internalPublishableKey,
       space: { ...createSpace.space, autoConfigure },
       workbook: createSpace.workbook,
       document: createSpace.document,
-      ...(config?.externalActorId
-        ? { externalActorId: config.externalActorId }
-        : {}),
     }
     debugLogger('Created space:', { createSpaceConfig })
     const { data: createdSpace } = await createSpaceInternal(createSpaceConfig)
@@ -129,7 +129,6 @@ export const FlatfileProvider: React.FC<ExclusiveFlatfileProviderProps> = ({
       const { data: reUsedSpace } = await getSpace({
         space: { id: createSpace.space.id, accessToken: internalAccessToken },
         apiUrl,
-        spaceUrl: config?.spaceUrl,
       })
       debugLogger('Found space:', { reUsedSpace })
 
@@ -361,19 +360,53 @@ export const FlatfileProvider: React.FC<ExclusiveFlatfileProviderProps> = ({
   useEffect(() => {
     if (ready && open) {
       const createOrUpdateSpace = async () => {
-        if (publishableKey && !internalAccessToken) {
+        if (internalPublishableKey && !internalAccessToken) {
           await handleCreateSpace()
-        } else if (internalAccessToken && !publishableKey) {
+        } else if (internalAccessToken && !internalPublishableKey) {
           await handleReUseSpace()
         }
       }
       createOrUpdateSpace()
     }
   }, [ready, open])
 
+
+  /**
+   * Some customer simultaneously support creating new spaces, and re-using existing spaces.
+   * When creating a NEW space, the expectation is that the publishableKey is set, but the accessToken is not.
+   * (see the useEffect above for selecting between createSpace and handleReUseSpace)
+   * 
+   * This function allows the consumer to override the publishableKey when needed via the useFlatfile hook.
+   * 
+   * @param publishableKey 
+   */
+  const handleOverridePublishableKey = (publishableKey?: string | null) => {
+    if (internalAccessToken) {
+      setInternalAccessToken(null)
+    }
+    setInternalPublishableKey(publishableKey)
+  }
+
+
+  /**
+   * Some customer simultaneously support creating new spaces, and re-using existing spaces.
+   * For re-using an EXISTING space, the expectation is that the accessToken is set, but the publishableKey is not.
+   * (see the useEffect above for selecting between createSpace and handleReUseSpace)
+   * 
+   * This function allows the consumer to override the accessToken when needed via the useFlatfile hook.
+   * 
+   * @param accessToken 
+   */
+  const handleOverrideAccessToken = (accessToken?: string | null) => {
+    if (internalPublishableKey) {
+      setInternalPublishableKey(null)
+    }
+    setInternalAccessToken(accessToken)
+  }
+
   const providerValue = useMemo(
     (): FlatfileContextType => ({
-      ...(publishableKey ? { publishableKey } : {}),
+      ...(internalPublishableKey ? { publishableKey: internalPublishableKey } : {}),
       ...(internalAccessToken ? { accessToken: internalAccessToken } : {}),
       apiUrl,
       environmentId,
@@ -384,7 +417,8 @@ export const FlatfileProvider: React.FC<ExclusiveFlatfileProviderProps> = ({
       setSessionSpace,
       setListener,
       listener,
-      setAccessToken: setInternalAccessToken,
+      setPublishableKey: handleOverridePublishableKey,
+      setAccessToken: handleOverrideAccessToken,
       addSheet,
       updateSheet,
       removeSheet,
@@ -401,7 +435,7 @@ export const FlatfileProvider: React.FC<ExclusiveFlatfileProviderProps> = ({
       iframe,
     }),
     [
-      publishableKey,
+      internalPublishableKey,
       internalAccessToken,
       apiUrl,
       environmentId,

packages/react/src/hooks/useFlatfile.ts

@@ -25,7 +25,7 @@ export const useFlatfile: (useFlatfileOptions?: UseFlatfileOptions) => {
     }
   }, [context.onClose.current, useFlatfileOptions.onClose])
 
-  const { open, setOpen, setListener, listener, apiUrl, resetSpace, ready } =
+  const { open, setOpen, setListener, listener, apiUrl, resetSpace, ready, setAccessToken, setPublishableKey } =
     context
 
   const openPortal = useCallback(() => {
@@ -41,6 +41,8 @@ export const useFlatfile: (useFlatfileOptions?: UseFlatfileOptions) => {
   )
 
   return {
+    setAccessToken,
+    setPublishableKey,
     openPortal,
     closePortal,
     open,