Merge pull request #1201 from andypols/fix-logout-baseurl

fix: Logout calls localhost in prod; standardise API base resolution

Author: kriswest

src/ui/apiBase.ts

@@ -0,0 +1,11 @@
+const stripTrailingSlashes = (s: string) => s.replace(/\/+$/, '');
+
+/**
+ * The base URL for API requests.
+ *
+ * Uses the `VITE_API_URI` environment variable if set, otherwise defaults to the current origin.
+ * @return {string} The base URL to use for API requests.
+ */
+export const API_BASE = process.env.VITE_API_URI
+  ? stripTrailingSlashes(process.env.VITE_API_URI)
+  : '';

src/ui/components/Navbars/DashboardNavbarLinks.tsx

@@ -18,6 +18,8 @@ import axios from 'axios';
 import { getAxiosConfig } from '../../services/auth';
 import { UserData } from '../../../types/models';
 
+import { API_BASE } from '../../apiBase';
+
 const useStyles = makeStyles(styles);
 
 const DashboardNavbarLinks: React.FC = () => {
@@ -51,11 +53,7 @@ const DashboardNavbarLinks: React.FC = () => {
 
   const logout = async () => {
     try {
-      const { data } = await axios.post(
-        `${process.env.VITE_API_URI || 'http://localhost:3000'}/api/auth/logout`,
-        {},
-        getAxiosConfig(),
-      );
+      const { data } = await axios.post(`${API_BASE}/api/auth/logout`, {}, getAxiosConfig());
 
       if (!data.isAuth && !data.user) {
         setAuth(false);

src/ui/services/user.ts

@@ -2,9 +2,9 @@ import axios, { AxiosError, AxiosResponse } from 'axios';
 import { getAxiosConfig, processAuthError } from './auth';
 import { UserData } from '../../types/models';
 
-type SetStateCallback<T> = (value: T | ((prevValue: T) => T)) => void;
+import { API_BASE } from '../apiBase';
 
-const baseUrl = process.env.VITE_API_URI || location.origin;
+type SetStateCallback<T> = (value: T | ((prevValue: T) => T)) => void;
 
 const getUser = async (
   setIsLoading?: SetStateCallback<boolean>,
@@ -13,9 +13,9 @@ const getUser = async (
   setIsError?: SetStateCallback<boolean>,
   id: string | null = null,
 ): Promise<void> => {
-  let url = `${baseUrl}/api/auth/profile`;
+  let url = `${API_BASE}/api/auth/profile`;
   if (id) {
-    url = `${baseUrl}/api/v1/user/${id}`;
+    url = `${API_BASE}/api/v1/user/${id}`;
   }
   console.log(url);
 
@@ -43,7 +43,7 @@ const getUsers = async (
   setErrorMessage: SetStateCallback<string>,
   query: Record<string, string> = {},
 ): Promise<void> => {
-  const url = new URL(`${baseUrl}/api/v1/user`);
+  const url = new URL(`${API_BASE}/api/v1/user`);
   url.search = new URLSearchParams(query).toString();
 
   setIsLoading(true);
@@ -70,7 +70,7 @@ const getUsers = async (
 
 const updateUser = async (data: UserData): Promise<void> => {
   console.log(data);
-  const url = new URL(`${baseUrl}/api/auth/gitAccount`);
+  const url = new URL(`${API_BASE}/api/auth/gitAccount`);
 
   try {
     await axios.post(url.toString(), data, getAxiosConfig());
@@ -89,7 +89,7 @@ const getUserLoggedIn = async (
   setIsError: SetStateCallback<boolean>,
   setAuth: SetStateCallback<boolean>,
 ): Promise<void> => {
-  const url = new URL(`${baseUrl}/api/auth/me`);
+  const url = new URL(`${API_BASE}/api/auth/me`);
 
   try {
     const response: AxiosResponse<UserData> = await axios(url.toString(), getAxiosConfig());

src/ui/utils.tsx

@@ -1,10 +1,10 @@
 import axios from 'axios';
 import React from 'react';
 import {
-  SCMRepositoryMetadata,
+  CommitData,
   GitHubRepositoryMetadata,
   GitLabRepositoryMetadata,
-  CommitData,
+  SCMRepositoryMetadata,
 } from '../types/models';
 import moment from 'moment';
 

src/ui/views/Login/Login.tsx

@@ -15,13 +15,14 @@ import logo from '../../assets/img/git-proxy.png';
 import { Badge, CircularProgress, Snackbar } from '@material-ui/core';
 import { getCookie } from '../../utils';
 import { useAuth } from '../../auth/AuthProvider';
+import { API_BASE } from '../../apiBase';
 
 interface LoginResponse {
   username: string;
   password: string;
 }
 
-const loginUrl = `${process.env.VITE_API_URI}/api/auth/login`;
+const loginUrl = `${API_BASE}/api/auth/login`;
 
 const Login: React.FC = () => {
   const navigate = useNavigate();
@@ -41,7 +42,7 @@ const Login: React.FC = () => {
   }
 
   function handleOIDCLogin(): void {
-    window.location.href = `${process.env.VITE_API_URI}/api/auth/oidc`;
+    window.location.href = `${API_BASE}/api/auth/oidc`;
   }
 
   function handleSubmit(event: FormEvent): void {

test/ui/apiBase.test.js

@@ -0,0 +1,43 @@
+const { expect } = require('chai');
+
+// Helper to reload the module fresh each time
+function loadApiBase() {
+  delete require.cache[require.resolve('../../src/ui/apiBase')];
+  return require('../../src/ui/apiBase');
+}
+
+describe('apiBase', () => {
+  let originalEnv;
+
+  beforeEach(() => {
+    originalEnv = process.env.VITE_API_URI;
+    delete process.env.VITE_API_URI;
+    delete require.cache[require.resolve('../../src/ui/apiBase')];
+  });
+
+  afterEach(() => {
+    if (typeof originalEnv === 'undefined') {
+      delete process.env.VITE_API_URI;
+    } else {
+      process.env.VITE_API_URI = originalEnv;
+    }
+    delete require.cache[require.resolve('../../src/ui/apiBase')];
+  });
+
+  it('uses empty string when VITE_API_URI is not set', () => {
+    const { API_BASE } = loadApiBase();
+    expect(API_BASE).to.equal('');
+  });
+
+  it('returns the exact value when no trailing slash', () => {
+    process.env.VITE_API_URI = 'https://example.com';
+    const { API_BASE } = loadApiBase();
+    expect(API_BASE).to.equal('https://example.com');
+  });
+
+  it('strips trailing slashes from VITE_API_URI', () => {
+    process.env.VITE_API_URI = 'https://example.com////';
+    const { API_BASE } = loadApiBase();
+    expect(API_BASE).to.equal('https://example.com');
+  });
+});