Add support for rendering passkey link form

Author: deepjyoti30-st

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

@@ -14,11 +14,55 @@
  */
 
 import * as React from "react";
+
+import { ComponentOverrideContext } from "../../../../../components/componentOverride/componentOverrideContext";
+import FeatureWrapper from "../../../../../components/featureWrapper";
+import SuperTokens from "../../../../../superTokens";
 import { getQueryParams } from "../../../../../utils";
+import { defaultTranslationsEmailPassword } from "../../../../emailpassword/components/themes/translations";
+import RecoverAccountWithToken from "../../themes/recoverAccountWithToken";
+
+import type { RecoverAccountWithTokenProps } from "../../../types";
 
-export const RecoverAccountUsingToken = (props): JSX.Element => {
+export const RecoverAccountUsingToken: React.FC<RecoverAccountWithTokenProps> = (props): JSX.Element => {
     const token = getQueryParams("token");
-    console.log("token: ", token);
+    let userContext;
+    if (props.userContext !== undefined) {
+        userContext = props.userContext;
+    }
+    const [error, setError] = React.useState<string>();
+
+    const childProps = {
+        config: props.recipe.config,
+        error: error,
+        onError: (error: string) => setError(error),
+        clearError: () => setError(undefined),
+        recipeImplementation: props.recipe.webJSRecipe,
+        token,
+        useComponentOverride: props.useComponentOverrides,
+        userContext,
+    };
+    const recipeComponentOverrides = props.useComponentOverrides();
+
+    return (
+        <ComponentOverrideContext.Provider value={recipeComponentOverrides}>
+            <FeatureWrapper
+                useShadowDom={SuperTokens.getInstanceOrThrow().useShadowDom}
+                defaultStore={defaultTranslationsEmailPassword}>
+                <React.Fragment>
+                    {/* No custom theme, use default. */}
+                    {props.children === undefined && <RecoverAccountWithToken {...childProps} />}
+                    {/* Otherwise, custom theme is provided, propagate props. */}
+                    {props.children &&
+                        React.Children.map(props.children, (child) => {
+                            if (React.isValidElement(child)) {
+                                return React.cloneElement(child, childProps);
+                            }
 
-    return <div>Recovering using token</div>;
+                            return child;
+                        })}
+                </React.Fragment>
+            </FeatureWrapper>
+        </ComponentOverrideContext.Provider>
+    );
 };

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

@@ -0,0 +1,105 @@
+/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useState } from "react";
+
+import { SuperTokensBranding } from "../../../../../components/SuperTokensBranding";
+import SuperTokens from "../../../../../superTokens";
+import { AuthPageFooter, AuthPageHeader } from "../../../../../ui";
+import UserContextWrapper from "../../../../../usercontext/userContextWrapper";
+import { PasskeyConfirmation } from "../signUp/confirmation";
+import { ThemeBase } from "../themeBase";
+
+import type { RecoverAccountWithTokenThemeProps } from "../../../types";
+
+export enum RecoverAccountScreen {
+    ContinueWithPasskey,
+    Success,
+}
+
+function PasskeyRecoverAccountWithTokenTheme(props: RecoverAccountWithTokenThemeProps): JSX.Element {
+    const rootStyle = SuperTokens.getInstanceOrThrow().rootStyle;
+
+    const activeStyle = props.config.signUpFeature.style;
+    const stInstance = SuperTokens.getInstanceOrThrow();
+
+    const privacyPolicyLink = stInstance.privacyPolicyLink;
+    const termsOfServiceLink = stInstance.termsOfServiceLink;
+
+    const [activeScreen] = useState<RecoverAccountScreen>(RecoverAccountScreen.ContinueWithPasskey);
+
+    const onResetFactorList = () => {
+        throw new Error("Should never come here as we don't have back functionality");
+    };
+
+    return (
+        <UserContextWrapper userContext={props.userContext}>
+            <ThemeBase userStyles={[rootStyle, props.config.recipeRootStyle, activeStyle]}>
+                <div data-supertokens="container authPage singleFactor">
+                    <div data-supertokens="row">
+                        <AuthPageHeader
+                            factorIds={["webauthn"]}
+                            isSignUp={true}
+                            onSignInUpSwitcherClick={undefined}
+                            hasSeparateSignUpView={true}
+                            resetFactorList={onResetFactorList}
+                            showBackButton={false}
+                            oauth2ClientInfo={undefined}
+                            headerLabel={
+                                activeScreen === RecoverAccountScreen.ContinueWithPasskey
+                                    ? "WEBAUTHN_CREATE_A_PASSKEY_HEADER"
+                                    : undefined
+                            }
+                            hideSignInSwitcher={true}
+                        />
+                        <RecoverAccountThemeInner {...props} activeScreen={activeScreen} />
+                        {activeScreen !== RecoverAccountScreen.Success && (
+                            <AuthPageFooter
+                                factorIds={[]}
+                                isSignUp={true}
+                                hasSeparateSignUpView={true}
+                                privacyPolicyLink={privacyPolicyLink}
+                                termsOfServiceLink={termsOfServiceLink}
+                            />
+                        )}
+                    </div>
+                    <SuperTokensBranding />
+                </div>
+            </ThemeBase>
+        </UserContextWrapper>
+    );
+}
+
+const RecoverAccountThemeInner = (
+    props: RecoverAccountWithTokenThemeProps & {
+        activeScreen: RecoverAccountScreen;
+    }
+) => {
+    return props.activeScreen === RecoverAccountScreen.ContinueWithPasskey ? (
+        <PasskeyConfirmation
+            {...props}
+            email={""}
+            onContinueClick={() => {}}
+            // errorMessageLabel={showPasskeyConfirmationError ? "WEBAUTHN_PASSKEY_RECOVERABLE_ERROR" : undefined}
+            isLoading={false}
+            onFetchError={() => {}}
+            resetFactorList={() => {}}
+        />
+    ) : props.activeScreen === RecoverAccountScreen.Success ? (
+        <div></div>
+    ) : null;
+};
+
+export default PasskeyRecoverAccountWithTokenTheme;

lib/ts/recipe/webauthn/prebuiltui.tsx

@@ -79,13 +79,17 @@ export class WebauthnPreBuiltUI extends RecipeRouter {
     getFeatureComponent = (
         componentName: "webauthn-recover-account",
         props: FeatureBaseProps<{ userContext?: UserContext }>,
-        _: () => GenericComponentOverrideMap<any> = useRecipeComponentOverrideContext
+        useComponentOverrides: () => GenericComponentOverrideMap<any> = useRecipeComponentOverrideContext
     ): JSX.Element => {
         if (componentName === "webauthn-recover-account") {
             return (
                 <UserContextWrapper userContext={props.userContext}>
                     <SessionAuth requireAuth={false} doRedirection={false}>
-                        <RecoverAccountUsingToken />
+                        <RecoverAccountUsingToken
+                            recipe={this.recipeInstance}
+                            {...props}
+                            useComponentOverrides={useComponentOverrides}
+                        />
                     </SessionAuth>
                 </UserContextWrapper>
             );

lib/ts/recipe/webauthn/recipe.tsx

@@ -17,6 +17,7 @@ import WebauthnWebJS from "supertokens-web-js/lib/build/recipe/webauthn";
 
 import { SSR_ERROR } from "../../constants";
 import AuthRecipe from "../authRecipe";
+import { FactorIds } from "../multifactorauth";
 
 import { getFunctionOverrides } from "./functionOverrides";
 import { normaliseWebauthnConfig } from "./utils";
@@ -35,7 +36,6 @@ import type {
     RecipeInitResult,
 } from "../../types";
 import type RecipeModule from "../recipeModule";
-import { FactorIds } from "../multifactorauth";
 
 export default class Webauthn extends AuthRecipe<
     GetRedirectionURLContext,

lib/ts/recipe/webauthn/types.ts

@@ -13,6 +13,8 @@
  * under the License.
  */
 
+import type Recipe from "./recipe";
+import type { ComponentOverride } from "../../components/componentOverride/componentOverride";
 import type {
     FeatureBaseConfig,
     NormalisedBaseConfig,
@@ -27,6 +29,7 @@ import type {
     NormalisedConfig as NormalisedAuthRecipeModuleConfig,
     Config as AuthRecipeModuleConfig,
 } from "../authRecipe/types";
+import type SignInForm from "./components/features/signIn";
 import type { InputProps } from "../emailpassword/components/library/input";
 import type WebJSRecipe from "supertokens-web-js/recipe/webauthn";
 import type { RecipeInterface } from "supertokens-web-js/recipe/webauthn";
@@ -131,7 +134,9 @@ export type NormalisedConfig = {
 
 export type RecipeImplementation = WebJSRecipeInterface<typeof WebJSRecipe>;
 
-export type ComponentOverrideMap = Record<string, undefined>;
+export type ComponentOverrideMap = {
+    PasskeySignInForm_Override?: ComponentOverride<typeof SignInForm>;
+};
 
 export type WebauthnSignUpState = {
     showBackButton: boolean;
@@ -166,6 +171,21 @@ export type SignUpFormProps = {
     resetFactorList: () => void;
 };
 
+export type RecoverAccountWithTokenProps = {
+    userContext?: UserContext | undefined;
+    recipe: Recipe;
+    useComponentOverrides: () => ComponentOverrideMap;
+};
+
+export type RecoverAccountWithTokenThemeProps = {
+    config: NormalisedConfig;
+    userContext?: UserContext;
+    recipeImplementation: RecipeImplementation;
+    error: string | undefined;
+    clearError: () => void;
+    onError: (error: string) => void;
+};
+
 export type ContinueOnSuccessParams = {
     email: string;
 };