feat(frontend): add API KEY to all requests to bloom backend

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

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() {

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`);