Refactor authentication handling and update UI components

.bumpversion.toml

@@ -1,5 +1,5 @@
 [tool.bumpversion]
-current_version = "0.2.0"
+current_version = "0.2.1"
 commit = true
 tag = true
 tag_name = "v{new_version}"

VERSION

@@ -1 +1 @@
-0.2.0
+0.2.1

dev/docker-compose.yml

@@ -58,6 +58,7 @@ services:
       LANGFLOW__BASE_URL: http://localhost:7860/api/v1
       LANGFLOW__API_KEY: ${LANGFLOW_API_KEY:-dev-langflow-api-key}
       SECRET_KEY: dev-secret-key-change-in-production
+      CORS_ORIGINS: '["http://localhost:5173", "http://localhost:8000"]'
     volumes:
       - ../backend:/app
     depends_on:
@@ -79,6 +80,8 @@ services:
     volumes:
       - ../frontend:/app
       - /app/node_modules
+      # Comment the following line out if you don't want to mount the local UX package - this requires cloning the UX repository.
+      - ../../ux:/app/node_modules/@tidemark-security/ux 
     depends_on:
       - backend
     command: ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
@@ -125,7 +128,7 @@ services:
       LANGFLOW_AUTO_LOGIN: "false"
       LANGFLOW_SUPERUSER: ${LANGFLOW_SUPERUSER:-admin}
       LANGFLOW_SUPERUSER_PASSWORD: ${LANGFLOW_SUPERUSER_PASSWORD:-admin}
-      LANGFLOW_SECRET_KEY: ${LANGFLOW_SECRET_KEY:-dev-langflow-secret-change-in-production}
+      LANGFLOW_SECRET_KEY: ${LANGFLOW_SECRET_KEY:-3R1HFctPJZ_MDJg-GQe2Z_TaEyZyXQZtbcCR5l8S0E4=}
       LANGFLOW_NEW_USER_IS_ACTIVE: "false"
       LANGFLOW_ENABLE_SUPERUSER_CLI: "false"
       LANGFLOW_API_KEY_SOURCE: env

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intercept",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/overlays/ModalShell.tsx

@@ -1,26 +1,49 @@
 import React from "react";
 
+import { Dialog } from "@tidemark-security/ux";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+
 import { cn } from "@/utils/cn";
 
 interface ModalShellProps {
   children: React.ReactNode;
+  title: string;
+  description?: string;
   panelClassName?: string;
   contentClassName?: string;
+  onClose?: () => void;
 }
 
 export function ModalShell({
   children,
+  title,
+  description,
   panelClassName,
   contentClassName,
+  onClose,
 }: ModalShellProps) {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black bg-opacity-50 p-4">
-      <div
+    <Dialog
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) onClose?.();
+      }}
+      className="p-4"
+    >
+      <Dialog.Content
         className={cn(
-          "flex max-h-full w-full flex-col rounded-md bg-neutral-100 px-6 py-6",
+          "w-full bg-neutral-100 px-6 py-6",
           panelClassName,
         )}
       >
+        <VisuallyHidden.Root asChild>
+          <Dialog.Title>{title}</Dialog.Title>
+        </VisuallyHidden.Root>
+        {description && (
+          <VisuallyHidden.Root asChild>
+            <Dialog.Description>{description}</Dialog.Description>
+          </VisuallyHidden.Root>
+        )}
         <div
           className={cn(
             "flex min-h-0 w-full flex-col items-start gap-6",
@@ -29,7 +52,7 @@ export function ModalShell({
         >
           {children}
         </div>
-      </div>
-    </div>
+      </Dialog.Content>
+    </Dialog>
   );
 }

frontend/src/contexts/SessionProvider.tsx

@@ -163,9 +163,8 @@ export const SessionProvider = ({ children }: SessionProviderProps) => {
         dispatch({ type: "START_AUTH" });
         try {
           if (!browserSupportsPasskeys()) {
-            dispatch({ type: "SET_ERROR", payload: "Passkey sign-in is unavailable on this browser." });
             dispatch({ type: "SET_UNAUTHENTICATED" });
-            return "failed";
+            return "password_required";
           }
 
           const begin = await AuthenticationService.beginPasskeyAuthenticationApiV1AuthPasskeysAuthenticateOptionsPost({