Oauth integration

backend/score.py

@@ -1,4 +1,4 @@
-from fastapi import FastAPI, File, UploadFile, Form, Request
+from fastapi import FastAPI, File, UploadFile, Form, Request, HTTPException
 from fastapi_health import health
 from fastapi.middleware.cors import CORSMiddleware
 from src.main import *
@@ -19,7 +19,6 @@
 from src.neighbours import get_neighbour_nodes
 import json
 from typing import List
-from starlette.middleware.sessions import SessionMiddleware
 from google.oauth2.credentials import Credentials
 import os
 from src.logger import CustomLogger
@@ -33,6 +32,10 @@
 from starlette.types import ASGIApp, Receive, Scope, Send
 from langchain_neo4j import Neo4jGraph
 from src.entities.source_node import sourceNode
+from starlette.middleware.sessions import SessionMiddleware
+from starlette.responses import HTMLResponse, RedirectResponse,JSONResponse
+from starlette.requests import Request
+import secrets
 
 logger = CustomLogger()
 CHUNK_DIR = os.path.join(os.path.dirname(__file__), "chunks")
@@ -77,6 +80,7 @@ async def __call__(self, scope: Scope, receive: Receive, send: Send):
         )
         await gzip_middleware(scope, receive, send)
 app = FastAPI()
+
 app.add_middleware(XContentTypeOptions)
 app.add_middleware(XFrame, Option={'X-Frame-Options': 'DENY'})
 app.add_middleware(CustomGZipMiddleware, minimum_size=1000, compresslevel=5,paths=["/sources_list","/url/scan","/extract","/chat_bot","/chunk_entities","/get_neighbours","/graph_query","/schema","/populate_graph_schema","/get_unconnected_nodes_list","/get_duplicate_nodes","/fetch_chunktext"])
@@ -86,14 +90,14 @@ async def __call__(self, scope: Scope, receive: Receive, send: Send):
     allow_methods=["*"],
     allow_headers=["*"],
 )
+app.add_middleware(SessionMiddleware, secret_key=os.urandom(24))
 
 is_gemini_enabled = os.environ.get("GEMINI_ENABLED", "False").lower() in ("true", "1", "yes")
 if is_gemini_enabled:
     add_routes(app,ChatVertexAI(), path="/vertexai")
 
 app.add_api_route("/health", health([healthy_condition, healthy]))
 
-app.add_middleware(SessionMiddleware, secret_key=os.urandom(24))
 
 
 @app.post("/url/scan")

frontend/example.env

@@ -12,3 +12,5 @@ VITE_BATCH_SIZE=2
 VITE_LLM_MODELS_PROD="openai_gpt_4o,openai_gpt_4o_mini,diffbot,gemini_1.5_flash"
 VITE_FRONTEND_HOSTNAME="localhost:8080"
 VITE_SEGMENT_API_URL=""
+VITE_AUTH0_CLIENT_ID=""
+VITE_AUTH0_DOMAIN=""

frontend/package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@auth0/auth0-react": "^2.2.4",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.10",
     "@mui/styled-engine": "^5.15.9",

frontend/src/App.tsx

@@ -1,33 +1,13 @@
-import './App.css';
-import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
-import ThemeWrapper from './context/ThemeWrapper';
-import QuickStarter from './components/QuickStarter';
-import { GoogleOAuthProvider } from '@react-oauth/google';
-import { APP_SOURCES } from './utils/Constants';
-import ErrorBoundary from './components/UI/ErrroBoundary';
-import { Toaster } from '@neo4j-ndl/react';
-const App: React.FC = () => {
+import { Route, Routes } from 'react-router-dom';
+import ChatOnlyComponent from './components/ChatBot/ChatOnlyComponent';
+import { AuthenticationGuard } from './components/Auth/Auth';
+import Home from './Home';
+const App = () => {
   return (
-    <>
-      {APP_SOURCES != undefined && APP_SOURCES.includes('gcs') ? (
-        <ErrorBoundary>
-          <GoogleOAuthProvider clientId={process.env.VITE_GOOGLE_CLIENT_ID as string}>
-            <ThemeWrapper>
-              <QuickStarter />
-              <Toaster />
-            </ThemeWrapper>
-          </GoogleOAuthProvider>
-        </ErrorBoundary>
-      ) : (
-        <ErrorBoundary>
-          <ThemeWrapper>
-            <QuickStarter />
-            <Toaster />
-          </ThemeWrapper>
-        </ErrorBoundary>
-      )}
-    </>
+    <Routes>
+      <Route path='/' element={<AuthenticationGuard component={Home} />}></Route>
+      <Route path='/chat-only' element={<ChatOnlyComponent />}></Route>
+    </Routes>
   );
 };
-
 export default App;

frontend/src/HOC/WithVisibility.tsx

@@ -1,13 +1,13 @@
 import { VisibilityProps } from '../types';
 
 export function withVisibility<P>(WrappedComponent: React.ComponentType<P>) {
-  const VisibityControlled = (props: P & VisibilityProps) => {
+  const VisibilityControlled = (props: P & VisibilityProps) => {
     if (props.isVisible === false) {
       return null;
     }
 
     return <WrappedComponent {...props} />;
   };
 
-  return VisibityControlled;
+  return VisibilityControlled;
 }

frontend/src/Home.tsx

@@ -0,0 +1,33 @@
+import './App.css';
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import ThemeWrapper from './context/ThemeWrapper';
+import QuickStarter from './components/QuickStarter';
+import { GoogleOAuthProvider } from '@react-oauth/google';
+import { APP_SOURCES } from './utils/Constants';
+import ErrorBoundary from './components/UI/ErrroBoundary';
+import { Toaster } from '@neo4j-ndl/react';
+const Home: React.FC = () => {
+  return (
+    <>
+      {APP_SOURCES != undefined && APP_SOURCES.includes('gcs') ? (
+        <ErrorBoundary>
+          <GoogleOAuthProvider clientId={process.env.VITE_GOOGLE_CLIENT_ID as string}>
+            <ThemeWrapper>
+              <QuickStarter />
+              <Toaster />
+            </ThemeWrapper>
+          </GoogleOAuthProvider>
+        </ErrorBoundary>
+      ) : (
+        <ErrorBoundary>
+          <ThemeWrapper>
+            <QuickStarter />
+            <Toaster />
+          </ThemeWrapper>
+        </ErrorBoundary>
+      )}
+    </>
+  );
+};
+
+export default Home;

frontend/src/components/Auth/Auth.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { AppState, Auth0Provider, withAuthenticationRequired } from '@auth0/auth0-react';
+import { useNavigate } from 'react-router';
+const domain = process.env.VITE_AUTH0_DOMAIN;
+const clientId = process.env.VITE_AUTH0_CLIENT_ID;
+const Auth0ProviderWithHistory: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const navigate = useNavigate();
+
+  function onRedirectCallback(appState?: AppState) {
+    navigate(appState?.returnTo || window.location.pathname, { state: appState });
+  }
+
+  return (
+    <Auth0Provider
+      domain={domain as string}
+      clientId={clientId as string}
+      authorizationParams={{ redirect_uri: window.location.origin }}
+      onRedirectCallback={onRedirectCallback}
+    >
+      {children}
+    </Auth0Provider>
+  );
+};
+
+export const AuthenticationGuard: React.FC<{ component: React.ComponentType<object> }> = ({ component }) => {
+  const Component = withAuthenticationRequired(component);
+  return <Component />;
+};
+
+export default Auth0ProviderWithHistory;

frontend/src/components/Content.tsx

@@ -63,6 +63,9 @@ const Content: React.FC<ContentProps> = ({
   const [openGraphView, setOpenGraphView] = useState<boolean>(false);
   const [inspectedName, setInspectedName] = useState<string>('');
   const [documentName, setDocumentName] = useState<string>('');
+  const [showConfirmationModal, setShowConfirmationModal] = useState<boolean>(false);
+  const [showExpirationModal, setShowExpirationModal] = useState<boolean>(false);
+  const [extractLoading, setIsExtractLoading] = useState<boolean>(false);
   const {
     setUserCredentials,
     userCredentials,
@@ -72,9 +75,7 @@ const Content: React.FC<ContentProps> = ({
     isGCSActive,
     chunksToBeProces,
   } = useCredentials();
-  const [showConfirmationModal, setshowConfirmationModal] = useState<boolean>(false);
-  const [showExpirationModal, setshowExpirationModal] = useState<boolean>(false);
-  const [extractLoading, setextractLoading] = useState<boolean>(false);
+
   const [retryFile, setRetryFile] = useState<string>('');
   const [retryLoading, setRetryLoading] = useState<boolean>(false);
   const [showRetryPopup, toggleRetryPopup] = useReducer((state) => !state, false);
@@ -111,8 +112,10 @@ const Content: React.FC<ContentProps> = ({
   const [viewPoint, setViewPoint] = useState<'tableView' | 'showGraphView' | 'chatInfoView' | 'neighborView'>(
     'tableView'
   );
-  const [showDeletePopUp, setshowDeletePopUp] = useState<boolean>(false);
-  const [deleteLoading, setdeleteLoading] = useState<boolean>(false);
+
+  const [showDeletePopUp, setShowDeletePopUp] = useState<boolean>(false);
+  const [deleteLoading, setIsDeleteLoading] = useState<boolean>(false);
+
   const hasSelections = useHasSelections(selectedNodes, selectedRels);
 
   const { updateStatusForLargeFiles } = useServerSideEvent(
@@ -236,13 +239,13 @@ const Content: React.FC<ContentProps> = ({
     if (!isselectedRows) {
       const fileItem = filesData.find((f) => f.id == uid);
       if (fileItem) {
-        setextractLoading(true);
+        setIsExtractLoading(true);
         await extractHandler(fileItem, uid);
       }
     } else {
       const fileItem = filesTobeProcess.find((f) => f.id == uid);
       if (fileItem) {
-        setextractLoading(true);
+        setIsExtractLoading(true);
         await extractHandler(fileItem, uid);
       }
     }
@@ -508,12 +511,12 @@ const Content: React.FC<ContentProps> = ({
         data = triggerBatchProcessing(filesTobeSchedule, filesTobeProcessed, true, true);
       }
       Promise.allSettled(data).then((_) => {
-        setextractLoading(false);
+        setIsExtractLoading(false);
       });
     } else if (queueFiles && !queue.isEmpty() && processingFilesCount < batchSize) {
       data = scheduleBatchWiseProcess(queue.items, true);
       Promise.allSettled(data).then((_) => {
-        setextractLoading(false);
+        setIsExtractLoading(false);
       });
     } else {
       addFilesToQueue(filesTobeProcessed as CustomFile[]);
@@ -532,7 +535,7 @@ const Content: React.FC<ContentProps> = ({
         data = triggerBatchProcessing(queue.items, queue.items as CustomFile[], true, false);
       }
       Promise.allSettled(data).then((_) => {
-        setextractLoading(false);
+        setIsExtractLoading(false);
       });
     } else {
       const selectedNewFiles = childRef.current
@@ -680,7 +683,7 @@ const Content: React.FC<ContentProps> = ({
 
   const handleDeleteFiles = async (deleteEntities: boolean) => {
     try {
-      setdeleteLoading(true);
+      setIsDeleteLoading(true);
       const response = await deleteAPI(
         userCredentials as UserCredentials,
         childRef.current?.getSelectedRows() as CustomFile[],
@@ -689,7 +692,7 @@ const Content: React.FC<ContentProps> = ({
       queue.clear();
       setProcessedCount(0);
       setRowSelection({});
-      setdeleteLoading(false);
+      setIsDeleteLoading(false);
       if (response.data.status == 'Success') {
         showSuccessToast(response.data.message);
         const filenames = childRef.current?.getSelectedRows().map((str) => str.name);
@@ -703,17 +706,17 @@ const Content: React.FC<ContentProps> = ({
         let errorobj = { error: response.data.error, message: response.data.message };
         throw new Error(JSON.stringify(errorobj));
       }
-      setshowDeletePopUp(false);
+      setShowDeletePopUp(false);
     } catch (err) {
-      setdeleteLoading(false);
+      setIsDeleteLoading(false);
       if (err instanceof Error) {
         const error = JSON.parse(err.message);
         const { message } = error;
         showErrorToast(message);
         console.log(err);
       }
     }
-    setshowDeletePopUp(false);
+    setShowDeletePopUp(false);
   };
 
   const onClickHandler = () => {
@@ -726,11 +729,10 @@ const Content: React.FC<ContentProps> = ({
         (c) => isFileReadyToProcess(c, true) && typeof c.size === 'number' && c.size > largeFileSize
       );
       if (expiredFilesExists) {
-        setshowExpirationModal(true);
+        setShowExpirationModal(true);
       } else if (largeFileExists && isGCSActive) {
-        setshowConfirmationModal(true);
-        setshowExpirationModal(true);
-      }  else {
+        setShowConfirmationModal(true);
+      } else {
         handleGenerateGraph(selectedRows.filter((f) => isFileReadyToProcess(f, false)));
       }
     } else if (filesData.length) {
@@ -747,9 +749,9 @@ const Content: React.FC<ContentProps> = ({
       }, {});
       setRowSelection(stringified);
       if (largeFileExists) {
-        setshowConfirmationModal(true);
+        setShowConfirmationModal(true);
       } else if (expiredFileExists && isGCSActive) {
-        setshowExpirationModal(true);
+        setShowExpirationModal(true);
       } else {
         handleGenerateGraph(filesData.filter((f) => isFileReadyToProcess(f, false)));
       }
@@ -792,7 +794,7 @@ const Content: React.FC<ContentProps> = ({
             open={showConfirmationModal}
             largeFiles={filesForProcessing}
             extractHandler={handleGenerateGraph}
-            onClose={() => setshowConfirmationModal(false)}
+            onClose={() => setShowConfirmationModal(false)}
             loading={extractLoading}
             selectedRows={childRef.current?.getSelectedRows() as CustomFile[]}
             isLargeDocumentAlert={true}
@@ -805,7 +807,7 @@ const Content: React.FC<ContentProps> = ({
             open={showExpirationModal}
             largeFiles={filesForProcessing}
             extractHandler={handleGenerateGraph}
-            onClose={() => setshowExpirationModal(false)}
+            onClose={() => setShowExpirationModal(false)}
             loading={extractLoading}
             selectedRows={childRef.current?.getSelectedRows() as CustomFile[]}
             isLargeDocumentAlert={false}
@@ -818,7 +820,7 @@ const Content: React.FC<ContentProps> = ({
             open={showExpirationModal}
             largeFiles={filesForProcessing}
             extractHandler={handleGenerateGraph}
-            onClose={() => setshowExpirationModal(false)}
+            onClose={() => setShowExpirationModal(false)}
             loading={extractLoading}
             selectedRows={childRef.current?.getSelectedRows() as CustomFile[]}
             isLargeDocumentAlert={false}
@@ -830,7 +832,7 @@ const Content: React.FC<ContentProps> = ({
           open={showDeletePopUp}
           no_of_files={selectedfileslength ?? 0}
           deleteHandler={(delentities: boolean) => handleDeleteFiles(delentities)}
-          deleteCloseHandler={() => setshowDeletePopUp(false)}
+          deleteCloseHandler={() => setShowDeletePopUp(false)}
           loading={deleteLoading}
           view='contentView'
         ></DeletePopUp>
@@ -1007,7 +1009,7 @@ const Content: React.FC<ContentProps> = ({
                 !selectedfileslength ? tooltips.deleteFile : `${selectedfileslength} ${tooltips.deleteSelectedFiles}`
               }
               placement='top'
-              onClick={() => setshowDeletePopUp(true)}
+              onClick={() => setShowDeletePopUp(true)}
               disabled={!selectedfileslength || isReadOnlyUser}
               className='ml-0.5'
               label='Delete Files'

frontend/src/components/DataSources/AWS/S3Modal.tsx

@@ -15,7 +15,7 @@ const S3Modal: React.FC<S3ModalProps> = ({ hideModal, open }) => {
   const [secretKey, setSecretKey] = useState<string>('');
   const [status, setStatus] = useState<'unknown' | 'success' | 'info' | 'warning' | 'danger'>('unknown');
   const [statusMessage, setStatusMessage] = useState<string>('');
-  const [isFocused, setisFocused] = useState<boolean>(false);
+  const [isFocused, setIsFocused] = useState<boolean>(false);
   const [isValid, setValid] = useState<boolean>(false);
   const { userCredentials } = useCredentials();
   const { setFilesData, model, filesData } = useFileContext();
@@ -25,7 +25,7 @@ const S3Modal: React.FC<S3ModalProps> = ({ hideModal, open }) => {
     setAccessKey('');
     setSecretKey('');
     setValid(false);
-    setisFocused(false);
+    setIsFocused(false);
   };
 
   const submitHandler = async (url: string) => {
@@ -174,7 +174,7 @@ const S3Modal: React.FC<S3ModalProps> = ({ hideModal, open }) => {
             isRequired={true}
             errorText={!isValid && isFocused && 'Please Fill The Valid URL'}
             onChange={(e) => {
-              setisFocused(true);
+              setIsFocused(true);
               setBucketUrl(e.target.value);
             }}
           />