popup messege to log in in HowTo

src/App.js

@@ -116,7 +116,12 @@ const App = () => {
             />
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId/howto`}
-              element={<Challenge section={2} />}
+              element={
+                <Challenge
+                  popUpMessageHandler={popUpMessageHandler}
+                  section={2}
+                />
+              }
             />
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId/myentries`}

src/components/specific_challenge/Challenge.js

@@ -48,7 +48,13 @@ const Challenge = (props) => {
           />
         );
       case 2:
-        return <HowTo challengeName={challengeName} user={user} />;
+        return (
+          <HowTo
+            popUpMessageHandler={props.popUpMessageHandler}
+            challengeName={challengeName}
+            user={user}
+          />
+        );
       case 3:
         return <MyEntries challengeName={challengeName} />;
       case 4:

src/components/specific_challenge/HowTo/HowTo.js

@@ -1,16 +1,24 @@
 import React from 'react';
 import getFullUser from '../../../api/getFullUserInfo';
+import KeyCloakService from '../../../services/KeyCloakService';
 import { FlexColumn } from '../../../utils/containers';
 import { IS_MOBILE } from '../../../utils/globals';
 import HowToContent from './sections/HowToContent';
 
 const HowTo = (props) => {
   const [userFullInfo, setUserFullInfo] = React.useState(null);
-  // const [loading, setLoading] = React.useState(true);
 
   React.useEffect(() => {
     getFullUser(setUserFullInfo);
-  }, []);
+
+    if (!KeyCloakService.isLoggedIn()) {
+      props.popUpMessageHandler(
+        'Please log in',
+        'To see everything you must log in',
+        () => KeyCloakService.doLogin
+      );
+    }
+  }, [props]);
 
   return (
     <FlexColumn