Merge branch '0.47' into feat/oauth2/base

.circleci/publish.sh

@@ -13,8 +13,11 @@ then
     cd ..
     npm publish --tag latest
     npm i || exit $?
-    npx -y chromatic --auto-accept-changes master
+    npx -y chromatic --auto-accept-changes --branch=master
+    npx -y chromatic --auto-accept-changes --branch=$version
 else
     cd ..
     npm publish --tag version-$version
+    npm i || exit $?
+    npx -y chromatic --auto-accept-changes --branch=$version
 fi

.github/workflows/chromatic.yml

@@ -3,7 +3,7 @@ name: "Chromatic"
 on:
     push:
         branches: [master, "[0-9]*.[0-9]*"]
-    workflow_call:
+    workflow_dispatch:
 
 jobs:
     chromatic:

CHANGELOG.md

@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
-## [0.44.0] - 2024-10-07
+## [0.49.0] - 2024-10-07
 
 ### Changes
 
@@ -92,7 +92,89 @@ Passwordless.init({
 });
 ```
 
-## [0.43.0] - 2024-10-07
+## [0.47.1] - 2024-09-18
+
+### Fixes
+
+-   Fixed an issue where we showed the "continue with passwordless" button during sign-in even if email-based passwordless was disabled by the tenant configuration.
+
+## [0.47.0] - 2024-09-02
+
+### Breaking changes
+
+Redesigned the pre-built UI with a modern monochrome aesthetic, creating a cleaner and more unified visual experience. Please double check any custom styles you added still looks good with the new UI.
+
+### Details
+
+-   Changed a lot of the default styles to fit the new UI
+-   `--palette-textTitle` changed from `rgb(34, 34, 34)` to `rgb(0, 0, 0)`
+-   `--palette-textLabel` changed from rgb`(34, 34, 34)` to `rgb(0, 0, 0)`
+-   `--palette-textInput` changed from `rgb(34, 34, 34)` to `rgb(0, 0, 0)`
+-   `--palette-textPrimary` changed from `rgb(101, 101, 101)` to `rgb(128, 128, 128)`
+-   `--palette-textLink` changed from `rgb(0, 118, 255)` to `rgb(0, 122, 255)`
+-   `--palette-textGray` changed from `rgb(128, 128, 128)` to `rgb(54, 54, 54)`
+-   Adjusted the layout of the provider buttons. Now:
+    -   The logo is aligned to the left, and the text is centered within the entire button, enhancing visual balance and consistency across different button text lengths.
+    -   The button now has a fixed height of 40px.
+    -   We add an animation to the button when hovering over it if the text is too long.
+-   Changed the Email Icon used in the "Verify Email" UI
+-   Changed the SMS Icon used in the "Link sent to phone" UI
+-   Changed the button arrow icons
+-   Updated some translation strings to fit the new UI
+    -   `EMAIL_VERIFICATION_SEND_TITLE`
+    -   `PWLESS_LINK_SENT_RESEND_DESC_END_EMAIL`
+
+## [0.46.0] - 2024-08-26
+
+### Breaking changes
+
+-   The prebuilt UI now clears the login attempt info if the stored data doesn't contain all the required properties. This should help migration from a custom UI to the prebuilt UI.
+-   Changed `redirectToFactor` to accept an object instead of multiple arguments.
+-   Changed `redirectToFactorChooser` to accept an object instead of multiple arguments.
+-   Made MFA related screens do a success redirection if MFA is already completed and the `stepUp` query param is not set to `true`.
+    -   `redirectToFactorChooser` now accepts a `stepUp` option to set the `stepUp` query param.
+    -   `redirectToFactor` now accepts a `stepUp` option to set the `stepUp` query param.
+
+### Fixes
+
+-   Fixed an issue where the `Session` recipe was not allowed in the pre-built UI list (it's still a no-op, but it shouldn't be a type issue)
+
+## [0.45.1] - 2024-08-09
+
+### Changes
+
+-   Now we only update the session context if the object changes by value. This optimization should help reduce unnecessary re-renders.
+
+## [0.45.0] - 2024-07-31
+
+### Breaking changes
+
+-   Updated the font and font-weights in the default styles
+-   We no longer load the Rubik font by default
+
+### Fixes
+
+-   Now the error prop should be updated in override components.
+
+## [0.44.0] - 2024-07-15
+
+-   Removes the default `maxAgeInSeconds` value (previously 300 seconds) in EmailVerification Claim. If the claim value is true and `maxAgeInSeconds` is not provided, it will not be refreshed.
+
+## [0.43.1] - 2024-07-15
+
+-   Fixes to e2e test
+
+## [0.43.0] - 2024-06-25
+
+### Changes
+
+-   Updated SAML third-party provider to use logo based on the provider name
+
+## [0.42.3] - 2024-06-24
+
+### Changes
+
+-   Now we only update the session context if the object changes by value. This optimization should help reduce unnecessary re-renders.
 
 ## [0.42.2] - 2024-05-29
 

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

@@ -4,7 +4,6 @@
     justify-content: stretch;
     width: 100vw;
     height: 100vh;
-    font-family: Rubik;
 }
 
 .fill {

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

@@ -418,12 +418,20 @@ export const DashboardNoAuthRequired = doNotUseReactRouterDom
 export function DashboardNoAuthRequiredHelper(props) {
     let sessionContext = useSessionContext();
 
+    useEffect(() => {
+        if (testContext.signoutOnSessionNotExists) {
+            if (!sessionContext.loading && !sessionContext.doesSessionExist) {
+                Session.signOut();
+            }
+        }
+    }, [sessionContext]);
+
     if (sessionContext.loading) {
         return null;
     }
 
     if (sessionContext.doesSessionExist) {
-        return Dashboard({ redirectOnLogout: false, ...props });
+        return <Dashboard redirectOnLogout={false} {...props} />;
     } else {
         return <div className="not-logged-in">Not logged in</div>;
     }
@@ -506,9 +514,13 @@ export function DashboardHelper({ redirectOnLogout, ...props } = {}) {
             <a
                 className="goToFactorChooser"
                 onClick={() => {
-                    return MultiFactorAuth.redirectToFactorChooser(true, undefined, props.history);
+                    return MultiFactorAuth.redirectToFactorChooser({
+                        redirectBack: true,
+                        stepUp: true,
+                        navigate: props.history,
+                    });
                 }}>
-                MFA chooser
+                MFA chooser (step up)
             </a>
         </div>
     );

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

@@ -21,6 +21,7 @@ export function getTestContext() {
                 : undefined,
         enableMFA: localStorage.getItem("enableMFA") === "true",
         defaultToEmail: localStorage.getItem("defaultToEmail") !== "false",
+        signoutOnSessionNotExists: localStorage.getItem("signoutOnSessionNotExists") === "true",
         disableRedirectionAfterSuccessfulSignInUp:
             localStorage.getItem("disableRedirectionAfterSuccessfulSignInUp") === "true",
     };

examples/for-tests/src/App.css

@@ -4,7 +4,6 @@
     justify-content: stretch;
     width: 100vw;
     height: 100vh;
-    font-family: Rubik;
 }
 
 .fill {

examples/for-tests/src/App.js

@@ -582,12 +582,20 @@ export const DashboardNoAuthRequired = doNotUseReactRouterDom
 export function DashboardNoAuthRequiredHelper(props) {
     let sessionContext = useSessionContext();
 
+    useEffect(() => {
+        if (testContext.signoutOnSessionNotExists) {
+            if (!sessionContext.loading && !sessionContext.doesSessionExist) {
+                Session.signOut();
+            }
+        }
+    }, [sessionContext]);
+
     if (sessionContext.loading) {
         return null;
     }
 
     if (sessionContext.doesSessionExist) {
-        return Dashboard({ redirectOnLogout: false, ...props });
+        return <Dashboard redirectOnLogout={false} {...props} />;
     } else {
         return <div className="not-logged-in">Not logged in</div>;
     }
@@ -670,9 +678,13 @@ export function DashboardHelper({ redirectOnLogout, ...props } = {}) {
             <a
                 className="goToFactorChooser"
                 onClick={() => {
-                    return MultiFactorAuth.redirectToFactorChooser(true, undefined, props.history);
+                    return MultiFactorAuth.redirectToFactorChooser({
+                        redirectBack: true,
+                        stepUp: true,
+                        navigate: props.history,
+                    });
                 }}>
-                MFA chooser
+                MFA chooser (step up)
             </a>
         </div>
     );

examples/for-tests/src/testContext.js

@@ -22,6 +22,7 @@ export function getTestContext() {
         },
         enableMFA: localStorage.getItem("enableMFA") === "true",
         defaultToEmail: localStorage.getItem("defaultToEmail") !== "false",
+        signoutOnSessionNotExists: localStorage.getItem("signoutOnSessionNotExists") === "true",
         disableRedirectionAfterSuccessfulSignInUp:
             localStorage.getItem("disableRedirectionAfterSuccessfulSignInUp") === "true",
     };

examples/with-multifactorauth-phone-chooser/frontend/package.json

@@ -15,7 +15,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.1",
-        "supertokens-auth-react": "latest",
+        "supertokens-auth-react": "github:supertokens/supertokens-auth-react#feat/mfa_redirect",
         "supertokens-web-js": "latest",
         "typescript": "^4.8.2",
         "web-vitals": "^2.1.4"

examples/with-multifactorauth-phone-chooser/frontend/src/Home/CallAPIView.tsx

@@ -13,7 +13,12 @@ export default function CallAPIView() {
     }
 
     async function goToPhoneSetup() {
-        await MultiFactorAuth.redirectToFactor(MultiFactorAuth.FactorIds.OTP_PHONE, true, true, navigate);
+        await MultiFactorAuth.redirectToFactor({
+            factorId: MultiFactorAuth.FactorIds.OTP_PHONE,
+            forceSetup: true,
+            redirectBack: true,
+            navigate,
+        });
     }
 
     return (

examples/with-multifactorauth-phone-chooser/frontend/src/SelectPhone/index.tsx

@@ -16,10 +16,19 @@ export default function SelectPhone() {
             if (res.status === 200) {
                 const loadedInfo = await res.clone().json();
                 if (loadedInfo.user.phoneNumbers.length === 0) {
-                    await MultiFactorAuth.redirectToFactor(MultiFactorAuth.FactorIds.OTP_PHONE, true, false, nav);
+                    await MultiFactorAuth.redirectToFactor({
+                        factorId: MultiFactorAuth.FactorIds.OTP_PHONE,
+                        forceSetup: true,
+                        redirectBack: false,
+                        navigate: nav,
+                    });
                 } else if (loadedInfo.user.phoneNumbers.length === 1) {
                     await Passwordless.createCode({ phoneNumber: loadedInfo.user.phoneNumbers[0] });
-                    await MultiFactorAuth.redirectToFactor(MultiFactorAuth.FactorIds.OTP_PHONE, false, false, nav);
+                    await MultiFactorAuth.redirectToFactor({
+                        factorId: MultiFactorAuth.FactorIds.OTP_PHONE,
+                        redirectBack: false,
+                        navigate: nav,
+                    });
                 } else {
                     setUserInfo(loadedInfo);
                 }
@@ -65,12 +74,11 @@ export default function SelectPhone() {
                                                 hasOtherPhoneNumbers: true,
                                             },
                                         });
-                                        return MultiFactorAuth.redirectToFactor(
-                                            MultiFactorAuth.FactorIds.OTP_PHONE,
-                                            false,
-                                            false,
-                                            nav
-                                        );
+                                        return MultiFactorAuth.redirectToFactor({
+                                            factorId: MultiFactorAuth.FactorIds.OTP_PHONE,
+                                            redirectBack: false,
+                                            navigate: nav,
+                                        });
                                     }
                                 })
                                 .catch(setError);

examples/with-multifactorauth-recovery-codes/frontend/src/RecoveryCode/index.tsx

@@ -17,7 +17,12 @@ export default function RecoveryCode() {
         if (reset.data.status !== "OK") {
             setError("Recovery code not found");
         } else {
-            await MultiFactorAuth.redirectToFactor("totp", true, false, nav);
+            await MultiFactorAuth.redirectToFactor({
+                factorId: "totp",
+                forceSetup: true,
+                redirectBack: false,
+                navigate: nav,
+            });
         }
     }