Add support for parsing email to be read from query in recovery flow

Author: deepjyoti30-st

lib/ts/recipe/webauthn/components/features/recoverAccountWithToken/index.tsx

@@ -26,6 +26,7 @@ import type { RecoverAccountWithTokenProps } from "../../../types";
 
 export const RecoverAccountUsingToken: React.FC<RecoverAccountWithTokenProps> = (props): JSX.Element => {
     const token = getQueryParams("token");
+    const email = getQueryParams("email");
     let userContext;
     if (props.userContext !== undefined) {
         userContext = props.userContext;
@@ -41,6 +42,7 @@ export const RecoverAccountUsingToken: React.FC<RecoverAccountWithTokenProps> =
         token,
         useComponentOverride: props.useComponentOverrides,
         userContext,
+        email,
     };
     const recipeComponentOverrides = props.useComponentOverrides();
 

lib/ts/recipe/webauthn/components/themes/recoverAccountWithToken/index.tsx

@@ -90,7 +90,7 @@ const RecoverAccountThemeInner = (
     return props.activeScreen === RecoverAccountScreen.ContinueWithPasskey ? (
         <PasskeyConfirmation
             {...props}
-            email={""}
+            email={props.email || ""}
             onContinueClick={() => {}}
             // errorMessageLabel={showPasskeyConfirmationError ? "WEBAUTHN_PASSKEY_RECOVERABLE_ERROR" : undefined}
             isLoading={false}

lib/ts/recipe/webauthn/types.ts

@@ -184,6 +184,7 @@ export type RecoverAccountWithTokenThemeProps = {
     error: string | undefined;
     clearError: () => void;
     onError: (error: string) => void;
+    email: string | null;
 };
 
 export type ContinueOnSuccessParams = {

stories/allrecipes.stories.tsx

@@ -139,7 +139,7 @@ export const RecoverAccountWithToken: Story = {
         "multifactorauth.initialized": false,
         "passwordless.initialized": false,
         "webauthn.initialized": true,
-        query: "token=asdf",
+        query: "token=asdf&[email protected]",
     },
 };