Allow adding default player authentication when creating a project (#4714)

* New checkbox in the Project Creation dialog, which will apply best practices for player authentication on the empty project

Author: ClementPasteau

Extensions/PlayerAuthentication/playerauthenticationcomponents.ts

@@ -19,10 +19,11 @@ namespace gdjs {
               'If the window did not open, please check your pop-up blocker and click the button below to try again.',
           }
         : {
-            title: 'Your game is not registered!',
+            title: 'Publish your game!',
             text1:
-              'In order to use player authentication, this game must be registered with GDevelop Services first.',
-            text2: 'Head to your Game Dashboard, then try again.',
+              "GDevelop's player accounts are only available for published games.",
+            text2:
+              'Click the button below to learn how to publish your game then try again.',
           };
 
     /**
@@ -119,7 +120,8 @@ namespace gdjs {
     export const addAuthenticationTextsToLoadingContainer = (
       loaderContainer: HTMLDivElement,
       platform,
-      isGameRegistered
+      isGameRegistered,
+      wikiOpenAction
     ) => {
       const textContainer: HTMLDivElement = document.createElement('div');
       textContainer.id = 'authentication-container-texts';
@@ -151,8 +153,20 @@ namespace gdjs {
       textContainer.appendChild(text2);
 
       if (!isGameRegistered) {
-        // Remove the loader.
+        // Remove the loader and add the wiki link.
         loaderContainer.innerHTML = '';
+
+        if (wikiOpenAction) {
+          const link = document.createElement('a');
+          addTouchAndClickEventListeners(link, wikiOpenAction);
+          link.innerText = 'How to publish my game';
+          link.style.color = '#0078d4';
+          link.style.textDecoration = 'none';
+          link.style.textDecoration = 'underline';
+          link.style.cursor = 'pointer';
+
+          textContainer.appendChild(link);
+        }
       }
 
       loaderContainer.prepend(textContainer);
@@ -170,7 +184,7 @@ namespace gdjs {
     ) => {
       const link = document.createElement('a');
       addTouchAndClickEventListeners(link, onClick);
-      link.innerText = 'Click here to authenticate';
+      link.innerText = 'Try again';
       link.style.color = '#0078d4';
       link.style.textDecoration = 'none';
       link.style.textDecoration = 'underline';

Extensions/PlayerAuthentication/playerauthenticationtools.ts

@@ -622,10 +622,19 @@ namespace gdjs {
       checkIfGameIsRegistered(runtimeScene.getGame(), _gameId)
         .then((isGameRegistered) => {
           if (_authenticationLoaderContainer) {
+            const electron = runtimeScene.getGame().getRenderer().getElectron();
+            const wikiOpenAction = electron
+              ? () =>
+                  electron.shell.openExternal(
+                    'https://wiki.gdevelop.io/gdevelop5/publishing/web'
+                  )
+              : null; // Only show a link if we're on electron.
+
             _authenticationTextContainer = authComponents.addAuthenticationTextsToLoadingContainer(
               _authenticationLoaderContainer,
               platform,
-              isGameRegistered
+              isGameRegistered,
+              wikiOpenAction
             );
           }
           if (isGameRegistered) {

newIDE/app/src/MainFrame/index.js

@@ -85,6 +85,7 @@ import PreferencesContext, {
 import { getFunctionNameFromType } from '../EventsFunctionsExtensionsLoader';
 import { type ExportDialogWithoutExportsProps } from '../Export/ExportDialog';
 import CreateProjectDialog, {
+  createNewProjectWithDefaultLogin,
   type NewProjectSetup,
 } from '../ProjectCreation/CreateProjectDialog';
 import {
@@ -162,6 +163,7 @@ import { type InAppTutorialOrchestratorInterface } from '../InAppTutorial/InAppT
 import useInAppTutorialOrchestrator from '../InAppTutorial/useInAppTutorialOrchestrator';
 import { FLING_GAME_IN_APP_TUTORIAL_ID } from '../InAppTutorial/InAppTutorialProvider';
 import TabsTitlebar from './TabsTitlebar';
+import { registerGame } from '../Utils/GDevelopServices/Game';
 
 const GD_STARTUP_TIMES = global.GD_STARTUP_TIMES || [];
 
@@ -2460,6 +2462,8 @@ const MainFrame = (props: Props) => {
             i18n,
             exampleShortHeader: selectedExampleShortHeader,
           })
+        : newProjectSetup.allowPlayersToLogIn
+        ? await createNewProjectWithDefaultLogin()
         : await createNewProject();
 
       if (!source) return; // New project creation aborted.
@@ -2512,6 +2516,30 @@ const MainFrame = (props: Props) => {
         currentProject.setName(newProjectSetup.projectName);
       }
 
+      if (authenticatedUser.profile) {
+        // if the user is connected, try to register the game to avoid
+        // any gdevelop services to ask the user to register the game.
+        // (for instance, leaderboards, player authentication, ...)
+        try {
+          await registerGame(
+            authenticatedUser.getAuthorizationHeader,
+            authenticatedUser.profile.id,
+            {
+              gameId: currentProject.getProjectUuid(),
+              authorName: currentProject.getAuthor() || 'Unspecified publisher',
+              gameName: currentProject.getName() || 'Untitled game',
+              templateSlug: currentProject.getTemplateSlug(),
+            }
+          );
+        } catch (error) {
+          // Do not prevent the user from opening the game if the registration failed.
+          console.error(
+            'Unable to register the game to the user profile, the game will not be listed in the user profile.',
+            error
+          );
+        }
+      }
+
       const destinationStorageProviderOperations = getStorageProviderOperations(
         newProjectSetup.storageProvider
       );

newIDE/app/src/Profile/CreateProfile.js

@@ -4,9 +4,9 @@ import { Trans } from '@lingui/macro';
 import * as React from 'react';
 import FlatButton from '../UI/FlatButton';
 import RaisedButton from '../UI/RaisedButton';
-import { Column, LargeSpacer } from '../UI/Grid';
+import { Column } from '../UI/Grid';
 import Text from '../UI/Text';
-import { ResponsiveLineStackLayout } from '../UI/Layout';
+import { ColumnStackLayout, ResponsiveLineStackLayout } from '../UI/Layout';
 
 const styles = {
   container: {
@@ -30,8 +30,8 @@ const CreateProfile = ({
 }: Props) => (
   <Column alignItems="center">
     <div style={styles.container}>
-      <Column>
-        <Text>
+      <ColumnStackLayout>
+        <Text noMargin>
           {message || (
             <Trans>
               You are not connected. Create an account to build your game for
@@ -40,7 +40,6 @@ const CreateProfile = ({
             </Trans>
           )}
         </Text>
-        <LargeSpacer />
         <ResponsiveLineStackLayout justifyContent="center" noMargin>
           <RaisedButton
             id="create-account-button"
@@ -50,7 +49,7 @@ const CreateProfile = ({
           />
           <FlatButton label={<Trans>Login</Trans>} onClick={onLogin} />
         </ResponsiveLineStackLayout>
-      </Column>
+      </ColumnStackLayout>
     </div>
   </Column>
 );

newIDE/app/src/ProjectCreation/CreateProjectDialog.js

@@ -37,6 +37,7 @@ export type NewProjectSetup = {|
   width: number,
   orientation: 'landscape' | 'portrait' | 'default',
   optimizeForPixelArt: boolean,
+  allowPlayersToLogIn: boolean,
 |};
 
 export type NewProjectSource = {|
@@ -56,6 +57,22 @@ export const createNewProject = async (): Promise<?NewProjectSource> => {
   };
 };
 
+export const createNewProjectWithDefaultLogin = async (): Promise<?NewProjectSource> => {
+  const url =
+    'https://resources.gdevelop.io/examples-database/login-template.json';
+  sendNewGameCreated({
+    exampleUrl: url,
+    exampleSlug: 'login-template',
+  });
+  return {
+    project: null,
+    storageProvider: UrlStorageProvider,
+    fileMetadata: {
+      fileIdentifier: url,
+    },
+  };
+};
+
 export const createNewProjectFromExampleShortHeader = async ({
   i18n,
   exampleShortHeader,

newIDE/app/src/ProjectCreation/NewProjectSetupDialog.js

@@ -18,7 +18,7 @@ import SelectField from '../UI/SelectField';
 import SelectOption from '../UI/SelectOption';
 import CreateProfile from '../Profile/CreateProfile';
 import Paper from '../UI/Paper';
-import { Line } from '../UI/Grid';
+import { Line, Spacer } from '../UI/Grid';
 import LeftLoader from '../UI/LeftLoader';
 import {
   checkIfHasTooManyCloudProjects,
@@ -28,6 +28,8 @@ import { SubscriptionSuggestionContext } from '../Profile/Subscription/Subscript
 import optionalRequire from '../Utils/OptionalRequire';
 import PreferencesContext from '../MainFrame/Preferences/PreferencesContext';
 import Checkbox from '../UI/Checkbox';
+import Link from '../UI/Link';
+import Window from '../Utils/Window';
 
 const electron = optionalRequire('electron');
 const remote = optionalRequire('@electron/remote');
@@ -106,6 +108,9 @@ const NewProjectSetupDialog = ({
   const [optimizeForPixelArt, setOptimizeForPixelArt] = React.useState<boolean>(
     false
   );
+  const [allowPlayersToLogIn, setAllowPlayersToLogIn] = React.useState<boolean>(
+    false
+  );
   const newProjectsDefaultFolder = app
     ? findEmptyPathInWorkspaceFolder(app, values.newProjectsDefaultFolder || '')
     : '';
@@ -170,6 +175,7 @@ const NewProjectSetupDialog = ({
         width,
         orientation,
         optimizeForPixelArt,
+        allowPlayersToLogIn,
       });
     },
     [
@@ -181,6 +187,7 @@ const NewProjectSetupDialog = ({
       saveAsLocation,
       resolutionOption,
       optimizeForPixelArt,
+      allowPlayersToLogIn,
     ]
   );
 
@@ -332,6 +339,31 @@ const NewProjectSetupDialog = ({
               }}
               disabled={isOpening}
             />
+            <Checkbox
+              checked={allowPlayersToLogIn}
+              label={<Trans>Allow players to authenticate in-game</Trans>}
+              onCheck={(e, checked) => {
+                setAllowPlayersToLogIn(checked);
+              }}
+              disabled={isOpening}
+              tooltipOrHelperText={
+                <Line noMargin>
+                  <Trans>Learn more about</Trans>
+                  <Spacer />
+                  <Link
+                    href="https://wiki.gdevelop.io/gdevelop5/all-features/player-authentication"
+                    onClick={() =>
+                      Window.openExternalURL(
+                        'https://wiki.gdevelop.io/gdevelop5/all-features/player-authentication'
+                      )
+                    }
+                  >
+                    <Trans>player authentication</Trans>
+                  </Link>
+                  .
+                </Line>
+              }
+            />
           </ColumnStackLayout>
         )}
         {limits && hasTooManyCloudProjects ? (

newIDE/app/src/UI/Checkbox.js

@@ -4,6 +4,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormGroup from '@material-ui/core/FormGroup';
 import MUICheckbox from '@material-ui/core/Checkbox';
+import { FormHelperText } from '@material-ui/core';
 
 // Reduce checkbox size to avoid overlapping with other checkboxes.
 const useStyles = makeStyles({
@@ -28,6 +29,7 @@ type Props = {|
   label?: ?React.Node,
   checked: boolean,
   onCheck?: (e: {||}, checked: boolean) => void | Promise<void>,
+  tooltipOrHelperText?: React.Node,
   checkedIcon?: React.Node,
   uncheckedIcon?: React.Node,
   disabled?: boolean,
@@ -69,6 +71,9 @@ const Checkbox = (props: Props) => {
           cursor: 'default',
         }}
       />
+      {props.tooltipOrHelperText && (
+        <FormHelperText>{props.tooltipOrHelperText}</FormHelperText>
+      )}
     </FormGroup>
   ) : (
     checkbox

newIDE/app/src/stories/componentStories/UI/Checkboxes.stories.js

@@ -46,6 +46,13 @@ export const Default = () => {
           checkedIcon={<Visibility />}
           uncheckedIcon={<VisibilityOff />}
         />
+        <LargeSpacer />
+        <Checkbox
+          checked={true}
+          onCheck={(e, value) => {}}
+          label="With some helper text"
+          tooltipOrHelperText="This is some helper text"
+        />
       </Column>
       <Column alignItems="flex-start" expand>
         <Text size="block-title">Inline checkboxes</Text>