Feat - development server reverse proxy

angular.json

@@ -80,6 +80,7 @@
               "namedChunks": true
             },
             "development": {
+              "baseHref": "/angular_osf/assets/",
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true,
@@ -101,6 +102,8 @@
             },
             "development": {
               "buildTarget": "osf:build:development",
+              "port": 4300,
+              "host": "0.0.0.0",
               "hmr": false
             }
           },

src/app/app.config.ts

@@ -15,7 +15,7 @@ import { STATES } from '@core/constants';
 import { provideTranslation } from '@core/helpers';
 
 import { GlobalErrorHandler } from './core/handlers';
-import { authInterceptor, errorInterceptor } from './core/interceptors';
+import { errorInterceptor, hybridAuthInterceptor } from './core/interceptors';
 import CustomPreset from './core/theme/custom-preset';
 import { routes } from './app.routes';
 
@@ -37,7 +37,7 @@ export const appConfig: ApplicationConfig = {
       },
     }),
     provideAnimations(),
-    provideHttpClient(withInterceptors([authInterceptor, errorInterceptor])),
+    provideHttpClient(withInterceptors([hybridAuthInterceptor, errorInterceptor])),
     importProvidersFrom(TranslateModule.forRoot(provideTranslation())),
     ConfirmationService,
     MessageService,

src/app/core/interceptors/cookie-auth.interceptor.ts

@@ -0,0 +1,37 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
+
+import { CookieService } from '../services/cookie.service';
+
+import { environment } from 'src/environments/environment';
+
+export const cookieAuthInterceptor: HttpInterceptorFn = (req, next) => {
+  if (!environment.cookieAuth.enabled) {
+    return next(req);
+  }
+
+  const cookieService = inject(CookieService);
+  const csrfToken = cookieService.getCsrfToken();
+
+  const isOsfApiRequest = req.url.includes(environment.apiDomainUrl) || req.url.includes('localhost:8000');
+
+  if (isOsfApiRequest) {
+    const headers: Record<string, string> = {
+      Accept: 'application/vnd.api+json; version=2.20',
+      'Content-Type': 'application/vnd.api+json',
+    };
+
+    if (csrfToken) {
+      headers['X-CSRFToken'] = csrfToken;
+    }
+
+    const authReq = req.clone({
+      setHeaders: headers,
+      withCredentials: true,
+    });
+
+    return next(authReq);
+  }
+
+  return next(req);
+};

src/app/core/interceptors/hybrid-auth.interceptor.ts

@@ -0,0 +1,29 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+
+import { cookieAuthInterceptor } from './cookie-auth.interceptor';
+
+import { environment } from 'src/environments/environment';
+
+export const hybridAuthInterceptor: HttpInterceptorFn = (req, next) => {
+  if (environment.cookieAuth.enabled) {
+    return cookieAuthInterceptor(req, next);
+  }
+
+  console.warn('Using fallback token authentication - this should not happen in production!');
+
+  const authToken = 'UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm';
+
+  if (authToken) {
+    const authReq = req.clone({
+      setHeaders: {
+        Authorization: `Bearer ${authToken}`,
+        Accept: 'application/vnd.api+json',
+        'Content-Type': 'application/vnd.api+json',
+      },
+    });
+
+    return next(authReq);
+  }
+
+  return next(req);
+};

src/app/core/interceptors/index.ts

@@ -1,2 +1,4 @@
 export * from './auth.interceptor';
+export * from './cookie-auth.interceptor';
 export * from './error.interceptor';
+export * from './hybrid-auth.interceptor';

src/app/core/services/cookie.service.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CookieService {
+  getCookie(name: string): string | null {
+    try {
+      if (!document.cookie) {
+        return null;
+      }
+
+      const value = `; ${document.cookie}`;
+      const parts = value.split(`; ${name}=`);
+
+      if (parts.length === 2) {
+        const cookieValue = parts.pop()?.split(';').shift();
+        return cookieValue ? decodeURIComponent(cookieValue) : null;
+      }
+
+      return null;
+    } catch (error) {
+      console.warn(`Failed to read cookie '${name}':`, error);
+      return null;
+    }
+  }
+
+  getCsrfToken(): string | null {
+    return this.getCookie(environment.cookieAuth.csrfCookieName);
+  }
+
+  hasSessionCookie(): boolean {
+    return this.getCookie('sessionid') !== null;
+  }
+
+  clearAuthCookies(): void {
+    const cookiesToClear = ['sessionid', 'csrftoken', 'api-csrf'];
+
+    cookiesToClear.forEach((name) => {
+      document.cookie = `${name}=; Max-Age=0; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+    });
+  }
+}

src/app/core/services/index.ts

@@ -1,3 +1,4 @@
+export { CookieService } from './cookie.service';
 export { JsonApiService } from './json-api.service';
 export { RequestAccessService } from './request-access.service';
 export { UserService } from './user.service';

src/app/features/settings/profile-settings/services/profile-settings.api.service.ts

@@ -15,7 +15,7 @@ export class ProfileSettingsApiService {
 
   patchUserSettings(userId: string, key: keyof ProfileSettingsStateModel, data: ProfileSettingsUpdate) {
     const patchedData = { [key]: data };
-    return this.#jsonApiService.patch<JsonApiResponse<UserGetResponse, null>>(`${environment.apiUrl}users/${userId}/`, {
+    return this.#jsonApiService.patch<JsonApiResponse<UserGetResponse, null>>(`${environment.apiUrl}/users/${userId}/`, {
       data: { type: 'users', id: userId, attributes: patchedData },
     });
   }

src/environments/environment.development.ts

@@ -1,13 +1,19 @@
 export const environment = {
   production: false,
-  webUrl: 'https://staging4.osf.io',
-  downloadUrl: 'https://staging4.osf.io/download',
-  apiUrl: 'https://api.staging4.osf.io/v2',
-  apiUrlV1: 'https://staging4.osf.io/api/v1',
-  apiDomainUrl: 'https://api.staging4.osf.io',
+  webUrl: 'http://localhost:8000',
+  downloadUrl: 'http://localhost:8000/download',
+  apiUrl: 'http://localhost:8000/v2',
+  apiUrlV1: 'https//localhost:8000/api/v1',
+  apiDomainUrl: 'http://localhost:8000',
   shareDomainUrl: 'https://staging-share.osf.io/trove',
-  addonsApiUrl: 'https://addons.staging4.osf.io/v1',
-  fileApiUrl: 'https://files.us.staging4.osf.io/v1',
-  baseResourceUri: 'https://staging4.osf.io/',
-  funderApiUrl: 'https://api.crossref.org/',
+  addonsApiUrl: 'http://localhost:8000/v1',
+  fileApiUrl: 'http://localhost:8000/v1',
+  baseResourceUri: 'http://localhost:8000/',
+  funderApiUrl: 'http://api.crossref.org/',
+
+  cookieAuth: {
+    enabled: true,
+    csrfCookieName: 'api-csrf',
+    withCredentials: true,
+  },
 };

src/environments/environment.ts

@@ -10,4 +10,10 @@ export const environment = {
   fileApiUrl: 'https://files.us.staging4.osf.io/v1',
   baseResourceUri: 'https://staging4.osf.io/',
   funderApiUrl: 'https://api.crossref.org/',
+
+  cookieAuth: {
+    enabled: false,
+    csrfCookieName: 'api-csrf',
+    withCredentials: false,
+  },
 };