Add init support for a recovery using token feature

Author: deepjyoti30-st

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

@@ -0,0 +1,24 @@
+/* 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 * as React from "react";
+import { getQueryParams } from "../../../../../utils";
+
+export const RecoverAccountUsingToken = (props): JSX.Element => {
+    const token = getQueryParams("token");
+    console.log("token: ", token);
+
+    return <div>Recovering using token</div>;
+};

lib/ts/recipe/webauthn/constants.ts

@@ -0,0 +1,15 @@
+/* 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.
+ */
+export const DEFAULT_WEBAUTHN_RECOVERY_PATH = "/webauthn/recover";

lib/ts/recipe/webauthn/prebuiltui.tsx

@@ -1,13 +1,17 @@
+import NormalisedURLPath from "supertokens-web-js/lib/build/normalisedURLPath";
+
 import UserContextWrapper from "../../usercontext/userContextWrapper";
-import { isTest } from "../../utils";
+import { isTest, matchRecipeIdUsingQueryParams } from "../../utils";
 import { FactorIds } from "../multifactorauth";
 import { RecipeRouter } from "../recipeRouter";
 import SessionAuth from "../session/sessionAuth";
 
 import { useRecipeComponentOverrideContext } from "./componentOverrideContext";
+import { RecoverAccountUsingToken } from "./components/features/recoverAccountWithToken";
 import SignInWithPasskeyFeature from "./components/features/signIn";
 import SignUpFeature, { SignUpWithPasskeyFeature } from "./components/features/signUp";
 import { defaultTranslationsWebauthn } from "./components/themes/translations";
+import { DEFAULT_WEBAUTHN_RECOVERY_PATH } from "./constants";
 import WebauthnRecipe from "./recipe";
 
 import type { GenericComponentOverrideMap } from "../../components/componentOverride/componentOverrideContext";
@@ -42,7 +46,7 @@ export class WebauthnPreBuiltUI extends RecipeRouter {
         return WebauthnPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatures(useComponentOverrides);
     }
     static getFeatureComponent(
-        componentName: "webauthn-sign-up",
+        componentName: "webauthn-recover-account",
         props: FeatureBaseProps<{ userContext?: UserContext }>,
         useComponentOverrides: () => GenericComponentOverrideMap<any> = useRecipeComponentOverrideContext
     ): JSX.Element {
@@ -55,23 +59,33 @@ export class WebauthnPreBuiltUI extends RecipeRouter {
 
     // Instance methods
     getFeatures = (
-        _: () => GenericComponentOverrideMap<any> = useRecipeComponentOverrideContext
+        useComponentOverrides: () => GenericComponentOverrideMap<any> = useRecipeComponentOverrideContext
     ): RecipeFeatureComponentMap => {
         const features: RecipeFeatureComponentMap = {};
-        // TODO: Define after components are defined
+        if (this.recipeInstance.config.disableDefaultUI !== true) {
+            const normalisedFullPath = this.recipeInstance.config.appInfo.websiteBasePath.appendPath(
+                new NormalisedURLPath(DEFAULT_WEBAUTHN_RECOVERY_PATH)
+            );
+            features[normalisedFullPath.getAsStringDangerous()] = {
+                matches: matchRecipeIdUsingQueryParams(this.recipeInstance.config.recipeId),
+                component: (props: any) =>
+                    this.getFeatureComponent("webauthn-recover-account", props, useComponentOverrides),
+                recipeID: WebauthnRecipe.RECIPE_ID,
+            };
+        }
         return features;
     };
 
     getFeatureComponent = (
-        componentName: "webauthn-sign-up",
+        componentName: "webauthn-recover-account",
         props: FeatureBaseProps<{ userContext?: UserContext }>,
         _: () => GenericComponentOverrideMap<any> = useRecipeComponentOverrideContext
     ): JSX.Element => {
-        if (componentName === "webauthn-sign-up") {
+        if (componentName === "webauthn-recover-account") {
             return (
                 <UserContextWrapper userContext={props.userContext}>
                     <SessionAuth requireAuth={false} doRedirection={false}>
-                        <div></div>
+                        <RecoverAccountUsingToken />
                     </SessionAuth>
                 </UserContextWrapper>
             );

lib/ts/recipe/webauthn/types.ts

@@ -122,6 +122,7 @@ export type NormalisedSignUpFormFeatureConfig = NormalisedBaseConfig & {
 
 export type NormalisedConfig = {
     signUpFeature: NormalisedSignUpFormFeatureConfig;
+    disableDefaultUI?: boolean;
 
     override: {
         functions: (originalImplementation: RecipeInterface) => RecipeInterface;

stories/allrecipes.stories.tsx

@@ -133,6 +133,16 @@ export const SignInPasskey: Story = {
     },
 };
 
+export const RecoverAccountWithToken: Story = {
+    args: {
+        path: "/auth/webauthn/recover",
+        "multifactorauth.initialized": false,
+        "passwordless.initialized": false,
+        "webauthn.initialized": true,
+        query: "token=asdf",
+    },
+};
+
 export const SignUpFieldErrors: Story = {
     args: {
         path: "/auth",