tmp: dont close callback page

packages/shared/src/components/auth/AuthOptions.tsx

@@ -28,13 +28,14 @@ import type { CloseAuthModalFunc } from '../../hooks/useAuthForms';
 import { useLogContext } from '../../contexts/LogContext';
 import { useSettingsContext } from '../../contexts/SettingsContext';
 import { useToastNotification, useEventListener } from '../../hooks';
-import { isTesting } from '../../lib/constants';
+import { BROADCAST_CHANNEL_NAME, isTesting } from '../../lib/constants';
 import type { SignBackProvider } from '../../hooks/auth/useSignBack';
 import { SIGNIN_METHOD_KEY, useSignBack } from '../../hooks/auth/useSignBack';
 import type { AnonymousUser, LoggedUser } from '../../lib/user';
 import { labels } from '../../lib';
 import type { ButtonProps } from '../buttons/Button';
 import usePersistentState from '../../hooks/usePersistentState';
+import { broadcastMessage } from '../../lib/func';
 
 const AuthDefault = dynamic(
   () => import(/* webpackChunkName: "authDefault" */ './AuthDefault'),
@@ -309,11 +310,17 @@ function AuthOptions({
     onSetActiveDisplay(AuthDisplay.CodeVerification);
   };
 
-  useEventListener(globalThis, 'message', async (e) => {
+  const [channel] = useState(new BroadcastChannel(BROADCAST_CHANNEL_NAME));
+
+  const eventSend = async (e) => {
+    console.log('message received: ', e.data);
+
     if (e.data?.eventKey !== AuthEvent.SocialRegistration || ignoreMessages) {
       return undefined;
     }
 
+    console.log('messaging flow: ', e.data.flow);
+
     if (e.data?.flow) {
       const connected = await getKratosFlow(AuthFlow.Registration, e.data.flow);
 
@@ -376,7 +383,10 @@ function AuthOptions({
     }
 
     return onSetActiveDisplay(AuthDisplay.SocialRegistration);
-  });
+  };
+
+  useEventListener(channel, 'message', eventSend);
+  useEventListener(globalThis, 'message', eventSend);
 
   const onEmailRegistration = (emailAd: string) => {
     // before displaying registration, ensure the email doesn't exist
@@ -410,6 +420,16 @@ function AuthOptions({
     onSetActiveDisplay(defaultDisplay);
   };
 
+  useEffect(() => {
+    console.log('MOUNTED');
+
+    broadcastMessage({ eventKey: 'test' });
+
+    return () => {
+      console.log('UNMOUNTED');
+    };
+  }, []);
+
   return (
     <div
       className={classNames(

packages/shared/src/hooks/auth/useOnboarding.tsx

@@ -5,7 +5,7 @@ import { ActionType } from '../../graphql/actions';
 
 interface UseOnboarding {
   shouldShowAuthBanner: boolean;
-  isOnboardingReady: boolean;
+  isOnboardingActionsReady: boolean;
   hasCompletedEditTags: boolean;
   hasCompletedContentTypes: boolean;
   completeStep: (action: ActionType) => void;
@@ -33,7 +33,7 @@ export const useOnboarding = (): UseOnboarding => {
 
   return {
     shouldShowAuthBanner,
-    isOnboardingReady: isActionsFetched && isAuthReady,
+    isOnboardingActionsReady: isActionsFetched && isAuthReady,
     hasCompletedEditTags,
     hasCompletedContentTypes,
     completeStep: (action: ActionType) => completeAction(action),

packages/shared/src/lib/constants.ts

@@ -143,3 +143,4 @@ export const invalidPlusRegions = [
 export const DeletedPostId = '404';
 
 export const BROADCAST_CHANNEL_NAME = 'dailydev_broadcast';
+export const BROADCAST_CHANNEL = new BroadcastChannel(BROADCAST_CHANNEL_NAME);

packages/webapp/pages/_app.tsx

@@ -62,8 +62,11 @@ const getRedirectUri = () =>
 const getPage = () => window.location.pathname;
 
 function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
-  const { isOnboardingReady, hasCompletedContentTypes, hasCompletedEditTags } =
-    useOnboarding();
+  const {
+    isOnboardingActionsReady,
+    hasCompletedContentTypes,
+    hasCompletedEditTags,
+  } = useOnboarding();
   const didRegisterSwRef = useRef(false);
 
   const { unreadCount } = useNotificationContext();
@@ -78,14 +81,14 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
 
   useEffect(() => {
     if (
-      isOnboardingReady &&
+      isOnboardingActionsReady &&
       (!hasCompletedEditTags || !hasCompletedContentTypes) &&
       !router.pathname.includes('/onboarding')
     ) {
       router.replace('/onboarding');
     }
   }, [
-    isOnboardingReady,
+    isOnboardingActionsReady,
     router,
     hasCompletedEditTags,
     hasCompletedContentTypes,

packages/webapp/pages/onboarding.tsx

@@ -51,6 +51,7 @@ import {
 } from '@dailydotdev/shared/src/lib/featureManagement';
 import { OnboardingHeadline } from '@dailydotdev/shared/src/components/auth';
 import {
+  useActions,
   useConditionalFeature,
   useViewSize,
   ViewSize,
@@ -60,7 +61,10 @@ import type { LoggedUser } from '@dailydotdev/shared/src/lib/user';
 import { useSettingsContext } from '@dailydotdev/shared/src/contexts/SettingsContext';
 import { ChecklistViewState } from '@dailydotdev/shared/src/lib/checklist';
 import { getPathnameWithQuery } from '@dailydotdev/shared/src/lib';
-import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import {
+  BROADCAST_CHANNEL_NAME,
+  webappUrl,
+} from '@dailydotdev/shared/src/lib/constants';
 import dynamic from 'next/dynamic';
 import { usePushNotificationContext } from '@dailydotdev/shared/src/contexts/PushNotificationContext';
 import { PaymentContextProvider } from '@dailydotdev/shared/src/contexts/PaymentContext';
@@ -152,18 +156,15 @@ const seo: NextSeoProps = {
 
 export function OnboardPage(): ReactElement {
   const { isAvailable: canUserInstallPWA } = useInstallPWA();
-  const {
-    isOnboardingReady,
-    hasCompletedEditTags,
-    hasCompletedContentTypes,
-    completeStep,
-  } = useOnboarding();
+  const { hasCompletedEditTags, hasCompletedContentTypes, completeStep } =
+    useOnboarding();
   const router = useRouter();
   const { setSettings, autoDismissNotifications } = useSettingsContext();
   const isLogged = useRef(false);
   const { logSubscriptionEvent } = usePlusSubscription();
   const { user, isAuthReady, anonymous, loginState, isValidRegion } =
     useAuthContext();
+  const { isActionsFetched } = useActions();
   const shouldVerify = anonymous?.shouldVerify;
   const { growthbook } = useGrowthBookContext();
   const { getFeatureValue } = useFeaturesReadyContext();
@@ -224,6 +225,8 @@ export function OnboardPage(): ReactElement {
     OnboardingStep.AndroidPWA,
   ].includes(activeScreen);
 
+  const isOnboardingReady = isAuthReady && (isActionsFetched || !user);
+
   useEffect(() => {
     if (
       !isPageReady ||
@@ -264,6 +267,24 @@ export function OnboardPage(): ReactElement {
     activeScreen,
   ]);
 
+  const [channel] = useState(new BroadcastChannel(BROADCAST_CHANNEL_NAME));
+  useEffect(() => {
+    if (!channel) {
+      return undefined;
+    }
+
+    const func = () => {
+      console.log('onboarding received message');
+    };
+
+    channel.addEventListener('message', func);
+
+    return () => {
+      channel.removeEventListener('message', func);
+      channel.close();
+    };
+  }, [channel]);
+
   const onClickNext: OnboardingOnClickNext = (options) => {
     logEvent({
       event_name: LogEvent.ClickOnboardingNext,