Merge pull request #62 from shiftcode/#61-add-origin-interceptor

#61 add origin interceptor

Author: michaellieberherr

libs/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shiftcode/ngx-components",
-  "version": "12.0.0",
+  "version": "12.0.1-pr61.0",
   "repository": "https://github.com/shiftcode/sc-ng-commons-public",
   "license": "MIT",
   "author": "shiftcode GmbH <team@shiftcode.ch>",
@@ -25,7 +25,7 @@
     "@angular/forms": "^20.0.0",
     "@angular/router": "^20.0.0",
     "@shiftcode/logger": "^3.0.0",
-    "@shiftcode/ngx-core": "^12.0.0 || ^12.0.0-pr56",
+    "@shiftcode/ngx-core": "^12.0.0 || ^12.1.0-pr61",
     "rxjs": "^6.5.3 || ^7.4.0"
   }
 }

libs/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shiftcode/ngx-core",
-  "version": "12.0.0",
+  "version": "12.1.0-pr61.1",
   "repository": "https://github.com/shiftcode/sc-ng-commons-public",
   "license": "MIT",
   "author": "shiftcode GmbH <team@shiftcode.ch>",

libs/core/src/lib/origin/ensure-origin.interceptor.spec.ts

@@ -0,0 +1,46 @@
+import { HttpClient, HttpRequest, provideHttpClient, withInterceptors } from '@angular/common/http'
+import { ensureOriginInterceptor } from './ensure-origin.interceptor'
+import { TestBed } from '@angular/core/testing'
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing'
+import { ORIGIN } from './origin.token'
+
+describe('ensureOriginInterceptor', () => {
+  const origin = 'https://example.com'
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: ORIGIN, useValue: origin },
+        provideHttpClient(withInterceptors([ensureOriginInterceptor])),
+        provideHttpClientTesting(),
+      ],
+    })
+  })
+
+  it('should prepend origin to relative URLs', () => {
+    const req = new HttpRequest('GET', '/api/data')
+
+    const nextSpy = jest.fn()
+    TestBed.runInInjectionContext(() => ensureOriginInterceptor(req, nextSpy))
+    expect(nextSpy).toHaveBeenCalledWith(expect.objectContaining({ url: `${origin}/api/data` }))
+  })
+
+  it('should not modify absolute URLs', () => {
+    const req = new HttpRequest('GET', 'https://other.com/api/data')
+
+    const nextSpy = jest.fn()
+    TestBed.runInInjectionContext(() => ensureOriginInterceptor(req, nextSpy))
+    expect(nextSpy).toHaveBeenCalledWith(req)
+  })
+
+  it('should work integrated with HttpClient', () => {
+    const controller = TestBed.inject(HttpTestingController)
+    const httpClient = TestBed.inject(HttpClient)
+
+    httpClient.get('/api/data').subscribe()
+
+    const req = controller.expectOne(`${origin}/api/data`)
+    expect(req.request.url).toBe(`${origin}/api/data`)
+    req.flush('ok')
+  })
+})

libs/core/src/lib/origin/ensure-origin.interceptor.ts

@@ -0,0 +1,18 @@
+import { HttpInterceptorFn } from '@angular/common/http'
+import { inject } from '@angular/core'
+import { ORIGIN } from './origin.token'
+
+/**
+ * An interceptor function that prepends the origin to requests with a relative url.
+ * it is important that ssr and browser both use the origin for requests otherwise we get different TransferState keys
+ * and the ssr state is not found in the browser.
+ */
+export const ensureOriginInterceptor: HttpInterceptorFn = (req, next) => {
+  if (req.url.startsWith('/')) {
+    const origin = inject(ORIGIN)
+
+    const clonedReq = req.clone({ url: `${origin}${req.url}` })
+    return next(clonedReq)
+  }
+  return next(req)
+}

libs/core/src/lib/origin/provide-origin-from-env.function.spec.ts

@@ -0,0 +1,54 @@
+import { PLATFORM_ID } from '@angular/core'
+import { provideOriginFromEnv } from './provide-origin-from-env.function'
+import { ORIGIN } from './origin.token'
+import { TestBed } from '@angular/core/testing'
+
+describe('provideOriginFromEnv', () => {
+  const ENV_KEY = 'TEST_ORIGIN'
+
+  let originalEnv: NodeJS.ProcessEnv
+
+  beforeEach(() => {
+    originalEnv = { ...process.env }
+  })
+
+  afterEach(() => {
+    process.env = originalEnv
+  })
+
+  function setup(platformId: 'browser' | 'server') {
+    TestBed.configureTestingModule({
+      providers: [{ provide: PLATFORM_ID, useValue: platformId }, provideOriginFromEnv(ENV_KEY)],
+    })
+  }
+
+  it('should provide the ORIGIN token with a valid origin from env', () => {
+    setup('server')
+
+    const validOrigin = 'https://example.valid.com'
+
+    process.env[ENV_KEY] = validOrigin
+
+    expect(TestBed.inject(ORIGIN)).toBe(validOrigin)
+  })
+
+  it('should throw if not running on the server', () => {
+    setup('browser')
+
+    process.env[ENV_KEY] = 'https://example.valid.com'
+
+    expect(() => TestBed.inject(ORIGIN)).toThrowError(`provideOriginFromEnv can only be used on the server`)
+  })
+
+  it('should throw if env var is not defined', () => {
+    setup('server')
+    delete process.env[ENV_KEY]
+    expect(() => TestBed.inject(ORIGIN)).toThrowError(`Env var ${ENV_KEY} needs to be defined`)
+  })
+
+  it('should throw if env var is not a valid origin', () => {
+    setup('server')
+    process.env[ENV_KEY] = 'invalid-origin'
+    expect(() => TestBed.inject(ORIGIN)).toThrowError(`Env var ${ENV_KEY} is not a valid origin: invalid-origin`)
+  })
+})

libs/core/src/lib/origin/provide-origin-from-env.function.ts

@@ -0,0 +1,32 @@
+import { inject, PLATFORM_ID, Provider } from '@angular/core'
+import { ORIGIN } from './origin.token'
+import { isPlatformServer } from '@angular/common'
+
+declare const process: { env: Record<string, undefined | string> }
+
+/**
+ * Provides the {@link ORIGIN} token from the environment variable.
+ */
+export function provideOriginFromEnv(key: string): Provider[] {
+  return [
+    {
+      provide: ORIGIN,
+      useFactory: () => {
+        if (!isPlatformServer(inject(PLATFORM_ID))) {
+          throw new Error(`${provideOriginFromEnv.name} can only be used on the server`)
+        }
+
+        const value = process.env[key]?.trim()
+        if (!value) {
+          throw new Error(`Env var ${key} needs to be defined`)
+        }
+        try {
+          new URL(value)
+          return value
+        } catch (error) {
+          throw new Error(`Env var ${key} is not a valid origin: ${value}`, { cause: error })
+        }
+      },
+    },
+  ]
+}

libs/core/src/public-api.ts

@@ -47,6 +47,8 @@ export * from './lib/logger/remote/with-remote-transport.function'
 
 // origin
 export * from './lib/origin/origin.token'
+export * from './lib/origin/ensure-origin.interceptor'
+export * from './lib/origin/provide-origin-from-env.function'
 
 // resize
 export * from './lib/resize/resize.service'