From fe8dc1e4c6780cdd05fe7cb748e3db8b89e72464 Mon Sep 17 00:00:00 2001
From: Come Tisserand <cometisserand@gmail.com>
Date: Mon, 30 Sep 2024 18:30:25 +0200
Subject: [PATCH] feat(frontend): add API KEY to all requests to bloom backend

---
 frontend/.env.local                      |  5 +++++
 frontend/app/map/page.tsx                | 22 +++++++++++++++++-----
 frontend/services/backend-rest-client.ts | 11 +++++++++--
 3 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 frontend/.env.local

diff --git a/frontend/.env.local b/frontend/.env.local
new file mode 100644
index 00000000..25032cdb
--- /dev/null
+++ b/frontend/.env.local
@@ -0,0 +1,5 @@
+NEXT_PUBLIC_MAPTILER_TO=3IWed9ZbNv0p8UVD6Ogv
+NEXT_PUBLIC_DOMAIN=http://localhost:3000
+
+NEXT_PUBLIC_BACKEND_BASE_URL=http://localhost:8000
+NEXT_PUBLIC_BACKEND_API_KEY=bloom
\ No newline at end of file
diff --git a/frontend/app/map/page.tsx b/frontend/app/map/page.tsx
index 0d212e96..b5b07611 100644
--- a/frontend/app/map/page.tsx
+++ b/frontend/app/map/page.tsx
@@ -5,14 +5,26 @@ import PositionPreview from "@/components/core/map/position-preview"
 import { getVessels, getVesselsLatestPositions } from "@/services/backend-rest-client"
 
 async function fetchVessels() {
-  const response = await getVessels();
-  return response.data ?? [];
+  try {
+      const response = await getVessels();
+      return response?.data;
+
+    } catch(error) {
+      console.log("An error occured while fetching vessels: " + error)
+      return [];
+    }
 }
 
+// TODO(CT): move this logic within a cron job
 async function fetchLatestPositions() {
-  // TODO(CT): move this logic within a cron job
-  const response = await getVesselsLatestPositions();
-  return response.data ?? [];
+  try {
+    const response = await getVesselsLatestPositions();
+    return response?.data;
+    
+  } catch(error) {
+    console.log("An error occured while fetching vessels latest positions: " + error)
+    return [];
+  }
 }
   
 export default async function MapPage() {
diff --git a/frontend/services/backend-rest-client.ts b/frontend/services/backend-rest-client.ts
index 77630657..2d094be1 100644
--- a/frontend/services/backend-rest-client.ts
+++ b/frontend/services/backend-rest-client.ts
@@ -1,8 +1,15 @@
 
 import { Vessel, VesselExcursion, VesselExcursionSegment, VesselPositions } from "@/types/vessel";
-import axios from "axios";
+import axios, { InternalAxiosRequestConfig } from "axios";
 
-const BASE_URL = "http://localhost:8000";
+const BASE_URL = process.env.NEXT_PUBLIC_BACKEND_BASE_URL;
+const API_KEY = process.env.NEXT_PUBLIC_BACKEND_API_KEY ?? 'no-key-found';
+
+// Authenticate all requests to Bloom backend
+axios.interceptors.request.use((request: InternalAxiosRequestConfig) => {
+  request.headers.set('x-key', API_KEY);
+    return request;
+});
 
 export function getVessels() {
   return axios.get<Vessel[]>(`${BASE_URL}/vessels`);