chore: Add emailed confirmation code to account deletion (#3873)

* wip

* tests

app/scenes/UserDelete.tsx

@@ -1,65 +1,120 @@
 import { observer } from "mobx-react";
 import * as React from "react";
+import { useForm } from "react-hook-form";
 import { useTranslation, Trans } from "react-i18next";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
+import { ReactHookWrappedInput as Input } from "~/components/Input";
 import Modal from "~/components/Modal";
 import Text from "~/components/Text";
+import env from "~/env";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 
+type FormData = {
+  code: string;
+};
+
 type Props = {
   onRequestClose: () => void;
 };
 
 function UserDelete({ onRequestClose }: Props) {
-  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [isWaitingCode, setWaitingCode] = React.useState(false);
   const { auth } = useStores();
   const { showToast } = useToasts();
   const { t } = useTranslation();
+  const { register, handleSubmit: formHandleSubmit, formState } = useForm<
+    FormData
+  >();
 
-  const handleSubmit = React.useCallback(
+  const handleRequestDelete = React.useCallback(
     async (ev: React.SyntheticEvent) => {
       ev.preventDefault();
-      setIsDeleting(true);
 
       try {
-        await auth.deleteUser();
-        auth.logout();
+        await auth.requestDelete();
+        setWaitingCode(true);
       } catch (error) {
         showToast(error.message, {
           type: "error",
         });
-      } finally {
-        setIsDeleting(false);
       }
     },
     [auth, showToast]
   );
 
+  const handleSubmit = React.useCallback(
+    async (data: FormData) => {
+      try {
+        await auth.deleteUser(data);
+        auth.logout();
+      } catch (error) {
+        showToast(error.message, {
+          type: "error",
+        });
+      }
+    },
+    [auth, showToast]
+  );
+
+  const inputProps = register("code", {
+    required: true,
+  });
+
   return (
     <Modal isOpen title={t("Delete Account")} onRequestClose={onRequestClose}>
       <Flex column>
-        <form onSubmit={handleSubmit}>
-          <Text type="secondary">
-            <Trans>
-              Are you sure? Deleting your account will destroy identifying data
-              associated with your user and cannot be undone. You will be
-              immediately logged out of Outline and all your API tokens will be
-              revoked.
-            </Trans>
-          </Text>
-          <Text type="secondary">
-            <Trans
-              defaults="<em>Note:</em> Signing back in will cause a new account to be automatically reprovisioned."
-              components={{
-                em: <strong />,
-              }}
-            />
-          </Text>
-          <Button type="submit" danger>
-            {isDeleting ? `${t("Deleting")}…` : t("Delete My Account")}
-          </Button>
+        <form onSubmit={formHandleSubmit(handleSubmit)}>
+          {isWaitingCode ? (
+            <>
+              <Text type="secondary">
+                <Trans>
+                  A confirmation code has been sent to your email address,
+                  please enter the code below to permanantly destroy your
+                  account.
+                </Trans>
+              </Text>
+              <Text type="secondary">
+                <Trans
+                  defaults="<em>Note:</em> Signing back in will cause a new account to be automatically reprovisioned."
+                  components={{
+                    em: <strong />,
+                  }}
+                />
+              </Text>
+              <Input
+                placeholder="CODE"
+                autoComplete="off"
+                autoFocus
+                maxLength={8}
+                required
+                {...inputProps}
+              />
+            </>
+          ) : (
+            <>
+              <Text type="secondary">
+                <Trans>
+                  Are you sure? Deleting your account will destroy identifying
+                  data associated with your user and cannot be undone. You will
+                  be immediately logged out of Outline and all your API tokens
+                  will be revoked.
+                </Trans>
+              </Text>
+            </>
+          )}
+          {env.EMAIL_ENABLED && !isWaitingCode ? (
+            <Button type="submit" onClick={handleRequestDelete} neutral>
+              {t("Continue")}…
+            </Button>
+          ) : (
+            <Button type="submit" disabled={formState.isSubmitting} danger>
+              {formState.isSubmitting
+                ? `${t("Deleting")}…`
+                : t("Delete My Account")}
+            </Button>
+          )}
         </form>
       </Flex>
     </Modal>

app/stores/AuthStore.ts

@@ -199,8 +199,13 @@ export default class AuthStore {
   };
 
   @action
-  deleteUser = async () => {
-    await client.post(`/users.delete`);
+  requestDelete = () => {
+    return client.post(`/users.requestDelete`);
+  };
+
+  @action
+  deleteUser = async (data: { code: string }) => {
+    await client.post(`/users.delete`, data);
     runInAction("AuthStore#updateUser", () => {
       this.user = null;
       this.team = null;

server/emails/templates/ConfirmUserDeleteEmail.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import BaseEmail from "./BaseEmail";
+import Body from "./components/Body";
+import CopyableCode from "./components/CopyableCode";
+import EmailTemplate from "./components/EmailLayout";
+import EmptySpace from "./components/EmptySpace";
+import Footer from "./components/Footer";
+import Header from "./components/Header";
+import Heading from "./components/Heading";
+
+type Props = {
+  to: string;
+  deleteConfirmationCode: string;
+};
+
+/**
+ * Email sent to a user when they request to delete their account.
+ */
+export default class ConfirmUserDeleteEmail extends BaseEmail<Props> {
+  protected subject() {
+    return `Your account deletion request`;
+  }
+
+  protected preview() {
+    return `Your requested account deletion code`;
+  }
+
+  protected renderAsText({ deleteConfirmationCode }: Props): string {
+    return `
+You requested to permanantly delete your Outline account. Please enter the code below to confirm your account deletion.
+
+Code: ${deleteConfirmationCode}
+`;
+  }
+
+  protected render({ deleteConfirmationCode }: Props) {
+    return (
+      <EmailTemplate>
+        <Header />
+
+        <Body>
+          <Heading>Your account deletion request</Heading>
+          <p>
+            You requested to permanantly delete your Outline account. Please
+            enter the code below to confirm your account deletion.
+          </p>
+          <EmptySpace height={5} />
+          <p>
+            <CopyableCode>{deleteConfirmationCode}</CopyableCode>
+          </p>
+        </Body>
+
+        <Footer />
+      </EmailTemplate>
+    );
+  }
+}

server/emails/templates/components/CopyableCode.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const style: React.CSSProperties = {
+  fontFamily: "monospace",
+  fontSize: "20px",
+  display: "inline-block",
+  padding: "10px 20px",
+  color: "#111319",
+  background: "#F9FBFC",
+  fontWeight: "500",
+  borderRadius: "2px",
+  letterSpacing: "0.1em",
+};
+
+const CopyableCode: React.FC = (props) => (
+  <pre {...props} style={style}>
+    {props.children}
+  </pre>
+);
+
+export default CopyableCode;

server/models/User.ts

@@ -215,6 +215,22 @@ class User extends ParanoidModel {
     return stringToColor(this.id);
   }
 
+  /**
+   * Returns a code that can be used to delete this user account. The code will
+   * be rotated when the user signs out.
+   *
+   * @returns The deletion code.
+   */
+  get deleteConfirmationCode() {
+    return crypto
+      .createHash("md5")
+      .update(this.jwtSecret)
+      .digest("hex")
+      .replace(/[l1IoO0]/gi, "")
+      .slice(0, 8)
+      .toUpperCase();
+  }
+
   // instance methods
 
   /**
@@ -550,7 +566,7 @@ class User extends ParanoidModel {
       suspendedCount: string;
       viewerCount: string;
       count: string;
-    } = results as any;
+    } = results;
 
     return {
       active: parseInt(counts.activeCount),

server/routes/api/users.test.ts

@@ -329,48 +329,35 @@ describe("#users.delete", () => {
     expect(res.status).toEqual(400);
   });
 
-  it("should allow deleting user account", async () => {
+  it("should require correct code", async () => {
+    const user = await buildAdmin();
+    await buildUser({
+      teamId: user.teamId,
+      isAdmin: false,
+    });
+    const res = await server.post("/api/users.delete", {
+      body: {
+        code: "123",
+        token: user.getJwtToken(),
+      },
+    });
+    expect(res.status).toEqual(400);
+  });
+
+  it("should allow deleting user account with correct code", async () => {
     const user = await buildUser();
     await buildUser({
       teamId: user.teamId,
     });
     const res = await server.post("/api/users.delete", {
       body: {
+        code: user.deleteConfirmationCode,
         token: user.getJwtToken(),
       },
     });
     expect(res.status).toEqual(200);
   });
 
-  it("should allow deleting user account with admin", async () => {
-    const admin = await buildAdmin();
-    const user = await buildUser({
-      teamId: admin.teamId,
-      lastActiveAt: null,
-    });
-    const res = await server.post("/api/users.delete", {
-      body: {
-        token: admin.getJwtToken(),
-        id: user.id,
-      },
-    });
-    expect(res.status).toEqual(200);
-  });
-
-  it("should not allow deleting another user account", async () => {
-    const user = await buildUser();
-    const user2 = await buildUser({
-      teamId: user.teamId,
-    });
-    const res = await server.post("/api/users.delete", {
-      body: {
-        token: user.getJwtToken(),
-        id: user2.id,
-      },
-    });
-    expect(res.status).toEqual(403);
-  });
-
   it("should require authentication", async () => {
     const res = await server.post("/api/users.delete");
     const body = await res.json();

server/routes/api/users.ts

@@ -1,3 +1,4 @@
+import crypto from "crypto";
 import Router from "koa-router";
 import { Op, WhereOptions } from "sequelize";
 import userDemoter from "@server/commands/userDemoter";
@@ -5,6 +6,7 @@ import userDestroyer from "@server/commands/userDestroyer";
 import userInviter from "@server/commands/userInviter";
 import userSuspender from "@server/commands/userSuspender";
 import { sequelize } from "@server/database/sequelize";
+import ConfirmUserDeleteEmail from "@server/emails/templates/ConfirmUserDeleteEmail";
 import InviteEmail from "@server/emails/templates/InviteEmail";
 import env from "@server/env";
 import { ValidationError } from "@server/errors";
@@ -23,6 +25,7 @@ import {
 import pagination from "./middlewares/pagination";
 
 const router = new Router();
+const emailEnabled = !!(env.SMTP_HOST || env.ENVIRONMENT === "development");
 
 router.post("users.list", auth(), pagination(), async (ctx) => {
   let { direction } = ctx.body;
@@ -367,19 +370,43 @@ router.post("users.resendInvite", auth(), async (ctx) => {
   };
 });
 
-router.post("users.delete", auth(), async (ctx) => {
-  const { id } = ctx.body;
-  const actor = ctx.state.user;
-  let user = actor;
+router.post("users.requestDelete", auth(), async (ctx) => {
+  const { user } = ctx.state;
+  authorize(user, "delete", user);
 
-  if (id) {
-    user = await User.findByPk(id);
+  if (emailEnabled) {
+    await ConfirmUserDeleteEmail.schedule({
+      to: user.email,
+      deleteConfirmationCode: user.deleteConfirmationCode,
+    });
+  }
+
+  ctx.body = {
+    success: true,
+  };
+});
+
+router.post("users.delete", auth(), async (ctx) => {
+  const { code = "" } = ctx.body;
+  const { user } = ctx.state;
+  authorize(user, "delete", user);
+
+  const deleteConfirmationCode = user.deleteConfirmationCode;
+
+  if (
+    emailEnabled &&
+    (code.length !== deleteConfirmationCode.length ||
+      !crypto.timingSafeEqual(
+        Buffer.from(code),
+        Buffer.from(deleteConfirmationCode)
+      ))
+  ) {
+    throw ValidationError("The confirmation code was incorrect");
   }
 
-  authorize(actor, "delete", user);
   await userDestroyer({
     user,
-    actor,
+    actor: user,
     ip: ctx.request.ip,
   });
 

shared/i18n/locales/en_US/translation.json

@@ -712,8 +712,9 @@
   "There are no templates just yet.": "There are no templates just yet.",
   "You can create templates to help your team create consistent and accurate documentation.": "You can create templates to help your team create consistent and accurate documentation.",
   "Trash is empty at the moment.": "Trash is empty at the moment.",
-  "Are you sure? Deleting your account will destroy identifying data associated with your user and cannot be undone. You will be immediately logged out of Outline and all your API tokens will be revoked.": "Are you sure? Deleting your account will destroy identifying data associated with your user and cannot be undone. You will be immediately logged out of Outline and all your API tokens will be revoked.",
+  "A confirmation code has been sent to your email address, please enter the code below to permanantly destroy your account.": "A confirmation code has been sent to your email address, please enter the code below to permanantly destroy your account.",
   "<em>Note:</em> Signing back in will cause a new account to be automatically reprovisioned.": "<em>Note:</em> Signing back in will cause a new account to be automatically reprovisioned.",
+  "Are you sure? Deleting your account will destroy identifying data associated with your user and cannot be undone. You will be immediately logged out of Outline and all your API tokens will be revoked.": "Are you sure? Deleting your account will destroy identifying data associated with your user and cannot be undone. You will be immediately logged out of Outline and all your API tokens will be revoked.",
   "Delete My Account": "Delete My Account",
   "Profile picture": "Profile picture",
   "You joined": "You joined",