feat: option to provide bearer token on manager requests

When developing locally towards a manager that is running in
Open Source Cloud we need to provide the service access token
as a bearer token. This change adds the option to set the
environment variable VITE_BACKEND_API_KEY with the service access
token and also included instructions on how to obtain it.

When application is deployed in the OSC platform this is not
needed as authorization is performed using cookies.

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

README.md

@@ -16,6 +16,41 @@ To use a local manager instance, set `VITE_BACKEND_URL=http://0.0.0.0:8000/`
 
 `yarn dev` to start a dev server
 
+### Manager in Open Source Cloud
+
+To develop against a manager in Open Source Cloud you need to provide a bearer token (service access token) in the Authorization header.
+
+```
+% export VITE_BACKEND_URL=https://<instance>.eyevinn-intercom-manager.auto.prod.osaas.io/
+% export OSC_ACCESS_TOKEN=<personal-access-token>
+```
+
+To obtain the service access token you need your Open Source Cloud personal access token. You find that one in the settings menu in the [user interface](https://app.osaas.io). Get the service access token with the following HTTP request using curl.
+
+```bash
+% curl -X 'POST' \
+  'https://token.svc.prod.osaas.io/servicetoken' \
+  -H 'accept: application/json' \
+  -H "x-pat-jwt: Bearer $OSC_ACCESS_TOKEN" \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "serviceId": "eyevinn-intercom-manager"
+}'
+{"serviceId":"eyevinn-intercom-manager","token":"<service-access-token>","expiry":1718315617}
+```
+
+Then you start the dev server with the `VITE_BACKEND_API_KEY` environment variable set. Either on the comand line or stored in the shell with `export VITE_BACKEND_API_KEY=<service-access-token>`. The token expires after a while so you might need to refresh the token using the same curl command line above.
+
+```bash
+% VITE_BACKEND_API_KEY=<service-access-token> yarn dev
+```
+
+As the Open Source Cloud platform apply same-origin principle you need to disable that check in your browser when developing locally. Example below on how to start Chrome on MacOS with this check disabled.
+
+```bash
+% open -a Google\ Chrome --args --disable-web-security --user-data-dir="/tmp"
+```
+
 ## Docker Container
 
 Build local Docker image

src/api/api.ts

@@ -4,6 +4,7 @@ const API_VERSION = import.meta.env.VITE_BACKEND_API_VERSION ?? "api/v1/";
 const API_URL =
   `${import.meta.env.VITE_BACKEND_URL}${API_VERSION}` ??
   `${window.location.origin}/${API_VERSION}`;
+const API_KEY = import.meta.env.VITE_BACKEND_API_KEY;
 
 type TCreateProductionOptions = {
   name: string;
@@ -68,6 +69,7 @@ export const API = {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
         },
         body: JSON.stringify({
           name,
@@ -77,24 +79,47 @@ export const API = {
     ),
   listProductions: (): Promise<TListProductionsResponse> =>
     handleFetchRequest<TListProductionsResponse>(
-      fetch(`${API_URL}production/`, { method: "GET" })
+      fetch(`${API_URL}production/`, {
+        method: "GET",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
     ),
   fetchProduction: (id: number): Promise<TFetchProductionResponse> =>
     handleFetchRequest<TFetchProductionResponse>(
-      fetch(`${API_URL}production/${id}`, { method: "GET" })
+      fetch(`${API_URL}production/${id}`, {
+        method: "GET",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
     ),
   deleteProduction: (id: number): Promise<string> =>
     handleFetchRequest<string>(
-      fetch(`${API_URL}production/${id}`, { method: "DELETE" })
+      fetch(`${API_URL}production/${id}`, {
+        method: "DELETE",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
     ),
   listProductionLines: (id: number) =>
     handleFetchRequest<TLine[]>(
-      fetch(`${API_URL}production/${id}/line`, { method: "GET" })
+      fetch(`${API_URL}production/${id}/line`, {
+        method: "GET",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
     ),
   fetchProductionLine: (productionId: number, lineId: number): Promise<TLine> =>
     handleFetchRequest<TLine>(
       fetch(`${API_URL}production/${productionId}/line/${lineId}`, {
         method: "GET",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
       })
     ),
   offerAudioSession: ({
@@ -107,6 +132,7 @@ export const API = {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
         },
         body: JSON.stringify({
           productionId,
@@ -124,6 +150,7 @@ export const API = {
         method: "PATCH",
         headers: {
           "Content-Type": "application/json",
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
         },
         body: JSON.stringify({
           sdpAnswer,
@@ -134,10 +161,20 @@ export const API = {
     sessionId,
   }: TDeleteAudioSessionOptions): Promise<string> =>
     handleFetchRequest<string>(
-      fetch(`${API_URL}session/${sessionId}`, { method: "DELETE" })
+      fetch(`${API_URL}session/${sessionId}`, {
+        method: "DELETE",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
     ),
   heartbeat: ({ sessionId }: THeartbeatOptions): Promise<string> =>
     handleFetchRequest<string>(
-      fetch(`${API_URL}heartbeat/${sessionId}`, { method: "GET" })
+      fetch(`${API_URL}heartbeat/${sessionId}`, {
+        method: "GET",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
     ),
 };