Add support for testing sending recovery token properly

Author: deepjyoti30-st

examples/for-tests/src/App.js

@@ -1298,9 +1298,7 @@ function getWebauthnConfigs({ throwWebauthnError, webauthnErrorStatus }) {
                             };
                         }
 
-                        return {
-                            status: "OK",
-                        };
+                        return implementation.generateRecoverAccountToken(...args);
                     },
                 };
             },

stories/allrecipes.stories.tsx

@@ -138,7 +138,7 @@ export const RecoverAccountWithToken: Story = {
         "multifactorauth.initialized": false,
         "passwordless.initialized": false,
         "webauthn.initialized": true,
-        query: "token=MmEyYjVhYjdiMjA2OTc1NjMwYzM0ZGU5NDliNjhlZTQxYjQ5ZDlkMTQ5YjlhYTc5YmM1N2UxM2U0NzU4ODJmYzMzNTY0MTcyYjE1ZGYxMTMxZjg2YTUzNzNiMDkzZTU2",
+        query: "token=NThlNDNmMjU4OWRjNDJkYzVmMzhmZDMzMWFkY2YxOTUyYjQ5M2Y2NmNhYjY4MjdmMjJjNTFmMTk0Yzg0MTFkYWUyMTZmNDFlNjFlZWE4MTQ5NWY4ZTMyZWE4OTI1OWUz&tenantId=public",
     },
 };
 

test/end-to-end/webauthn.helpers.js

@@ -1,4 +1,4 @@
-import { TEST_CLIENT_BASE_URL } from "../constants";
+import { TEST_CLIENT_BASE_URL, TEST_SERVER_BASE_URL } from "../constants";
 import { toggleSignInSignUp, setInputValues, submitForm, waitForSTElement } from "../helpers";
 
 export async function tryWebauthnSignUp(page, email) {
@@ -45,3 +45,29 @@ export async function openRecoveryAccountPage(page, email = null, shouldSubmit =
     await submitForm(page);
     await new Promise((res) => setTimeout(res, 1000));
 }
+
+export async function signUpAndSendRecoveryEmail(page, email) {
+    await tryWebauthnSignUp(page, email);
+
+    // We should be in the confirmation page now.
+    await submitForm(page);
+    await new Promise((res) => setTimeout(res, 2000));
+
+    // Find the div with classname logoutButton and click it using normal
+    // puppeteer selector
+    const logoutButton = await page.waitForSelector("div.logoutButton");
+    await logoutButton.click();
+    await new Promise((res) => setTimeout(res, 1000));
+
+    // Click the send recovery email button
+    await openRecoveryAccountPage(page, email, true);
+}
+
+export async function getTokenFromEmail(page, email) {
+    // Make an API call to get the token from the email
+    // Since the email can contain special characters, we need to encode it
+    const encodedEmail = encodeURIComponent(email);
+    const response = await fetch(`${TEST_SERVER_BASE_URL}/test/webauthn/get-token?email=${encodedEmail}`);
+    const data = await response.json();
+    return data.token;
+}

test/end-to-end/webauthn.recovery_email.test.js

@@ -9,7 +9,7 @@ import {
     waitForSTElement,
     getTestEmail,
 } from "../helpers";
-import { tryWebauthnSignIn, openRecoveryAccountPage } from "./webauthn.helpers";
+import { openRecoveryAccountPage, signUpAndSendRecoveryEmail, getTokenFromEmail } from "./webauthn.helpers";
 import assert from "assert";
 
 describe("SuperTokens Webauthn Recovery Email", () => {
@@ -58,7 +58,7 @@ describe("SuperTokens Webauthn Recovery Email", () => {
     describe("Recovery Email Test", () => {
         it("should show the success page when the email is sent", async () => {
             const email = await getTestEmail();
-            await openRecoveryAccountPage(page, email, true);
+            await signUpAndSendRecoveryEmail(page, email);
             await new Promise((res) => setTimeout(res, 1000));
 
             // It should be successful and the user should see the success page
@@ -67,11 +67,32 @@ describe("SuperTokens Webauthn Recovery Email", () => {
             assert.strictEqual(emailSentText, "Email sent");
 
             assert.deepStrictEqual(consoleLogs, [
+                "ST_LOGS SESSION OVERRIDE ADD_FETCH_INTERCEPTORS_AND_RETURN_MODIFIED_FETCH",
+                "ST_LOGS SESSION OVERRIDE ADD_AXIOS_INTERCEPTORS",
+                "ST_LOGS WEBAUTHN OVERRIDE GET REGISTER OPTIONS WITH SIGN UP",
+                "ST_LOGS WEBAUTHN OVERRIDE GET REGISTER OPTIONS",
+                "ST_LOGS WEBAUTHN PRE_API_HOOKS REGISTER_OPTIONS",
+                "ST_LOGS WEBAUTHN OVERRIDE REGISTER CREDENTIAL",
+                "ST_LOGS WEBAUTHN OVERRIDE SIGN UP",
+                "ST_LOGS WEBAUTHN PRE_API_HOOKS SIGN_UP",
+                "ST_LOGS SESSION ON_HANDLE_EVENT SESSION_CREATED",
+                "ST_LOGS SESSION OVERRIDE GET_USER_ID",
+                "ST_LOGS SUPERTOKENS GET_REDIRECTION_URL SUCCESS undefined",
+                "ST_LOGS SESSION OVERRIDE GET_USER_ID",
+                "ST_LOGS SESSION OVERRIDE SIGN_OUT",
+                "ST_LOGS SESSION PRE_API_HOOKS SIGN_OUT",
+                "ST_LOGS SESSION ON_HANDLE_EVENT SIGN_OUT",
                 "ST_LOGS SESSION OVERRIDE ADD_FETCH_INTERCEPTORS_AND_RETURN_MODIFIED_FETCH",
                 "ST_LOGS SESSION OVERRIDE ADD_AXIOS_INTERCEPTORS",
                 "ST_LOGS WEBAUTHN GET_REDIRECTION_URL SEND_RECOVERY_EMAIL",
                 "ST_LOGS WEBAUTHN OVERRIDE GENERATE RECOVER ACCOUNT TOKEN",
+                "ST_LOGS WEBAUTHN PRE_API_HOOKS GENERATE_RECOVER_ACCOUNT_TOKEN",
             ]);
+
+            // Verify that the email is sent by fetching the token through the API
+            const token = await getTokenFromEmail(page, email);
+            assert.ok(token);
+            assert.strictEqual(token.length, 128);
         });
         it("change email button should take the user back to the recovery view", async () => {
             const email = await getTestEmail();
@@ -87,6 +108,7 @@ describe("SuperTokens Webauthn Recovery Email", () => {
                 "ST_LOGS SESSION OVERRIDE ADD_AXIOS_INTERCEPTORS",
                 "ST_LOGS WEBAUTHN GET_REDIRECTION_URL SEND_RECOVERY_EMAIL",
                 "ST_LOGS WEBAUTHN OVERRIDE GENERATE RECOVER ACCOUNT TOKEN",
+                "ST_LOGS WEBAUTHN PRE_API_HOOKS GENERATE_RECOVER_ACCOUNT_TOKEN",
             ]);
             const headerTextContainer = await waitForSTElement(
                 page,

test/server/index.js

@@ -174,6 +174,23 @@ function saveCode({ email, phoneNumber, preAuthSessionId, urlWithLinkCode, userI
     });
     deviceStore.set(preAuthSessionId, device);
 }
+
+let webauthnStore = new Map();
+const saveWebauthnToken = async ({ user, recoverAccountLink }) => {
+    const webauthn = webauthnStore.get(user.email) || {
+        email: user.email,
+        recoverAccountLink: "",
+        token: "",
+    };
+    webauthn.recoverAccountLink = recoverAccountLink;
+
+    // Parse the token from the recoverAccountLink
+    const token = recoverAccountLink.split("token=")[1].replace("&tenantId=public", "");
+    webauthn.token = token;
+
+    webauthnStore.set(user.email, webauthn);
+};
+
 const formFields = (process.env.MIN_FIELDS && []) || [
     {
         id: "name",
@@ -523,6 +540,15 @@ app.post("/test/create-oauth2-client", async (req, res, next) => {
     }
 });
 
+app.get("/test/webauthn/get-token", async (req, res) => {
+    const webauthn = webauthnStore.get(req.query.email);
+    if (!webauthn) {
+        res.status(404).send({ error: "Webauthn not found" });
+        return;
+    }
+    res.send({ token: webauthn.token });
+});
+
 app.post("/test/webauthn/create-and-assert-credential", async (req, res) => {
     try {
         const { registerOptionsResponse, signInOptionsResponse, rpId, rpName, origin } = req.body;
@@ -753,7 +779,7 @@ function initST() {
                         return {
                             ...oI,
                             sendEmail: async (input) => {
-                                console.log(input);
+                                await saveWebauthnToken(input);
                             },
                         };
                     },
@@ -1006,6 +1032,7 @@ function initST() {
         supertokens: {
             connectionURI,
         },
+        debug: true,
         recipeList:
             enabledRecipes !== undefined
                 ? recipeList.filter(([key]) => enabledRecipes.includes(key)).map(([_key, recipeFunc]) => recipeFunc)