Improve 2fa: ask for code before account removal and 2fa disabling

apps/web/components/auth/TwoFactor.tsx

@@ -2,11 +2,10 @@ import React, { useEffect, useState } from "react";
 import useDigitInput from "react-digit-input";
 import { useFormContext } from "react-hook-form";
 
-import { Input } from "@calcom/ui/form/fields";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Label, Input } from "@calcom/ui/form/fields";
 
-import { useLocale } from "@lib/hooks/useLocale";
-
-export default function TwoFactor() {
+export default function TwoFactor({ center = true }) {
  const [value, onChange] = useState("");
  const { t } = useLocale();
  const methods = useFormContext();
@@ -26,7 +25,9 @@ export default function TwoFactor() {
  const className = "h-12 w-12 !text-xl text-center";
 
  return (
- <div className="mx-auto !mt-0 max-w-sm">
+ <div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
+ <Label className="mt-4"> {t("2fa_code")}</Label>
+
  <p className="mb-4 text-sm text-gray-500">{t("2fa_enabled_instructions")}</p>
  <input hidden type="hidden" value={value} {...methods.register("totpCode")} />
  <div className="flex flex-row justify-between">

apps/web/components/security/DisableTwoFactorModal.tsx

@@ -1,10 +1,14 @@
-import { SyntheticEvent, useState } from "react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 
+import { ErrorCode } from "@calcom/lib/auth";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Form, Label } from "@calcom/ui/form/fields";
+import { PasswordField } from "@calcom/ui/v2/core/form/fields";
 
-import { ErrorCode } from "@lib/auth";
-import { useLocale } from "@lib/hooks/useLocale";
+import TwoFactor from "@components/auth/TwoFactor";
 
 import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
 import TwoFactorModalHeader from "./TwoFactorModalHeader";
@@ -16,23 +20,25 @@ interface DisableTwoFactorAuthModalProps {
  onDisable: () => void;
 }
 
+interface DisableTwoFactorValues {
+ totpCode: string;
+ password: string;
+}
+
 const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuthModalProps) => {
- const [password, setPassword] = useState("");
  const [isDisabling, setIsDisabling] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const { t } = useLocale();
-
- async function handleDisable(e: SyntheticEvent) {
- e.preventDefault();
-
+ const form = useForm<DisableTwoFactorValues>();
+ async function handleDisable({ totpCode, password }: DisableTwoFactorValues) {
  if (isDisabling) {
  return;
  }
  setIsDisabling(true);
  setErrorMessage(null);
 
  try {
- const response = await TwoFactorAuthAPI.disable(password);
+ const response = await TwoFactorAuthAPI.disable(password, totpCode);
  if (response.status === 200) {
  onDisable();
  return;
@@ -41,6 +47,12 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
  const body = await response.json();
  if (body.error === ErrorCode.IncorrectPassword) {
  setErrorMessage(t("incorrect_password"));
+ }
+ if (body.error === ErrorCode.SecondFactorRequired) {
+ setErrorMessage(t("2fa_required"));
+ }
+ if (body.error === ErrorCode.IncorrectTwoFactorCode) {
+ setErrorMessage(t("incorrect_2fa"));
  } else {
  setErrorMessage(t("something_went_wrong"));
  }
@@ -55,41 +67,32 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
  return (
  <Dialog open={true}>
  <DialogContent>
- <TwoFactorModalHeader title={t("disable_2fa")} description={t("disable_2fa_recommendation")} />
+ <Form form={form} handleSubmit={handleDisable}>
+ <TwoFactorModalHeader title={t("disable_2fa")} description={t("disable_2fa_recommendation")} />
 
- <form onSubmit={handleDisable}>
  <div className="mb-4">
- <label htmlFor="password" className="mt-4 block text-sm font-medium text-gray-700">
- {t("password")}
- </label>
- <div className="mt-1">
- <input
- type="password"
- name="password"
- id="password"
- required
- value={password}
- onInput={(e) => setPassword(e.currentTarget.value)}
- className="block w-full rounded-sm border-gray-300 text-sm"
- />
- </div>
+ <PasswordField
+ labelProps={{
+ className: "block text-sm font-medium text-gray-700",
+ }}
+ {...form.register("password")}
+ className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
+ />
+ <Label className="mt-4"> {t("2fa_code")}</Label>
 
+ <TwoFactor center={false} />
  {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
  </div>
- </form>
 
- <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
- <Button
- type="submit"
- className="ltr:ml-2 rtl:mr-2"
- onClick={handleDisable}
- disabled={password.length === 0 || isDisabling}>
- {t("disable")}
- </Button>
- <Button color="secondary" onClick={onCancel}>
- {t("cancel")}
- </Button>
- </div>
+ <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+ <Button type="submit" className="ltr:ml-2 rtl:mr-2" disabled={isDisabling}>
+ {t("disable")}
+ </Button>
+ <Button color="secondary" onClick={onCancel}>
+ {t("cancel")}
+ </Button>
+ </div>
+ </Form>
  </DialogContent>
  </Dialog>
  );

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -1,10 +1,13 @@
-import React, { SyntheticEvent, useState } from "react";
+import React, { BaseSyntheticEvent, useState } from "react";
+import { useForm } from "react-hook-form";
 
+import { ErrorCode } from "@calcom/lib/auth";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Form } from "@calcom/ui/v2/core/form/fields";
 
-import { ErrorCode } from "@lib/auth";
-import { useLocale } from "@lib/hooks/useLocale";
+import TwoFactor from "@components/auth/TwoFactor";
 
 import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
 import TwoFactorModalHeader from "./TwoFactorModalHeader";
@@ -39,22 +42,27 @@ const WithStep = ({
  return step === current ? children : null;
 };
 
+interface EnableTwoFactorValues {
+ totpCode: string;
+}
+
 const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps) => {
  const { t } = useLocale();
+ const form = useForm<EnableTwoFactorValues>();
+
  const setupDescriptions = {
  [SetupStep.ConfirmPassword]: t("2fa_confirm_current_password"),
  [SetupStep.DisplayQrCode]: t("2fa_scan_image_or_use_code"),
  [SetupStep.EnterTotpCode]: t("2fa_enter_six_digit_code"),
  };
  const [step, setStep] = useState(SetupStep.ConfirmPassword);
  const [password, setPassword] = useState("");
- const [totpCode, setTotpCode] = useState("");
  const [dataUri, setDataUri] = useState("");
  const [secret, setSecret] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
- async function handleSetup(e: SyntheticEvent) {
+ async function handleSetup(e: React.FormEvent) {
  e.preventDefault();
 
  if (isSubmitting) {
@@ -88,10 +96,10 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
  }
  }
 
- async function handleEnable(e: SyntheticEvent) {
- e.preventDefault();
+ async function handleEnable({ totpCode }: EnableTwoFactorValues, e: BaseSyntheticEvent | undefined) {
+ e?.preventDefault();
 
- if (isSubmitting || totpCode.length !== 6) {
+ if (isSubmitting) {
  return;
  }
 
@@ -158,64 +166,43 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
  <p className="text-center font-mono text-xs">{secret}</p>
  </>
  </WithStep>
- <WithStep step={SetupStep.EnterTotpCode} current={step}>
- <form onSubmit={handleEnable}>
+ <Form handleSubmit={handleEnable} form={form}>
+ <WithStep step={SetupStep.EnterTotpCode} current={step}>
  <div className="mb-4">
- <label htmlFor="code" className="mt-4 block text-sm font-medium text-gray-700">
- {t("code")}
- </label>
- <div className="mt-1">
- <input
- type="text"
- name="code"
- id="code"
- required
- value={totpCode}
- maxLength={6}
- minLength={6}
- inputMode="numeric"
- onInput={(e) => setTotpCode(e.currentTarget.value)}
- className="block w-full rounded-sm border-gray-300 text-sm"
- autoComplete="one-time-code"
- />
- </div>
+ <TwoFactor center />
 
  {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
  </div>
- </form>
- </WithStep>
-
- <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
- <WithStep step={SetupStep.ConfirmPassword} current={step}>
- <Button
- type="submit"
- className="ltr:ml-2 rtl:mr-2"
- onClick={handleSetup}
- disabled={password.length === 0 || isSubmitting}>
- {t("continue")}
- </Button>
  </WithStep>
- <WithStep step={SetupStep.DisplayQrCode} current={step}>
- <Button
- type="submit"
- className="ltr:ml-2 rtl:mr-2"
- onClick={() => setStep(SetupStep.EnterTotpCode)}>
- {t("continue")}
- </Button>
- </WithStep>
- <WithStep step={SetupStep.EnterTotpCode} current={step}>
- <Button
- type="submit"
- className="ltr:ml-2 rtl:mr-2"
- onClick={handleEnable}
- disabled={totpCode.length !== 6 || isSubmitting}>
- {t("enable")}
+
+ <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+ <WithStep step={SetupStep.ConfirmPassword} current={step}>
+ <Button
+ type="submit"
+ className="ltr:ml-2 rtl:mr-2"
+ onClick={handleSetup}
+ disabled={password.length === 0 || isSubmitting}>
+ {t("continue")}
+ </Button>
+ </WithStep>
+ <WithStep step={SetupStep.DisplayQrCode} current={step}>
+ <Button
+ type="submit"
+ className="ltr:ml-2 rtl:mr-2"
+ onClick={() => setStep(SetupStep.EnterTotpCode)}>
+ {t("continue")}
+ </Button>
+ </WithStep>
+ <WithStep step={SetupStep.EnterTotpCode} current={step}>
+ <Button type="submit" className="ltr:ml-2 rtl:mr-2" disabled={isSubmitting}>
+ {t("enable")}
+ </Button>
+ </WithStep>
+ <Button color="secondary" onClick={onCancel}>
+ {t("cancel")}
  </Button>
- </WithStep>
- <Button color="secondary" onClick={onCancel}>
- {t("cancel")}
- </Button>
- </div>
+ </div>
+ </Form>
  </DialogContent>
  </Dialog>
  );

apps/web/components/security/TwoFactorAuthAPI.ts

@@ -19,10 +19,10 @@ const TwoFactorAuthAPI = {
  });
  },
 
- async disable(password: string) {
+ async disable(password: string, code: string) {
  return fetch("/api/auth/two-factor/totp/disable", {
  method: "POST",
- body: JSON.stringify({ password }),
+ body: JSON.stringify({ password, code }),
  headers: {
  "Content-Type": "application/json",
  },

apps/web/components/security/TwoFactorModalHeader.tsx

@@ -6,7 +6,7 @@ const TwoFactorModalHeader = ({ title, description }: { title: string; descripti
  return (
  <div className="mb-4 sm:flex sm:items-start">
  <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
- <ShieldCheckIcon className="h-6 w-6 text-black" />
+ <ShieldCheckIcon className="h-6 w-6 text-white" />
  </div>
  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
  <h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">

apps/web/lib/auth.ts

@@ -3,23 +3,24 @@ import { compare, hash } from "bcryptjs";
 import { Session } from "next-auth";
 import { getSession as getSessionInner, GetSessionParams } from "next-auth/react";
 
+/** @deprecated use the one from `@calcom/lib/auth` */
 export async function hashPassword(password: string) {
  const hashedPassword = await hash(password, 12);
  return hashedPassword;
 }
-
+/** @deprecated use the one from `@calcom/lib/auth` */
 export async function verifyPassword(password: string, hashedPassword: string) {
  const isValid = await compare(password, hashedPassword);
  return isValid;
 }
-
+/** @deprecated use the one from `@calcom/lib/auth` */
 export async function getSession(options: GetSessionParams): Promise<Session | null> {
  const session = await getSessionInner(options);
 
  // that these are equal are ensured in `[...nextauth]`'s callback
  return session as Session | null;
 }
-
+/** @deprecated use the one from `@calcom/lib/auth` */
 export enum ErrorCode {
  UserNotFound = "user-not-found",
  IncorrectPassword = "incorrect-password",
@@ -33,7 +34,7 @@ export enum ErrorCode {
  NewPasswordMatchesOld = "new-password-matches-old",
  ThirdPartyIdentityProviderEnabled = "third-party-identity-provider-enabled",
 }
-
+/** @deprecated use the one from `@calcom/lib/auth` */
 export const identityProviderNameMap: { [key in IdentityProvider]: string } = {
  [IdentityProvider.CAL]: "Cal",
  [IdentityProvider.GOOGLE]: "Google",