Security fix: Use httpOnly Cookies for JWT tokens

packages/alea-frontend/components/DrillConfigurator.tsx

@@ -17,11 +17,9 @@ import {
   BloomDimension,
   CardsWithSmileys,
   SmileyLevel,
-  getAuthHeaders,
-  isLoggedIn,
   smileyToLevel,
 } from '@alea/spec';
-import { SafeHtml } from '@alea/react-utils';
+import { SafeHtml, useIsLoggedIn } from '@alea/react-utils';
 import { ConfigureLevelSlider } from '@alea/stex-react-renderer';
 import { PRIMARY_COL, SECONDARY_COL, Window, stableShuffle } from '@alea/utils';
 import axios from 'axios';
@@ -175,7 +173,7 @@ function CoverageConfigurator({
     }
     setCheckedChapterIdxs(newChecked);
   };
-  const loggedIn = isLoggedIn();
+  const loggedIn = useIsLoggedIn();
   const router = useRouter();
   const { flashCards: t } = getLocaleObject(router);
 
@@ -291,7 +289,7 @@ function ReviseAndDrillButtons({
   shuffle: boolean;
   setShuffle: (r: boolean) => void;
 }) {
-  const loggedIn = isLoggedIn();
+  const loggedIn = useIsLoggedIn();
   const isDisabled = selectedCards.length === 0;
   const router = useRouter();
   const { flashCards: t } = getLocaleObject(router);
@@ -378,7 +376,7 @@ export function DrillConfigurator({ courseId }: { courseId: string }) {
   const [mode, setMode] = useState(FlashCardMode.REVISION_MODE);
   const [shuffle, setShuffle] = useState(true);
 
-  const loggedIn = isLoggedIn();
+  const loggedIn = useIsLoggedIn();
 
   const sectionCounts = getSectionCounts(levels, loggedIn, courseCards);
   const selectedChapters = checkedChapterIdxs.map((idx) => sectionCounts[idx].sectionTitle);
@@ -388,9 +386,7 @@ export function DrillConfigurator({ courseId }: { courseId: string }) {
     if (!courseId) return;
     setIsLoading(true);
     axios
-      .get(`/api/get-cards-with-smileys/${courseId}`, {
-        headers: getAuthHeaders(),
-      })
+      .get(`/api/get-cards-with-smileys/${courseId}`)
       .then((r) => {
         setIsLoading(false);
         setCourseCards(r.data);

packages/alea-frontend/components/FlashCards.tsx

@@ -22,10 +22,9 @@ import {
   SmileyCognitiveValues,
   SmileyType,
   getUriSmileys,
-  isLoggedIn,
   smileyToLevel,
 } from '@alea/spec';
-import { SafeHtml } from '@alea/react-utils';
+import { SafeHtml, useIsLoggedIn } from '@alea/react-utils';
 import {
   FixedPositionMenu,
   LayoutWithFixedMenu,
@@ -73,7 +72,7 @@ export function FlashCardFooter({
   needUpdateMarker: any;
   onFlip: () => void;
 }) {
-  const loggedIn = isLoggedIn();
+  const loggedIn = useIsLoggedIn();
   const { locale } = useRouter();
   const { flashCards: t } = getLocaleObject({ locale });
   return (

packages/alea-frontend/components/Header.tsx

@@ -3,8 +3,8 @@ import HelpIcon from '@mui/icons-material/Help';
 import WarningIcon from '@mui/icons-material/Warning';
 import { Box, Button, IconButton, Menu, MenuItem, Toolbar, Tooltip } from '@mui/material';
 import AppBar from '@mui/material/AppBar';
-import { getUserInfo, isLoggedIn, logout } from '@alea/spec';
-import { CountryFlag, useScrollDirection } from '@alea/react-utils';
+import { getUserInfo, logout } from '@alea/spec';
+import { CountryFlag, useIsLoggedIn } from '@alea/react-utils';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -129,7 +129,7 @@ function LanguageButton() {
 }
 
 export function Header({ headerBgColor }: { headerBgColor?: string }) {
-  const loggedIn = isLoggedIn();
+  const loggedIn = useIsLoggedIn();
   const router = useRouter();
   const { header: t } = getLocaleObject(router);
   const background = headerBgColor

packages/alea-frontend/components/NotificationButton.tsx

@@ -13,10 +13,9 @@ import {
   NotificationType,
   getNotificationSeenTime,
   getUserNotifications,
-  isLoggedIn,
   updateNotificationSeenTime,
 } from '@alea/spec';
-import { DateView } from '@alea/react-utils';
+import { DateView, useIsLoggedIn } from '@alea/react-utils';
 import { PRIMARY_COL, localStore } from '@alea/utils';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -113,20 +112,20 @@ function NotificationButton({ bgColor }: { bgColor?: string }) {
   // System info menu crap end
 
   const sortedItems = useNotificationData();
-
+  const isLoggedIn = useIsLoggedIn();
   useEffect(() => {
-    if (isLoggedIn()) {
+    if (isLoggedIn) {
       getNotificationSeenTime().then(setNotificationSeenTime);
     }
-  }, []);
+  }, [isLoggedIn]);
 
   function topUpdate() {
     if (!sortedItems?.length) return '';
     return new Date(sortedItems[0].postedTimestamp).getTime().toString();
   }
 
   function shouldRing(topUpdate) {
-    if (!isLoggedIn()) {
+    if (!isLoggedIn) {
       const lastNotificationSeenTime = localStore?.getItem('notification-seen-time');
       return lastNotificationSeenTime !== topUpdate;
     } else {
@@ -136,7 +135,7 @@ function NotificationButton({ bgColor }: { bgColor?: string }) {
 
   async function handleUpdate(e) {
     setAnchorEl(e.currentTarget);
-    if (!isLoggedIn()) {
+    if (!isLoggedIn) {
       localStore?.setItem('notification-seen-time', topUpdate());
     } else {
       setNotificationSeenTime(topUpdate());
@@ -158,9 +157,9 @@ function NotificationButton({ bgColor }: { bgColor?: string }) {
         sx={{ '& .MuiMenu-list': { pb: 0 } }}
       >
         {sortedItems.slice(0, 7).map((item, idx) => (
-          <Link 
-            key={`${item.link}-${item.postedTimestamp}`} 
-            href={item.link} 
+          <Link
+            key={`${item.link}-${item.postedTimestamp}`}
+            href={item.link}
             target={getLinkTarget(item.notificationType)}
           >
             <MenuItem onClick={handleClose}>

packages/alea-frontend/pages/_app.tsx

@@ -5,7 +5,7 @@ import { initialize } from '@flexiformal/ftml-react';
 import { createInstance, MatomoProvider } from '@jonkoops/matomo-tracker-react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { AppProps } from 'next/app';
-import { CommentRefreshProvider } from '@alea/react-utils';
+import { CommentRefreshProvider, IsLoggedInProvider } from '@alea/react-utils';
 import { useEffect, useState } from 'react';
 import { CurrentTermProvider } from '../contexts/CurrentTermContext';
 import './styles.scss';
@@ -109,6 +109,7 @@ function CustomApp({ Component, pageProps }: AppProps) {
             <MathJaxContext>
               <FTMLReadyContext.Provider value={readyToRender}>
                 <PositionProvider>
+                  <IsLoggedInProvider>
                   <CurrentTermProvider>
                     <div
                       style={{
@@ -121,6 +122,7 @@ function CustomApp({ Component, pageProps }: AppProps) {
                       <Component {...pageProps} />
                     </div>
                   </CurrentTermProvider>
+                  </IsLoggedInProvider>
                 </PositionProvider>
               </FTMLReadyContext.Provider>
             </MathJaxContext>

packages/alea-frontend/pages/api/comment-utils.ts

@@ -1,9 +1,4 @@
-import {
-  Comment,
-  NotificationType,
-  PointsGrant,
-  lmpResponseToUserInfo
-} from '@alea/spec';
+import { Comment, NotificationType, PointsGrant, lmpResponseToUserInfo } from '@alea/spec';
 import axios from 'axios';
 import { NextApiRequest, NextApiResponse } from 'next';
 import mysql from 'serverless-mysql';
@@ -103,8 +98,11 @@ export async function executeTxnAndEndSet500OnError(
 }
 
 export async function getUserInfo(req: NextApiRequest) {
-  if (!req.headers.authorization) return undefined;
-  const headers = { Authorization: req.headers.authorization };
+  const token = req.cookies?.access_token;
+  if (!token) return undefined;
+  const headers = {
+    Authorization: `JWT ${token}`,
+  };
   const lmpServerAddress = process.env.NEXT_PUBLIC_AUTH_SERVER_URL;
   const resp = await axios.get(`${lmpServerAddress}/getuserinfo`, { headers });
   return lmpResponseToUserInfo(resp.data);

packages/alea-frontend/pages/api/cross-domain-auth/exchange-otp.ts

@@ -49,12 +49,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
   const cookieOptions = [
     `access_token=${record.jwtToken}`,
-    /* TODO: Uncomment this when we can handle httpOnly cookies.
     'HttpOnly',
     'Secure',
-    'SameSite=Lax',*/
+    'SameSite=Strict',
     'Path=/',
-    `Max-Age=${365 * 24 * 60 * 60}`, // 1 year
+    `Max-Age=${180 * 24 * 60 * 60}`, // 6 months
   ].join('; ');
 
   res.setHeader('Set-Cookie', cookieOptions).send('Authentication successful');

packages/alea-frontend/pages/api/fake-login/[userId].ts

@@ -19,6 +19,11 @@ export default async function handler(
   access_token = access_token?.split(';')[0];
   if (access_token.startsWith(ACCESS_TOKEN_PREFIX))
     access_token = access_token.substring(ACCESS_TOKEN_PREFIX.length);
+  //TODO: add secure as well once we are on https
+  res.setHeader('Set-Cookie', [
+    `access_token=${access_token}; HttpOnly; Path=/; SameSite=Strict; Max-Age=15552000;`,
+    `is_logged_in=true; Path=/; SameSite=Strict; Max-Age=15552000;`,
+  ]);
 
-  res.status(200).json({ access_token });
+  res.status(200).end();
 }

packages/alea-frontend/pages/api/get-cards-with-smileys/[courseId].ts

@@ -1,7 +1,13 @@
 import { contentToc } from '@flexiformal/ftml-backend';
 import { FTML } from '@flexiformal/ftml';
-import { CardsWithSmileys, getDefiniedaInSection, getDefiniedaInSectionAgg, getUriSmileys } from '@alea/spec';
+import {
+  CardsWithSmileys,
+  getDefiniedaInSectionAgg,
+  getUriSmileyInternal,
+  SmileyCognitiveValues,
+} from '@alea/spec';
 import { getAllCoursesFromDb } from '../get-all-courses';
+import { lmpRedirect } from '../lmp-redirect';
 
 export const EXCLUDED_CHAPTERS = ['Preface', 'Administrativa', 'Resources'];
 const CARDS_CACHE: { [courseId: string]: CourseCards } = {};
@@ -54,10 +60,26 @@ export async function getCardsBySection(notesUri: string) {
   });
   return courseCards;
 }
+async function getUriSmileysBackend(concepts: string[], token: string) {
+  const data = await lmpRedirect(
+    'lmp',
+    'lmp/output/multiple',
+    'POST',
+    null,
+    {
+      concepts,
+      'special-output': '5StepLikertSmileys',
+      'include-confidence': false,
+    },
+    token
+  );
+
+  return getUriSmileyInternal(data, concepts);
+}
 
 export default async function handler(req, res) {
   const { courseId } = req.query;
-  const Authorization = req.headers.authorization;
+  const token = req.cookies?.access_token;
   const courses = await getAllCoursesFromDb();
   const courseInfo = courses[courseId];
   if (!courseInfo) {
@@ -74,10 +96,13 @@ export default async function handler(req, res) {
   for (const chapter of Object.keys(cards)) {
     conceptUris.push(...(cards[chapter]?.cardUris.map((c) => c.conceptUri) || []));
   }
-  const smileyValues = Authorization
-    ? await getUriSmileys(conceptUris, { Authorization })
-    : new Map();
-
+  let smileyValues: Map<string, SmileyCognitiveValues>;
+  try {
+    smileyValues = token ? await getUriSmileysBackend(conceptUris, token) : new Map();
+  } catch (err) {
+    console.error('Error fetching smiley values from LMP:', err);
+    return res.status(500).send('Error fetching smiley values');
+  }
   const output: CardsWithSmileys[] = [];
   for (const sectionTitle of Object.keys(cards)) {
     const { chapterTitle, cardUris } = cards[sectionTitle];

packages/alea-frontend/pages/api/gpt-redirect.ts

@@ -8,7 +8,7 @@ function apiNameToPath(apiName: string, projectName?: string): string {
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
-    const { method, body, headers } = req;
+    const { method, body } = req;
     const { apiname, projectName, ...otherQueryParams } = req.query; // The URL to forward the request to
 
     if (!apiname || typeof apiname !== 'string') {
@@ -20,7 +20,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const url = `${apiNameToPath(apiname, projectName as string)}${
       queryString ? `?${queryString}` : ''
     }`;
-
+    const token = req.cookies?.access_token;
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+    if (token) {
+      headers.Authorization = `JWT ${token}`;
+    }
     const axiosConfig = {
       method: method as Method,
       url,

packages/alea-frontend/pages/api/is-logged-in.ts

@@ -0,0 +1,16 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { getUserId } from './comment-utils';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const token = req.cookies.access_token;
+  try {
+    if (!token || !(await getUserId(req))) throw new Error('No token or invalid user');
+    return res.status(200).json({ isLoggedIn: true });
+  } catch (err) {
+    res.setHeader('Set-Cookie', [
+      'access_token=; HttpOnly; Path=/; SameSite=Lax; Max-Age=0',
+      'is_logged_in=; Path=/; SameSite=Lax; Max-Age=0',
+    ]);
+    return res.status(200).json({ loggedIn: false });
+  }
+}

packages/alea-frontend/pages/api/lmp-redirect.ts

@@ -0,0 +1,56 @@
+import axios, { AxiosError } from 'axios';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { checkIfPostOrSetError } from './comment-utils';
+
+const SERVER_TO_ADDRESS = {
+  lmp: process.env['NEXT_PUBLIC_LMP_URL'],
+  auth: process.env['NEXT_PUBLIC_AUTH_SERVER_URL'],
+};
+
+export async function lmpRedirect(
+  server: 'lmp' | 'auth',
+  apiUrl: string,
+  requestType: 'GET' | 'POST',
+  defaultVal: any,
+  data?: any,
+  token?: string
+) {
+  if (!token) return defaultVal;
+  const headers = {
+    Authorization: `JWT ${token}`,
+  };
+  const serverAddress = SERVER_TO_ADDRESS[server];
+  const fullUrl = `${serverAddress}/${apiUrl}`;
+  const resp =
+    requestType === 'POST'
+      ? await axios.post(fullUrl, data, { headers })
+      : await axios.get(fullUrl, { headers });
+  return resp.data;
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!checkIfPostOrSetError(req, res)) return;
+  try {
+    const { server, apiUrl, requestType, defaultVal, data } = req.body;
+    const token = req.cookies?.access_token;
+    const result = await lmpRedirect(
+      server,
+      apiUrl,
+      requestType,
+      defaultVal,
+      data,
+      token
+    );
+    return res.status(200).json(result);
+  } catch (err) {
+    const error = err as Error | AxiosError;
+    if (axios.isAxiosError(error)) {
+      return res.status(error.response?.status || 500).json({
+        error: error.response?.data || 'Internal Server Error',
+      });
+    } else {
+      console.error('LMP Redirect Error:', error);
+      return res.status(500).json({ error: 'Internal Server Error' });
+    }
+  }
+}