From 4147127c62b057de6ff485fa710e6155c2321254 Mon Sep 17 00:00:00 2001 From: H Jordan Date: Fri, 23 May 2025 12:31:19 -0500 Subject: [PATCH 1/4] setting tokens via useFlatfileHook --- .../react/src/components/FlatfileContext.tsx | 2 ++ .../react/src/components/FlatfileProvider.tsx | 20 +++++++++---------- packages/react/src/hooks/useFlatfile.ts | 4 +++- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/react/src/components/FlatfileContext.tsx b/packages/react/src/components/FlatfileContext.tsx index d9c99005..4d7e1e3b 100644 --- a/packages/react/src/components/FlatfileContext.tsx +++ b/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({ listener: new FlatfileListener(), setListener: () => {}, accessToken: undefined, + setPublishableKey: () => {}, setAccessToken: () => {}, addSheet: () => {}, removeSheet: () => {}, diff --git a/packages/react/src/components/FlatfileProvider.tsx b/packages/react/src/components/FlatfileProvider.tsx index 3dc26308..84eeff98 100644 --- a/packages/react/src/components/FlatfileProvider.tsx +++ b/packages/react/src/components/FlatfileProvider.tsx @@ -47,6 +47,9 @@ export const FlatfileProvider: React.FC = ({ }) => { const onClose = useRef 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 = ({ const [ready, setReady] = useState(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 = ({ const { data: reUsedSpace } = await getSpace({ space: { id: createSpace.space.id, accessToken: internalAccessToken }, apiUrl, - spaceUrl: config?.spaceUrl, }) debugLogger('Found space:', { reUsedSpace }) @@ -361,9 +360,9 @@ export const FlatfileProvider: React.FC = ({ 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() } } @@ -373,7 +372,7 @@ export const FlatfileProvider: React.FC = ({ const providerValue = useMemo( (): FlatfileContextType => ({ - ...(publishableKey ? { publishableKey } : {}), + ...(internalPublishableKey ? { publishableKey: internalPublishableKey } : {}), ...(internalAccessToken ? { accessToken: internalAccessToken } : {}), apiUrl, environmentId, @@ -384,6 +383,7 @@ export const FlatfileProvider: React.FC = ({ setSessionSpace, setListener, listener, + setPublishableKey: setInternalPublishableKey, setAccessToken: setInternalAccessToken, addSheet, updateSheet, @@ -401,7 +401,7 @@ export const FlatfileProvider: React.FC = ({ iframe, }), [ - publishableKey, + internalPublishableKey, internalAccessToken, apiUrl, environmentId, diff --git a/packages/react/src/hooks/useFlatfile.ts b/packages/react/src/hooks/useFlatfile.ts index 98544a82..b8f3f86b 100644 --- a/packages/react/src/hooks/useFlatfile.ts +++ b/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, From a97e7093bc9cf2daa151f268af5fc37fb1cbd048 Mon Sep 17 00:00:00 2001 From: H Jordan Date: Fri, 23 May 2025 12:42:05 -0500 Subject: [PATCH 2/4] ensure token hygiene --- .../react/src/components/FlatfileProvider.tsx | 38 ++++++++++++++++++- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/FlatfileProvider.tsx b/packages/react/src/components/FlatfileProvider.tsx index 84eeff98..254fc60a 100644 --- a/packages/react/src/components/FlatfileProvider.tsx +++ b/packages/react/src/components/FlatfileProvider.tsx @@ -370,6 +370,40 @@ export const FlatfileProvider: React.FC = ({ } }, [ready, open]) + + /** + * Some customer simultaneously support creating new spaces, and re-using existing spaces. + * When using and 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 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. + * When using and 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 => ({ ...(internalPublishableKey ? { publishableKey: internalPublishableKey } : {}), @@ -383,8 +417,8 @@ export const FlatfileProvider: React.FC = ({ setSessionSpace, setListener, listener, - setPublishableKey: setInternalPublishableKey, - setAccessToken: setInternalAccessToken, + setPublishableKey: handleOverridePublishableKey, + setAccessToken: handleOverrideAccessToken, addSheet, updateSheet, removeSheet, From 7b19b7d6bc457cf8e3b03e865e0c95398c73f374 Mon Sep 17 00:00:00 2001 From: H Jordan Date: Fri, 23 May 2025 12:45:47 -0500 Subject: [PATCH 3/4] changeset --- .changeset/slow-masks-film.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/slow-masks-film.md diff --git a/.changeset/slow-masks-film.md b/.changeset/slow-masks-film.md new file mode 100644 index 00000000..e80e5281 --- /dev/null +++ b/.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 From af31e887a92013acbc005854ac6e6a453b6c76f2 Mon Sep 17 00:00:00 2001 From: H Jordan Date: Fri, 23 May 2025 12:54:07 -0500 Subject: [PATCH 4/4] update comment --- packages/react/src/components/FlatfileProvider.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/FlatfileProvider.tsx b/packages/react/src/components/FlatfileProvider.tsx index 254fc60a..3feef351 100644 --- a/packages/react/src/components/FlatfileProvider.tsx +++ b/packages/react/src/components/FlatfileProvider.tsx @@ -371,9 +371,9 @@ export const FlatfileProvider: React.FC = ({ }, [ready, open]) - /** + /** * Some customer simultaneously support creating new spaces, and re-using existing spaces. - * When using and EXISTING space, the expectation is that the accessToken is set, but the publishableKey is not. + * 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. @@ -390,7 +390,7 @@ export const FlatfileProvider: React.FC = ({ /** * Some customer simultaneously support creating new spaces, and re-using existing spaces. - * When using and EXISTING space, the expectation is that the accessToken is set, but the publishableKey is not. + * 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.