diff --git a/web/packages/accounts/components/two-factor/setup/ManualMode.tsx b/web/packages/accounts/components/two-factor/setup/ManualMode.tsx
index d1c98f876..bd541a565 100644
--- a/web/packages/accounts/components/two-factor/setup/ManualMode.tsx
+++ b/web/packages/accounts/components/two-factor/setup/ManualMode.tsx
@@ -6,7 +6,7 @@ import { t } from "i18next";
 import LinkButton from "@ente/shared/components/LinkButton";
 
 interface Iprops {
-    twoFactorSecret: TwoFactorSecret;
+    twoFactorSecret?: TwoFactorSecret;
     changeToQRMode: () => void;
 }
 export default function SetupManualMode({
diff --git a/web/packages/accounts/components/two-factor/setup/QRMode.tsx b/web/packages/accounts/components/two-factor/setup/QRMode.tsx
index 10f713155..586507eeb 100644
--- a/web/packages/accounts/components/two-factor/setup/QRMode.tsx
+++ b/web/packages/accounts/components/two-factor/setup/QRMode.tsx
@@ -7,7 +7,7 @@ import { Typography } from "@mui/material";
 import { LoadingQRCode, QRCode } from "../styledComponents";
 
 interface Iprops {
-    twoFactorSecret: TwoFactorSecret;
+    twoFactorSecret?: TwoFactorSecret;
     changeToManualMode: () => void;
 }
 
diff --git a/web/packages/accounts/components/two-factor/setup/index.tsx b/web/packages/accounts/components/two-factor/setup/index.tsx
index fa45cf5ef..d26e94cb7 100644
--- a/web/packages/accounts/components/two-factor/setup/index.tsx
+++ b/web/packages/accounts/components/two-factor/setup/index.tsx
@@ -6,7 +6,7 @@ import { VerticallyCentered } from "@ente/shared/components/Container";
 import { useState } from "react";
 
 interface Iprops {
-    twoFactorSecret: TwoFactorSecret;
+    twoFactorSecret?: TwoFactorSecret;
 }
 export function TwoFactorSetup({ twoFactorSecret }: Iprops) {
     const [setupMode, setSetupMode] = useState<SetupMode>(SetupMode.QR_CODE);
diff --git a/web/packages/accounts/pages/two-factor/setup.tsx b/web/packages/accounts/pages/two-factor/setup.tsx
index d8b607eeb..66e24caf5 100644
--- a/web/packages/accounts/pages/two-factor/setup.tsx
+++ b/web/packages/accounts/pages/two-factor/setup.tsx
@@ -1,4 +1,5 @@
 import log from "@/next/log";
+import { ensure } from "@/utils/ensure";
 import { enableTwoFactor, setupTwoFactor } from "@ente/accounts/api/user";
 import VerifyTwoFactor, {
     type VerifyTwoFactorCallback,
@@ -23,8 +24,9 @@ export enum SetupMode {
 }
 
 export default function SetupTwoFactor({ appName }: PageProps) {
-    const [twoFactorSecret, setTwoFactorSecret] =
-        useState<TwoFactorSecret>(null);
+    const [twoFactorSecret, setTwoFactorSecret] = useState<
+        TwoFactorSecret | undefined
+    >();
 
     const router = useRouter();
 
@@ -48,7 +50,7 @@ export default function SetupTwoFactor({ appName }: PageProps) {
         markSuccessful,
     ) => {
         const recoveryEncryptedTwoFactorSecret = await encryptWithRecoveryKey(
-            twoFactorSecret.secretCode,
+            ensure(twoFactorSecret).secretCode,
         );
         await enableTwoFactor(otp, recoveryEncryptedTwoFactorSecret);
         await markSuccessful();