@ttoss/react-auth 1.6.6 → 1.6.8

package/dist/esm/index.js

@@ -76,7 +76,7 @@ var useAuth = () => {
 };
 
 // src/Auth.tsx
-import * as React3 from "react";
+import * as React5 from "react";
 import { Auth as AmplifyAuth } from "aws-amplify";
 
 // src/AuthCard.tsx
@@ -257,8 +257,10 @@ var AuthFullScreen = ({
 };
 
 // src/AuthSignIn.tsx
+import * as React3 from "react";
 import { Button as Button2, Flex as Flex3, Link, Text } from "@ttoss/ui";
 import { Form as Form2, FormFieldInput as FormFieldInput2, FormFieldPassword, useForm as useForm2, yup as yup2, yupResolver as yupResolver2 } from "@ttoss/forms";
+import { NotificationsBox, useNotifications as useNotifications2 } from "@ttoss/react-notifications";
 
 // ../cloud-auth/dist/esm/index.js
 var PASSWORD_MINIMUM_LENGTH = 8;
@@ -515,6 +517,12 @@ var AuthSignIn = ({
   const {
     intl
   } = useI18n2();
+  const {
+    setNotifications
+  } = useNotifications2();
+  React3.useEffect(() => {
+    setNotifications(void 0);
+  }, [setNotifications]);
   const schema = yup2.object().shape({
     email: yup2.string().required(intl.formatMessage({
       id: "r+QgO+",
@@ -636,14 +644,16 @@ var AuthSignIn = ({
             }]
           })
         })
-      })]
+      }), /* @__PURE__ */jsx5(NotificationsBox, {})]
     })
   });
 };
 
 // src/AuthSignUp.tsx
-import { Form as Form3, FormFieldInput as FormFieldInput3, useForm as useForm3, yup as yup3, yupResolver as yupResolver3 } from "@ttoss/forms";
-import { Link as Link2, Text as Text2 } from "@ttoss/ui";
+import * as React4 from "react";
+import { Flex as Flex4, Link as Link2, Text as Text2 } from "@ttoss/ui";
+import { Form as Form3, FormFieldInput as FormFieldInput3, FormFieldPassword as FormFieldPassword2, useForm as useForm3, yup as yup3, yupResolver as yupResolver3 } from "@ttoss/forms";
+import { NotificationsBox as NotificationsBox2, useNotifications as useNotifications3 } from "@ttoss/react-notifications";
 import { useI18n as useI18n3 } from "@ttoss/react-i18n";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var AuthSignUp = ({
@@ -653,6 +663,12 @@ var AuthSignUp = ({
   const {
     intl
   } = useI18n3();
+  const {
+    setNotifications
+  } = useNotifications3();
+  React4.useEffect(() => {
+    setNotifications(void 0);
+  }, [setNotifications]);
   const schema = yup3.object().shape({
     email: yup3.string().required(intl.formatMessage({
       id: "r+QgO+",
@@ -687,9 +703,23 @@ var AuthSignUp = ({
       }]
     }, {
       value: PASSWORD_MINIMUM_LENGTH
-    })).trim()
+    })).trim(),
+    confirmPassword: yup3.string().required(intl.formatMessage({
+      id: "NJ57Qj",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Confirm password field is required"
+      }]
+    })).oneOf([yup3.ref("password")], intl.formatMessage({
+      id: "WU/CqP",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Passwords are not the same"
+      }]
+    }))
   });
   const formMethods = useForm3({
+    mode: "all",
     resolver: yupResolver3(schema)
   });
   const onSubmitForm = data => {
@@ -700,17 +730,17 @@ var AuthSignUp = ({
     onSubmit: onSubmitForm,
     children: /* @__PURE__ */jsxs3(AuthCard, {
       buttonLabel: intl.formatMessage({
-        id: "Pdio77",
+        id: "URJDrG",
         defaultMessage: [{
           "type": 0,
-          "value": "Create account"
+          "value": "Sign up"
         }]
       }),
       title: intl.formatMessage({
-        id: "EXZxA0",
+        id: "oayEC3",
         defaultMessage: [{
           "type": 0,
-          "value": "Register"
+          "value": "Sign up"
         }]
       }),
       isValidForm: formMethods.formState.isValid,
@@ -718,33 +748,47 @@ var AuthSignUp = ({
         onClick: onReturnToSignIn,
         as: Link2,
         children: intl.formatMessage({
-          id: "LU2ddR",
+          id: "rx8HF/",
           defaultMessage: [{
             "type": 0,
-            "value": "Do you already have an account? Sign in"
+            "value": "I’m already registered"
           }]
         })
       }),
-      children: [/* @__PURE__ */jsx6(FormFieldInput3, {
-        name: "email",
-        label: intl.formatMessage({
-          id: "5E12mO",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Email"
-          }]
-        })
-      }), /* @__PURE__ */jsx6(FormFieldInput3, {
-        name: "password",
-        type: "password",
-        label: intl.formatMessage({
-          id: "PylVqx",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Password"
-          }]
-        })
-      })]
+      children: [/* @__PURE__ */jsxs3(Flex4, {
+        sx: {
+          flexDirection: "column",
+          gap: "xl"
+        },
+        children: [/* @__PURE__ */jsx6(FormFieldInput3, {
+          name: "email",
+          label: intl.formatMessage({
+            id: "5E12mO",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Email"
+            }]
+          })
+        }), /* @__PURE__ */jsx6(FormFieldPassword2, {
+          name: "password",
+          label: intl.formatMessage({
+            id: "PylVqx",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Password"
+            }]
+          })
+        }), /* @__PURE__ */jsx6(FormFieldPassword2, {
+          name: "confirmPassword",
+          label: intl.formatMessage({
+            id: "lY+cuM",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Confirm password"
+            }]
+          })
+        })]
+      }), /* @__PURE__ */jsx6(NotificationsBox2, {})]
     })
   });
 };
@@ -752,7 +796,7 @@ var AuthSignUp = ({
 // src/Auth.tsx
 import { assign, createMachine } from "xstate";
 import { useMachine } from "@xstate/react";
-import { useNotifications as useNotifications2 } from "@ttoss/react-notifications";
+import { useNotifications as useNotifications4 } from "@ttoss/react-notifications";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var authMachine = createMachine({
   predictableActionArguments: true,
@@ -804,9 +848,10 @@ var AuthLogic = () => {
   } = useAuth();
   const [state, send] = useMachine(authMachine);
   const {
-    setLoading
-  } = useNotifications2();
-  const onSignIn = React3.useCallback(async ({
+    setLoading,
+    setNotifications
+  } = useNotifications4();
+  const onSignIn = React5.useCallback(async ({
     email,
     password
   }) => {
@@ -824,11 +869,15 @@ var AuthLogic = () => {
           break;
         default:
       }
+      setNotifications({
+        type: "error",
+        message: error.message
+      });
     } finally {
       setLoading(false);
     }
-  }, [send, setLoading]);
-  const onSignUp = React3.useCallback(async ({
+  }, [send, setLoading, setNotifications]);
+  const onSignUp = React5.useCallback(async ({
     email,
     password
   }) => {
@@ -845,11 +894,16 @@ var AuthLogic = () => {
         type: "SIGN_UP_CONFIRM",
         email
       });
-    } catch (error) {} finally {
+    } catch (error) {
+      setNotifications({
+        type: "error",
+        message: error.message
+      });
+    } finally {
       setLoading(false);
     }
-  }, [send, setLoading]);
-  const onConfirmSignUp = React3.useCallback(async ({
+  }, [send, setLoading, setNotifications]);
+  const onConfirmSignUp = React5.useCallback(async ({
     email,
     code
   }) => {
@@ -860,11 +914,16 @@ var AuthLogic = () => {
         type: "SIGN_UP_CONFIRMED",
         email
       });
-    } catch (error) {} finally {
+    } catch (error) {
+      setNotifications({
+        type: "error",
+        message: error.message
+      });
+    } finally {
       setLoading(false);
     }
-  }, [send, setLoading]);
-  const onReturnToSignIn = React3.useCallback(() => {
+  }, [send, setLoading, setNotifications]);
+  const onReturnToSignIn = React5.useCallback(() => {
     send({
       type: "RETURN_TO_SIGN_IN"
     });
@@ -898,7 +957,7 @@ var Auth2 = ({
   logo,
   fullScreen = true
 }) => {
-  const withLogoNode = React3.useMemo(() => {
+  const withLogoNode = React5.useMemo(() => {
     return /* @__PURE__ */jsx7(LogoProvider, {
       logo,
       children: /* @__PURE__ */jsx7(AuthLogic, {})

package/dist/index.d.ts

@@ -38,6 +38,7 @@ type OnSignIn = (input: OnSignInInput) => void;
 type OnSignUpInput = {
     email: string;
     password: string;
+    confirmPassword: string;
 };
 type OnSignUp = (input: OnSignUpInput) => void;
 type OnConfirmSignUp = (input: {

package/dist/index.js

@@ -120,7 +120,7 @@ var useAuth = () => {
 };
 
 // src/Auth.tsx
-var React3 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_aws_amplify2 = require("aws-amplify");
 
 // src/AuthCard.tsx
@@ -301,8 +301,10 @@ var AuthFullScreen = ({
 };
 
 // src/AuthSignIn.tsx
+var React3 = __toESM(require("react"));
 var import_ui3 = require("@ttoss/ui");
 var import_forms2 = require("@ttoss/forms");
+var import_react_notifications2 = require("@ttoss/react-notifications");
 
 // ../cloud-auth/dist/esm/index.js
 var PASSWORD_MINIMUM_LENGTH = 8;
@@ -559,6 +561,12 @@ var AuthSignIn = ({
   const {
     intl
   } = (0, import_react_i18n2.useI18n)();
+  const {
+    setNotifications
+  } = (0, import_react_notifications2.useNotifications)();
+  React3.useEffect(() => {
+    setNotifications(void 0);
+  }, [setNotifications]);
   const schema = import_forms2.yup.object().shape({
     email: import_forms2.yup.string().required(intl.formatMessage({
       id: "r+QgO+",
@@ -680,14 +688,16 @@ var AuthSignIn = ({
             }]
           })
         })
-      })]
+      }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_react_notifications2.NotificationsBox, {})]
     })
   });
 };
 
 // src/AuthSignUp.tsx
-var import_forms3 = require("@ttoss/forms");
+var React4 = __toESM(require("react"));
 var import_ui4 = require("@ttoss/ui");
+var import_forms3 = require("@ttoss/forms");
+var import_react_notifications3 = require("@ttoss/react-notifications");
 var import_react_i18n3 = require("@ttoss/react-i18n");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var AuthSignUp = ({
@@ -697,6 +707,12 @@ var AuthSignUp = ({
   const {
     intl
   } = (0, import_react_i18n3.useI18n)();
+  const {
+    setNotifications
+  } = (0, import_react_notifications3.useNotifications)();
+  React4.useEffect(() => {
+    setNotifications(void 0);
+  }, [setNotifications]);
   const schema = import_forms3.yup.object().shape({
     email: import_forms3.yup.string().required(intl.formatMessage({
       id: "r+QgO+",
@@ -731,9 +747,23 @@ var AuthSignUp = ({
       }]
     }, {
       value: PASSWORD_MINIMUM_LENGTH
-    })).trim()
+    })).trim(),
+    confirmPassword: import_forms3.yup.string().required(intl.formatMessage({
+      id: "NJ57Qj",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Confirm password field is required"
+      }]
+    })).oneOf([import_forms3.yup.ref("password")], intl.formatMessage({
+      id: "WU/CqP",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Passwords are not the same"
+      }]
+    }))
   });
   const formMethods = (0, import_forms3.useForm)({
+    mode: "all",
     resolver: (0, import_forms3.yupResolver)(schema)
   });
   const onSubmitForm = data => {
@@ -744,17 +774,17 @@ var AuthSignUp = ({
     onSubmit: onSubmitForm,
     children: /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(AuthCard, {
       buttonLabel: intl.formatMessage({
-        id: "Pdio77",
+        id: "URJDrG",
         defaultMessage: [{
           "type": 0,
-          "value": "Create account"
+          "value": "Sign up"
         }]
       }),
       title: intl.formatMessage({
-        id: "EXZxA0",
+        id: "oayEC3",
         defaultMessage: [{
           "type": 0,
-          "value": "Register"
+          "value": "Sign up"
         }]
       }),
       isValidForm: formMethods.formState.isValid,
@@ -762,33 +792,47 @@ var AuthSignUp = ({
         onClick: onReturnToSignIn,
         as: import_ui4.Link,
         children: intl.formatMessage({
-          id: "LU2ddR",
+          id: "rx8HF/",
           defaultMessage: [{
             "type": 0,
-            "value": "Do you already have an account? Sign in"
+            "value": "I’m already registered"
           }]
         })
       }),
-      children: [/* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_forms3.FormFieldInput, {
-        name: "email",
-        label: intl.formatMessage({
-          id: "5E12mO",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Email"
-          }]
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_forms3.FormFieldInput, {
-        name: "password",
-        type: "password",
-        label: intl.formatMessage({
-          id: "PylVqx",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Password"
-          }]
-        })
-      })]
+      children: [/* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_ui4.Flex, {
+        sx: {
+          flexDirection: "column",
+          gap: "xl"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_forms3.FormFieldInput, {
+          name: "email",
+          label: intl.formatMessage({
+            id: "5E12mO",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Email"
+            }]
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_forms3.FormFieldPassword, {
+          name: "password",
+          label: intl.formatMessage({
+            id: "PylVqx",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Password"
+            }]
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_forms3.FormFieldPassword, {
+          name: "confirmPassword",
+          label: intl.formatMessage({
+            id: "lY+cuM",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Confirm password"
+            }]
+          })
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_react_notifications3.NotificationsBox, {})]
     })
   });
 };
@@ -796,7 +840,7 @@ var AuthSignUp = ({
 // src/Auth.tsx
 var import_xstate = require("xstate");
 var import_react = require("@xstate/react");
-var import_react_notifications2 = require("@ttoss/react-notifications");
+var import_react_notifications4 = require("@ttoss/react-notifications");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var authMachine = (0, import_xstate.createMachine)({
   predictableActionArguments: true,
@@ -848,9 +892,10 @@ var AuthLogic = () => {
   } = useAuth();
   const [state, send] = (0, import_react.useMachine)(authMachine);
   const {
-    setLoading
-  } = (0, import_react_notifications2.useNotifications)();
-  const onSignIn = React3.useCallback(async ({
+    setLoading,
+    setNotifications
+  } = (0, import_react_notifications4.useNotifications)();
+  const onSignIn = React5.useCallback(async ({
     email,
     password
   }) => {
@@ -868,11 +913,15 @@ var AuthLogic = () => {
           break;
         default:
       }
+      setNotifications({
+        type: "error",
+        message: error.message
+      });
     } finally {
       setLoading(false);
     }
-  }, [send, setLoading]);
-  const onSignUp = React3.useCallback(async ({
+  }, [send, setLoading, setNotifications]);
+  const onSignUp = React5.useCallback(async ({
     email,
     password
   }) => {
@@ -889,11 +938,16 @@ var AuthLogic = () => {
         type: "SIGN_UP_CONFIRM",
         email
       });
-    } catch (error) {} finally {
+    } catch (error) {
+      setNotifications({
+        type: "error",
+        message: error.message
+      });
+    } finally {
       setLoading(false);
     }
-  }, [send, setLoading]);
-  const onConfirmSignUp = React3.useCallback(async ({
+  }, [send, setLoading, setNotifications]);
+  const onConfirmSignUp = React5.useCallback(async ({
     email,
     code
   }) => {
@@ -904,11 +958,16 @@ var AuthLogic = () => {
         type: "SIGN_UP_CONFIRMED",
         email
       });
-    } catch (error) {} finally {
+    } catch (error) {
+      setNotifications({
+        type: "error",
+        message: error.message
+      });
+    } finally {
       setLoading(false);
     }
-  }, [send, setLoading]);
-  const onReturnToSignIn = React3.useCallback(() => {
+  }, [send, setLoading, setNotifications]);
+  const onReturnToSignIn = React5.useCallback(() => {
     send({
       type: "RETURN_TO_SIGN_IN"
     });
@@ -942,7 +1001,7 @@ var Auth2 = ({
   logo,
   fullScreen = true
 }) => {
-  const withLogoNode = React3.useMemo(() => {
+  const withLogoNode = React5.useMemo(() => {
     return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(LogoProvider, {
       logo,
       children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(AuthLogic, {})

package/i18n/compiled/en.json

@@ -23,12 +23,6 @@
       "value": "Forgot password?"
     }
   ],
-  "EXZxA0": [
-    {
-      "type": 0,
-      "value": "Register"
-    }
-  ],
   "EZ3YF2": [
     {
       "type": 0,
@@ -47,10 +41,10 @@
       "value": "Code"
     }
   ],
-  "LU2ddR": [
+  "NJ57Qj": [
     {
       "type": 0,
-      "value": "Do you already have an account? Sign in"
+      "value": "Confirm password field is required"
     }
   ],
   "OhDL0i": [
@@ -59,12 +53,6 @@
       "value": "Invalid email"
     }
   ],
-  "Pdio77": [
-    {
-      "type": 0,
-      "value": "Create account"
-    }
-  ],
   "PylVqx": [
     {
       "type": 0,
@@ -105,6 +93,18 @@
       "value": "Confirm"
     }
   ],
+  "URJDrG": [
+    {
+      "type": 0,
+      "value": "Sign up"
+    }
+  ],
+  "WU/CqP": [
+    {
+      "type": 0,
+      "value": "Passwords are not the same"
+    }
+  ],
   "cGR2eI": [
     {
       "type": 0,
@@ -117,10 +117,28 @@
       "value": "Password field is required"
     }
   ],
+  "lY+cuM": [
+    {
+      "type": 0,
+      "value": "Confirm password"
+    }
+  ],
+  "oayEC3": [
+    {
+      "type": 0,
+      "value": "Sign up"
+    }
+  ],
   "r+QgO+": [
     {
       "type": 0,
       "value": "Email field is required"
     }
+  ],
+  "rx8HF/": [
+    {
+      "type": 0,
+      "value": "I’m already registered"
+    }
   ]
 }

package/i18n/lang/en.json

@@ -15,10 +15,6 @@
     "defaultMessage": "Forgot password?",
     "description": "Forgot password?"
   },
-  "EXZxA0": {
-    "defaultMessage": "Register",
-    "description": "Title on sign up."
-  },
   "EZ3YF2": {
     "defaultMessage": "Sign up",
     "description": "Sign up"
@@ -31,18 +27,14 @@
     "defaultMessage": "Code",
     "description": "Sign up confirmation code"
   },
-  "LU2ddR": {
-    "defaultMessage": "Do you already have an account? Sign in",
-    "description": "Link to sign in on sign up."
+  "NJ57Qj": {
+    "defaultMessage": "Confirm password field is required",
+    "description": "Confirm Password is required."
   },
   "OhDL0i": {
     "defaultMessage": "Invalid email",
     "description": "Invalid email."
   },
-  "Pdio77": {
-    "defaultMessage": "Create account",
-    "description": "Create account."
-  },
   "PylVqx": {
     "defaultMessage": "Password",
     "description": "Password label."
@@ -59,6 +51,14 @@
     "defaultMessage": "Confirm",
     "description": "Confirm"
   },
+  "URJDrG": {
+    "defaultMessage": "Sign up",
+    "description": "Create account."
+  },
+  "WU/CqP": {
+    "defaultMessage": "Passwords are not the same",
+    "description": "Passwords are not the same"
+  },
   "cGR2eI": {
     "defaultMessage": "Confirmation",
     "description": "Confirmation"
@@ -67,8 +67,20 @@
     "defaultMessage": "Password field is required",
     "description": "Password is required."
   },
+  "lY+cuM": {
+    "defaultMessage": "Confirm password",
+    "description": "Confirm Password label."
+  },
+  "oayEC3": {
+    "defaultMessage": "Sign up",
+    "description": "Title on sign up."
+  },
   "r+QgO+": {
     "defaultMessage": "Email field is required",
     "description": "Email is a required field."
+  },
+  "rx8HF/": {
+    "defaultMessage": "I’m already registered",
+    "description": "Link to sign in on sign up."
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-auth",
-  "version": "1.6.6",
+  "version": "1.6.8",
   "description": "ttoss authentication module for React apps.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -19,13 +19,13 @@
   "dependencies": {
     "@xstate/react": "^3.2.2",
     "xstate": "^4.37.2",
-    "@ttoss/forms": "^0.17.6"
+    "@ttoss/forms": "^0.17.7"
   },
   "peerDependencies": {
     "aws-amplify": "^5.0.0",
     "react": ">=16.8.0",
     "@ttoss/react-i18n": "^1.22.0",
-    "@ttoss/react-notifications": "^1.22.6",
+    "@ttoss/react-notifications": "^1.22.8",
     "@ttoss/ui": "^1.36.6"
   },
   "devDependencies": {
@@ -37,7 +37,7 @@
     "@ttoss/config": "^1.30.0",
     "@ttoss/i18n-cli": "^0.5.0",
     "@ttoss/react-i18n": "^1.22.0",
-    "@ttoss/react-notifications": "^1.22.6",
+    "@ttoss/react-notifications": "^1.22.8",
     "@ttoss/test-utils": "^1.23.0",
     "@ttoss/ui": "^1.36.6"
   },

package/src/Auth.tsx

@@ -87,7 +87,7 @@ const AuthLogic = () => {
 
   const [state, send] = useMachine(authMachine);
 
-  const { setLoading } = useNotifications();
+  const { setLoading, setNotifications } = useNotifications();
 
   const onSignIn = React.useCallback<OnSignIn>(
     async ({ email, password }) => {
@@ -95,8 +95,8 @@ const AuthLogic = () => {
         setLoading(true);
         await AmplifyAuth.signIn(email, password);
         // toast('Signed In');
-      } catch (error) {
-        switch ((error as any).code) {
+      } catch (error: any) {
+        switch (error.code) {
           case 'UserNotConfirmedException':
             await AmplifyAuth.resendSignUp(email);
             send({ type: 'SIGN_UP_RESEND_CONFIRMATION', email } as any);
@@ -104,11 +104,12 @@ const AuthLogic = () => {
           default:
           // toast(JSON.stringify(error, null, 2));
         }
+        setNotifications({ type: 'error', message: error.message });
       } finally {
         setLoading(false);
       }
     },
-    [send, setLoading]
+    [send, setLoading, setNotifications]
   );
 
   const onSignUp = React.useCallback<OnSignUp>(
@@ -122,13 +123,14 @@ const AuthLogic = () => {
         });
         // toast('Signed Up');
         send({ type: 'SIGN_UP_CONFIRM', email } as any);
-      } catch (error) {
+      } catch (error: any) {
+        setNotifications({ type: 'error', message: error.message });
         // toast(JSON.stringify(error, null, 2));
       } finally {
         setLoading(false);
       }
     },
-    [send, setLoading]
+    [send, setLoading, setNotifications]
   );
 
   const onConfirmSignUp = React.useCallback<OnConfirmSignUp>(
@@ -138,13 +140,14 @@ const AuthLogic = () => {
         await AmplifyAuth.confirmSignUp(email, code);
         // toast('Confirmed Signed In');
         send({ type: 'SIGN_UP_CONFIRMED', email } as any);
-      } catch (error) {
+      } catch (error: any) {
+        setNotifications({ type: 'error', message: error.message });
         // toast(JSON.stringify(error, null, 2));
       } finally {
         setLoading(false);
       }
     },
-    [send, setLoading]
+    [send, setLoading, setNotifications]
   );
 
   const onReturnToSignIn = React.useCallback(() => {

package/src/AuthProvider.tsx

@@ -84,7 +84,14 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   }
 
   return (
-    <AuthContext.Provider value={{ signOut, isAuthenticated, user, tokens }}>
+    <AuthContext.Provider
+      value={{
+        signOut,
+        isAuthenticated,
+        user,
+        tokens,
+      }}
+    >
       {children}
     </AuthContext.Provider>
   );

package/src/AuthSignIn.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { AuthCard } from './AuthCard';
 import { Button, Flex, Link, Text } from '@ttoss/ui';
 import {
@@ -8,6 +9,7 @@ import {
   yup,
   yupResolver,
 } from '@ttoss/forms';
+import { NotificationsBox, useNotifications } from '@ttoss/react-notifications';
 import { PASSWORD_MINIMUM_LENGTH } from '@ttoss/cloud-auth';
 import { useI18n } from '@ttoss/react-i18n';
 import type { OnSignIn, OnSignInInput } from './types';
@@ -27,6 +29,11 @@ export const AuthSignIn = ({
   onForgotPassword,
 }: AuthSignInProps) => {
   const { intl } = useI18n();
+  const { setNotifications } = useNotifications();
+
+  React.useEffect(() => {
+    setNotifications(undefined);
+  }, [setNotifications]);
 
   const schema = yup.object().shape({
     email: yup
@@ -135,6 +142,8 @@ export const AuthSignIn = ({
             })}
           </Text>
         </Flex>
+
+        <NotificationsBox />
       </AuthCard>
     </Form>
   );

package/src/AuthSignUp.tsx

@@ -1,6 +1,15 @@
+import * as React from 'react';
 import { AuthCard } from './AuthCard';
-import { Form, FormFieldInput, useForm, yup, yupResolver } from '@ttoss/forms';
-import { Link, Text } from '@ttoss/ui';
+import { Flex, Link, Text } from '@ttoss/ui';
+import {
+  Form,
+  FormFieldInput,
+  FormFieldPassword,
+  useForm,
+  yup,
+  yupResolver,
+} from '@ttoss/forms';
+import { NotificationsBox, useNotifications } from '@ttoss/react-notifications';
 import { PASSWORD_MINIMUM_LENGTH } from '@ttoss/cloud-auth';
 import { useI18n } from '@ttoss/react-i18n';
 import type { OnSignUp, OnSignUpInput } from './types';
@@ -12,6 +21,11 @@ export type AuthSignUpProps = {
 
 export const AuthSignUp = ({ onSignUp, onReturnToSignIn }: AuthSignUpProps) => {
   const { intl } = useI18n();
+  const { setNotifications } = useNotifications();
+
+  React.useEffect(() => {
+    setNotifications(undefined);
+  }, [setNotifications]);
 
   const schema = yup.object().shape({
     email: yup
@@ -47,9 +61,25 @@ export const AuthSignUp = ({ onSignUp, onReturnToSignIn }: AuthSignUpProps) => {
         )
       )
       .trim(),
+    confirmPassword: yup
+      .string()
+      .required(
+        intl.formatMessage({
+          description: 'Confirm Password is required.',
+          defaultMessage: 'Confirm password field is required',
+        })
+      )
+      .oneOf(
+        [yup.ref('password')],
+        intl.formatMessage({
+          description: 'Passwords are not the same',
+          defaultMessage: 'Passwords are not the same',
+        })
+      ),
   });
 
   const formMethods = useForm<OnSignUpInput>({
+    mode: 'all',
     resolver: yupResolver(schema),
   });
 
@@ -62,37 +92,47 @@ export const AuthSignUp = ({ onSignUp, onReturnToSignIn }: AuthSignUpProps) => {
       <AuthCard
         buttonLabel={intl.formatMessage({
           description: 'Create account.',
-          defaultMessage: 'Create account',
+          defaultMessage: 'Sign up',
         })}
         title={intl.formatMessage({
           description: 'Title on sign up.',
-          defaultMessage: 'Register',
+          defaultMessage: 'Sign up',
         })}
         isValidForm={formMethods.formState.isValid}
         extraButton={
           <Text onClick={onReturnToSignIn} as={Link}>
             {intl.formatMessage({
               description: 'Link to sign in on sign up.',
-              defaultMessage: 'Do you already have an account? Sign in',
+              defaultMessage: 'I’m already registered',
             })}
           </Text>
         }
       >
-        <FormFieldInput
-          name="email"
-          label={intl.formatMessage({
-            description: 'Email label.',
-            defaultMessage: 'Email',
-          })}
-        />
-        <FormFieldInput
-          name="password"
-          type="password"
-          label={intl.formatMessage({
-            description: 'Password label.',
-            defaultMessage: 'Password',
-          })}
-        />
+        <Flex sx={{ flexDirection: 'column', gap: 'xl' }}>
+          <FormFieldInput
+            name="email"
+            label={intl.formatMessage({
+              description: 'Email label.',
+              defaultMessage: 'Email',
+            })}
+          />
+          <FormFieldPassword
+            name="password"
+            label={intl.formatMessage({
+              description: 'Password label.',
+              defaultMessage: 'Password',
+            })}
+          />
+          <FormFieldPassword
+            name="confirmPassword"
+            label={intl.formatMessage({
+              description: 'Confirm Password label.',
+              defaultMessage: 'Confirm password',
+            })}
+          />
+        </Flex>
+
+        <NotificationsBox />
       </AuthCard>
     </Form>
   );

package/src/types.ts

@@ -8,6 +8,7 @@ export type OnSignIn = (input: OnSignInInput) => void;
 export type OnSignUpInput = {
   email: string;
   password: string;
+  confirmPassword: string;
 };
 
 export type OnSignUp = (input: OnSignUpInput) => void;