supertokens
diff --git a/‎.babelrc
+7-5 b/‎.babelrc
+7-5
diff --git a/‎.github/PULL_REQUEST_TEMPLATE.md
+2 b/‎.github/PULL_REQUEST_TEMPLATE.md
+2
diff --git a/‎.npmignore
+3-1 b/‎.npmignore
+3-1
diff --git a/‎.storybook/main.ts
+42 b/‎.storybook/main.ts
+42
diff --git a/‎.storybook/preview.ts
+16 b/‎.storybook/preview.ts
+16
diff --git a/‎CHANGELOG.md
+244 b/‎CHANGELOG.md
+244
@@ -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" }]
     ]
 }
@@ -31,6 +31,8 @@
 -   [ ] If added a new recipe interface, then make sure that the implementation of it uses NON arrow functions only (like `someFunc: function () {..}`).
 -   [ ] If I added a new recipe, I also added the recipe entry point into the `size-limit` section of `package.json` with the size limit set to the current size rounded up.
 -   [ ] If I added a new recipe, I also added the recipe entry point into the `rollup.config.mjs`
+-   [ ] If I added a new login method, I modified the list in `lib/ts/types.ts`
+-   [ ] If I added a factor id, I modified the list in `lib/ts/recipe/multifactorauth/types.ts`
 
 ## Remaining TODOs for this PR
 
 
@@ -28,4 +28,6 @@ jest.config.js
 docs/
 init.sh
 supertokens-auth-react-*.tgz
-runExample.sh
+runExample.sh
+.storybook
+stories
@@ -0,0 +1,42 @@
+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",
+    ],
+    async webpackFinal(config, { configType }) {
+        if (config.module?.rules) {
+            // By default, Storybook utilizes the style-loader, injecting CSS directly into the DOM.
+            // In our build process, we import the CSS string and embed it within a style tag.
+            // The follwoing changes ensure that we replicate this behavior in Storybook.
+            config.module.rules = config.module.rules.filter(
+                (rule) => !(typeof rule === "object" && rule?.test instanceof RegExp && rule.test.test(".css"))
+            );
+
+            config.module.rules.push({
+                test: /\.css$/,
+                use: ["to-string-loader", "css-loader"],
+            });
+        }
+        return config;
+    },
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {},
+    },
+    docs: {
+        autodocs: false,
+    },
+    env: {
+        REACT_APP_TEST_MODE: "testing",
+        TEST_MODE: "testing",
+    },
+};
+export default config;
@@ -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;
@@ -5,6 +5,250 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
+## [0.39.0] - 2024-03-07
+
+### Overview
+
+#### Introducing MFA
+
+With this release, we are introducing MultiFactorAuth and TOTP, this will let you:
+
+-   require (2FA or MFA) during sign in
+-   make use of TOTP (e.g.: Google authenticator) as an MFA challenge
+
+Check our [guide](https://supertokens.com/docs/mfa/introduction) for more information.
+
+### Breaking changes
+
+-   `SUCCESS` redirections are now handled by the `getRedirectionURL` callback passed to the `SuperTokens.init` config, instead of the recipe level callbacks
+-   `isNewPrimaryUser` is renamed to `createdNewUser`
+-   Refactored/renamed some styling options (`resetPasswordHeaderTitle` -> `headerTitle withBackButton`)
+-   Some default styling has changed related to how fonts/font-weights are applied
+-   Changed how `headerSubtitle` is styled in components: `EmailPasswordResetPasswordEmail`, `EmailPasswordSubmitNewPassword`, `EmailPasswordSignInHeader`, `EmailPasswordSignUpHeader`
+-   Removed an `ErrorBoundary` wrapping all our feature components to make sure all errors are properly catchable by the app
+-   In `supertokens-web-js` (which you may also be using), we added `firstFactors` into the return type of `getLoginMethods` and removed the enabled flags of different login methods.
+    -   For older FDI versions, the firstFactors array will be calculated based on those enabled flags.
+
+#### Migration guide
+
+##### Success redirections & isNewPrimaryUser rename
+
+Before:
+
+```tsx
+import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
+import Passwordless from "supertokens-auth-react/recipe/passwordless";
+
+SuperTokens.init({
+    appInfo: {
+        // appInfo
+    },
+    recipeList: [
+        Passwordless.init({
+            contactMethod: "EMAIL_OR_PHONE",
+
+            async getRedirectionURL(context) {
+                if (context.action === "SUCCESS") {
+                    if (context.isNewRecipeUser) {
+                        // new primary user
+                    } else {
+                        // only a recipe user was created
+                    }
+                }
+                return undefined;
+            },
+        }),
+        Session.init(),
+    ],
+});
+```
+
+After:
+
+```tsx
+import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
+import Passwordless from "supertokens-auth-react/recipe/passwordless";
+
+SuperTokens.init({
+    appInfo: {
+        // appInfo
+    },
+    async getRedirectionURL(context, userContext) {
+        if (context.action === "SUCCESS" && context.newSessionCreated) {
+            if (context.createdNewUser && context.recipeId === "passwordless") {
+                // custom logic
+            }
+        }
+        // Returning undefined means we use the default redirection
+        return undefined;
+    },
+    recipeList: [
+        Passwordless.init({
+            contactMethod: "EMAIL_OR_PHONE",
+        }),
+        Session.init(),
+    ],
+});
+```
+
+#### Styling changes
+
+There are 2 types of style changes in this release:
+
+1.  Refactored/renamed some styling options. If you didn't add custom styles for the following classes there is no action needed
+
+    -   `resetPasswordHeaderTitle`: should now be styled using `withBackButton`
+    -   `headerSubtitle`: now directly includes the text instead of a `div`, your styles may require an update to match this change
+
+2.  Some default styling has changed related to how fonts/font-weights are applied. This may interact with your own font/sizing settings,
+    if you didn't add font, font-size/weight and size changes to your custom styles, no action should be needed.
+
+Both of the above changes could have subtle interactions with custom styles, so we recommend a quick manual (visual) test to make sure everything
+still looks right.
+
+#### getLoginMethods interface change in supertokens-web-js
+
+If you used to use the enabled flags in getLoginMethods:
+
+Before:
+
+```ts
+async function checkLoginMethods() {
+    const loginMethods = await Multitenancy.getLoginMethods();
+    if (loginMethods.thirdParty.enabled) {
+        // custom logic
+    }
+    if (loginMethods.emailPassword.enabled) {
+        // custom logic
+    }
+    if (loginMethods.passwordless.enabled) {
+        // custom logic
+    }
+}
+```
+
+After:
+
+```ts
+async function checkLoginMethods() {
+    const loginMethods = await Multitenancy.getLoginMethods();
+    if (loginMethods.firstFactors.includes("thirdparty")) {
+        // custom logic
+    }
+    if (loginMethods.firstFactors.includes("emailpassword")) {
+        // custom logic
+    }
+
+    if (
+        loginMethods.firstFactors.includes("otp-email") ||
+        loginMethods.firstFactors.includes("otp-phone") ||
+        loginMethods.firstFactors.includes("link-email") ||
+        loginMethods.firstFactors.includes("link-phone")
+    ) {
+        // custom logic
+    }
+}
+```
+
+#### Event handler changes
+
+Before:
+
+```tsx
+import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
+import Passwordless from "supertokens-auth-react/recipe/passwordless";
+
+SuperTokens.init({
+    appInfo: {
+        // appInfo
+    },
+    recipeList: [
+        Passwordless.init({
+            contactMethod: "EMAIL_OR_PHONE",
+
+            onHandleEvent(context) {
+                if (context.action === "SUCCESS") {
+                    let user = context.user;
+                    if (context.isNewRecipeUser && context.user.loginMethods.length === 1) {
+                        // sign up success
+                    } else {
+                        // sign in success
+                    }
+                }
+            },
+        }),
+        Session.init(),
+    ],
+});
+```
+
+After:
+
+```tsx
+import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
+import Passwordless from "supertokens-auth-react/recipe/passwordless";
+
+SuperTokens.init({
+    appInfo: {
+        // appInfo
+    },
+    recipeList: [
+        Passwordless.init({
+            contactMethod: "EMAIL_OR_PHONE",
+
+            onHandleEvent(context) {
+                if (context.action === "SUCCESS" && context.createdNewSession) {
+                    let user = context.user;
+                    let rid = context.rid;
+                    if (context.isNewRecipeUser && context.user.loginMethods.length === 1) {
+                        // sign up success
+                    } else {
+                        // sign in success
+                    }
+                }
+            },
+        }),
+        Session.init(),
+    ],
+});
+```
+
+### Changes
+
+-   Added support for FDI 1.19 (Node SDK>= 17.0.0), but keeping support FDI version 1.17 and 1.18 (node >= 15.0.0, golang>=0.13, python>=0.15.0)
+-   Added the `MultiFactorAuth` and `TOTP` recipes. To start using them you'll need compatible versions:
+    -   Core>=8.0.0
+    -   supertokens-node>=17.0.0
+    -   supertokens-website>=18.0.0
+    -   supertokens-web-js>=0.10.0
+    -   supertokens-auth-react>=0.39.0
+-   Added new MFA related components to Passwordless
+    -   Added new prop `mfaFeature` to recipe config
+        -   `disableDefaultUI`: can be used to disable paths: `${websiteBasePath}/mfa/otp-phone`, `${websiteBasePath}/mfa/otp-email`
+        -   `style`: is applied on top of normal sign in/up styles on the MFA paths
+    -   New embeddable components:
+        -   `MfaOtpPhone` (by default handling path `${websiteBasePath}/mfa/otp-phone`)
+        -   `MfaOtpEmail` (by default handling path `${websiteBasePath}/mfa/otp-email`)
+    -   New overrideable components:
+        -   `PasswordlessMFAHeader_Override`
+        -   `PasswordlessMFAFooter_Override`
+        -   `PasswordlessMFAOTPHeader_Override`
+        -   `PasswordlessMFAOTPFooter_Override`
+    -   Please note, that during MFA we re-use the existing overrideable comps for the form section:
+        -   `PasswordlessEmailForm_Override`
+        -   `PasswordlessPhoneForm_Override`
+        -   `PasswordlessEmailOrPhoneForm_Override`
+-   Added a `useShadowDom` prop to the `AccessDeniedScreen`
+-   Added an `error` prop to the `AccessDeniedScreen` that can be used to describe the reason access is denied.
+-   Added a `footer` prop to `EmailOrPhoneForm`, `EmailForm` and `PhoneForm` which is used to override the default sign in/up footers in case the component is for MFA
+-   Sign in/up functions can now return new (MFA related) error codes.
+-   New (MFA related) error codes have been added to the default translation files.
+-   Updated how we select which login UI to show to take the `firstFactors` config value into account (defined in the `MultiFactorAuth` recipe or in the tenant information)
+-   The passwordless and thirdpartypasswordless sign in/up screens now respect the firstFactors configuration (defined in the `MultiFactorAuth` recipe or in the tenant information) when selecting the available contact methods.
+-   Added TOTP recipe. For more details please check our guide MFA guide.
+-   Fixed a font loading issue, that caused apps using the default (Rubik) font to appear with the incorrect font weights
+-   Added `rid` and `createdNewSession` to events with `action: "SUCCESS"`
+
 ## [0.38.0] - 2024-02-29
 
 ## Breaking Changes
Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,13 @@`
`1`	`1`	`{`
`2`		`- "presets": [["@babel/preset-env", {}, "@babel/preset-react"]],`
`3`		`- "plugins": [`
	`2`	`+ "presets": [`
	`3`	`+ "@babel/preset-env",`
`4`	`4`	`[`
`5`		`- "@babel/plugin-transform-react-jsx",`
	`5`	`+ "@babel/preset-typescript",`
`6`	`6`	`{`
`7`		`- "pragmaFrag": "React.Fragment"`
	`7`	`+ "allExtensions": true,`
	`8`	`+ "isTSX": true`
`8`	`9`	`}`
`9`		`- ]`
	`10`	`+ ],`
	`11`	`+ ["@babel/preset-react", { "runtime": "automatic" }]`
`10`	`12`	`]`
`11`	`13`	`}`