Fix no auth issue in ui component

Author: Adityav369

ee/ui-component/components/MorphikUI.tsx

@@ -153,7 +153,7 @@ const MorphikUI: React.FC<MorphikUIProps> = ({
         {activeSection === "connections" && (
           <div className="h-full overflow-auto p-4 md:p-6">
             {/* Wrapper div for consistent padding and full height */}
-            <ConnectorList apiBaseUrl={effectiveApiBaseUrl} />
+            <ConnectorList apiBaseUrl={effectiveApiBaseUrl} authToken={authToken} />
           </div>
         )}
       </main>

ee/ui-component/components/connectors/ConnectorCard.tsx

@@ -20,9 +20,16 @@ interface ConnectorCardProps {
   displayName: string;
   icon?: React.ElementType;
   apiBaseUrl: string;
+  authToken: string | null;
 }
 
-export function ConnectorCard({ connectorType, displayName, icon: ConnectorIcon, apiBaseUrl }: ConnectorCardProps) {
+export function ConnectorCard({
+  connectorType,
+  displayName,
+  icon: ConnectorIcon,
+  apiBaseUrl,
+  authToken,
+}: ConnectorCardProps) {
   const [authStatus, setAuthStatus] = useState<ConnectorAuthStatus | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
@@ -40,15 +47,15 @@ export function ConnectorCard({ connectorType, displayName, icon: ConnectorIcon,
     setIsLoading(true);
     setError(null);
     try {
-      const status = await getConnectorAuthStatus(apiBaseUrl, connectorType);
+      const status = await getConnectorAuthStatus(apiBaseUrl, connectorType, authToken);
       setAuthStatus(status);
     } catch (err) {
       setError(err instanceof Error ? err.message : "An unknown error occurred while fetching status.");
       setAuthStatus(null);
     } finally {
       setIsLoading(false);
     }
-  }, [apiBaseUrl, connectorType]);
+  }, [apiBaseUrl, connectorType, authToken]);
 
   useEffect(() => {
     fetchStatus();
@@ -73,7 +80,7 @@ export function ConnectorCard({ connectorType, displayName, icon: ConnectorIcon,
     setError(null);
     setIsSubmitting(true);
     try {
-      await disconnectConnector(apiBaseUrl, connectorType);
+      await disconnectConnector(apiBaseUrl, connectorType, authToken);
       await fetchStatus();
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to disconnect.");
@@ -102,7 +109,7 @@ export function ConnectorCard({ connectorType, displayName, icon: ConnectorIcon,
     try {
       // Pass metadata and rules to ingestConnectorFile
       // Note: ingestConnectorFile in lib/connectorsApi.ts will need to be updated to accept these
-      const result = await ingestConnectorFile(apiBaseUrl, connectorType, ingestionTargetFileId, {
+      const result = await ingestConnectorFile(apiBaseUrl, connectorType, authToken, ingestionTargetFileId, {
         metadata: JSON.parse(ingestionMetadata),
         rules: JSON.parse(ingestionRules),
         // morphikFolderName and morphikEndUserId can be added here if there are UI elements to collect them
@@ -222,7 +229,12 @@ export function ConnectorCard({ connectorType, displayName, icon: ConnectorIcon,
             <DialogTitle>Browse Files: {displayName}</DialogTitle>
           </DialogHeader>
           <div className="flex-grow overflow-auto py-4">
-            <FileBrowser connectorType={connectorType} apiBaseUrl={apiBaseUrl} onFileIngest={handleFileIngest} />
+            <FileBrowser
+              connectorType={connectorType}
+              apiBaseUrl={apiBaseUrl}
+              authToken={authToken}
+              onFileIngest={handleFileIngest}
+            />
           </div>
           <DialogFooter className="mt-auto">
             <DialogClose asChild>

ee/ui-component/components/connectors/ConnectorList.tsx

@@ -22,9 +22,10 @@ const availableConnectors = [
 
 interface ConnectorListProps {
   apiBaseUrl: string; // Added apiBaseUrl prop
+  authToken: string | null;
 }
 
-export function ConnectorList({ apiBaseUrl }: ConnectorListProps) {
+export function ConnectorList({ apiBaseUrl, authToken }: ConnectorListProps) {
   if (availableConnectors.length === 0) {
     return (
       <div className="text-center text-muted-foreground">
@@ -42,6 +43,7 @@ export function ConnectorList({ apiBaseUrl }: ConnectorListProps) {
           displayName={connector.displayName}
           icon={connector.icon}
           apiBaseUrl={apiBaseUrl} // Pass apiBaseUrl down
+          authToken={authToken} // Pass authToken down
         />
       ))}
     </div>

ee/ui-component/components/connectors/FileBrowser.tsx

@@ -24,6 +24,7 @@ const DEFAULT_PAGE_SIZE = 20;
 interface FileBrowserProps {
   connectorType: string;
   apiBaseUrl: string;
+  authToken: string | null;
   onFileIngest: (fileId: string, fileName: string, connectorType: string) => void; // Added connectorType
   initialPath?: string | null; // Allow null for root
   // onPathChange?: (newPath: string | null, newPathName: string | null) => void; // Optional: if parent needs to know
@@ -37,6 +38,7 @@ interface PathCrumb {
 export function FileBrowser({
   connectorType,
   apiBaseUrl,
+  authToken,
   onFileIngest,
   initialPath = null, // Default to null for root
 }: FileBrowserProps) {
@@ -60,6 +62,7 @@ export function FileBrowser({
         const result = await listConnectorFiles(
           apiBaseUrl,
           connectorType,
+          authToken,
           pathId, // API function handles 'root' case if pathId is 'root' or null
           pageToken,
           undefined,
@@ -75,7 +78,7 @@ export function FileBrowser({
         setIsLoading(false);
       }
     },
-    [apiBaseUrl, connectorType]
+    [apiBaseUrl, connectorType, authToken]
   );
 
   useEffect(() => {

ee/ui-component/lib/connectorsApi.ts

@@ -6,8 +6,16 @@ export interface ConnectorAuthStatus {
 }
 
 // Fetches the authentication status for a given connector type
-export async function getConnectorAuthStatus(apiBaseUrl: string, connectorType: string): Promise<ConnectorAuthStatus> {
-  const response = await fetch(`${apiBaseUrl}/ee/connectors/${connectorType}/auth_status`);
+export async function getConnectorAuthStatus(
+  apiBaseUrl: string,
+  connectorType: string,
+  authToken: string | null
+): Promise<ConnectorAuthStatus> {
+  const response = await fetch(`${apiBaseUrl}/ee/connectors/${connectorType}/auth_status`, {
+    headers: {
+      ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
+    },
+  });
   if (!response.ok) {
     const errorData = await response.json().catch(() => ({}));
     throw new Error(
@@ -19,7 +27,14 @@ export async function getConnectorAuthStatus(apiBaseUrl: string, connectorType:
 
 // Initiates the authentication process by redirecting the user
 // The backend will handle the actual redirect to the OAuth provider
-export function initiateConnectorAuth(apiBaseUrl: string, connectorType: string, appRedirectUri: string): void {
+export function initiateConnectorAuth(
+  apiBaseUrl: string,
+  connectorType: string,
+  appRedirectUri: string
+  // authToken is not typically needed for the initiation step if it's a redirect-based flow
+  // and the backend establishes session/cookie upon callback.
+  // If token IS needed by this specific /initiate endpoint, it would be added here.
+): void {
   // The backend /auth/initiate endpoint itself performs a redirect.
   // So, navigating to it will trigger the OAuth flow.
   // We add the app_redirect_uri for the backend to use after successful callback.
@@ -29,11 +44,16 @@ export function initiateConnectorAuth(apiBaseUrl: string, connectorType: string,
 }
 
 // Disconnects a connector for the current user
-export async function disconnectConnector(apiBaseUrl: string, connectorType: string): Promise<void> {
+export async function disconnectConnector(
+  apiBaseUrl: string,
+  connectorType: string,
+  authToken: string | null
+): Promise<void> {
   const response = await fetch(`${apiBaseUrl}/ee/connectors/${connectorType}/disconnect`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
     },
   });
   if (!response.ok) {
@@ -59,6 +79,7 @@ export interface ConnectorFile {
 export async function listConnectorFiles(
   apiBaseUrl: string,
   connectorType: string,
+  authToken: string | null,
   path: string | null,
   pageToken?: string,
   q_filter?: string,
@@ -81,7 +102,7 @@ export async function listConnectorFiles(
     method: "GET",
     headers: {
       "Content-Type": "application/json",
-      // TODO: Add authorization headers if required by your API setup
+      ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
     },
   });
 
@@ -103,6 +124,7 @@ interface IngestionOptions {
 export async function ingestConnectorFile(
   apiBaseUrl: string,
   connectorType: string,
+  authToken: string | null,
   fileId: string,
   // Replace displayName with ingestionOptions
   options?: IngestionOptions
@@ -121,7 +143,7 @@ export async function ingestConnectorFile(
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      // TODO: Add authorization headers if required
+      ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
     },
     body: JSON.stringify(body),
   });

ee/ui-component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphik/ui",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "private": true,
   "description": "Modern UI component for Morphik - A powerful document processing and querying system",
   "author": "Morphik Team",