diff --git a/src/access/magic-links.ts b/src/access/magic-links.ts index 68e8b20..fe5aa9d 100644 --- a/src/access/magic-links.ts +++ b/src/access/magic-links.ts @@ -48,13 +48,26 @@ export function getStoredMagicLinkToken() { return window.sessionStorage.getItem(magicLinkTokenStorageKey) ?? undefined; } +function getUrlMagicLinkToken() { + if (typeof window === 'undefined') { + return undefined; + } + + const url = new URL(window.location.href); + return url.searchParams.get('token')?.trim() || undefined; +} + +export function getActiveMagicLinkToken() { + return getUrlMagicLinkToken() ?? getStoredMagicLinkToken(); +} + export function clearMagicLinkSession() { window.sessionStorage.removeItem(magicLinkTokenStorageKey); } export function initializeMagicLinkSession() { const url = new URL(window.location.href); - const token = url.searchParams.get('token')?.trim(); + const token = getUrlMagicLinkToken(); if (!token) { return; @@ -85,7 +98,7 @@ export function resolveBuiltInMagicLink(token: string | undefined) { } export function magicLinkRequestHeaders(): Record { - const token = getStoredMagicLinkToken(); + const token = getActiveMagicLinkToken(); return token ? { 'X-Access-Token': token } : {}; } diff --git a/src/contexts/DataLayerContext.tsx b/src/contexts/DataLayerContext.tsx index d313661..d74e65d 100644 --- a/src/contexts/DataLayerContext.tsx +++ b/src/contexts/DataLayerContext.tsx @@ -36,7 +36,7 @@ import { } from '../data/data-model'; import { clearMagicLinkSession, - getStoredMagicLinkToken, + getActiveMagicLinkToken, resolveBuiltInMagicLink, } from '../access/magic-links'; import { @@ -190,7 +190,7 @@ function getInitialMagicLinkUser(isRemoteDataLayer: boolean): CurrentUser | unde return undefined; } - const builtInMagicLink = resolveBuiltInMagicLink(getStoredMagicLinkToken()); + const builtInMagicLink = resolveBuiltInMagicLink(getActiveMagicLinkToken()); if (!builtInMagicLink) { return undefined; @@ -226,7 +226,7 @@ export function DataLayerProvider({ children }: PropsWithChildren) { ); const [accessSessionStatus, setAccessSessionStatus] = useState(() => - getStoredMagicLinkToken() + getActiveMagicLinkToken() ? isRemoteDataLayer ? { state: 'loading' } : getInitialMagicLinkUser(isRemoteDataLayer) @@ -247,7 +247,7 @@ export function DataLayerProvider({ children }: PropsWithChildren) { }; useEffect(() => { - const token = getStoredMagicLinkToken(); + const token = getActiveMagicLinkToken(); if (!token) { setAccessSessionStatus({ state: 'idle' }); @@ -293,7 +293,7 @@ export function DataLayerProvider({ children }: PropsWithChildren) { }, [isRemoteDataLayer]); useEffect(() => { - if (!isRemoteDataLayer) { + if (!isRemoteDataLayer || accessSessionStatus.state !== 'ready') { return; } @@ -302,7 +302,7 @@ export function DataLayerProvider({ children }: PropsWithChildren) { .catch((error) => { console.error('Unable to load remote event data.', error); }); - }, [isRemoteDataLayer]); + }, [accessSessionStatus.state, isRemoteDataLayer]); const persistRemoteSnapshot = (snapshotPromise: Promise) => { snapshotPromise.then(applyRemoteSnapshot).catch((error) => {