docs: add storybook

.babelrc

@@ -1,11 +1,13 @@
 {
-    "presets": [["@babel/preset-env", {}, "@babel/preset-react"]],
-    "plugins": [
+    "presets": [
+        "@babel/preset-env",
         [
-            "@babel/plugin-transform-react-jsx",
+            "@babel/preset-typescript",
             {
-                "pragmaFrag": "React.Fragment"
+                "allExtensions": true,
+                "isTSX": true
             }
-        ]
+        ],
+        ["@babel/preset-react", { "runtime": "automatic" }]
     ]
 }

.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+// import '@storybook/addon-console';
+
+const config: StorybookConfig = {
+    stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        "@storybook/addon-essentials",
+        "@storybook/addon-actions",
+        "@storybook/addon-links",
+        "@storybook/addon-interactions",
+        "@storybook/addon-designs",
+        // "@storybook/addon-actions/register",
+    ],
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {},
+    },
+    docs: {
+        autodocs: false,
+    },
+    env: {
+        REACT_APP_TEST_MODE: "testing",
+        TEST_MODE: "testing",
+    },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: "^(w+.)*on[A-Z].*" },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+                boolean: /(is|show|loaded)/i,
+            },
+        },
+    },
+};
+
+export default preview;

examples/for-tests-react-16/src/App.js

@@ -15,6 +15,8 @@ import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyema
 import ThirdPartyPasswordless from "supertokens-auth-react/recipe/thirdpartypasswordless";
 import UserRoles from "supertokens-auth-react/recipe/userroles";
 import Multitenancy from "supertokens-auth-react/recipe/multitenancy";
+import MultiFactorAuth from "supertokens-auth-react/recipe/multifactorauth";
+import TOTP from "supertokens-auth-react/recipe/totp";
 
 import axios from "axios";
 import { useSessionContext } from "supertokens-auth-react/recipe/session";
@@ -178,9 +180,7 @@ const formFields = [
 const testContext = getTestContext();
 
 let recipeList = [
-    MultiFactorAuth.init({
-        firstFactors: testContext.firstFactors,
-    }),
+    TOTP.init(),
     Multitenancy.init({
         override: {
             functions: (oI) => ({
@@ -224,7 +224,7 @@ let recipeList = [
                         return implementation.doesSessionExist(...args);
                     },
                     getAccessTokenPayloadSecurely(...args) {
-                        log(`GET_JWT_PAYLOAD_SECURELY`);
+                        // log(`GET_JWT_PAYLOAD_SECURELY`);
                         return implementation.getAccessTokenPayloadSecurely(...args);
                     },
                     getUserId(...args) {
@@ -273,6 +273,15 @@ if (enabledRecipes.includes("thirdpartypasswordless")) {
 if (emailVerificationMode !== "OFF") {
     recipeList.push(getEmailVerificationConfigs(testContext));
 }
+
+if (testContext.enableMFA) {
+    recipeList.push(
+        MultiFactorAuth.init({
+            firstFactors: testContext.firstFactors,
+        })
+    );
+}
+
 SuperTokens.init({
     usesDynamicLoginMethods: testContext.usesDynamicLoginMethods,
     clientType: testContext.clientType,
@@ -519,6 +528,7 @@ function SessionInfoTable({ sessionInfo }) {
 
 function getEmailVerificationConfigs({ disableDefaultUI }) {
     return EmailVerification.init({
+        useShadowDom,
         disableDefaultUI,
         sendVerifyEmailScreen: {
             style: theme,

examples/for-tests-react-16/src/AppWithReactDomRouter.js

@@ -16,14 +16,16 @@ import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpass
 import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
 import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
 import { MultiFactorAuthPreBuiltUI } from "supertokens-auth-react/recipe/multifactorauth/prebuiltui";
+import { TOTPPreBuiltUI } from "supertokens-auth-react/recipe/totp/prebuiltui";
 import { AccessDeniedScreen } from "supertokens-auth-react/recipe/session/prebuiltui";
-import { getEnabledRecipes } from "./testContext";
+import { getEnabledRecipes, getTestContext } from "./testContext";
 
 function AppWithReactDomRouter(props) {
+    const context = getTestContext();
     const enabledRecipes = getEnabledRecipes();
     const emailVerificationMode = window.localStorage.getItem("mode") || "OFF";
 
-    let recipePreBuiltUIList = [MultiFactorAuthPreBuiltUI];
+    let recipePreBuiltUIList = [TOTPPreBuiltUI];
     if (enabledRecipes.includes("emailpassword")) {
         recipePreBuiltUIList.push(EmailPasswordPreBuiltUI);
     }
@@ -43,6 +45,11 @@ function AppWithReactDomRouter(props) {
     if (emailVerificationMode !== "OFF") {
         recipePreBuiltUIList.push(EmailVerificationPreBuiltUI);
     }
+
+    if (context.enableMFA) {
+        recipePreBuiltUIList.push(MultiFactorAuthPreBuiltUI);
+    }
+
     /**
      * For user context tests we add this query param so the additional routes
      * dont interfere with other tests

examples/for-tests-react-16/src/AppWithReactDomRouterV5.js

@@ -11,13 +11,16 @@ import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpass
 import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
 import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
 import { AccessDeniedScreen } from "supertokens-auth-react/recipe/session/prebuiltui";
-import { getEnabledRecipes } from "./testContext";
+import { MultiFactorAuthPreBuiltUI } from "supertokens-auth-react/recipe/multifactorauth/prebuiltui";
+import { TOTPPreBuiltUI } from "supertokens-auth-react/recipe/totp/prebuiltui";
+import { getEnabledRecipes, getTestContext } from "./testContext";
 
 function AppWithReactDomRouter(props) {
+    const context = getTestContext();
     const enabledRecipes = getEnabledRecipes();
     const emailVerificationMode = window.localStorage.getItem("mode") || "OFF";
 
-    let recipePreBuiltUIList = [];
+    let recipePreBuiltUIList = [TOTPPreBuiltUI];
     if (enabledRecipes.includes("emailpassword")) {
         recipePreBuiltUIList.push(EmailPasswordPreBuiltUI);
     }
@@ -38,6 +41,10 @@ function AppWithReactDomRouter(props) {
         recipePreBuiltUIList.push(EmailVerificationPreBuiltUI);
     }
 
+    if (context.enableMFA) {
+        recipePreBuiltUIList.push(MultiFactorAuthPreBuiltUI);
+    }
+
     const websiteBasePath = window.localStorage.getItem("websiteBasePath") || undefined;
 
     const [claimValidators, setClaimValidators] = useState(undefined);

examples/for-tests/src/App.js

@@ -333,40 +333,6 @@ const customFields = [
 
 const testContext = getTestContext();
 
-let storedTOTPDevices = window.localStorage.getItem("totpDevices");
-let totpDevices = storedTOTPDevices ? JSON.parse(storedTOTPDevices) : [];
-
-function removeTOTPDevice(deviceName) {
-    const origLength = totpDevices.length;
-    totpDevices = totpDevices.filter((d) => d.deviceName !== deviceName);
-    window.localStorage.setItem("totpDevices", JSON.stringify(totpDevices));
-    return totpDevices.length !== origLength;
-}
-
-function addTOTPDevice(deviceName) {
-    totpDevices.push({
-        deviceName,
-        verified: false,
-    });
-    window.localStorage.setItem("totpDevices", JSON.stringify(totpDevices));
-}
-
-function verifyTOTPDevice(deviceName) {
-    totpDevices = totpDevices.filter((d) => d.deviceName !== deviceName);
-    totpDevices.push({
-        deviceName,
-        verified: true,
-    });
-    window.localStorage.setItem("totpDevices", JSON.stringify(totpDevices));
-}
-let tryCount = 0;
-
-setInterval(() => (tryCount = tryCount > 0 ? tryCount - 1 : 0), 30000);
-window.resetTOTP = () => {
-    totpDevices = [];
-    window.localStorage.setItem("totpDevices", JSON.stringify(totpDevices));
-    tryCount = 0;
-};
 let recipeList = [
     TOTP.init(),
     MultiFactorAuth.init({
@@ -416,7 +382,7 @@ let recipeList = [
                         return implementation.doesSessionExist(...args);
                     },
                     getAccessTokenPayloadSecurely(...args) {
-                        log(`GET_JWT_PAYLOAD_SECURELY`);
+                        // log(`GET_JWT_PAYLOAD_SECURELY`);
                         return implementation.getAccessTokenPayloadSecurely(...args);
                     },
                     getUserId(...args) {
@@ -478,6 +444,14 @@ if (emailVerificationMode !== "OFF") {
     recipeList.push(getEmailVerificationConfigs(testContext));
 }
 
+if (testContext.enableMFA) {
+    recipeList.push(
+        MultiFactorAuth.init({
+            firstFactors: testContext.firstFactors,
+        })
+    );
+}
+
 SuperTokens.init({
     usesDynamicLoginMethods: testContext.usesDynamicLoginMethods,
     clientType: testContext.clientType,

examples/for-tests/src/AppWithReactDomRouter.js

@@ -18,7 +18,7 @@ import { AccessDeniedScreen } from "supertokens-auth-react/recipe/session/prebui
 import { MultiFactorAuthPreBuiltUI } from "supertokens-auth-react/recipe/multifactorauth/prebuiltui";
 import { TOTPPreBuiltUI } from "supertokens-auth-react/recipe/totp/prebuiltui";
 import { BaseComponent, Home, Contact, Dashboard, DashboardNoAuthRequired } from "./App";
-import { getEnabledRecipes } from "./testContext";
+import { getEnabledRecipes, getTestContext } from "./testContext";
 
 function AppWithReactDomRouter(props) {
     /**
@@ -32,11 +32,12 @@ function AppWithReactDomRouter(props) {
     const keyWithClaimValidators =
         claimValidators !== undefined ? claimValidators.map((a) => a.id).join("_") : undefined;
 
+    const context = getTestContext();
     const enabledRecipes = getEnabledRecipes();
     const emailVerificationMode = window.localStorage.getItem("mode") || "OFF";
     const websiteBasePath = window.localStorage.getItem("websiteBasePath") || undefined;
 
-    let recipePreBuiltUIList = [MultiFactorAuthPreBuiltUI, TOTPPreBuiltUI];
+    let recipePreBuiltUIList = [TOTPPreBuiltUI];
     if (enabledRecipes.includes("emailpassword")) {
         recipePreBuiltUIList.push(EmailPasswordPreBuiltUI);
     }
@@ -56,6 +57,10 @@ function AppWithReactDomRouter(props) {
         recipePreBuiltUIList.push(EmailVerificationPreBuiltUI);
     }
 
+    if (context.enableMFA) {
+        recipePreBuiltUIList.push(MultiFactorAuthPreBuiltUI);
+    }
+
     return (
         <div className="App">
             <Router>

examples/for-tests/src/testContext.js

@@ -20,6 +20,7 @@ export function getTestContext() {
             signIn: localStorage.getItem("SIGNIN_SETTING_TYPE"),
             signUp: localStorage.getItem("SIGNUP_SETTING_TYPE"),
         },
+        enableMFA: localStorage.getItem("enableMFA") === "true",
     };
     return ret;
 }