Use

web/packages/accounts/pages/credentials.tsx

@@ -67,10 +67,11 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
     const [keyAttributes, setKeyAttributes] = useState<KeyAttributes>();
     const [user, setUser] = useState<User>();
     const [passkeyVerificationData, setPasskeyVerificationData] = useState<
-        [string, string] | undefined
+        { passkeySessionID: string; url: string } | undefined
     >();
 
     const router = useRouter();
+
     useEffect(() => {
         const main = async () => {
             const user: User = getData(LS_KEYS.USER);
@@ -180,8 +181,8 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
                         appName,
                         passkeySessionID,
                     );
-                    setPasskeyVerificationData([passkeySessionID, url]);
-                    openPasskeyVerificationURL(passkeySessionID, url);
+                    setPasskeyVerificationData({ passkeySessionID, url });
+                    openPasskeyVerificationURL({ passkeySessionID, url });
                     throw Error(CustomError.TWO_FACTOR_ENABLED);
                 } else if (twoFactorSessionID) {
                     const sessionKeyAttributes =
@@ -295,11 +296,11 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
         return (
             <VerifyingPasskey
                 email={user?.email}
+                passkeySessionID={passkeyVerificationData?.passkeySessionID}
                 onRetry={() =>
-                    openPasskeyVerificationURL(...passkeyVerificationData)
+                    openPasskeyVerificationURL(passkeyVerificationData)
                 }
-                onRecover={() => router.push("/passkeys/recover")}
-                onLogout={logout}
+                appContext={appContext}
             />
         );
     }

web/packages/accounts/pages/verify.tsx

@@ -42,7 +42,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
     const [email, setEmail] = useState("");
     const [resend, setResend] = useState(0);
     const [passkeyVerificationData, setPasskeyVerificationData] = useState<
-        [string, string] | undefined
+        { passkeySessionID: string; url: string } | undefined
     >();
 
     const router = useRouter();
@@ -98,8 +98,8 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
                     appName,
                     passkeySessionID,
                 );
-                setPasskeyVerificationData([passkeySessionID, url]);
-                openPasskeyVerificationURL(passkeySessionID, url);
+                setPasskeyVerificationData({ passkeySessionID, url });
+                openPasskeyVerificationURL({ passkeySessionID, url });
             } else if (twoFactorSessionID) {
                 setData(LS_KEYS.USER, {
                     email,
@@ -193,11 +193,11 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
         return (
             <VerifyingPasskey
                 email={email}
+                passkeySessionID={passkeyVerificationData?.passkeySessionID}
                 onRetry={() =>
-                    openPasskeyVerificationURL(...passkeyVerificationData)
+                    openPasskeyVerificationURL(passkeyVerificationData)
                 }
-                onRecover={() => router.push("/passkeys/recover")}
-                onLogout={logout}
+                appContext={appContext}
             />
         );
     }

web/packages/accounts/services/passkey.ts

@@ -51,16 +51,23 @@ export const passkeyVerificationRedirectURL = (
     return `${accountsAppURL()}/passkeys/verify?${params.toString()}`;
 };
 
+interface OpenPasskeyVerificationURLOptions {
+    /**
+     * The passkeySessionID for which we are redirecting.
+     *
+     * This is compared to the saved session id in the browser's session storage
+     * to allow us to ignore redirects to the passkey flow finish page except
+     * the ones for this specific session we're awaiting.
+     */
+    passkeySessionID: string;
+    /** The URL to redirect to or open in the system browser. */
+    url: string;
+}
+
 /**
  * Open or redirect to a passkey verification URL previously constructed using
  * {@link passkeyVerificationRedirectURL}.
  *
- * @param passkeySessionID The passkeySessionID for which we are redirecting.
- * This is saved to session storage to allow us to ignore subsequent redirects
- * to the passkey flow finish page except the ones for this specific session.
- *
- * @param url The URL to redirect to or open in the system browser.
- *
  * [Note: Passkey verification in the desktop app]
  *
  * Our desktop app bundles the web app and serves it over a custom protocol.
@@ -80,10 +87,10 @@ export const passkeyVerificationRedirectURL = (
  *     authentication happens at accounts.ente.io, and on success there is
  *     redirected back to the desktop app.
  */
-export const openPasskeyVerificationURL = (
-    passkeySessionID: string,
-    url: string,
-) => {
+export const openPasskeyVerificationURL = ({
+    passkeySessionID,
+    url,
+}: OpenPasskeyVerificationURLOptions) => {
     sessionStorage.setItem("inflightPasskeySessionID", passkeySessionID);
 
     if (globalThis.electron) window.open(url);