diff --git a/web/packages/accounts/pages/credentials.tsx b/web/packages/accounts/pages/credentials.tsx index 811c5b975a..b44bc4e103 100644 --- a/web/packages/accounts/pages/credentials.tsx +++ b/web/packages/accounts/pages/credentials.tsx @@ -67,10 +67,11 @@ const Page: React.FC = ({ appContext }) => { const [keyAttributes, setKeyAttributes] = useState(); const [user, setUser] = useState(); 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 = ({ 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 = ({ appContext }) => { return ( - openPasskeyVerificationURL(...passkeyVerificationData) + openPasskeyVerificationURL(passkeyVerificationData) } - onRecover={() => router.push("/passkeys/recover")} - onLogout={logout} + appContext={appContext} /> ); } diff --git a/web/packages/accounts/pages/verify.tsx b/web/packages/accounts/pages/verify.tsx index 1848b38be8..c6e6954d12 100644 --- a/web/packages/accounts/pages/verify.tsx +++ b/web/packages/accounts/pages/verify.tsx @@ -42,7 +42,7 @@ const Page: React.FC = ({ 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 = ({ 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 = ({ appContext }) => { return ( - openPasskeyVerificationURL(...passkeyVerificationData) + openPasskeyVerificationURL(passkeyVerificationData) } - onRecover={() => router.push("/passkeys/recover")} - onLogout={logout} + appContext={appContext} /> ); } diff --git a/web/packages/accounts/services/passkey.ts b/web/packages/accounts/services/passkey.ts index 7f4c848fe0..70cd3ae0fa 100644 --- a/web/packages/accounts/services/passkey.ts +++ b/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);