environmental auth (#11)

* environmental auth

* rename variable

* remove sensitive print

* change defaults

* add documentation

* change log lvl

* add nginx into entrypoint

* set backend parametrization

* remove settings validation

* remove settings validation import

---------

Co-authored-by: nestor@theagilemonkeys.com <nestor@theagilemonkeys.com>

Author: npenateca

.env.example

@@ -0,0 +1,8 @@
+AUTH_DOMAIN=
+AUTH_CLIENT_ID=
+AUTH_AUDIENCE=
+AIFINDR_DOMAIN=http://host.docker.internal:3000
+AUTH_ENABLED=false
+AUTH_IS_AUTH0=false
+AUTH_API_KEY_RESOLUTION_CACHE_TTL_IN_SEC=300
+EXPERIMENT_RUNNER_URL=http://aifindr-evaluations-runner:8001/evaluations/run

.envrc

@@ -0,0 +1,12 @@
+#! /bin/bash
+
+# In order to use this file, you need to install direnv and run `direnv allow`
+# direnv will automatically load the environment variables from the .env file
+# and make them available to the shell.
+
+# to install direnv: `brew install direnv`
+
+dotenv
+set -a
+source_env .env
+set +a

.gitignore

@@ -1,3 +1,6 @@
+#environment variables
+.env
+
 # Mac
 .DS_Store
 

apps/aifindr-evaluations-runner/settings.py

@@ -2,7 +2,6 @@
 from functools import lru_cache
 
 from pydantic_settings import BaseSettings, SettingsConfigDict
-from pydantic import field_validator
 
 
 class Settings(BaseSettings):
@@ -12,12 +11,6 @@ class Settings(BaseSettings):
     ELLMENTAL_API_URL: str = ""
     ELLMENTAL_API_KEY: str = ""
 
-    @field_validator("*")
-    def no_empty_strings(cls, v):
-        if isinstance(v, str) and not v:
-            raise ValueError("Field cannot be empty")
-        return v
-
 
 class EnvSettings(BaseSettings):
     settings: Settings = Settings()

apps/opik-frontend/Dockerfile

@@ -11,17 +11,9 @@ RUN npm install
 COPY . .
 
 ARG OPIK_VERSION
-ARG AUTH_DOMAIN
-ARG AUTH_CLIENT_ID
-ARG AUTH_AUDIENCE
-ARG AIFINDR_DOMAIN
 
 ENV VITE_APP_VERSION=${OPIK_VERSION}
-ENV VITE_AUTH_DOMAIN=${AUTH_DOMAIN}
-ENV VITE_AUTH_CLIENT_ID=${AUTH_CLIENT_ID}
-ENV VITE_AUTH_AUDIENCE=${AUTH_AUDIENCE}
 ENV VITE_PLUGINS_SCOPE=aifindr
-ENV VITE_AIFINDR_DOMAIN=${AIFINDR_DOMAIN}
 
 ENV NODE_OPTIONS="--max-old-space-size=8192"
 
@@ -34,9 +26,15 @@ FROM nginx:1.27.3-alpine3.20
 # Copy the built files from the builder stage
 COPY --from=builder /opt/frontend/dist /usr/share/nginx/html
 
+COPY docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh
+
+#Override the default nginx configuration
+COPY default.template.conf /etc/nginx/conf.d/default.template.conf
+
 RUN sed -i '/access_log.*main/d' /etc/nginx/nginx.conf
 
 EXPOSE 5173
 
 # Start Nginx
-CMD ["nginx", "-g", "daemon off;"]
+ENTRYPOINT ["/docker-entrypoint.sh"]

apps/opik-frontend/default.template.conf

@@ -0,0 +1,28 @@
+server {
+    listen 5173;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location /api/ {
+        rewrite /api/(.*) /$1  break;
+        proxy_pass ${BACKEND_URL};
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        proxy_read_timeout 90;
+        proxy_connect_timeout 90;
+        proxy_send_timeout 90;
+
+        proxy_http_version 1.1;
+        client_max_body_size 500M;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

apps/opik-frontend/docker-entrypoint.sh

@@ -0,0 +1,25 @@
+#!/bin/sh
+set -e
+
+APP_DIR=/usr/share/nginx/html
+
+BACKEND_URL=${BACKEND_URL:-http://localhost:8080}
+
+cat /etc/nginx/conf.d/default.template.conf | sed "s|\${BACKEND_URL}|${BACKEND_URL}|g" > /etc/nginx/conf.d/default.conf
+
+rm -f /etc/nginx/conf.d/default.template.conf
+
+# Generate configuration file with environment variables
+cat <<EOF > ${APP_DIR}/config.js
+window.RUNTIME_CONFIG = {
+  AUTH_DOMAIN: "${AUTH_DOMAIN:-}",
+  AUTH_CLIENT_ID: "${AUTH_CLIENT_ID:-}",
+  AUTH_AUDIENCE: "${AUTH_AUDIENCE:-}",
+  AIFINDR_DOMAIN: "${AIFINDR_DOMAIN:-}"
+};
+EOF
+
+echo "Configuration generated"
+
+# Iniciar Nginx
+exec nginx -g "daemon off;" 

apps/opik-frontend/index.html

@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Comet Opik</title>
+    <script src="/config.js"></script>
   </head>
   <body class="size-full">
     <div class="size-full" id="root"></div>

apps/opik-frontend/src/components/App.tsx

@@ -16,15 +16,27 @@ const queryClient = new QueryClient({
   },
 });
 
+// Declaración para TypeScript
+declare global {
+  interface Window {
+    RUNTIME_CONFIG: {
+      AUTH_DOMAIN: string;
+      AUTH_CLIENT_ID: string;
+      AUTH_AUDIENCE: string;
+      AIFINDR_DOMAIN: string;
+    };
+  }
+}
+
 function App() {
   useCustomScrollbarClass();
 
   const auth0Config = {
-    domain: import.meta.env.VITE_AUTH_DOMAIN || '',
-    clientId: import.meta.env.VITE_AUTH_CLIENT_ID || '',
+    domain: window.RUNTIME_CONFIG?.AUTH_DOMAIN || import.meta.env.VITE_AUTH_DOMAIN || '',
+    clientId: window.RUNTIME_CONFIG?.AUTH_CLIENT_ID || import.meta.env.VITE_AUTH_CLIENT_ID || '',
     authorizationParams: {
       redirect_uri: window.location.origin,
-      audience: import.meta.env.VITE_AUTH_AUDIENCE,
+      audience: window.RUNTIME_CONFIG?.AUTH_AUDIENCE || import.meta.env.VITE_AUTH_AUDIENCE,
     },
   };
 

apps/opik-frontend/src/plugins/aifindr/api.ts

@@ -2,8 +2,16 @@ import { ACCESS_TOKEN_KEY } from "@/constants/user";
 import { UseQueryOptions } from "@tanstack/react-query";
 import axios from "axios";
 
+// Obtain the base URL from the runtime config
+const getBaseURL = () => {
+  if (!window.RUNTIME_CONFIG && !import.meta.env.VITE_AIFINDR_DOMAIN) {
+    console.error('AIFINDR_DOMAIN is not set neither in runtime nor in environment variables');
+  }
+  return window.RUNTIME_CONFIG?.AIFINDR_DOMAIN || import.meta.env.VITE_AIFINDR_DOMAIN || '';
+};
+
 const axiosInstance = axios.create({
-  baseURL: import.meta.env.VITE_AIFINDR_DOMAIN,
+  baseURL: getBaseURL(),
 });
 axiosInstance.interceptors.request.use((config) => {
   const token = localStorage.getItem(ACCESS_TOKEN_KEY);