🐛 fix(base.py): set AUTO_LOGIN to False to disable automatic login as a super user

✨ feat(App.tsx): add logout function to useContext and handle page refresh to maintain user login state
🐛 fix(SecretKeyModal/index.tsx): add onCloseModal function to handle closing modal when API key is not available
✨ feat(ApiKeysPage/index.tsx): add onCloseModal prop to SecretKeyModal component to refresh API keys after creating a new key
🐛 fix(ApiKeysPage/index.tsx): replace getIdKeyHidden function with directly accessing api_key property in ApiKey object
✨ feat(types/components/index.ts): add onCloseModal function to ApiKeyType type to handle closing modals

src/backend/langflow/services/settings/base.py

@@ -55,7 +55,7 @@ class Settings(BaseSettings):
 
     # If AUTO_LOGIN = True
     # > The application does not request login and logs in automatically as a super user.
-    AUTO_LOGIN: bool = True
+    AUTO_LOGIN: bool = False
     FIRST_SUPERUSER: str = "langflow"
     FIRST_SUPERUSER_PASSWORD: str = "langflow"
 

src/frontend/src/App.tsx

@@ -134,7 +134,7 @@ export default function App() {
   };
 
   //this function is to get the user logged in when the page is refreshed
-  const { setUserData, getAuthentication, login, setAutoLogin } =
+  const { setUserData, getAuthentication, login, setAutoLogin, logout } =
     useContext(AuthContext);
 
   useEffect(() => {
@@ -156,6 +156,9 @@ export default function App() {
             })
             .catch((error) => {});
         }
+        else{
+          setLoading(false);
+        }
       });
     }, 500);
   }, []);

src/frontend/src/modals/SecretKeyModal/index.tsx

@@ -21,6 +21,7 @@ export default function SecretKeyModal({
   children,
   icon,
   data,
+  onCloseModal
 }: ApiKeyType) {
   const Icon: any = nodeIconsLucide[icon];
   const [open, setOpen] = useState(false);
@@ -31,7 +32,7 @@ export default function SecretKeyModal({
   const [renderKey, setRenderKey] = useState(false);
   const [textCopied, setTextCopied] = useState(true);
   const { setSuccessData } = useContext(alertContext);
-  const inputRef = useRef(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
   function handleInput({
     target: { name, value },
@@ -44,6 +45,9 @@ export default function SecretKeyModal({
       setRenderKey(false);
       resetForm();
     }
+    else{
+      onCloseModal();
+    }
   }, [open]);
 
   function resetForm() {
@@ -54,8 +58,8 @@ export default function SecretKeyModal({
   const handleCopyClick = async () => {
     if (apiKeyValue) {
       await navigator.clipboard.writeText(apiKeyValue);
-      inputRef.current.focus();
-      inputRef.current.select();
+      inputRef?.current?.focus();
+      inputRef?.current?.select();
       setSuccessData({
         title: "API Key copied!",
       });

src/frontend/src/pages/ApiKeysPage/index.tsx

@@ -17,6 +17,7 @@ import ConfirmationModal from "../../modals/ConfirmationModal";
 import SecretKeyModal from "../../modals/SecretKeyModal";
 
 import moment from "moment";
+import { ApiKey } from "../../types/components";
 
 export default function ApiKeysPage() {
   const [loadingKeys, setLoadingKeys] = useState(true);
@@ -35,7 +36,7 @@ export default function ApiKeysPage() {
     setLoadingKeys(true);
     if (userData) {
       getApiKey(userData.id)
-        .then((keys) => {
+        .then((keys: [ApiKey]) => {
           keysList.current = keys["api_keys"];
           setUserId(keys["user_id"]);
           setLoadingKeys(false);
@@ -77,12 +78,6 @@ export default function ApiKeysPage() {
     );
   }
 
-  function getIdKeyHidden(apiKey: string) {
-    const firstTwoChars = apiKey.slice(0, 2);
-    const lastFourChars = apiKey.slice(-4);
-    return firstTwoChars + "..." + lastFourChars;
-  }
-
   return (
     <>
       {userData && (
@@ -153,7 +148,7 @@ export default function ApiKeysPage() {
                       </TableHeader>
                       {!loadingKeys && (
                         <TableBody>
-                          {keysList.current.map((api_keys, index) => (
+                          {keysList.current.map((api_keys: ApiKey, index: number) => (
                             <TableRow key={index}>
                               <TableCell className="truncate py-2">
                                 <ShadTooltip content={api_keys.name}>
@@ -164,11 +159,11 @@ export default function ApiKeysPage() {
                               </TableCell>
                               <TableCell className="truncate py-2">
                                 <span className="cursor-default">
-                                  {getIdKeyHidden(api_keys.id)}
+                                  {api_keys.api_key}
                                 </span>
                               </TableCell>
                               <TableCell className="truncate py-2 ">
-                                {moment(api_keys.create_at).format(
+                                {moment(api_keys.created_at).format(
                                   "YYYY-MM-DD HH:mm"
                                 )}
                               </TableCell>
@@ -217,6 +212,7 @@ export default function ApiKeysPage() {
                         confirmationText="Create secret key"
                         icon={"Key"}
                         data={userId}
+                        onCloseModal={() => {getKeys()}}
                       >
                         <Button>
                           <IconComponent name="Plus" className="mr-1 h-5 w-5" />

src/frontend/src/types/components/index.ts

@@ -275,6 +275,8 @@ export type ApiKeyType = {
   children: ReactElement;
   icon: string;
   data?: any;
+  onCloseModal: () => void;
+
 };
 
 export type ApiKeyInputType = {
@@ -527,3 +529,11 @@ export type validationStatusType = {
   progress: number;
   valid: boolean;
 };
+
+export type ApiKey = {
+  id: string;
+  api_key: string;
+  name: string;
+  created_at: string;
+  last_used_at: string;
+};