fix: race condition in livechat popout mode cross origin (#34158)

.changeset/new-mails-add.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/livechat": patch
+---
+
+Fixes issue that caused different sessions when opening a livechat popover in cross domain

packages/livechat/src/components/Screen/ScreenProvider.tsx

@@ -4,6 +4,7 @@ import { useCallback, useContext, useEffect, useState } from 'preact/hooks';
 import { parse } from 'query-string';
 
 import { isActiveSession } from '../../helpers/isActiveSession';
+import { createOrUpdateGuest, evaluateChangesAndLoadConfigByFields } from '../../lib/hooks';
 import { loadConfig } from '../../lib/main';
 import { parentCall } from '../../lib/parentCall';
 import { loadMessages } from '../../lib/room';
@@ -76,7 +77,7 @@ export const ScreenProvider: FunctionalComponent = ({ children }) => {
 	} = useContext(StoreContext);
 	const { department, name, email } = iframe.guest || {};
 	const { color, position: configPosition, background } = config.theme || {};
-	const { livechatLogo, hideWatermark = false } = config.settings || {};
+	const { livechatLogo, hideWatermark = false, registrationForm } = config.settings || {};
 
 	const {
 		color: customColor,
@@ -137,15 +138,26 @@ export const ScreenProvider: FunctionalComponent = ({ children }) => {
 
 	const dismissNotification = () => !isActiveSession();
 
-	const checkPoppedOutWindow = useCallback(() => {
+	const checkPoppedOutWindow = useCallback(async () => {
 		// Checking if the window is poppedOut and setting parent minimized if yes for the restore purpose
 		const poppedOut = parse(window.location.search).mode === 'popout';
+		const { token = '' } = parse(window.location.search);
 		setPopedOut(poppedOut);
 
 		if (poppedOut) {
 			dispatch({ minimized: false, undocked: true });
 		}
-	}, [dispatch]);
+
+		if (token && typeof token === 'string') {
+			if (registrationForm && !name && !email) {
+				dispatch({ token });
+				return;
+			}
+			await evaluateChangesAndLoadConfigByFields(async () => {
+				await createOrUpdateGuest({ token });
+			});
+		}
+	}, [dispatch, email, name, registrationForm]);
 
 	useEffect(() => {
 		checkPoppedOutWindow();

packages/livechat/src/lib/hooks.ts

@@ -11,7 +11,7 @@ import { createToken } from './random';
 import { loadMessages } from './room';
 import Triggers from './triggers';
 
-const evaluateChangesAndLoadConfigByFields = async (fn: () => Promise<void>) => {
+export const evaluateChangesAndLoadConfigByFields = async (fn: () => Promise<void>) => {
 	const oldStore = JSON.parse(
 		JSON.stringify({
 			user: store.state.user || {},
@@ -42,7 +42,7 @@ const evaluateChangesAndLoadConfigByFields = async (fn: () => Promise<void>) =>
 	}
 };
 
-const createOrUpdateGuest = async (guest: StoreState['guest']) => {
+export const createOrUpdateGuest = async (guest: StoreState['guest']) => {
 	if (!guest) {
 		return;
 	}

packages/livechat/src/widget.ts

@@ -489,20 +489,13 @@ const api: InternalWidgetAPI = {
 		if (!config.url) {
 			throw new Error('Config.url is not set!');
 		}
+		const urlToken = token && `&token=${token}`;
+
 		api.popup = window.open(
-			`${config.url}${config.url.lastIndexOf('?') > -1 ? '&' : '?'}mode=popout`,
+			`${config.url}${config.url.lastIndexOf('?') > -1 ? '&' : '?'}mode=popout${urlToken}`,
 			'livechat-popout',
 			`width=${WIDGET_OPEN_WIDTH}, height=${widgetHeight}, toolbars=no`,
 		);
-
-		const data = {
-			src: 'rocketchat',
-			fn: 'setGuestToken',
-			args: [token],
-		};
-
-		api.popup?.postMessage(data, '*');
-		api.popup?.focus();
 	},
 
 	removeWidget() {