@ttoss/react-auth 2.5.11 → 2.5.12

package/dist/esm/index.js

@@ -3,10 +3,8 @@
 // src/Auth.tsx
 import { useNotifications as useNotifications2 } from "@ttoss/react-notifications";
 import { Flex as Flex5 } from "@ttoss/ui";
-import { useMachine } from "@xstate/react";
 import { confirmResetPassword, confirmSignUp, resendSignUpCode, resetPassword, signIn, signUp } from "aws-amplify/auth";
 import * as React5 from "react";
-import { assign, createMachine } from "xstate";
 
 // src/AuthCard.tsx
 import { useNotifications } from "@ttoss/react-notifications";
@@ -38,6 +36,7 @@ var AuthCard = ({
   } = useNotifications();
   return /* @__PURE__ */jsxs(Box, {
     sx: {
+      maxWidth: "400px",
       width: "full",
       border: "md",
       borderColor: "display.border.muted.default",
@@ -89,9 +88,10 @@ var AuthCard = ({
 };
 
 // src/AuthConfirmSignUp.tsx
+import { NotificationCard } from "@ttoss/components/NotificationCard";
 import { Form, FormFieldInput, useForm, yup, yupResolver } from "@ttoss/forms";
 import { useI18n } from "@ttoss/react-i18n";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var AuthConfirmSignUp = ({
   email,
   onConfirmSignUp
@@ -135,7 +135,7 @@ var AuthConfirmSignUp = ({
         email
       });
     },
-    children: /* @__PURE__ */jsx2(AuthCard, {
+    children: /* @__PURE__ */jsxs2(AuthCard, {
       buttonLabel: intl.formatMessage({
         id: "UNttd+",
         defaultMessage: [{
@@ -151,7 +151,19 @@ var AuthConfirmSignUp = ({
           "value": "Confirmation"
         }]
       }),
-      children: /* @__PURE__ */jsx2(FormFieldInput, {
+      children: [/* @__PURE__ */jsx2(NotificationCard, {
+        type: "info",
+        message: intl.formatMessage({
+          id: "pwv2cR",
+          defaultMessage: [{
+            "type": 0,
+            "value": "We have sent a confirmation code to your email address. Please enter the code below."
+          }]
+        })
+      }), /* @__PURE__ */jsx2(FormFieldInput, {
+        sx: {
+          marginTop: "6"
+        },
         name: "code",
         label: intl.formatMessage({
           id: "KY2T6J",
@@ -160,7 +172,7 @@ var AuthConfirmSignUp = ({
             "value": "Code"
           }]
         })
-      })
+      })]
     })
   });
 };
@@ -170,7 +182,7 @@ import { Form as Form2, FormFieldInput as FormFieldInput2, useForm as useForm2,
 import { useI18n as useI18n2 } from "@ttoss/react-i18n";
 import { NotificationsBox } from "@ttoss/react-notifications";
 import { Button as Button2, Link, Text } from "@ttoss/ui";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var AuthForgotPassword = ({
   onForgotPassword,
   onCancel,
@@ -210,7 +222,7 @@ var AuthForgotPassword = ({
         email
       });
     },
-    children: /* @__PURE__ */jsxs2(AuthCard, {
+    children: /* @__PURE__ */jsxs3(AuthCard, {
       buttonLabel: intl.formatMessage({
         id: "mZzmNV",
         defaultMessage: [{
@@ -278,7 +290,7 @@ import { useI18n as useI18n3 } from "@ttoss/react-i18n";
 import { NotificationsBox as NotificationsBox2 } from "@ttoss/react-notifications";
 import { Button as Button3 } from "@ttoss/ui";
 import * as React2 from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var AuthForgotPasswordResetPassword = ({
   email,
   onForgotPasswordResetPassword,
@@ -365,7 +377,7 @@ var AuthForgotPasswordResetPassword = ({
         newPassword: password
       });
     },
-    children: /* @__PURE__ */jsxs3(AuthCard, {
+    children: /* @__PURE__ */jsxs4(AuthCard, {
       buttonLabel: intl.formatMessage({
         id: "mZzmNV",
         defaultMessage: [{
@@ -533,7 +545,7 @@ import { Form as Form4, FormFieldInput as FormFieldInput4, FormFieldPassword as
 import { useI18n as useI18n4 } from "@ttoss/react-i18n";
 import { NotificationsBox as NotificationsBox3 } from "@ttoss/react-notifications";
 import { Button as Button4, Flex as Flex3, Link as Link2, Text as Text2 } from "@ttoss/ui";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var AuthSignIn = ({
   onSignIn,
   onSignUp,
@@ -595,19 +607,19 @@ var AuthSignIn = ({
     },
     ...formMethods,
     onSubmit: onSubmitForm,
-    children: /* @__PURE__ */jsxs4(AuthCard, {
+    children: /* @__PURE__ */jsxs5(AuthCard, {
       title: intl.formatMessage({
-        id: "F2iS37",
+        id: "SQJto2",
         defaultMessage: [{
           "type": 0,
-          "value": "Log in"
+          "value": "Sign in"
         }]
       }),
       buttonLabel: intl.formatMessage({
-        id: "/J+02x",
+        id: "SQJto2",
         defaultMessage: [{
           "type": 0,
-          "value": "Log in"
+          "value": "Sign in"
         }]
       }),
       isValidForm: formMethods.formState.isValid,
@@ -628,7 +640,7 @@ var AuthSignIn = ({
           }]
         })
       }),
-      children: [/* @__PURE__ */jsxs4(Flex3, {
+      children: [/* @__PURE__ */jsxs5(Flex3, {
         sx: {
           flexDirection: "column",
           gap: "xl"
@@ -683,7 +695,7 @@ import { useI18n as useI18n5 } from "@ttoss/react-i18n";
 import { NotificationsBox as NotificationsBox4 } from "@ttoss/react-notifications";
 import { Flex as Flex4, Link as Link3, Text as Text3 } from "@ttoss/ui";
 import * as React4 from "react";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var AuthSignUp = props => {
   const {
     intl
@@ -759,7 +771,7 @@ var AuthSignUp = props => {
     });
     const termsLinks = props.signUpTerms.terms.map((term, index, terms) => {
       const finalPunctuation = index === terms.length - 1 ? "." : ", ";
-      return /* @__PURE__ */jsxs5(React4.Fragment, {
+      return /* @__PURE__ */jsxs6(React4.Fragment, {
         children: [/* @__PURE__ */jsx8(Link3, {
           href: term.url,
           target: "_blank",
@@ -768,7 +780,7 @@ var AuthSignUp = props => {
         }, index), finalPunctuation]
       }, index);
     });
-    const label = /* @__PURE__ */jsxs5(Text3, {
+    const label = /* @__PURE__ */jsxs6(Text3, {
       children: [signUpTermsFirstMessage, " ", termsLinks]
     });
     return label;
@@ -802,7 +814,7 @@ var AuthSignUp = props => {
     },
     ...formMethods,
     onSubmit: onSubmitForm,
-    children: /* @__PURE__ */jsxs5(AuthCard, {
+    children: /* @__PURE__ */jsxs6(AuthCard, {
       buttonLabel: intl.formatMessage({
         id: "URJDrG",
         defaultMessage: [{
@@ -832,7 +844,7 @@ var AuthSignUp = props => {
           }]
         })
       }),
-      children: [/* @__PURE__ */jsxs5(Flex4, {
+      children: [/* @__PURE__ */jsxs6(Flex4, {
         sx: {
           flexDirection: "column",
           gap: "xl"
@@ -871,87 +883,15 @@ var AuthSignUp = props => {
 };
 
 // src/Auth.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var authMachine = createMachine({
-  predictableActionArguments: true,
-  initial: "signIn",
-  states: {
-    signIn: {
-      on: {
-        SIGN_UP: {
-          target: "signUp"
-        },
-        SIGN_UP_RESEND_CONFIRMATION: {
-          actions: ["assignEmail"],
-          target: "signUpConfirm"
-        },
-        FORGOT_PASSWORD: {
-          target: "forgotPassword"
-        }
-      }
-    },
-    signUp: {
-      on: {
-        SIGN_UP_CONFIRM: {
-          actions: ["assignEmail"],
-          target: "signUpConfirm"
-        },
-        RETURN_TO_SIGN_IN: {
-          target: "signIn"
-        }
-      }
-    },
-    signUpConfirm: {
-      on: {
-        SIGN_UP_CONFIRMED: {
-          actions: ["assignEmail"],
-          target: "signIn"
-        }
-      }
-    },
-    forgotPassword: {
-      on: {
-        RETURN_TO_SIGN_IN: {
-          target: "signIn"
-        },
-        SIGN_UP: {
-          target: "signUp"
-        },
-        FORGOT_PASSWORD_RESET_PASSWORD: {
-          actions: ["assignEmail"],
-          target: "forgotPasswordResetPassword"
-        }
-      }
-    },
-    forgotPasswordResetPassword: {
-      on: {
-        FORGOT_PASSWORD_CONFIRMED: {
-          actions: ["assignEmail"],
-          target: "signIn"
-        },
-        RETURN_TO_SIGN_IN: {
-          target: "signIn"
-        }
-      }
-    }
-  }
-}, {
-  actions: {
-    assignEmail: assign({
-      email: (_, event) => {
-        if ("email" in event) {
-          return event.email;
-        }
-        return void 0;
-      }
-    })
-  }
-});
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var AuthLogic = props => {
   const {
     isAuthenticated
   } = useAuth();
-  const [state, send] = useMachine(authMachine);
+  const [screen, setScreen] = React5.useState({
+    value: "signIn",
+    context: {}
+  });
   const {
     setLoading,
     addNotification,
@@ -959,7 +899,7 @@ var AuthLogic = props => {
   } = useNotifications2();
   React5.useEffect(() => {
     clearNotifications();
-  }, [state.value, clearNotifications]);
+  }, [screen.value, clearNotifications]);
   React5.useEffect(() => {
     return clearNotifications;
   }, [clearNotifications]);
@@ -978,20 +918,23 @@ var AuthLogic = props => {
           type: "error",
           message: `For your security, we have updated our system and you need to reset your password in 'forgot your password?' to proceed`
         });
-      }
-    } catch (error) {
-      switch (error.code) {
-        case "UserNotConfirmedException":
-          await resendSignUpCode({
-            username: email
-          });
-          send({
-            type: "SIGN_UP_RESEND_CONFIRMATION",
+      } else if (result.nextStep.signInStep === "CONFIRM_SIGN_UP") {
+        await resendSignUpCode({
+          username: email
+        });
+        setScreen({
+          value: "signUpResendConfirmation",
+          context: {
             email
-          });
-          break;
-        default:
+          }
+        });
+      } else {
+        addNotification({
+          type: "error",
+          message: "Unknown error"
+        });
       }
+    } catch (error) {
       addNotification({
         type: "error",
         message: error.message
@@ -999,7 +942,7 @@ var AuthLogic = props => {
     } finally {
       setLoading(false);
     }
-  }, [send, setLoading, addNotification]);
+  }, [addNotification, setLoading]);
   const onSignUp = React5.useCallback(async ({
     email,
     password
@@ -1015,9 +958,11 @@ var AuthLogic = props => {
           }
         }
       });
-      send({
-        type: "SIGN_UP_CONFIRM",
-        email
+      setScreen({
+        value: "signUpConfirm",
+        context: {
+          email
+        }
       });
     } catch (error) {
       addNotification({
@@ -1027,7 +972,7 @@ var AuthLogic = props => {
     } finally {
       setLoading(false);
     }
-  }, [send, setLoading, addNotification]);
+  }, [setLoading, addNotification]);
   const onConfirmSignUp = React5.useCallback(async ({
     email,
     code
@@ -1038,9 +983,11 @@ var AuthLogic = props => {
         confirmationCode: code,
         username: email
       });
-      send({
-        type: "SIGN_UP_CONFIRMED",
-        email
+      setScreen({
+        value: "signIn",
+        context: {
+          email
+        }
       });
     } catch (error) {
       addNotification({
@@ -1050,12 +997,13 @@ var AuthLogic = props => {
     } finally {
       setLoading(false);
     }
-  }, [send, setLoading, addNotification]);
+  }, [setLoading, addNotification]);
   const onReturnToSignIn = React5.useCallback(() => {
-    send({
-      type: "RETURN_TO_SIGN_IN"
+    setScreen({
+      value: "signIn",
+      context: {}
     });
-  }, [send]);
+  }, []);
   const onForgotPassword = React5.useCallback(async ({
     email
   }) => {
@@ -1064,9 +1012,11 @@ var AuthLogic = props => {
       await resetPassword({
         username: email
       });
-      send({
-        type: "FORGOT_PASSWORD_RESET_PASSWORD",
-        email
+      setScreen({
+        value: "forgotPasswordResetPassword",
+        context: {
+          email
+        }
       });
     } catch (error) {
       addNotification({
@@ -1076,7 +1026,7 @@ var AuthLogic = props => {
     } finally {
       setLoading(false);
     }
-  }, [send, setLoading, addNotification]);
+  }, [setLoading, addNotification]);
   const onForgotPasswordResetPassword = React5.useCallback(async ({
     email,
     code,
@@ -1089,9 +1039,11 @@ var AuthLogic = props => {
         username: email,
         newPassword
       });
-      send({
-        type: "FORGOT_PASSWORD_CONFIRMED",
-        email
+      setScreen({
+        value: "signIn",
+        context: {
+          email
+        }
       });
     } catch (error) {
       addNotification({
@@ -1101,35 +1053,38 @@ var AuthLogic = props => {
     } finally {
       setLoading(false);
     }
-  }, [send, setLoading, addNotification]);
+  }, [setLoading, addNotification]);
   if (isAuthenticated) {
     return null;
   }
-  if (state.matches("signUp")) {
+  if (screen.value === "signUp") {
     return /* @__PURE__ */jsx9(AuthSignUp, {
       onSignUp,
       onReturnToSignIn,
       signUpTerms: props.signUpTerms
     });
   }
-  if (state.matches("signUpConfirm")) {
+  if (screen.value === "signUpConfirm" || screen.value === "signUpResendConfirmation") {
     return /* @__PURE__ */jsx9(AuthConfirmSignUp, {
       onConfirmSignUp,
-      email: state.context.email
+      email: screen.context.email
     });
   }
-  if (state.matches("forgotPassword")) {
+  if (screen.value === "forgotPassword") {
     return /* @__PURE__ */jsx9(AuthForgotPassword, {
       onForgotPassword,
       onCancel: onReturnToSignIn,
       onSignUp: () => {
-        return send("SIGN_UP");
+        setScreen({
+          value: "signUp",
+          context: {}
+        });
       }
     });
   }
-  if (state.matches("forgotPasswordResetPassword")) {
+  if (screen.value === "forgotPasswordResetPassword") {
     return /* @__PURE__ */jsx9(AuthForgotPasswordResetPassword, {
-      email: state.context.email,
+      email: screen.context.email,
       onForgotPasswordResetPassword,
       onCancel: onReturnToSignIn
     });
@@ -1137,13 +1092,19 @@ var AuthLogic = props => {
   return /* @__PURE__ */jsx9(AuthSignIn, {
     onSignIn,
     onSignUp: () => {
-      return send("SIGN_UP");
+      setScreen({
+        value: "signUp",
+        context: {}
+      });
     },
     onForgotPassword: () => {
-      return send("FORGOT_PASSWORD");
+      setScreen({
+        value: "forgotPassword",
+        context: {}
+      });
     },
     defaultValues: {
-      email: state.context.email
+      email: screen.context.email
     }
   });
 };
@@ -1164,7 +1125,7 @@ var Auth = props => {
   if (layout.fullScreen) {
     if (layout.sideContentPosition) {
       return /* @__PURE__ */jsx9(AuthFullScreen, {
-        children: /* @__PURE__ */jsxs6(Flex5, {
+        children: /* @__PURE__ */jsxs7(Flex5, {
           sx: {
             width: "100%",
             height: "100%",

package/i18n/compiled/en.json

@@ -1,10 +1,4 @@
 {
-  "/J+02x": [
-    {
-      "type": 0,
-      "value": "Log in"
-    }
-  ],
   "0XOzcH": [
     {
       "type": 0,
@@ -79,12 +73,6 @@
       "value": "Sign up"
     }
   ],
-  "F2iS37": [
-    {
-      "type": 0,
-      "value": "Log in"
-    }
-  ],
   "KY2T6J": [
     {
       "type": 0,
@@ -135,6 +123,12 @@
       "value": "Recovering Password"
     }
   ],
+  "SQJto2": [
+    {
+      "type": 0,
+      "value": "Sign in"
+    }
+  ],
   "SnONhb": [
     {
       "type": 0,
@@ -231,6 +225,12 @@
       "value": "Sign up"
     }
   ],
+  "pwv2cR": [
+    {
+      "type": 0,
+      "value": "We have sent a confirmation code to your email address. Please enter the code below."
+    }
+  ],
   "qnQYqN": [
     {
       "type": 0,

package/i18n/lang/en.json

@@ -1,8 +1,4 @@
 {
-  "/J+02x": {
-    "defaultMessage": "Log in",
-    "description": "Button label."
-  },
   "0XOzcH": {
     "defaultMessage": "Required field",
     "description": "Required field."
@@ -42,10 +38,6 @@
     "defaultMessage": "Sign up",
     "description": "Sign up"
   },
-  "F2iS37": {
-    "defaultMessage": "Log in",
-    "description": "Sign in title."
-  },
   "KY2T6J": {
     "defaultMessage": "Code",
     "description": "Sign up confirmation code"
@@ -70,6 +62,9 @@
     "defaultMessage": "Recovering Password",
     "description": "Recovering Password"
   },
+  "SQJto2": {
+    "defaultMessage": "Sign in"
+  },
   "SnONhb": {
     "defaultMessage": "Please, insert a valid e-mail",
     "description": "Please, insert a valid e-mail"
@@ -122,6 +117,9 @@
     "defaultMessage": "Sign up",
     "description": "Title on sign up."
   },
+  "pwv2cR": {
+    "defaultMessage": "We have sent a confirmation code to your email address. Please enter the code below."
+  },
   "qnQYqN": {
     "defaultMessage": "You must accept the terms and conditions"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-auth",
-  "version": "2.5.11",
+  "version": "2.5.12",
   "description": "ttoss authentication module for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -24,17 +24,14 @@
     "i18n"
   ],
   "sideEffects": false,
-  "dependencies": {
-    "@xstate/react": "^3.2.2",
-    "xstate": "^4.38.3",
-    "@ttoss/forms": "^0.29.6"
-  },
   "peerDependencies": {
     "aws-amplify": "^6.0.0",
     "react": ">=16.8.0",
+    "@ttoss/components": "^2.2.6",
+    "@ttoss/forms": "^0.29.7",
     "@ttoss/react-i18n": "^2.0.10",
-    "@ttoss/react-notifications": "^2.1.11",
-    "@ttoss/ui": "^5.5.3"
+    "@ttoss/react-notifications": "^2.1.12",
+    "@ttoss/ui": "^5.5.4"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
@@ -44,12 +41,14 @@
     "react": "^19.0.0",
     "tsup": "^8.3.5",
     "@ttoss/cloud-auth": "^0.12.27",
+    "@ttoss/components": "^2.2.6",
+    "@ttoss/config": "^1.35.2",
     "@ttoss/i18n-cli": "^0.7.27",
     "@ttoss/react-i18n": "^2.0.10",
-    "@ttoss/config": "^1.35.2",
-    "@ttoss/react-notifications": "^2.1.11",
+    "@ttoss/forms": "^0.29.7",
+    "@ttoss/react-notifications": "^2.1.12",
     "@ttoss/test-utils": "^2.1.22",
-    "@ttoss/ui": "^5.5.3"
+    "@ttoss/ui": "^5.5.4"
   },
   "keywords": [
     "React",