From 702e7f1b67f8395a67490880be2b495fbb94948d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Pasteau?=
 <4895034+ClementPasteau@users.noreply.github.com>
Date: Wed, 5 Feb 2025 17:32:13 +0100
Subject: [PATCH] Games can be played inside the Play section

---
 .../playerauthenticationtools.ts              |   3 +-
 newIDE/app/src/AssetStore/AssetDetails.js     |  29 +-
 newIDE/app/src/AssetStore/AssetsList.js       |  41 +--
 .../PrivateAssetPackInformationPage.js        |  29 +-
 .../PrivateGameTemplateInformationPage.js     |  37 +-
 .../GameDashboard/Feedbacks/FeedbackCard.js   |  21 +-
 .../EditorContainers/HomePage/HomePageMenu.js |   6 +-
 .../EditorContainers/HomePage/PlaySection.js  |  60 ----
 .../PlaySection/GamesPlatformFrame.js         | 112 ++++++
 .../PlaySection/GamesPlatformFrameContext.js  | 334 ++++++++++++++++++
 .../HomePage/PlaySection/index.js             |  42 +++
 newIDE/app/src/MainFrame/Providers.js         |  13 +-
 newIDE/app/src/MainFrame/RouterContext.js     |   3 +-
 newIDE/app/src/MainFrame/TabsTitlebar.js      |   7 +-
 newIDE/app/src/MainFrame/index.js             |  28 +-
 .../app/src/Profile/PublicProfileContext.js   | 199 ++++++++++-
 newIDE/app/src/Profile/PublicProfileDialog.js |  21 +-
 .../app/src/Profile/PublicProfileProvider.js  |  56 ---
 newIDE/app/src/UI/ClosableTabs.js             |   2 +
 newIDE/app/src/UI/GdGamesFrame.js             |   3 +
 newIDE/app/src/UI/Toolbar.js                  |   1 +
 .../app/src/UI/User/UserPublicProfileChip.js  |   4 +-
 .../User/UserPublicProfileTextWithAvatar.js   |   4 +-
 newIDE/app/src/Utils/GDevelopServices/User.js |  16 +
 .../AssetStore/AssetDetails.stories.js        |   2 +-
 25 files changed, 830 insertions(+), 243 deletions(-)
 delete mode 100644 newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection.js
 create mode 100644 newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/GamesPlatformFrame.js
 create mode 100644 newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/GamesPlatformFrameContext.js
 create mode 100644 newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/index.js
 delete mode 100644 newIDE/app/src/Profile/PublicProfileProvider.js

diff --git a/Extensions/PlayerAuthentication/playerauthenticationtools.ts b/Extensions/PlayerAuthentication/playerauthenticationtools.ts
index f2e308ba5a09..3655386255ac 100644
--- a/Extensions/PlayerAuthentication/playerauthenticationtools.ts
+++ b/Extensions/PlayerAuthentication/playerauthenticationtools.ts
@@ -461,8 +461,7 @@ namespace gdjs {
       checkOrigin: boolean;
       onDone?: (status: 'logged' | 'errored' | 'dismissed') => void;
     }) {
-      const allowedOrigins = ['https://liluo.io', 'https://gd.games'];
-      // const allowedOrigins = ['localhost:4000'];
+      const allowedOrigins = ['https://liluo.io', 'https://gd.games', 'http://localhost:4000'];
 
       // Check origin of message.
       if (checkOrigin && !allowedOrigins.includes(event.origin)) {
diff --git a/newIDE/app/src/AssetStore/AssetDetails.js b/newIDE/app/src/AssetStore/AssetDetails.js
index 176aeae88e3f..076c3982961c 100644
--- a/newIDE/app/src/AssetStore/AssetDetails.js
+++ b/newIDE/app/src/AssetStore/AssetDetails.js
@@ -40,9 +40,9 @@ import {
 } from '../Utils/GDevelopServices/User';
 import ArrowRight from '../UI/CustomSvgIcons/ArrowRight';
 import ArrowLeft from '../UI/CustomSvgIcons/ArrowLeft';
-import PublicProfileDialog from '../Profile/PublicProfileDialog';
 import Skeleton from '@material-ui/lab/Skeleton';
 import { AssetPreviewImage } from './AssetPreviewImage';
+import PublicProfileContext from '../Profile/PublicProfileContext';
 
 const FIXED_HEIGHT = 250;
 const FIXED_WIDTH = 300;
@@ -129,10 +129,7 @@ export const AssetDetails = React.forwardRef<Props, AssetDetailsInterface>(
     const [authorPublicProfiles, setAuthorPublicProfiles] = React.useState<
       UserPublicProfile[]
     >([]);
-    const [
-      selectedAuthorPublicProfile,
-      setSelectedAuthorPublicProfile,
-    ] = React.useState<?UserPublicProfile>(null);
+    const { openUserPublicProfile } = React.useContext(PublicProfileContext);
 
     const scrollView = React.useRef<?ScrollViewInterface>(null);
     React.useImperativeHandle(ref, () => ({
@@ -317,7 +314,13 @@ export const AssetDetails = React.forwardRef<Props, AssetDetailsInterface>(
                             key={userPublicProfile.id}
                             href="#"
                             onClick={() =>
-                              setSelectedAuthorPublicProfile(userPublicProfile)
+                              openUserPublicProfile({
+                                userId: userPublicProfile.id,
+                                callbacks: {
+                                  onAssetPackOpen: onPrivateAssetPackSelection,
+                                  onGameTemplateOpen: onPrivateGameTemplateSelection,
+                                },
+                              })
                             }
                           >
                             {username}
@@ -540,20 +543,6 @@ export const AssetDetails = React.forwardRef<Props, AssetDetailsInterface>(
               />
             </Line>
           </Column>
-          {selectedAuthorPublicProfile && (
-            <PublicProfileDialog
-              userId={selectedAuthorPublicProfile.id}
-              onClose={() => setSelectedAuthorPublicProfile(null)}
-              onAssetPackOpen={assetPack => {
-                onPrivateAssetPackSelection(assetPack);
-                setSelectedAuthorPublicProfile(null);
-              }}
-              onGameTemplateOpen={gameTemplate => {
-                onPrivateGameTemplateSelection(gameTemplate);
-                setSelectedAuthorPublicProfile(null);
-              }}
-            />
-          )}
         </Column>
       </ScrollView>
     );
diff --git a/newIDE/app/src/AssetStore/AssetsList.js b/newIDE/app/src/AssetStore/AssetsList.js
index ac796d86542c..fdd9815a8a44 100644
--- a/newIDE/app/src/AssetStore/AssetsList.js
+++ b/newIDE/app/src/AssetStore/AssetsList.js
@@ -42,7 +42,6 @@ import {
   type UserPublicProfile,
 } from '../Utils/GDevelopServices/User';
 import Link from '../UI/Link';
-import PublicProfileDialog from '../Profile/PublicProfileDialog';
 import Window from '../Utils/Window';
 import Breadcrumbs from '../UI/Breadcrumbs';
 import { getFolderTagsFromAssetShortHeaders } from './TagsHelper';
@@ -52,6 +51,7 @@ import FlatButton from '../UI/FlatButton';
 import HelpIcon from '../UI/HelpIcon';
 import { OwnedProductLicense } from './ProductLicense/ProductLicenseOptions';
 import { getUserProductPurchaseUsageType } from './ProductPageHelper';
+import PublicProfileContext from '../Profile/PublicProfileContext';
 
 const ASSETS_DISPLAY_LIMIT = 60;
 
@@ -299,10 +299,7 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
       authorPublicProfile,
       setAuthorPublicProfile,
     ] = React.useState<?UserPublicProfile>(null);
-    const [
-      openAuthorPublicProfileDialog,
-      setOpenAuthorPublicProfileDialog,
-    ] = React.useState<boolean>(false);
+    const { openUserPublicProfile } = React.useContext(PublicProfileContext);
     const [
       isNavigatingInsideFolder,
       setIsNavigatingInsideFolder,
@@ -855,7 +852,19 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
                   <Text displayInlineAsSpan size="sub-title">
                     <Trans>by</Trans>{' '}
                     <Link
-                      onClick={() => setOpenAuthorPublicProfileDialog(true)}
+                      onClick={() =>
+                        openUserPublicProfile({
+                          userId: authorPublicProfile.id,
+                          callbacks: {
+                            onAssetPackOpen: onPrivateAssetPackSelection
+                              ? onPrivateAssetPackSelection
+                              : undefined,
+                            onGameTemplateOpen: onPrivateGameTemplateSelection
+                              ? onPrivateGameTemplateSelection
+                              : undefined,
+                          },
+                        })
+                      }
                       href="#"
                     >
                       {authorPublicProfile.username || ''}
@@ -976,26 +985,6 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
             // It's not an audio pack.
             !isAssetPackAudioOnly(openedAssetPack)) &&
           noResultComponent}
-        {onPrivateAssetPackSelection &&
-          onPrivateGameTemplateSelection &&
-          openAuthorPublicProfileDialog &&
-          authorPublicProfile && (
-            <PublicProfileDialog
-              userId={authorPublicProfile.id}
-              onClose={() => setOpenAuthorPublicProfileDialog(false)}
-              onAssetPackOpen={assetPackListingData => {
-                onPrivateAssetPackSelection(assetPackListingData);
-                setOpenAuthorPublicProfileDialog(false);
-                setAuthorPublicProfile(null);
-              }}
-              onGameTemplateOpen={gameTemplateListingData => {
-                onPrivateGameTemplateSelection(gameTemplateListingData);
-                setOpenAuthorPublicProfileDialog(false);
-                setAuthorPublicProfile(null);
-              }}
-            />
-          )}
-
         {currentPage &&
           assetShortHeaders &&
           assetShortHeaders.length > getPageBreakAssetUpperIndex(0) && (
diff --git a/newIDE/app/src/AssetStore/PrivateAssets/PrivateAssetPackInformationPage.js b/newIDE/app/src/AssetStore/PrivateAssets/PrivateAssetPackInformationPage.js
index 0af7e4a9e4f6..98218cfa7412 100644
--- a/newIDE/app/src/AssetStore/PrivateAssets/PrivateAssetPackInformationPage.js
+++ b/newIDE/app/src/AssetStore/PrivateAssets/PrivateAssetPackInformationPage.js
@@ -29,7 +29,6 @@ import {
   getUserPublicProfile,
   type UserPublicProfile,
 } from '../../Utils/GDevelopServices/User';
-import PublicProfileDialog from '../../Profile/PublicProfileDialog';
 import Link from '../../UI/Link';
 import ResponsiveMediaGallery from '../../UI/ResponsiveMediaGallery';
 import {
@@ -64,6 +63,7 @@ import PasswordPromptDialog from '../PasswordPromptDialog';
 import Window from '../../Utils/Window';
 import RaisedButton from '../../UI/RaisedButton';
 import PrivateAssetPackPurchaseDialog from './PrivateAssetPackPurchaseDialog';
+import PublicProfileContext from '../../Profile/PublicProfileContext';
 
 const cellSpacing = 8;
 
@@ -206,10 +206,7 @@ const PrivateAssetPackInformationPage = ({
   const [isRedeemingProduct, setIsRedeemingProduct] = React.useState<boolean>(
     false
   );
-  const [
-    openSellerPublicProfileDialog,
-    setOpenSellerPublicProfileDialog,
-  ] = React.useState<boolean>(false);
+  const { openUserPublicProfile } = React.useContext(PublicProfileContext);
   const [
     sellerPublicProfile,
     setSellerPublicProfile,
@@ -612,7 +609,13 @@ const PrivateAssetPackInformationPage = ({
                         <Text displayInlineAsSpan size="sub-title">
                           <Link
                             onClick={() =>
-                              setOpenSellerPublicProfileDialog(true)
+                              openUserPublicProfile({
+                                userId: sellerPublicProfile.id,
+                                callbacks: {
+                                  onAssetPackOpen,
+                                  onGameTemplateOpen,
+                                },
+                              })
                             }
                             href="#"
                           >
@@ -791,20 +794,6 @@ const PrivateAssetPackInformationPage = ({
               </ScrollView>
             </Column>
           ) : null}
-          {openSellerPublicProfileDialog && (
-            <PublicProfileDialog
-              userId={sellerId}
-              onClose={() => setOpenSellerPublicProfileDialog(false)}
-              onAssetPackOpen={assetPackListingData => {
-                onAssetPackOpen(assetPackListingData);
-                setOpenSellerPublicProfileDialog(false);
-              }}
-              onGameTemplateOpen={gameTemplateListingData => {
-                onGameTemplateOpen(gameTemplateListingData);
-                setOpenSellerPublicProfileDialog(false);
-              }}
-            />
-          )}
           {displayPasswordPrompt && (
             <PasswordPromptDialog
               onApply={onRedeemAssetPack}
diff --git a/newIDE/app/src/AssetStore/PrivateGameTemplates/PrivateGameTemplateInformationPage.js b/newIDE/app/src/AssetStore/PrivateGameTemplates/PrivateGameTemplateInformationPage.js
index 58ddc4dae6c0..2cc3fe7b718c 100644
--- a/newIDE/app/src/AssetStore/PrivateGameTemplates/PrivateGameTemplateInformationPage.js
+++ b/newIDE/app/src/AssetStore/PrivateGameTemplates/PrivateGameTemplateInformationPage.js
@@ -24,7 +24,6 @@ import {
   getUserPublicProfile,
   type UserPublicProfile,
 } from '../../Utils/GDevelopServices/User';
-import PublicProfileDialog from '../../Profile/PublicProfileDialog';
 import Link from '../../UI/Link';
 import ResponsiveMediaGallery from '../../UI/ResponsiveMediaGallery';
 import {
@@ -59,6 +58,7 @@ import RaisedButton from '../../UI/RaisedButton';
 import Play from '../../UI/CustomSvgIcons/Play';
 import PrivateGameTemplatePurchaseDialog from './PrivateGameTemplatePurchaseDialog';
 import PasswordPromptDialog from '../PasswordPromptDialog';
+import PublicProfileContext from '../../Profile/PublicProfileContext';
 
 const cellSpacing = 8;
 
@@ -158,10 +158,7 @@ const PrivateGameTemplateInformationPage = ({
     setPurchasingPrivateGameTemplateListingData,
   ] = React.useState<?PrivateGameTemplateListingData>(null);
   const [isFetching, setIsFetching] = React.useState<boolean>(false);
-  const [
-    openSellerPublicProfileDialog,
-    setOpenSellerPublicProfileDialog,
-  ] = React.useState<boolean>(false);
+  const { openUserPublicProfile } = React.useContext(PublicProfileContext);
   const [
     sellerPublicProfile,
     setSellerPublicProfile,
@@ -494,7 +491,13 @@ const PrivateGameTemplateInformationPage = ({
                         <Text displayInlineAsSpan size="sub-title">
                           <Link
                             onClick={() =>
-                              setOpenSellerPublicProfileDialog(true)
+                              openUserPublicProfile({
+                                userId: sellerPublicProfile.id,
+                                callbacks: {
+                                  onAssetPackOpen,
+                                  onGameTemplateOpen,
+                                },
+                              })
                             }
                             href="#"
                           >
@@ -633,28 +636,6 @@ const PrivateGameTemplateInformationPage = ({
               </ScrollView>
             </Column>
           ) : null}
-          {openSellerPublicProfileDialog && (
-            <PublicProfileDialog
-              userId={sellerId}
-              onClose={() => setOpenSellerPublicProfileDialog(false)}
-              onGameTemplateOpen={
-                onGameTemplateOpen
-                  ? (gameTemplate: PrivateGameTemplateListingData) => {
-                      setOpenSellerPublicProfileDialog(false);
-                      onGameTemplateOpen(gameTemplate);
-                    }
-                  : undefined
-              }
-              onAssetPackOpen={
-                onAssetPackOpen
-                  ? (assetPack: PrivateAssetPackListingData) => {
-                      setOpenSellerPublicProfileDialog(false);
-                      onAssetPackOpen(assetPack);
-                    }
-                  : undefined
-              }
-            />
-          )}
           {displayPasswordPrompt && (
             <PasswordPromptDialog
               onApply={onWillBuyWithCredits}
diff --git a/newIDE/app/src/GameDashboard/Feedbacks/FeedbackCard.js b/newIDE/app/src/GameDashboard/Feedbacks/FeedbackCard.js
index ed0b338aacc4..11efeacb4db3 100644
--- a/newIDE/app/src/GameDashboard/Feedbacks/FeedbackCard.js
+++ b/newIDE/app/src/GameDashboard/Feedbacks/FeedbackCard.js
@@ -26,7 +26,6 @@ import {
 import { type AuthenticatedUser } from '../../Profile/AuthenticatedUserContext';
 import { useOptimisticState } from '../../Utils/UseOptimisticState';
 import Link from '../../UI/Link';
-import PublicProfileDialog from '../../Profile/PublicProfileDialog';
 import CheckCircleFilled from '../../UI/CustomSvgIcons/CheckCircleFilled';
 import CheckCircle from '../../UI/CustomSvgIcons/CheckCircle';
 import Dislike from '../../UI/CustomSvgIcons/Dislike';
@@ -34,6 +33,7 @@ import Like from '../../UI/CustomSvgIcons/Like';
 import Danger from '../../UI/CustomSvgIcons/Danger';
 import Heart from '../../UI/CustomSvgIcons/Heart';
 import Paper from '../../UI/Paper';
+import PublicProfileContext from '../../Profile/PublicProfileContext';
 
 const styles = {
   textComment: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' },
@@ -94,11 +94,8 @@ const FeedbackCard = ({
   const { getAuthorizationHeader, profile } = authenticatedUser;
   const ratings = getRatings(comment.ratings);
   const theme = React.useContext(GDevelopThemeContext);
-
-  const [
-    openPlayerPublicProfileDialog,
-    setOpenPlayerPublicProfileDialog,
-  ] = React.useState<boolean>(false);
+  const { openUserPublicProfile } = React.useContext(PublicProfileContext);
+  const commenterPlayerId = comment.playerId;
 
   const processComment = async (newProcessed: boolean, i18n: I18nType) => {
     if (!profile) return;
@@ -283,9 +280,11 @@ const FeedbackCard = ({
                       )}
                     </Text>
                   )}
-                  {comment.playerId ? (
+                  {commenterPlayerId ? (
                     <Link
-                      onClick={() => setOpenPlayerPublicProfileDialog(true)}
+                      onClick={() =>
+                        openUserPublicProfile({ userId: commenterPlayerId })
+                      }
                       href="#"
                     >
                       <Text noMargin color="inherit">
@@ -324,12 +323,6 @@ const FeedbackCard = ({
               </Text>
             </Column>
           </Card>
-          {comment.playerId && openPlayerPublicProfileDialog && (
-            <PublicProfileDialog
-              userId={comment.playerId}
-              onClose={() => setOpenPlayerPublicProfileDialog(false)}
-            />
-          )}
         </>
       )}
     </I18n>
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageMenu.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageMenu.js
index 3d366c68419b..af3eb0642d12 100644
--- a/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageMenu.js
+++ b/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageMenu.js
@@ -24,6 +24,8 @@ import AuthenticatedUserContext from '../../../Profile/AuthenticatedUserContext'
 import { isNativeMobileApp } from '../../../Utils/Platform';
 
 export const styles = {
+  // Ensure it's always interactive, even when another iframe disable pointer events.
+  container: { pointerEvents: 'all', display: 'flex' },
   drawerContent: {
     height: '100%',
     width: 250,
@@ -189,7 +191,7 @@ export const HomePageMenu = ({
   ];
 
   return (
-    <>
+    <div style={styles.container}>
       <HomePageMenuBar
         activeTab={activeTab}
         onOpenAbout={onOpenAbout}
@@ -257,6 +259,6 @@ export const HomePageMenu = ({
           </Column>
         </Line>
       </Drawer>
-    </>
+    </div>
   );
 };
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection.js
deleted file mode 100644
index b31cb7519e1e..000000000000
--- a/newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection.js
+++ /dev/null
@@ -1,60 +0,0 @@
-// @flow
-import * as React from 'react';
-import { Trans } from '@lingui/macro';
-import SectionContainer, { SectionRow } from './SectionContainer';
-import GDevelopThemeContext from '../../../UI/Theme/GDevelopThemeContext';
-import PlaceHolderLoader from '../../../UI/PlaceholderLoader';
-import ErrorBoundary from '../../../UI/ErrorBoundary';
-import PromotionsSlideshow from '../../../Promotions/PromotionsSlideshow';
-import { AnnouncementsFeed } from '../../../AnnouncementsFeed';
-import { ColumnStackLayout } from '../../../UI/Layout';
-
-const styles = {
-  iframe: {
-    border: 0,
-  },
-};
-
-const PlaySection = () => {
-  const gdevelopTheme = React.useContext(GDevelopThemeContext);
-  const paletteType = gdevelopTheme.palette.type;
-  const [iframeHeight, setIframeHeight] = React.useState(null);
-
-  window.addEventListener('message', event => {
-    if (
-      event.origin === 'https://gd.games' &&
-      event.data.id === 'set-embedded-height'
-    ) {
-      setIframeHeight(event.data.height);
-    }
-  });
-
-  return (
-    <SectionContainer flexBody>
-      <SectionRow expand>
-        <ColumnStackLayout noMargin>
-          <PromotionsSlideshow />
-          <AnnouncementsFeed canClose={false} level="normal" />
-          <iframe
-            src={`https://gd.games/embedded/${paletteType}`}
-            title="gdgames"
-            style={{ ...styles.iframe, height: iframeHeight }}
-            scrolling="no" // This is deprecated, but this is the only way to disable the scrollbar.
-          />
-          {!iframeHeight && <PlaceHolderLoader />}
-        </ColumnStackLayout>
-      </SectionRow>
-    </SectionContainer>
-  );
-};
-
-const PlaySectionWithErrorBoundary = () => (
-  <ErrorBoundary
-    componentTitle={<Trans>Play section</Trans>}
-    scope="start-page-play"
-  >
-    <PlaySection />
-  </ErrorBoundary>
-);
-
-export default PlaySectionWithErrorBoundary;
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/GamesPlatformFrame.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/GamesPlatformFrame.js
new file mode 100644
index 000000000000..95130953fb2d
--- /dev/null
+++ b/newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/GamesPlatformFrame.js
@@ -0,0 +1,112 @@
+// @flow
+import * as React from 'react';
+import GDevelopThemeContext from '../../../../UI/Theme/GDevelopThemeContext';
+import { useResponsiveWindowSize } from '../../../../UI/Responsive/ResponsiveWindowMeasurer';
+import {
+  homepageDesktopMenuBarWidth,
+  homepageMediumMenuBarWidth,
+} from '../HomePageMenuBar';
+import { SECTION_DESKTOP_SPACING } from '../SectionContainer';
+import Paper from '../../../../UI/Paper';
+
+export const GAMES_PLATFORM_IFRAME_ID = 'games-platform-frame';
+
+const styles = {
+  paper: {
+    position: 'absolute',
+  },
+  iframe: {
+    border: 0,
+  },
+};
+
+// const gdGamesHost = 'https://gd.games';
+const gdGamesHost = 'http://localhost:4000';
+
+type Props = {|
+  loaded: boolean,
+  initialGameId: ?string,
+|};
+
+const GamesPlatformFrame = ({ initialGameId, loaded }: Props) => {
+  const gdevelopTheme = React.useContext(GDevelopThemeContext);
+  const paletteType = gdevelopTheme.palette.type;
+  const { isMobile, isMediumScreen } = useResponsiveWindowSize();
+
+  // Use a ref to store the initial game id, as we don't want to trigger a re-render
+  // when the game id changes.
+  const gameId = React.useRef(initialGameId);
+
+  const url = new URL(
+    gameId.current
+      ? `/embedded/games/${gameId.current}`
+      : `/embedded/${paletteType}`,
+    gdGamesHost
+  );
+  if (gameId.current) url.searchParams.set('theme', paletteType);
+
+  const src = loaded ? url.toString() : '';
+
+  React.useEffect(
+    () => {
+      if (!loaded && initialGameId) {
+        // Every time the frame is unloaded on a gameId, we reset it for the next load.
+        gameId.current = initialGameId;
+      }
+    },
+    [loaded, initialGameId]
+  );
+
+  const containerTop = 37 + 40; // tabs title bar + toolbar
+  const containerLeft = isMobile
+    ? 0
+    : isMediumScreen
+    ? homepageMediumMenuBarWidth
+    : homepageDesktopMenuBarWidth;
+  const containerWidth = isMobile
+    ? '100%'
+    : isMediumScreen
+    ? `calc(100% - ${homepageMediumMenuBarWidth}px`
+    : `calc(100% - ${homepageDesktopMenuBarWidth}px`;
+  const containerHeight = `calc(100% - ${containerTop}px)`;
+
+  const iframeSideMargin = isMobile ? 0 : SECTION_DESKTOP_SPACING;
+  const iframeHeight = 'calc(100% - 4px)';
+  const iframeWidth = `calc(100% - ${2 * iframeSideMargin}px)`;
+
+  // We wrap the iframe in a paper, as its content has a transparent background,
+  // and we don't want what's behing the iframe to be visible.
+  return (
+    <Paper
+      square
+      background="dark"
+      style={{
+        ...styles.paper,
+        width: containerWidth,
+        height: containerHeight,
+        left: containerLeft,
+        top: containerTop,
+      }}
+    >
+      <iframe
+        id={GAMES_PLATFORM_IFRAME_ID}
+        src={src}
+        allow="autoplay; fullscreen *; geolocation; microphone; camera; midi; monetization; xr-spatial-tracking; gamepad; gyroscope; accelerometer; xr; keyboard-map *; focus-without-user-activation *; screen-wake-lock; clipboard-read; clipboard-write"
+        sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts allow-same-origin allow-popups-to-escape-sandbox allow-downloads"
+        title="gdgames"
+        allowFullScreen
+        style={{
+          ...styles.iframe,
+          height: iframeHeight,
+          width: iframeWidth,
+          margin: `0 ${iframeSideMargin}px`,
+        }}
+        onLoad={event => {
+          event.currentTarget.focus();
+        }}
+      />
+    </Paper>
+  );
+};
+
+export default GamesPlatformFrame;
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/GamesPlatformFrameContext.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/GamesPlatformFrameContext.js
new file mode 100644
index 000000000000..0c0874a06a20
--- /dev/null
+++ b/newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/GamesPlatformFrameContext.js
@@ -0,0 +1,334 @@
+// @flow
+import * as React from 'react';
+import GamesPlatformFrame, {
+  GAMES_PLATFORM_IFRAME_ID,
+} from './GamesPlatformFrame';
+import AuthenticatedUserContext from '../../../../Profile/AuthenticatedUserContext';
+import { generateCustomAuthToken } from '../../../../Utils/GDevelopServices/User';
+import PublicProfileContext from '../../../../Profile/PublicProfileContext';
+import RouterContext from '../../../RouterContext';
+
+// If the iframe is displaying a game, it will continue playing its sound as long as the iframe
+// exists, even if it's not visible. So we don't keep it alive for too long.
+const TIMEOUT_TO_UNLOAD_IFRAME_IN_MS = 2000;
+
+type NewProjectActions = {|
+  fetchAndOpenNewProjectSetupDialogForExample: (
+    exampleSlug: string
+  ) => Promise<void>,
+|};
+
+type GamesPlatformFrameState = {|
+  startTimeoutToUnloadIframe: () => void,
+  loadIframeOrRemoveTimeout: () => void,
+  iframeLoaded: boolean,
+  iframeVisible: boolean,
+  configureNewProjectActions: (actions: NewProjectActions) => void,
+|};
+
+export const GamesPlatformFrameContext = React.createContext<GamesPlatformFrameState>(
+  {
+    startTimeoutToUnloadIframe: () => {},
+    loadIframeOrRemoveTimeout: () => {},
+    iframeLoaded: false,
+    iframeVisible: false,
+    configureNewProjectActions: () => {},
+  }
+);
+
+type GamesPlatformFrameStateProviderProps = {|
+  children: React.Node,
+|};
+
+const GamesPlatformFrameStateProvider = ({
+  children,
+}: GamesPlatformFrameStateProviderProps) => {
+  const [loadIframeInDOM, setLoadIframeInDOM] = React.useState(false);
+  const [iframeVisible, setIframeVisible] = React.useState(false);
+  const [iframeLoaded, setIframeLoaded] = React.useState(false);
+  const [lastGameId, setLastGameId] = React.useState<?string>(null);
+  const timeoutToUnloadIframe = React.useRef<?TimeoutID>(null);
+  const { openUserPublicProfile } = React.useContext(PublicProfileContext);
+  const { onOpenLoginDialog, onOpenCreateAccountDialog } = React.useContext(
+    AuthenticatedUserContext
+  );
+  const [
+    newProjectActions,
+    setNewProjectActions,
+  ] = React.useState<?NewProjectActions>(null);
+
+  const { profile, getAuthorizationHeader } = React.useContext(
+    AuthenticatedUserContext
+  );
+  const userId = profile ? profile.id : null;
+  const {
+    navigateToRoute,
+    routeArguments,
+    removeRouteArguments,
+  } = React.useContext(RouterContext);
+
+  const onOpenGameTemplate = React.useCallback(
+    (productId: string) => {
+      navigateToRoute('store', {
+        'game-template': `product-${productId}`,
+      });
+    },
+    [navigateToRoute]
+  );
+
+  const onOpenAssetPack = React.useCallback(
+    (productId: string) => {
+      navigateToRoute('store', {
+        'asset-pack': `product-${productId}`,
+      });
+    },
+    [navigateToRoute]
+  );
+
+  const onOpenExample = React.useCallback(
+    async (exampleSlug: string) => {
+      if (newProjectActions) {
+        await newProjectActions.fetchAndOpenNewProjectSetupDialogForExample(
+          exampleSlug
+        );
+      }
+    },
+    [newProjectActions]
+  );
+
+  const startTimeoutToUnloadIframe = React.useCallback(() => {
+    // The iframe becomes invisible right away,
+    // but we wait a bit before unloading it, so that navigating to another
+    // page doesn't cause the iframe to be reloaded.
+    setIframeVisible(false);
+    timeoutToUnloadIframe.current = setTimeout(() => {
+      setLoadIframeInDOM(false);
+      setIframeLoaded(false);
+    }, TIMEOUT_TO_UNLOAD_IFRAME_IN_MS);
+  }, []);
+
+  const loadIframeOrRemoveTimeout = React.useCallback(() => {
+    if (timeoutToUnloadIframe.current) {
+      clearTimeout(timeoutToUnloadIframe.current);
+      timeoutToUnloadIframe.current = null;
+    }
+
+    // The iframe is loaded on the same page as where it's displayed,
+    // so we assume it's visible right away.
+    setLoadIframeInDOM(true);
+    setIframeVisible(true);
+  }, []);
+
+  const notifyIframeToChangeGame = React.useCallback(
+    (gameId: string) => {
+      console.log('Notify iframe to change game to', gameId);
+      if (iframeLoaded) {
+        // $FlowFixMe - we know it's an iframe.
+        const iframe: ?HTMLIFrameElement = document.getElementById(
+          GAMES_PLATFORM_IFRAME_ID
+        );
+        if (iframe && iframe.contentWindow) {
+          iframe.contentWindow.postMessage(
+            {
+              id: 'open-game',
+              gameId,
+            },
+            '*'
+          );
+        }
+      }
+    },
+    [iframeLoaded]
+  );
+
+  React.useEffect(
+    () => {
+      if (routeArguments['playable-game-id']) {
+        setLastGameId(routeArguments['playable-game-id']);
+        removeRouteArguments(['playable-game-id']);
+
+        // TODO force the iframe to reload?
+      }
+    },
+    [routeArguments, removeRouteArguments]
+  );
+
+  const handleIframeMessage = React.useCallback(
+    async (event: any) => {
+      if (
+        event.origin !== 'https://gd.games' &&
+        event.origin !== 'http://localhost:4000'
+      ) {
+        return;
+      }
+      if (event.data.id === 'pageLoaded') {
+        setIframeLoaded(true);
+        const { gameId } = event.data;
+        // If not set, this will reset the gameId, meaning we're on the homepage.
+        setLastGameId(gameId || null);
+      }
+      if (event.data.id === 'openUserProfile') {
+        openUserPublicProfile({
+          userId: event.data.userId,
+          callbacks: {
+            // Override the default values as the gd.games iframe will handle
+            // those messages instead of the profile frame.
+            onGameOpen: () => {},
+            onExampleOpen: () => {},
+            onGameTemplateOpen: () => {},
+            onAssetPackOpen: () => {},
+          },
+        });
+      }
+      if (event.data.id === 'openLoginDialog') {
+        onOpenLoginDialog();
+      }
+      if (event.data.id === 'openRegisterDialog') {
+        onOpenCreateAccountDialog();
+      }
+      if (event.data.id === 'openGameTemplate') {
+        onOpenGameTemplate(event.data.productId);
+      }
+      if (event.data.id === 'openAssetPack') {
+        onOpenAssetPack(event.data.productId);
+      }
+      if (event.data.id === 'openExample') {
+        if (event.data.exampleSlug) {
+          onOpenExample(event.data.exampleSlug);
+        }
+        if (event.data.exampleShortHeader) {
+          onOpenExample(event.data.exampleShortHeader.slug);
+        }
+      }
+      if (event.data.id === 'openGame') {
+        notifyIframeToChangeGame(event.data.gameId);
+      }
+    },
+    [
+      openUserPublicProfile,
+      onOpenLoginDialog,
+      onOpenCreateAccountDialog,
+      notifyIframeToChangeGame,
+      onOpenGameTemplate,
+      onOpenAssetPack,
+      onOpenExample,
+    ]
+  );
+
+  React.useEffect(
+    () => {
+      window.addEventListener('message', handleIframeMessage);
+
+      return () => {
+        window.removeEventListener('message', handleIframeMessage);
+      };
+    },
+    [handleIframeMessage]
+  );
+
+  const sendTokenToIframeIfConnected = React.useCallback(
+    async () => {
+      if (iframeLoaded && userId) {
+        // The iframe is loaded and the user is authenticated, so we can
+        // send that information to the iframe to automatically log the user in.
+        // $FlowFixMe - we know it's an iframe.
+        const iframe: ?HTMLIFrameElement = document.getElementById(
+          GAMES_PLATFORM_IFRAME_ID
+        );
+        if (iframe && iframe.contentWindow) {
+          try {
+            const userCustomToken = await generateCustomAuthToken(
+              getAuthorizationHeader,
+              userId
+            );
+            iframe.contentWindow.postMessage(
+              {
+                id: 'authenticated-user-custom-token',
+                token: userCustomToken,
+              },
+              // Specify the target origin to avoid leaking the customToken.
+              // Replace with '*' to test locally.
+              // 'https://gd.games'
+              '*'
+            );
+          } catch (error) {
+            console.error(
+              'Error while generating custom token. User will not be logged in in the frame.',
+              error
+            );
+            return;
+          }
+        }
+      }
+    },
+    [iframeLoaded, userId, getAuthorizationHeader]
+  );
+
+  React.useEffect(
+    () => {
+      sendTokenToIframeIfConnected();
+    },
+    [sendTokenToIframeIfConnected]
+  );
+
+  const notifyIframeUserDisconnected = React.useCallback(
+    () => {
+      if (iframeLoaded && !userId) {
+        // $FlowFixMe - we know it's an iframe.
+        const iframe: ?HTMLIFrameElement = document.getElementById(
+          GAMES_PLATFORM_IFRAME_ID
+        );
+        if (iframe && iframe.contentWindow) {
+          iframe.contentWindow.postMessage(
+            {
+              id: 'user-disconnected',
+            },
+            // No need to specify the target origin, as this info is not sensitive.
+            '*'
+          );
+        }
+      }
+    },
+    [iframeLoaded, userId]
+  );
+
+  React.useEffect(
+    () => {
+      notifyIframeUserDisconnected();
+    },
+    [notifyIframeUserDisconnected]
+  );
+
+  const configureNewProjectActions = React.useCallback(
+    (actions: NewProjectActions) => {
+      setNewProjectActions(actions);
+    },
+    [setNewProjectActions]
+  );
+
+  const gamesPlatformFrameState = React.useMemo(
+    () => ({
+      startTimeoutToUnloadIframe,
+      loadIframeOrRemoveTimeout,
+      iframeLoaded,
+      iframeVisible,
+      configureNewProjectActions,
+    }),
+    [
+      startTimeoutToUnloadIframe,
+      loadIframeOrRemoveTimeout,
+      iframeLoaded,
+      iframeVisible,
+      configureNewProjectActions,
+    ]
+  );
+
+  return (
+    <GamesPlatformFrameContext.Provider value={gamesPlatformFrameState}>
+      <GamesPlatformFrame initialGameId={lastGameId} loaded={loadIframeInDOM} />
+      {children}
+    </GamesPlatformFrameContext.Provider>
+  );
+};
+
+export default GamesPlatformFrameStateProvider;
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/index.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/index.js
new file mode 100644
index 000000000000..1f21d5ba57a0
--- /dev/null
+++ b/newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/index.js
@@ -0,0 +1,42 @@
+// @flow
+import * as React from 'react';
+import { Trans } from '@lingui/macro';
+import ErrorBoundary from '../../../../UI/ErrorBoundary';
+import { GamesPlatformFrameContext } from './GamesPlatformFrameContext';
+import SectionContainer, { SectionRow } from '../SectionContainer';
+import PlaceholderLoader from '../../../../UI/PlaceholderLoader';
+
+const PlaySection = () => {
+  const {
+    startTimeoutToUnloadIframe,
+    loadIframeOrRemoveTimeout,
+    iframeLoaded,
+  } = React.useContext(GamesPlatformFrameContext);
+  React.useEffect(
+    () => {
+      loadIframeOrRemoveTimeout();
+      return () => startTimeoutToUnloadIframe();
+    },
+    [startTimeoutToUnloadIframe, loadIframeOrRemoveTimeout]
+  );
+
+  // Iframe will be displayed here if loaded.
+  return iframeLoaded ? null : (
+    <SectionContainer flexBody>
+      <SectionRow expand>
+        <PlaceholderLoader />
+      </SectionRow>
+    </SectionContainer>
+  );
+};
+
+const PlaySectionWithErrorBoundary = () => (
+  <ErrorBoundary
+    componentTitle={<Trans>Play section</Trans>}
+    scope="start-page-play"
+  >
+    <PlaySection />
+  </ErrorBoundary>
+);
+
+export default PlaySectionWithErrorBoundary;
diff --git a/newIDE/app/src/MainFrame/Providers.js b/newIDE/app/src/MainFrame/Providers.js
index a41fd28f989f..b0b54292c856 100644
--- a/newIDE/app/src/MainFrame/Providers.js
+++ b/newIDE/app/src/MainFrame/Providers.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import DragAndDropContextProvider from '../UI/DragAndDrop/DragAndDropContextProvider';
 import AuthenticatedUserProvider from '../Profile/AuthenticatedUserProvider';
-import PublicProfileProvider from '../Profile/PublicProfileProvider';
+import { PublicProfileProvider } from '../Profile/PublicProfileContext';
 import Authentication from '../Utils/GDevelopServices/Authentication';
 import PreferencesProvider from './Preferences/PreferencesProvider';
 import PreferencesContext from './Preferences/PreferencesContext';
@@ -41,6 +41,7 @@ import { CreditsPackageStoreStateProvider } from '../AssetStore/CreditsPackages/
 import { ProductLicenseStoreStateProvider } from '../AssetStore/ProductLicense/ProductLicenseStoreContext';
 import { MarketingPlansStoreStateProvider } from '../MarketingPlans/MarketingPlansStoreContext';
 import { CourseChapterStoreStateProvider } from '../Course/CourseChapterStoreContext';
+import GamesPlatformFrameStateProvider from './EditorContainers/HomePage/PlaySection/GamesPlatformFrameContext';
 
 type Props = {|
   authentication: Authentication,
@@ -114,9 +115,13 @@ const Providers = ({
                                                               <TutorialStateProvider>
                                                                 <AnnouncementsFeedStateProvider>
                                                                   <PrivateAssetsAuthorizationProvider>
-                                                                    {children({
-                                                                      i18n,
-                                                                    })}
+                                                                    <GamesPlatformFrameStateProvider>
+                                                                      {children(
+                                                                        {
+                                                                          i18n,
+                                                                        }
+                                                                      )}
+                                                                    </GamesPlatformFrameStateProvider>
                                                                   </PrivateAssetsAuthorizationProvider>
                                                                 </AnnouncementsFeedStateProvider>
                                                               </TutorialStateProvider>
diff --git a/newIDE/app/src/MainFrame/RouterContext.js b/newIDE/app/src/MainFrame/RouterContext.js
index d4ecd979c299..9c3046e2bd3b 100644
--- a/newIDE/app/src/MainFrame/RouterContext.js
+++ b/newIDE/app/src/MainFrame/RouterContext.js
@@ -23,7 +23,8 @@ type RouteKey =
   | 'tutorial-id'
   | 'course-id'
   | 'create-from-example'
-  | 'recommended-plan-id';
+  | 'recommended-plan-id'
+  | 'playable-game-id';
 export type RouteArguments = { [RouteKey]: string };
 
 export type Router = {|
diff --git a/newIDE/app/src/MainFrame/TabsTitlebar.js b/newIDE/app/src/MainFrame/TabsTitlebar.js
index f5cb499c6408..23704588e3cd 100644
--- a/newIDE/app/src/MainFrame/TabsTitlebar.js
+++ b/newIDE/app/src/MainFrame/TabsTitlebar.js
@@ -15,7 +15,12 @@ type Props = {|
 |};
 
 const styles = {
-  container: { display: 'flex', flexShrink: 0, alignItems: 'flex-end' },
+  container: {
+    display: 'flex',
+    flexShrink: 0,
+    alignItems: 'flex-end',
+    position: 'relative', // to ensure it is displayed above any global iframe.
+  },
   menuIcon: {
     marginLeft: 4,
     marginRight: 4,
diff --git a/newIDE/app/src/MainFrame/index.js b/newIDE/app/src/MainFrame/index.js
index f8c2683a2a65..b4e3bcc10aeb 100644
--- a/newIDE/app/src/MainFrame/index.js
+++ b/newIDE/app/src/MainFrame/index.js
@@ -198,6 +198,8 @@ import { type ObjectWithContext } from '../ObjectsList/EnumerateObjects';
 import useGamesList from '../GameDashboard/UseGamesList';
 import useCapturesManager from './UseCapturesManager';
 import useHomepageWitchForRouting from './UseHomepageWitchForRouting';
+import { GamesPlatformFrameContext } from './EditorContainers/HomePage/PlaySection/GamesPlatformFrameContext';
+import PublicProfileContext from '../Profile/PublicProfileContext';
 
 const GD_STARTUP_TIMES = global.GD_STARTUP_TIMES || [];
 
@@ -513,6 +515,10 @@ const MainFrame = (props: Props) => {
       : false,
   });
 
+  const { iframeVisible: gamesPlatformIframeVisible } = React.useContext(
+    GamesPlatformFrameContext
+  );
+
   const gamesList = useGamesList();
 
   const {
@@ -3383,6 +3389,13 @@ const MainFrame = (props: Props) => {
     }
   }, []);
 
+  const {
+    configureNewProjectActions: configureNewProjectActionsForGamesPlatformFrame,
+  } = React.useContext(GamesPlatformFrameContext);
+  const {
+    configureNewProjectActions: configureNewProjectActionsForProfile,
+  } = React.useContext(PublicProfileContext);
+
   React.useEffect(
     () => {
       openHomePage();
@@ -3450,6 +3463,13 @@ const MainFrame = (props: Props) => {
                 fileMetadataAndStorageProviderName
               );
           }
+
+          configureNewProjectActionsForGamesPlatformFrame({
+            fetchAndOpenNewProjectSetupDialogForExample,
+          });
+          configureNewProjectActionsForProfile({
+            fetchAndOpenNewProjectSetupDialogForExample,
+          });
         })
         .catch(() => {
           /* Ignore errors */
@@ -3687,7 +3707,13 @@ const MainFrame = (props: Props) => {
           const errorBoundaryProps = getEditorErrorBoundaryProps(editorTab.key);
 
           return (
-            <TabContentContainer key={editorTab.key} active={isCurrentTab}>
+            <TabContentContainer
+              key={editorTab.key}
+              active={isCurrentTab}
+              // Deactivate pointer events when the play tab is active, so the iframe
+              // can be interacted with.
+              removePointerEvents={gamesPlatformIframeVisible}
+            >
               <CommandsContextScopedProvider active={isCurrentTab}>
                 <ErrorBoundary
                   componentTitle={errorBoundaryProps.componentTitle}
diff --git a/newIDE/app/src/Profile/PublicProfileContext.js b/newIDE/app/src/Profile/PublicProfileContext.js
index b507d4c729b5..b02dfb22f017 100644
--- a/newIDE/app/src/Profile/PublicProfileContext.js
+++ b/newIDE/app/src/Profile/PublicProfileContext.js
@@ -1,12 +1,43 @@
 // @flow
+
 import * as React from 'react';
 
-export type PublicProfileState = {
-  openUserPublicProfile: string => void,
-};
+import PublicProfileDialog from './PublicProfileDialog';
+import {
+  type PrivateAssetPackListingData,
+  type PrivateGameTemplateListingData,
+} from '../Utils/GDevelopServices/Shop';
+import { type ExampleShortHeader } from '../Utils/GDevelopServices/Example';
+import RouterContext from '../MainFrame/RouterContext';
+
+type NewProjectActions = {|
+  fetchAndOpenNewProjectSetupDialogForExample: (
+    exampleSlug: string
+  ) => Promise<void>,
+|};
+
+type PublicProfileCallbacks = {|
+  onAssetPackOpen?: (
+    privateAssetPackListingData: PrivateAssetPackListingData
+  ) => void,
+  onGameTemplateOpen?: (
+    privateAssetPackListingData: PrivateGameTemplateListingData
+  ) => void,
+  onGameOpen?: (gameId: string) => void,
+  onExampleOpen?: (exampleShortHeader: ExampleShortHeader) => void,
+|};
+
+export type PublicProfileState = {|
+  openUserPublicProfile: ({|
+    userId: string,
+    callbacks?: PublicProfileCallbacks,
+  |}) => void,
+  configureNewProjectActions: (actions: NewProjectActions) => void,
+|};
 
 const initialPublicProfileState = {
-  openUserPublicProfile: (userId: string) => {},
+  openUserPublicProfile: () => {},
+  configureNewProjectActions: () => {},
 };
 
 const PublicProfileContext = React.createContext<PublicProfileState>(
@@ -14,3 +45,163 @@ const PublicProfileContext = React.createContext<PublicProfileState>(
 );
 
 export default PublicProfileContext;
+
+type Props = {|
+  children: React.Node,
+|};
+
+export const PublicProfileProvider = ({ children }: Props) => {
+  const [
+    visitedPublicProfileUserId,
+    setVisitedPublicProfileUserId,
+  ] = React.useState<?string>(null);
+  const [
+    profileCallbacks,
+    setProfileCallbacks,
+  ] = React.useState<?PublicProfileCallbacks>(null);
+  const { navigateToRoute } = React.useContext(RouterContext);
+
+  const [
+    newProjectActions,
+    setNewProjectActions,
+  ] = React.useState<?NewProjectActions>(null);
+
+  const openUserPublicProfile = React.useCallback(
+    ({
+      userId,
+      callbacks,
+    }: {|
+      userId: string,
+      callbacks?: PublicProfileCallbacks,
+    |}): void => {
+      setVisitedPublicProfileUserId(userId);
+      setProfileCallbacks(callbacks);
+    },
+    [setVisitedPublicProfileUserId]
+  );
+
+  const closeUserPublicProfile = React.useCallback(
+    (): void => {
+      setVisitedPublicProfileUserId(null);
+      setProfileCallbacks(null);
+    },
+    [setVisitedPublicProfileUserId]
+  );
+
+  const configureNewProjectActions = React.useCallback(
+    (actions: NewProjectActions) => {
+      setNewProjectActions(actions);
+    },
+    [setNewProjectActions]
+  );
+
+  const publicProfileState: PublicProfileState = React.useMemo(
+    () => ({
+      openUserPublicProfile,
+      configureNewProjectActions,
+    }),
+    [openUserPublicProfile, configureNewProjectActions]
+  );
+
+  const defaultOpenAssetPackCallback = React.useCallback(
+    (privateAssetPackListingData: PrivateAssetPackListingData) => {
+      navigateToRoute('store', {
+        'asset-pack': `product-${privateAssetPackListingData.id}`,
+      });
+    },
+    [navigateToRoute]
+  );
+
+  const defaultOpenGameTemplateCallback = React.useCallback(
+    (privateGameTemplateListingData: PrivateGameTemplateListingData) => {
+      navigateToRoute('store', {
+        'game-template': `product-${privateGameTemplateListingData.id}`,
+      });
+    },
+    [navigateToRoute]
+  );
+
+  const defaultOpenGameCallback = React.useCallback(
+    (gameId: string) => {
+      navigateToRoute('play', {
+        'playable-game-id': gameId,
+      });
+    },
+    [navigateToRoute]
+  );
+
+  const defaultOpenExampleCallback = React.useCallback(
+    async (exampleShortHeader: ExampleShortHeader) => {
+      if (newProjectActions) {
+        console.log('Opening example', exampleShortHeader);
+        await newProjectActions.fetchAndOpenNewProjectSetupDialogForExample(
+          exampleShortHeader.slug
+        );
+      }
+    },
+    [newProjectActions]
+  );
+
+  const onAssetPackOpenCallback = React.useCallback(
+    (privateAssetPackListingData: PrivateAssetPackListingData) => {
+      const action =
+        (profileCallbacks && profileCallbacks.onAssetPackOpen) ||
+        defaultOpenAssetPackCallback;
+      action(privateAssetPackListingData);
+      // Assume that the dialog is awlays closed after the asset pack is opened.
+      closeUserPublicProfile();
+    },
+    [profileCallbacks, closeUserPublicProfile, defaultOpenAssetPackCallback]
+  );
+  const onGameTemplateOpenCallback = React.useCallback(
+    (privateGameTemplateListingData: PrivateGameTemplateListingData) => {
+      const action =
+        (profileCallbacks && profileCallbacks.onGameTemplateOpen) ||
+        defaultOpenGameTemplateCallback;
+      action(privateGameTemplateListingData);
+      // Assume that the dialog is awlays closed after the asset pack is opened.
+      closeUserPublicProfile();
+    },
+    [profileCallbacks, closeUserPublicProfile, defaultOpenGameTemplateCallback]
+  );
+  const onGameOpenCallback = React.useCallback(
+    (gameId: string) => {
+      const action =
+        (profileCallbacks && profileCallbacks.onGameOpen) ||
+        defaultOpenGameCallback;
+      action(gameId);
+      // Assume that the dialog is awlays closed after the game is opened.
+      closeUserPublicProfile();
+    },
+    [profileCallbacks, closeUserPublicProfile, defaultOpenGameCallback]
+  );
+  const onExampleOpenCallback = React.useCallback(
+    (exampleShortHeader: ExampleShortHeader) => {
+      const action =
+        (profileCallbacks && profileCallbacks.onExampleOpen) ||
+        defaultOpenExampleCallback;
+      action(exampleShortHeader);
+      // Assume that the dialog is always closed after the example is opened.
+      closeUserPublicProfile();
+    },
+    [profileCallbacks, closeUserPublicProfile, defaultOpenExampleCallback]
+  );
+
+  return (
+    <React.Fragment>
+      <PublicProfileContext.Provider value={publicProfileState}>
+        {children}
+      </PublicProfileContext.Provider>
+      {visitedPublicProfileUserId && (
+        <PublicProfileDialog
+          userId={visitedPublicProfileUserId}
+          onClose={closeUserPublicProfile}
+          onAssetPackOpen={onAssetPackOpenCallback}
+          onGameTemplateOpen={onGameTemplateOpenCallback}
+          onGameOpen={onGameOpenCallback}
+          onExampleOpen={onExampleOpenCallback}
+        />
+      )}
+    </React.Fragment>
+  );
+};
diff --git a/newIDE/app/src/Profile/PublicProfileDialog.js b/newIDE/app/src/Profile/PublicProfileDialog.js
index 2714b56981e0..47dc405b511c 100644
--- a/newIDE/app/src/Profile/PublicProfileDialog.js
+++ b/newIDE/app/src/Profile/PublicProfileDialog.js
@@ -9,6 +9,7 @@ import {
   type PrivateGameTemplateListingData,
   type PrivateAssetPackListingData,
 } from '../Utils/GDevelopServices/Shop';
+import { type ExampleShortHeader } from '../Utils/GDevelopServices/Example';
 import { useStableUpToDateCallback } from '../Utils/UseStableUpToDateCallback';
 
 type Props = {|
@@ -20,6 +21,8 @@ type Props = {|
   onGameTemplateOpen?: (
     privateAssetPackListingData: PrivateGameTemplateListingData
   ) => void,
+  onGameOpen?: (gameId: string) => void,
+  onExampleOpen?: (exampleShortHeader: ExampleShortHeader) => void,
 |};
 
 const PublicProfileDialog = ({
@@ -27,6 +30,8 @@ const PublicProfileDialog = ({
   onClose,
   onAssetPackOpen,
   onGameTemplateOpen,
+  onGameOpen,
+  onExampleOpen,
 }: Props) => {
   const callbacks = React.useMemo(
     () => ({
@@ -44,8 +49,22 @@ const PublicProfileDialog = ({
             }
           }
         : null,
+      openGame: onGameOpen
+        ? (data: GdGamesMessageEventData) => {
+            if (data.gameId) {
+              onGameOpen(data.gameId);
+            }
+          }
+        : null,
+      openExample: onExampleOpen
+        ? (data: GdGamesMessageEventData) => {
+            if (data.exampleShortHeader) {
+              onExampleOpen(data.exampleShortHeader);
+            }
+          }
+        : null,
     }),
-    [onAssetPackOpen, onGameTemplateOpen]
+    [onAssetPackOpen, onGameTemplateOpen, onGameOpen, onExampleOpen]
   );
 
   const onMessageReceived = React.useCallback(
diff --git a/newIDE/app/src/Profile/PublicProfileProvider.js b/newIDE/app/src/Profile/PublicProfileProvider.js
deleted file mode 100644
index 2a0fd943412c..000000000000
--- a/newIDE/app/src/Profile/PublicProfileProvider.js
+++ /dev/null
@@ -1,56 +0,0 @@
-// @flow
-
-import * as React from 'react';
-
-import PublicProfileDialog from './PublicProfileDialog';
-import PublicProfileContext, {
-  type PublicProfileState,
-} from './PublicProfileContext';
-
-type Props = {|
-  children: React.Node,
-|};
-
-const PublicProfileProvider = ({ children }: Props) => {
-  const [
-    visitedPublicProfileUserId,
-    setVisitedPublicProfileUserId,
-  ] = React.useState<?string>(null);
-
-  const openUserPublicProfile = React.useCallback(
-    (userId: string): void => {
-      setVisitedPublicProfileUserId(userId);
-    },
-    [setVisitedPublicProfileUserId]
-  );
-
-  const closeUserPublicProfile = React.useCallback(
-    (): void => {
-      setVisitedPublicProfileUserId(null);
-    },
-    [setVisitedPublicProfileUserId]
-  );
-
-  const publicProfileState: PublicProfileState = React.useMemo(
-    () => ({
-      openUserPublicProfile: openUserPublicProfile,
-    }),
-    [openUserPublicProfile]
-  );
-
-  return (
-    <React.Fragment>
-      <PublicProfileContext.Provider value={publicProfileState}>
-        {children}
-      </PublicProfileContext.Provider>
-      {visitedPublicProfileUserId && (
-        <PublicProfileDialog
-          userId={visitedPublicProfileUserId}
-          onClose={closeUserPublicProfile}
-        />
-      )}
-    </React.Fragment>
-  );
-};
-
-export default PublicProfileProvider;
diff --git a/newIDE/app/src/UI/ClosableTabs.js b/newIDE/app/src/UI/ClosableTabs.js
index 7a2e04adb854..c6e616837ac5 100644
--- a/newIDE/app/src/UI/ClosableTabs.js
+++ b/newIDE/app/src/UI/ClosableTabs.js
@@ -42,6 +42,7 @@ const styles = {
 
 type TabContentContainerProps = {|
   active: boolean,
+  removePointerEvents?: boolean,
   children: React.Node,
 |};
 
@@ -66,6 +67,7 @@ export class TabContentContainer extends React.Component<TabContentContainerProp
         style={{
           ...styles.tabContentContainer,
           ...(active ? undefined : { display: 'none' }),
+          pointerEvents: this.props.removePointerEvents ? 'none' : undefined,
         }}
       >
         {children}
diff --git a/newIDE/app/src/UI/GdGamesFrame.js b/newIDE/app/src/UI/GdGamesFrame.js
index 41ec54aa7bcd..5bb34ae5db77 100644
--- a/newIDE/app/src/UI/GdGamesFrame.js
+++ b/newIDE/app/src/UI/GdGamesFrame.js
@@ -10,11 +10,14 @@ import {
   type PrivateGameTemplateListingData,
   type PrivateAssetPackListingData,
 } from '../Utils/GDevelopServices/Shop';
+import { type ExampleShortHeader } from '../Utils/GDevelopServices/Example';
 
 export type GdGamesMessageEventData = $ReadOnly<{
   id?: string | any,
   privateAssetPackListingData?: PrivateAssetPackListingData,
   privateGameTemplateListingData?: PrivateGameTemplateListingData,
+  exampleShortHeader?: ExampleShortHeader,
+  gameId?: string,
 }>;
 
 type Props = {|
diff --git a/newIDE/app/src/UI/Toolbar.js b/newIDE/app/src/UI/Toolbar.js
index f4877f1ec244..1a1a59304b17 100644
--- a/newIDE/app/src/UI/Toolbar.js
+++ b/newIDE/app/src/UI/Toolbar.js
@@ -17,6 +17,7 @@ const styles = {
     overflowY: 'hidden',
     paddingLeft: 8,
     paddingRight: 8,
+    position: 'relative', // to ensure it is displayed above any global iframe.
   },
 };
 
diff --git a/newIDE/app/src/UI/User/UserPublicProfileChip.js b/newIDE/app/src/UI/User/UserPublicProfileChip.js
index 8609e8a787c0..57882ec46efc 100644
--- a/newIDE/app/src/UI/User/UserPublicProfileChip.js
+++ b/newIDE/app/src/UI/User/UserPublicProfileChip.js
@@ -34,7 +34,9 @@ export const UserPublicProfileChip = ({
       variant={variant}
       label={user.username}
       key={user.username}
-      onClick={isClickable ? () => openUserPublicProfile(user.id) : null}
+      onClick={
+        isClickable ? () => openUserPublicProfile({ userId: user.id }) : null
+      }
       disableAutoTranslate
     />
   );
diff --git a/newIDE/app/src/UI/User/UserPublicProfileTextWithAvatar.js b/newIDE/app/src/UI/User/UserPublicProfileTextWithAvatar.js
index bb8f00d36ef5..3662ca369a03 100644
--- a/newIDE/app/src/UI/User/UserPublicProfileTextWithAvatar.js
+++ b/newIDE/app/src/UI/User/UserPublicProfileTextWithAvatar.js
@@ -24,7 +24,9 @@ export const UserPublicProfileTextWithAvatar = ({
 
   return (
     <ButtonBase
-      onClick={user ? () => openUserPublicProfile(user.id) : undefined}
+      onClick={
+        user ? () => openUserPublicProfile({ userId: user.id }) : undefined
+      }
       style={{ width: expand ? '100%' : undefined }}
     >
       <LineStackLayout
diff --git a/newIDE/app/src/Utils/GDevelopServices/User.js b/newIDE/app/src/Utils/GDevelopServices/User.js
index 8dbd381ab764..3622f69a800a 100644
--- a/newIDE/app/src/Utils/GDevelopServices/User.js
+++ b/newIDE/app/src/Utils/GDevelopServices/User.js
@@ -756,3 +756,19 @@ export const updateUserCourseProgress = async (
     }
   );
 };
+
+export const generateCustomAuthToken = async (
+  getAuthorizationHeader: () => Promise<string>,
+  userId: string
+): Promise<string> => {
+  const authorizationHeader = await getAuthorizationHeader();
+  const response = await client.post(
+    `/user/action/generate-custom-auth-token`,
+    {},
+    {
+      headers: { Authorization: authorizationHeader },
+      params: { userId },
+    }
+  );
+  return response.data.customAuthToken;
+};
diff --git a/newIDE/app/src/stories/componentStories/AssetStore/AssetStore/AssetDetails.stories.js b/newIDE/app/src/stories/componentStories/AssetStore/AssetStore/AssetDetails.stories.js
index 54f414a05a92..416a70dd0582 100644
--- a/newIDE/app/src/stories/componentStories/AssetStore/AssetStore/AssetDetails.stories.js
+++ b/newIDE/app/src/stories/componentStories/AssetStore/AssetStore/AssetDetails.stories.js
@@ -9,7 +9,7 @@ import {
 } from '../../../../fixtures/GDevelopServicesTestData';
 import { AssetStoreStateProvider } from '../../../../AssetStore/AssetStoreContext';
 import { GDevelopUserApi } from '../../../../Utils/GDevelopServices/ApiConfigs';
-import PublicProfileProvider from '../../../../Profile/PublicProfileProvider';
+import { PublicProfileProvider } from '../../../../Profile/PublicProfileContext';
 import { AssetStoreNavigatorStateProvider } from '../../../../AssetStore/AssetStoreNavigator';
 
 export default {