Preserve theme after redirect

Author: andreaskienle

src/common/auth/getRedirectSuffix.spec.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect, afterAll } from 'vitest';
+import { getRedirectSuffix } from './getRedirectSuffix';
+
+const originalLocation = globalThis.location;
+
+function mockLocation(search: string, hash: string) {
+  Object.defineProperty(globalThis, 'location', {
+    value: { ...originalLocation, search, hash },
+    writable: true,
+    configurable: true,
+  });
+}
+
+// Restore the real object once all tests have finished
+afterAll(() => {
+  Object.defineProperty(globalThis, 'location', {
+    value: originalLocation,
+    writable: true,
+    configurable: true,
+  });
+});
+
+describe('getRedirectSuffix()', () => {
+  it('returns "/{search}{hash}" when both parts are present', () => {
+    mockLocation('?sap-theme=sap_horizon', '#/mcp/projects');
+    expect(getRedirectSuffix()).toBe('/?sap-theme=sap_horizon#/mcp/projects');
+  });
+
+  it('returns "/{search}" when only the query string exists', () => {
+    mockLocation('?query=foo', '');
+    expect(getRedirectSuffix()).toBe('/?query=foo');
+  });
+
+  it('returns "{hash}" when only the hash fragment exists', () => {
+    mockLocation('', '#/dashboard');
+    expect(getRedirectSuffix()).toBe('#/dashboard');
+  });
+
+  it('returns an empty string when neither search nor hash exist', () => {
+    mockLocation('', '');
+    expect(getRedirectSuffix()).toBe('');
+  });
+});

src/common/auth/getRedirectSuffix.ts

@@ -0,0 +1,15 @@
+/**
+ * Generates the part of the URL (query string and hash fragments) that must be kept when redirecting the user.
+ *
+ * @example
+ * ```ts
+ * // Current URL: https://example.com/?sap-theme=sap_horizon#/mcp/projects
+ *
+ * const redirectTo = getRedirectSuffix();
+ * // redirectTo -> "/?sap-theme=sap_horizon#/mcp/projects"
+ * ```
+ */
+export function getRedirectSuffix() {
+  const { search, hash } = globalThis.location;
+  return (search ? `/${search}` : '') + hash;
+}

src/lib/api/fetch.ts

@@ -1,5 +1,7 @@
 import { APIError } from './error';
 import { ApiConfig } from './types/apiConfig';
+import { AUTH_FLOW_SESSION_KEY } from '../../common/auth/AuthCallbackHandler.tsx';
+import { getRedirectSuffix } from '../../common/auth/getRedirectSuffix.ts';
 
 const useCrateClusterHeader = 'X-use-crate';
 const projectNameHeader = 'X-project';
@@ -48,13 +50,11 @@ export const fetchApiServer = async (
 
   if (!res.ok) {
     if (res.status === 401) {
-      // Unauthorized, redirect to the login page
-      window.location.replace('/api/auth/onboarding/login');
+      // Unauthorized (token expired), redirect to the login page
+      sessionStorage.setItem(AUTH_FLOW_SESSION_KEY, 'onboarding');
+      window.location.replace(`/api/auth/onboarding/login?redirectTo=${encodeURIComponent(getRedirectSuffix())}`);
     }
-    const error = new APIError(
-      'An error occurred while fetching the data.',
-      res.status,
-    );
+    const error = new APIError('An error occurred while fetching the data.', res.status);
     error.info = await res.json();
     throw error;
   }

src/spaces/mcp/auth/AuthContextMcp.tsx

@@ -1,6 +1,7 @@
 import { createContext, useState, useEffect, ReactNode, use } from 'react';
 import { MeResponseSchema } from './auth.schemas';
 import { AUTH_FLOW_SESSION_KEY } from '../../../common/auth/AuthCallbackHandler.tsx';
+import { getRedirectSuffix } from '../../../common/auth/getRedirectSuffix.ts';
 
 interface AuthContextMcpType {
   isLoading: boolean;
@@ -34,18 +35,13 @@ export function AuthProviderMcp({ children }: { children: ReactNode }) {
         } catch (_) {
           /* safe to ignore */
         }
-        throw new Error(
-          errorBody?.message ||
-            `Authentication check failed with status: ${response.status}`,
-        );
+        throw new Error(errorBody?.message || `Authentication check failed with status: ${response.status}`);
       }
 
       const body = await response.json();
       const validationResult = MeResponseSchema.safeParse(body);
       if (!validationResult.success) {
-        throw new Error(
-          `Auth API response validation failed: ${validationResult.error.flatten()}`,
-        );
+        throw new Error(`Auth API response validation failed: ${validationResult.error.flatten()}`);
       }
 
       const { isAuthenticated: apiIsAuthenticated } = validationResult.data;
@@ -60,17 +56,10 @@ export function AuthProviderMcp({ children }: { children: ReactNode }) {
 
   const login = () => {
     sessionStorage.setItem(AUTH_FLOW_SESSION_KEY, 'mcp');
-
-    window.location.replace(
-      `/api/auth/mcp/login?redirectTo=${encodeURIComponent(window.location.hash)}`,
-    );
+    window.location.replace(`/api/auth/mcp/login?redirectTo=${encodeURIComponent(getRedirectSuffix())}`);
   };
 
-  return (
-    <AuthContextMcp value={{ isLoading, isAuthenticated, error, login }}>
-      {children}
-    </AuthContextMcp>
-  );
+  return <AuthContextMcp value={{ isLoading, isAuthenticated, error, login }}>{children}</AuthContextMcp>;
 }
 
 export const useAuthMcp = () => {

src/spaces/onboarding/auth/AuthContextOnboarding.tsx

@@ -2,6 +2,7 @@ import { createContext, useState, useEffect, ReactNode, use } from 'react';
 import { MeResponseSchema, User } from './auth.schemas';
 import { AUTH_FLOW_SESSION_KEY } from '../../../common/auth/AuthCallbackHandler.tsx';
 import * as Sentry from '@sentry/react';
+import { getRedirectSuffix } from '../../../common/auth/getRedirectSuffix.ts';
 
 interface AuthContextOnboardingType {
   isLoading: boolean;
@@ -67,10 +68,7 @@ export function AuthProviderOnboarding({ children }: { children: ReactNode }) {
 
   const login = () => {
     sessionStorage.setItem(AUTH_FLOW_SESSION_KEY, 'onboarding');
-    // The query parameters and hash fragments need to be preserved, e.g. /?sap-theme=sap_horizon#/mcp/projects
-    const { search, hash } = window.location;
-    const redirectTo = (search ? `/${search}` : '') + hash;
-    window.location.replace(`/api/auth/onboarding/login?redirectTo=${encodeURIComponent(redirectTo)}`);
+    window.location.replace(`/api/auth/onboarding/login?redirectTo=${encodeURIComponent(getRedirectSuffix())}`);
   };
 
   const logout = async () => {