fix: oidc redirect path for subfolders (#846)

Author: ChristianBeilschmidt

projects/manager/src/app/providers/provider-editor/forms/wildlive/wildlive.component.ts

@@ -24,7 +24,8 @@ import {ErrorStateMatcher} from '@angular/material/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {map, pairwise, startWith} from 'rxjs';
 import {MatButton} from '@angular/material/button';
-import {OidcPopupMessage} from 'projects/manager/src/app/oidc-popup/oidc-popup.component';
+import {OidcPopupMessage} from '../../../../oidc-popup/oidc-popup.component';
+import {oidcRedirectPath} from '../../../../util/location';
 
 const nop = (): null => null;
 
@@ -195,7 +196,8 @@ export class WildLiveComponent implements ControlValueAccessor {
         const orientation = window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
         const [popupWidth, popupHeight] = orientation === 'landscape' ? [700, 500] : [360, 660];
 
-        const redirectUri = `${window.location.origin}/#/oidc-popup`;
+        const redirectUri = oidcRedirectPath(window.location, '/oidc-popup');
+
         const clientId = 'geoengine';
         const keycloakBaseUrl = 'https://auth.geoengine.io/realms/AI4WildLIVE/protocol/openid-connect/auth';
 

projects/manager/src/app/util/location.spec.ts

@@ -0,0 +1,33 @@
+import {oidcRedirectPath} from './location';
+
+const urlToLocation = (url: URL): Location =>
+    ({
+        origin: url.origin,
+        pathname: url.pathname,
+    }) as Location;
+
+describe('oidcRedirectPath', () => {
+    it('should generate correct redirect URI without path', async () => {
+        const location = urlToLocation(new URL('https://example.com'));
+
+        const route = '/oidc-popup';
+        const redirectUri = oidcRedirectPath(location, route);
+        await expect(redirectUri).toBe('https://example.com/#/oidc-popup');
+    });
+
+    it('should generate correct redirect URI with path', async () => {
+        const location = urlToLocation(new URL('https://example.com/some/path'));
+
+        const route = '/oidc-popup';
+        const redirectUri = oidcRedirectPath(location, route);
+        await expect(redirectUri).toBe('https://example.com/some/path#/oidc-popup');
+    });
+
+    it('should generate correct redirect URI with path, with trailing slash', async () => {
+        const location = urlToLocation(new URL('https://example.com/some/path/'));
+
+        const route = '/oidc-popup';
+        const redirectUri = oidcRedirectPath(location, route);
+        await expect(redirectUri).toBe('https://example.com/some/path/#/oidc-popup');
+    });
+});

projects/manager/src/app/util/location.ts

@@ -0,0 +1,20 @@
+/**
+ * Generates a redirect URI for OIDC authentication flows.
+ * @param route The route to append to the redirect URI.
+ * @returns The full redirect URI including the specified route.
+ */
+export function oidcRedirectPath(location: Location, route: string): string {
+    const IS_HASHTAG_ROUTING = true;
+
+    let redirectUri = location.origin;
+    if (location.pathname) {
+        redirectUri += location.pathname;
+    }
+    if (IS_HASHTAG_ROUTING) {
+        redirectUri += `#`;
+    }
+
+    redirectUri += route;
+
+    return redirectUri;
+}