feat: add secure and httpOnly attributes on cookie, set cookie on ser…

…ver side

webapp-next/components/landing/NavbarLanding.tsx

@@ -4,25 +4,25 @@ import {
   Flex,
   Image,
   Box,
-  useBreakpointValue,
   Text,
   useDisclosure,
   Wrap,
   WrapItem,
   CloseButton,
-  Link,
 } from "@chakra-ui/react";
-
 import NextLink from "next/link";
 import { useRouter } from "next/router";
-import cookie from "js-cookie";
-import { ELASTIC_API_KEY_NAME } from "@/utils/tools";
+import useSWR from "swr";
 
 export default function NavbarLanding() {
   const { isOpen, onOpen, onClose } = useDisclosure();
+
   const router = useRouter();
 
-  const hasApiKey = !!cookie.get(ELASTIC_API_KEY_NAME);
+  const { data: user, isLoading: isLoadingUser } = useSWR(
+    "/api/auth/user",
+    (...args) => fetch(...args).then((res) => res.json())
+  );
 
   const links = [
     { label: "Accueil", path: "/" },
@@ -72,7 +72,7 @@ export default function NavbarLanding() {
           <HamburgerIcon onClick={onOpen} display={["inline", "none"]} />
         )}
       </Flex>
-      {hasApiKey ? (
+      {!isLoadingUser && !!user ? (
         <Flex as="nav" bg="white">
           <Button
             as={NextLink}

webapp-next/components/layouts/Menu.tsx

@@ -172,7 +172,6 @@ export function Menu() {
                 label: 'Déconnexion',
                 icon: '/icons/log-out.svg',
                 onClick: () => {
-                  cookie.remove(ELASTIC_API_KEY_NAME);
                   triggerInvalidateApiKey({
                     username: context.user.username as string
                   }).then(() => {

webapp-next/components/login/FormLogin.tsx

@@ -109,14 +109,10 @@ export const FormLogin = () => {
   const handleModalTermsAccept = async () => {
     if (code) {
       await triggerCreateUser({ username, versionCGU: "1" });
-      const res = (await triggerVerify({
+      (await triggerVerify({
         username: username,
         code: code.toString(),
       })) as any;
-      const result = await res.json();
-      cookie.set(ELASTIC_API_KEY_NAME, result.apiKey.encoded, {
-        expires: 1,
-      });
       onCloseTerms();
       router.push("/bo");
     }
@@ -137,9 +133,6 @@ export const FormLogin = () => {
         if (result.firstLogin) {
           onOpenTerms();
         } else {
-          cookie.set(ELASTIC_API_KEY_NAME, result.apiKey.encoded, {
-            expires: 1,
-          });
           router.push("/bo");
         }
         setIsLoading(false);
@@ -162,13 +155,7 @@ export const FormLogin = () => {
       setIsLoading(true);
       const res = (await triggerLogin({ username, password })) as any;
       if (res.ok) {
-        const result = await res.json();
-        if (process.env.NODE_ENV === "development") {
-          cookie.set(ELASTIC_API_KEY_NAME, result.encoded, {
-            expires: 1,
-          });
-          router.push("/bo");
-        }
+        if (process.env.NODE_ENV === "development") router.push("/bo");
         startTimer();
         setShowCodeForm(true);
         setIsLoading(false);

webapp-next/pages/api/auth/index.ts

@@ -2,7 +2,8 @@ import { sendMail } from '@/utils/mailter';
 import {
   generateCode,
   getCodeEmailHtml,
-  ELASTIC_API_KEY_NAME
+  ELASTIC_API_KEY_NAME,
+  setCookieServerSide
 } from '@/utils/tools';
 import { Client } from '@elastic/elasticsearch';
 import fs from 'fs';
@@ -74,6 +75,7 @@ export default async function handler(
       });
 
       if (process.env.NODE_ENV === 'development') {
+        setCookieServerSide(res, securityToken.encoded);
         res.status(200).json(securityToken);
       } else {
         tmpCodes[username] = { code: generateCode(), apiKey: securityToken };

webapp-next/pages/api/auth/invalidate-api-key.ts

@@ -1,3 +1,4 @@
+import { ELASTIC_API_KEY_NAME } from "@/utils/tools";
 import { Client } from "@elastic/elasticsearch";
 import fs from "fs";
 import type { NextApiRequest, NextApiResponse } from "next";
@@ -27,6 +28,12 @@ export default async function handler(
         username,
       });
 
+      res.setHeader("Set-Cookie", [
+        `${ELASTIC_API_KEY_NAME}=; Path=/; HttpOnly; Max-Age=-1; ${
+          process.env.NODE_ENV !== "development" ? "Secure" : ""
+        }`,
+      ]);
+
       res.status(200).json(invalidatedApiKey);
     } catch (error: any) {
       res.status(500).end();

webapp-next/pages/api/auth/verify-code.ts

@@ -3,6 +3,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import fs from "fs";
 import path from "path";
 import rateLimit from "@/utils/rate-limit";
+import { setCookieServerSide } from "@/utils/tools";
 const tmpCodes = require("../../../utils/codes");
 
 const limiter = rateLimit({
@@ -54,6 +55,10 @@ export default async function handler(
         firstLogin = true;
       }
 
+      if (!firstLogin) {
+        setCookieServerSide(res, codeObj.apiKey.encoded)
+      }
+
       res.status(200).json({
         apiKey:
           firstLogin && process.env.NODE_ENV !== "development"

webapp-next/utils/tools.ts

@@ -1,6 +1,7 @@
 import { format } from 'date-fns';
 import moment from 'moment';
 import { Filters, SearchCategory, View } from './cm2d-provider';
+import { NextApiResponse } from 'next';
 
 export const viewRefs: { label: string; value: View }[] = [
   { label: 'Vue courbe', value: 'line' },
@@ -754,3 +755,16 @@ export function removeAccents(str: string) {
 
 export const ELASTIC_API_KEY_NAME =
   (process.env.NEXT_PUBLIC_ELASTIC_API_KEY_NAME as string) || 'cm2d_api_key';
+
+
+export const setCookieServerSide = (
+  res: NextApiResponse,
+  securityTokenEncoded: string
+) => {
+  res.setHeader(
+    "Set-Cookie",
+    `${ELASTIC_API_KEY_NAME}=${securityTokenEncoded}; path=/; HttpOnly; ${
+      process.env.NODE_ENV !== "development" ? "Secure;" : ""
+    }`
+  );
+};