diff --git a/web/apps/accounts/src/pages/passkeys/verify.tsx b/web/apps/accounts/src/pages/passkeys/verify.tsx index 0953277d55..a7694e57a2 100644 --- a/web/apps/accounts/src/pages/passkeys/verify.tsx +++ b/web/apps/accounts/src/pages/passkeys/verify.tsx @@ -1,7 +1,6 @@ import { setClientPackageForAuthenticatedRequests } from "@/next/http"; import log from "@/next/log"; import type { TwoFactorAuthorizationResponse } from "@/next/types/credentials"; -import { ensure } from "@/utils/ensure"; import { nullToUndefined } from "@/utils/transform"; import { VerticallyCentered } from "@ente/shared/components/Container"; import EnteButton from "@ente/shared/components/EnteButton"; @@ -129,10 +128,13 @@ const Page = () => { const handleRecover = () => { const searchParams = new URLSearchParams(window.location.search); - const redirect = nullToUndefined(searchParams.get("redirect")); - const redirectURL = new URL(ensure(redirect)); + const recover = nullToUndefined(searchParams.get("recover")); + if (!recover) { + log.error("No recover URL was provided"); + return; + } - redirectToPasskeyRecoverPage(redirectURL); + redirectToPasskeyRecoverPage(new URL(recover)); }; const components: Record = { diff --git a/web/apps/accounts/src/services/passkey.ts b/web/apps/accounts/src/services/passkey.ts index b8951def3a..58adaaa0e1 100644 --- a/web/apps/accounts/src/services/passkey.ts +++ b/web/apps/accounts/src/services/passkey.ts @@ -534,20 +534,17 @@ export const redirectAfterPasskeyAuthentication = async ( }; /** - * Redirect back to the calling app that initiated the passkey authentication, - * navigating the user to a page where they can reset their second factor using + * Redirect back to the app that initiated the passkey authentication, + * navigating the user to a place where they can reset their second factor using * their recovery key (e.g. if they have lost access to their passkey). * * The same considerations mentioned in [Note: Finish passkey flow in the * requesting app] apply to recovery too, which is why we need to redirect back * to the app on whose behalf we're authenticating. * - * @param redirectURL The URL we were meant to redirect to after successful - * passkey authentication. Provided as a calling app as a query parameter. + * @param recoverURL The recovery URL provided as a query parameter by the app + * that called us. */ -export const redirectToPasskeyRecoverPage = (redirectURL: URL) => { - // Extract the origin from the given `redirectURL`, and redirect to the - // `/passkeys/recover` page on that origin. - - window.location.href = `${redirectURL.origin}/passkeys/recover`; +export const redirectToPasskeyRecoverPage = (recoverURL: URL) => { + window.location.href = recoverURL.href; }; diff --git a/web/packages/accounts/services/passkey.ts b/web/packages/accounts/services/passkey.ts index 6b98f75a37..32884c358f 100644 --- a/web/packages/accounts/services/passkey.ts +++ b/web/packages/accounts/services/passkey.ts @@ -29,14 +29,16 @@ export const redirectUserToPasskeyVerificationFlow = ( passkeySessionID: string, ) => { const clientPackage = clientPackageName[appName]; - // The returned URL begins with `window.location.origin` and will work both - // when we're running in a web browser, and in our desktop / mobile app. - // See: [Note: Using deeplinks to navigate in desktop app] + // Using `window.location.origin` will work both when we're running in a web + // browser, and in our desktop app. See: [Note: Using deeplinks to navigate + // in desktop app] const redirect = `${window.location.origin}/passkeys/finish`; + const recover = `${window.location.origin}/passkeys/recover`; const params = new URLSearchParams({ clientPackage, passkeySessionID, redirect, + recover, }); const url = `${accountsAppURL()}/passkeys/verify?${params.toString()}`; // [Note: Passkey verification in the desktop app]