🚫👤feat: delete user from UI

.env.example

@@ -319,6 +319,7 @@ ALLOW_EMAIL_LOGIN=true
 ALLOW_REGISTRATION=true
 ALLOW_SOCIAL_LOGIN=false
 ALLOW_SOCIAL_REGISTRATION=false
+ALLOW_ACCOUNT_DELETION=
 
 SESSION_EXPIRY=1000 * 60 * 15
 REFRESH_TOKEN_EXPIRY=(1000 * 60 * 60 * 24) * 7

api/models/File.js

@@ -97,8 +97,12 @@ const deleteFileByFilter = async (filter) => {
  * @param {Array<string>} file_ids - The unique identifiers of the files to delete.
  * @returns {Promise<Object>} A promise that resolves to the result of the deletion operation.
  */
-const deleteFiles = async (file_ids) => {
-  return await File.deleteMany({ file_id: { $in: file_ids } });
+const deleteFiles = async (file_ids, user) => {
+  let deleteQuery = { file_id: { $in: file_ids } };
+  if (user) {
+    deleteQuery = { user: user };
+  }
+  return await File.deleteMany(deleteQuery);
 };
 
 module.exports = {

api/server/controllers/UserController.js

@@ -1,6 +1,16 @@
-const { updateUserPluginsService } = require('~/server/services/UserService');
+const { updateUserPluginsService, deleteUserKey } = require('~/server/services/UserService');
 const { updateUserPluginAuth, deleteUserPluginAuth } = require('~/server/services/PluginService');
 const { logger } = require('~/config');
+const {
+  deleteConvos,
+  deleteMessages,
+  deletePresets,
+  User,
+  Session,
+  Balance,
+  Transaction,
+  deleteFiles,
+} = require('~/models');
 
 const getUserController = async (req, res) => {
   res.status(200).send(req.user);
@@ -53,7 +63,30 @@ const updateUserPluginsController = async (req, res) => {
   }
 };
 
+const deleteUserController = async (req, res) => {
+  const { user } = req;
+
+  try {
+    await deleteMessages({ user: user.id }); // delete user messages
+    await Session.deleteMany({ user: user.id }); // delete user sessions
+    await Transaction.deleteMany({ user: user.id }); // delete user transactions
+    await deleteUserKey({ userId: user.id, all: true }); // delete user keys
+    await Balance.deleteMany({ user: user._id }); // delete user balances
+    await deletePresets(user.id); // delete user presets
+    await deleteConvos(user.id); // delete user convos
+    await deleteUserPluginAuth(user.id, null, true); // delete user plugin auth
+    await User.deleteOne({ _id: user.id }); // delete user
+    await deleteFiles(null, user.id); // delete user files
+
+    res.status(200).send({ message: 'User deleted' });
+  } catch (err) {
+    logger.error('[deleteUserController]', err);
+    res.status(500).send({ message: err.message });
+  }
+};
+
 module.exports = {
   getUserController,
   updateUserPluginsController,
+  deleteUserController,
 };

api/server/middleware/canDeleteAccount.js

@@ -0,0 +1,26 @@
+const { logger } = require('~/config');
+const { isEnabled } = require('~/server/utils');
+
+/**
+ * Checks if the user can delete their account
+ *
+ * @async
+ * @function
+ * @param {Object} req - Express request object
+ * @param {Object} res - Express response object
+ * @param {Function} next - Next middleware function
+ *
+ * @returns {Promise<function|Object>} - Returns a Promise which when resolved calls next middleware if the user can delete their account
+ */
+
+const canDeleteAccount = async (req, res, next = () => {}) => {
+  const { user } = req;
+  if (user?.role === 'admin' || isEnabled(process.env.ALLOW_ACCOUNT_DELETION)) {
+    return next();
+  } else {
+    logger.error(`[User] [Delete Account] [User cannot delete account] [User: ${user?.id}]`);
+    return res.status(403).send({ message: 'You do not have permission to delete this account' });
+  }
+};
+
+module.exports = canDeleteAccount;

api/server/middleware/index.js

@@ -19,6 +19,7 @@ const validateImageRequest = require('./validateImageRequest');
 const moderateText = require('./moderateText');
 const noIndex = require('./noIndex');
 const importLimiters = require('./importLimiters');
+const canDeleteAccount = require('./canDeleteAccount');
 
 module.exports = {
   ...uploadLimiters,
@@ -42,4 +43,5 @@ module.exports = {
   noIndex,
   ...importLimiters,
   checkDomainAllowed,
+  canDeleteAccount,
 };

api/server/routes/user.js

@@ -1,10 +1,16 @@
 const express = require('express');
 const requireJwtAuth = require('../middleware/requireJwtAuth');
-const { getUserController, updateUserPluginsController } = require('../controllers/UserController');
+const canDeleteAccount = require('../middleware/canDeleteAccount');
+const {
+  getUserController,
+  updateUserPluginsController,
+  deleteUserController,
+} = require('../controllers/UserController');
 
 const router = express.Router();
 
 router.get('/', requireJwtAuth, getUserController);
 router.post('/plugins', requireJwtAuth, updateUserPluginsController);
+router.delete('/delete', requireJwtAuth, canDeleteAccount, deleteUserController);
 
 module.exports = router;

api/server/services/PluginService.js

@@ -88,7 +88,17 @@ const updateUserPluginAuth = async (userId, authField, pluginKey, value) => {
   }
 };
 
-const deleteUserPluginAuth = async (userId, authField) => {
+const deleteUserPluginAuth = async (userId, authField, all = false) => {
+  if (all) {
+    try {
+      const response = await PluginAuth.deleteMany({ userId });
+      return response;
+    } catch (err) {
+      logger.error('[deleteUserPluginAuth]', err);
+      return err;
+    }
+  }
+
   try {
     return await PluginAuth.deleteOne({ userId, authField });
   } catch (err) {

client/src/components/Auth/SocialButton.tsx

@@ -15,7 +15,9 @@ const SocialButton = ({ id, enabled, serverDomain, oauthPath, Icon, label }) =>
 
   const handleMouseLeave = () => {
     setIsHovered(false);
-    if (isPressed) {setIsPressed(false);}
+    if (isPressed) {
+      setIsPressed(false);
+    }
   };
 
   const handleMouseDown = () => {

client/src/components/Nav/ClearConvos.tsx

@@ -15,7 +15,6 @@ const ClearConvos = ({ open, onOpenChange }) => {
   // Clear all conversations
   const clearConvos = () => {
     if (confirmClear) {
-      console.log('Clearing conversations...');
       clearConvosMutation.mutate(
         {},
         {

client/src/components/Nav/SettingsTabs/Account/Account.tsx

@@ -6,6 +6,7 @@ import { Switch } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 import Avatar from './Avatar';
 import store from '~/store';
+import DeleteAccount from './DeleteAccount';
 
 function Account({ onCheckedChange }: { onCheckedChange?: (value: boolean) => void }) {
   const [UsernameDisplay, setUsernameDisplay] = useRecoilState<boolean>(store.UsernameDisplay);
@@ -28,6 +29,9 @@ function Account({ onCheckedChange }: { onCheckedChange?: (value: boolean) => vo
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
           <Avatar />
         </div>
+        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+          <DeleteAccount />
+        </div>
         <div className="flex items-center justify-between">
           <div> {localize('com_nav_user_name_display')} </div>
           <Switch
@@ -39,7 +43,6 @@ function Account({ onCheckedChange }: { onCheckedChange?: (value: boolean) => vo
           />
         </div>
       </div>
-      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600"></div>
     </Tabs.Content>
   );
 }

client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx

@@ -0,0 +1,171 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogButton,
+  Input,
+} from '~/components/ui';
+import { useDeleteUserMutation } from 'librechat-data-provider/react-query';
+import { useLocalize } from '~/hooks';
+import { cn, defaultTextProps, removeFocusOutlines } from '~/utils';
+import { Spinner, LockIcon } from '~/components/svg';
+import { useAuthContext } from '~/hooks/AuthContext';
+
+const DeleteAccount = ({ disabled = false }: { title?: string; disabled?: boolean }) => {
+  const localize = useLocalize();
+  const { user } = useAuthContext();
+  const userEmail = user?.email;
+  const [isDialogOpen, setDialogOpen] = useState<boolean>(false);
+  const { mutate: deleteUser, isLoading: isDeleting } = useDeleteUserMutation();
+  const [emailInput, setEmailInput] = useState('');
+  const [deleteInput, setDeleteInput] = useState('');
+  const [isLocked, setIsLocked] = useState(true);
+
+  const onClick = useCallback(() => {
+    setDialogOpen(true);
+  }, []);
+
+  const handleDeleteUser = () => {
+    if (!isLocked) {
+      deleteUser({});
+    }
+  };
+
+  const handleInputChange = useCallback(
+    (newEmailInput: string, newDeleteInput: string) => {
+      const isEmailCorrect = newEmailInput.trim().toLowerCase() === userEmail?.trim().toLowerCase();
+      const isDeleteInputCorrect = newDeleteInput === 'DELETE';
+      setIsLocked(!(isEmailCorrect && isDeleteInputCorrect));
+    },
+    [userEmail],
+  );
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <span>{localize('com_nav_delete_account')}</span>
+        <label>
+          <DialogButton
+            id={'delete-user-account'}
+            disabled={disabled}
+            onClick={onClick}
+            className={cn(
+              'btn btn-danger relative border-none bg-red-700 text-white hover:bg-red-800 dark:hover:bg-red-800',
+            )}
+          >
+            {localize('com_ui_delete')}
+          </DialogButton>
+        </label>
+      </div>
+      <Dialog open={isDialogOpen} onOpenChange={() => setDialogOpen(false)}>
+        <DialogContent
+          className={cn('shadow-2xl md:h-[500px] md:w-[450px]')}
+          style={{ borderRadius: '12px', padding: '20px' }}
+        >
+          <DialogHeader>
+            <DialogTitle className="text-lg font-medium leading-6">
+              {localize('com_nav_delete_account_confirm')}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="mb-20 text-sm text-black dark:text-white">
+            <ul>
+              <li>{localize('com_nav_delete_warning')}</li>
+              <li>{localize('com_nav_delete_data_info')}</li>
+              <li>{localize('com_nav_delete_help_center')}</li>
+            </ul>
+          </div>
+          <div className="flex-col items-center justify-center">
+            <div className="mb-4">
+              {renderInput(
+                localize('com_nav_delete_account_email_placeholder'),
+                'email-confirm-input',
+                userEmail || '',
+                (e) => {
+                  setEmailInput(e.target.value);
+                  handleInputChange(e.target.value, deleteInput);
+                },
+              )}
+            </div>
+            <div className="mb-4">
+              {renderInput(
+                localize('com_nav_delete_account_confirm_placeholder'),
+                'delete-confirm-input',
+                '',
+                (e) => {
+                  setDeleteInput(e.target.value);
+                  handleInputChange(emailInput, e.target.value);
+                },
+              )}
+            </div>
+            {renderDeleteButton(handleDeleteUser, isDeleting, isLocked, localize)}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+const renderInput = (
+  label: string,
+  id: string,
+  value: string,
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
+) => (
+  <div className="mb-4">
+    <label className="mb-1 block text-sm font-medium text-black dark:text-white">{label}</label>
+    <Input
+      id={id}
+      onChange={onChange}
+      placeholder={value}
+      className={cn(
+        defaultTextProps,
+        'h-10 max-h-10 w-full max-w-full rounded-md bg-white px-3 py-2',
+        removeFocusOutlines,
+      )}
+    />
+  </div>
+);
+
+const renderDeleteButton = (
+  handleDeleteUser: () => void,
+  isDeleting: boolean,
+  isLocked: boolean,
+  localize: (key: string) => string,
+) => (
+  <button
+    className={cn(
+      'mt-4 flex w-full items-center justify-center rounded-lg px-4 py-2 transition-colors duration-200',
+      isLocked
+        ? 'cursor-not-allowed bg-gray-200 text-gray-300 dark:bg-gray-500 dark:text-gray-600'
+        : isDeleting
+          ? 'cursor-not-allowed bg-gray-100 text-gray-700 dark:bg-gray-400 dark:text-gray-700'
+          : 'bg-red-700 text-white hover:bg-red-800 ',
+    )}
+    onClick={handleDeleteUser}
+    disabled={isDeleting || isLocked}
+  >
+    {isDeleting ? (
+      <div className="flex h-6 justify-center">
+        <Spinner className="icon-sm m-auto" />
+      </div>
+    ) : (
+      <>
+        {isLocked ? (
+          <>
+            <LockIcon />
+            <span className="ml-2">{localize('com_ui_locked')}</span>
+          </>
+        ) : (
+          <>
+            <LockIcon />
+            <span className="ml-2">{localize('com_nav_delete_account_button')}</span>
+          </>
+        )}
+      </>
+    )}
+  </button>
+);
+
+export default DeleteAccount;

client/src/components/svg/LockIcon.tsx

@@ -0,0 +1,19 @@
+export default function LockIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-lock"
+    >
+      <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
+      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </svg>
+  );
+}

client/src/components/svg/index.ts

@@ -46,6 +46,7 @@ export { default as VolumeIcon } from './VolumeIcon';
 export { default as VolumeMuteIcon } from './VolumeMuteIcon';
 export { default as SendMessageIcon } from './SendMessageIcon';
 export { default as UserIcon } from './UserIcon';
+export { default as LockIcon } from './LockIcon';
 export { default as NewChatIcon } from './NewChatIcon';
 export { default as ExperimentIcon } from './ExperimentIcon';
 export { default as GoogleIconChat } from './GoogleIconChat';