feat: Role based Cadence-web

README.md

@@ -21,6 +21,8 @@ Set these environment variables if you need to change their defaults
 | CADENCE_WEB_PORT             | HTTP port to serve on                                                         | 8088             |
 | CADENCE_WEB_HOSTNAME         | Host name to serve on                                                         | 0.0.0.0          |
 | CADENCE_ADMIN_SECURITY_TOKEN | Admin token for accessing admin methods                                       | ''               |
+| CADENCE_WEB_RBAC_ENABLED     | Enables RBAC-aware UI (login/logout).                                         | false            |
+| CADENCE_WEB_JWT_TOKEN        | Static Cadence JWT forwarded when no request token exists                     | ''               |
 | CADENCE_GRPC_TLS_CA_FILE     | Path to root CA certificate file for enabling one-way TLS on gRPC connections | ''               |
 | CADENCE_WEB_SERVICE_NAME     | Name of the web service used as GRPC caller and OTEL resource name            | cadence-web      |
 

src/app/api/auth/me/route.ts

@@ -0,0 +1,11 @@
+import { NextResponse, type NextRequest } from 'next/server';
+
+import {
+  getPublicAuthContext,
+  resolveAuthContext,
+} from '@/utils/auth/auth-context';
+
+export async function GET(request: NextRequest) {
+  const authContext = await resolveAuthContext(request.cookies);
+  return NextResponse.json(getPublicAuthContext(authContext));
+}

src/app/api/auth/token/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse, type NextRequest } from 'next/server';
+
+import { CADENCE_AUTH_COOKIE_NAME } from '@/utils/auth/auth-context';
+
+const COOKIE_OPTIONS = {
+  httpOnly: true,
+  secure: process.env.NODE_ENV !== 'development',
+  sameSite: 'lax' as const,
+  path: '/',
+};
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    if (!body?.token || typeof body.token !== 'string') {
+      return NextResponse.json(
+        { message: 'A valid token is required' },
+        { status: 400 }
+      );
+    }
+
+    const response = NextResponse.json({ ok: true });
+    response.cookies.set(CADENCE_AUTH_COOKIE_NAME, body.token, COOKIE_OPTIONS);
+    return response;
+  } catch {
+    return NextResponse.json(
+      { message: 'Invalid request body' },
+      { status: 400 }
+    );
+  }
+}
+
+export async function DELETE() {
+  const response = NextResponse.json({ ok: true });
+  response.cookies.set(CADENCE_AUTH_COOKIE_NAME, '', {
+    ...COOKIE_OPTIONS,
+    maxAge: 0,
+  });
+  return response;
+}

src/components/auth-token-modal/auth-token-modal.tsx

@@ -0,0 +1,85 @@
+'use client';
+import React, { useState } from 'react';
+
+import { FormControl } from 'baseui/form-control';
+import {
+  Modal,
+  ModalBody,
+  ModalButton,
+  ModalFooter,
+  ModalHeader,
+} from 'baseui/modal';
+import { Textarea } from 'baseui/textarea';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (token: string) => Promise<void> | void;
+};
+
+export default function AuthTokenModal({ isOpen, onClose, onSubmit }: Props) {
+  const [token, setToken] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async () => {
+    if (!token.trim()) {
+      setError('Please paste a JWT token first');
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      await onSubmit(token.trim());
+      setToken('');
+    } catch (e) {
+      setError(
+        e instanceof Error ? e.message : 'Failed to save authentication token'
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal
+      size="default"
+      onClose={onClose}
+      isOpen={isOpen}
+      closeable={!isSubmitting}
+      autoFocus
+    >
+      <ModalHeader>Authenticate with JWT</ModalHeader>
+      <ModalBody>
+        <FormControl
+          label="Cadence JWT"
+          caption="Paste a Cadence-compatible JWT issued by your identity provider."
+          error={error || null}
+        >
+          <Textarea
+            value={token}
+            onChange={(event) =>
+              setToken((event?.target as HTMLTextAreaElement)?.value || '')
+            }
+            clearOnEscape
+            disabled={isSubmitting}
+            rows={6}
+          />
+        </FormControl>
+      </ModalBody>
+      <ModalFooter>
+        <ModalButton kind="tertiary" onClick={onClose} disabled={isSubmitting}>
+          Cancel
+        </ModalButton>
+        <ModalButton
+          onClick={handleSubmit}
+          isLoading={isSubmitting}
+          data-testid="auth-token-submit"
+        >
+          Save token
+        </ModalButton>
+      </ModalFooter>
+    </Modal>
+  );
+}

src/config/dynamic/dynamic.config.ts

@@ -26,6 +26,8 @@ import workflowDiagnosticsEnabled from './resolvers/workflow-diagnostics-enabled
 const dynamicConfigs: {
   CADENCE_WEB_PORT: ConfigEnvDefinition;
   ADMIN_SECURITY_TOKEN: ConfigEnvDefinition;
+  CADENCE_WEB_RBAC_ENABLED: ConfigEnvDefinition;
+  CADENCE_WEB_JWT_TOKEN: ConfigEnvDefinition;
   CLUSTERS: ConfigSyncResolverDefinition<
     undefined,
     ClustersConfigs,
@@ -89,6 +91,14 @@ const dynamicConfigs: {
     env: 'CADENCE_ADMIN_SECURITY_TOKEN',
     default: '',
   },
+  CADENCE_WEB_RBAC_ENABLED: {
+    env: 'CADENCE_WEB_RBAC_ENABLED',
+    default: 'false',
+  },
+  CADENCE_WEB_JWT_TOKEN: {
+    env: 'CADENCE_WEB_JWT_TOKEN',
+    default: process.env.CADENCE_WEB_RBAC_TOKEN || '',
+  },
   CLUSTERS: {
     resolver: clusters,
     evaluateOn: 'serverStart',

src/hooks/use-domain-access/use-domain-access.ts

@@ -0,0 +1,55 @@
+'use client';
+import { useMemo } from 'react';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { getDomainAccessForUser } from '@/utils/auth/auth-shared';
+import getDomainDescriptionQueryOptions from '@/views/shared/hooks/use-domain-description/get-domain-description-query-options';
+import { type UseDomainDescriptionParams } from '@/views/shared/hooks/use-domain-description/use-domain-description.types';
+
+import useUserInfo from '../use-user-info/use-user-info';
+
+export default function useDomainAccess(params: UseDomainDescriptionParams) {
+  const userInfoQuery = useUserInfo();
+  const shouldLoadDomain = Boolean(userInfoQuery.data);
+
+  const domainQuery = useQuery({
+    ...getDomainDescriptionQueryOptions(params),
+    enabled: shouldLoadDomain,
+  });
+
+  const access = useMemo(() => {
+    if (userInfoQuery.isError) {
+      return { canRead: false, canWrite: false };
+    }
+
+    if (!userInfoQuery.data) {
+      return undefined;
+    }
+
+    if (domainQuery.data) {
+      return getDomainAccessForUser(domainQuery.data, userInfoQuery.data);
+    }
+
+    if (domainQuery.isError) {
+      return { canRead: false, canWrite: false };
+    }
+
+    return undefined;
+  }, [
+    domainQuery.data,
+    domainQuery.isError,
+    userInfoQuery.data,
+    userInfoQuery.isError,
+  ]);
+
+  const isLoading =
+    userInfoQuery.isLoading || (shouldLoadDomain && domainQuery.isLoading);
+
+  return {
+    access,
+    isLoading,
+    isError: userInfoQuery.isError || domainQuery.isError,
+    userInfoQuery,
+  };
+}

src/hooks/use-user-info/use-user-info.ts

@@ -0,0 +1,17 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+
+import { type PublicAuthContext } from '@/utils/auth/auth-shared';
+import request from '@/utils/request';
+import { type RequestError } from '@/utils/request/request-error';
+
+export default function useUserInfo() {
+  return useQuery<PublicAuthContext, RequestError>({
+    queryKey: ['auth', 'me'],
+    queryFn: async () => {
+      const res = await request('/api/auth/me', { method: 'GET' });
+      return res.json();
+    },
+    staleTime: 30_000,
+  });
+}

src/route-handlers/start-workflow/__tests__/start-workflow.node.ts

@@ -308,6 +308,9 @@ async function setup({
     },
     userInfo: {
       id: 'test-user-id',
+      rbacEnabled: false,
+      isAdmin: true,
+      groups: [],
     },
   };