@ttoss/react-auth 2.3.5 → 2.4.0

package/dist/esm/index.js

@@ -1,98 +1,24 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 
-// src/AuthProvider.tsx
-import * as React from "react";
-import { Hub } from "aws-amplify/utils";
-import { signOut as awsSignOut, fetchAuthSession, fetchUserAttributes, getCurrentUser } from "aws-amplify/auth";
-import { jsx } from "react/jsx-runtime";
-var signOut = () => {
-  return awsSignOut();
-};
-var AuthContext = React.createContext({
-  signOut,
-  isAuthenticated: false,
-  user: null,
-  tokens: null
-});
-var AuthProvider = ({
-  children
-}) => {
-  const [{
-    user,
-    tokens,
-    isAuthenticated
-  }, setAuthState] = React.useState({
-    user: null,
-    tokens: null,
-    isAuthenticated: void 0
-  });
-  React.useEffect(() => {
-    const updateUser = () => {
-      getCurrentUser().then(async ({
-        userId
-      }) => {
-        const [session, user2] = await Promise.all([fetchAuthSession(), fetchUserAttributes()]);
-        const idToken = session.tokens?.idToken?.toString() ?? "";
-        const accessToken = session.tokens?.accessToken.toString() ?? "";
-        setAuthState({
-          user: {
-            id: userId,
-            email: user2.email ?? "",
-            emailVerified: user2.email_verified ?? ""
-          },
-          tokens: {
-            idToken,
-            accessToken,
-            refreshToken: ""
-          },
-          isAuthenticated: true
-        });
-      }).catch(e => {
-        console.error(e);
-        setAuthState({
-          user: null,
-          tokens: null,
-          isAuthenticated: false
-        });
-      });
-    };
-    const updateUserListener = Hub.listen("auth", updateUser);
-    updateUser();
-    return () => {
-      updateUserListener();
-    };
-  }, []);
-  if (isAuthenticated === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */jsx(AuthContext.Provider, {
-    value: {
-      signOut,
-      isAuthenticated,
-      user,
-      tokens
-    },
-    children
-  });
-};
-var useAuth = () => {
-  return React.useContext(AuthContext);
-};
-
 // src/Auth.tsx
+import { useNotifications as useNotifications4 } 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 React6 from "react";
+import { assign, createMachine } from "xstate";
 
 // src/AuthCard.tsx
-import * as React2 from "react";
-import { Box, Button, Flex, Heading } from "@ttoss/ui";
 import { useNotifications } from "@ttoss/react-notifications";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var LogoContext = React2.createContext({});
+import { Box, Button, Flex, Heading } from "@ttoss/ui";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LogoContext = React.createContext({});
 var LogoProvider = ({
   children,
   ...values
 }) => {
-  return /* @__PURE__ */jsx2(LogoContext.Provider, {
+  return /* @__PURE__ */jsx(LogoContext.Provider, {
     value: values,
     children
   });
@@ -106,7 +32,7 @@ var AuthCard = ({
 }) => {
   const {
     logo
-  } = React2.useContext(LogoContext);
+  } = React.useContext(LogoContext);
   const {
     isLoading
   } = useNotifications();
@@ -119,7 +45,7 @@ var AuthCard = ({
       paddingY: "3xl",
       backgroundColor: "surface"
     },
-    children: [logo && /* @__PURE__ */jsx2(Flex, {
+    children: [logo && /* @__PURE__ */jsx(Flex, {
       sx: {
         width: "100%",
         maxHeight: "90px",
@@ -131,7 +57,7 @@ var AuthCard = ({
       sx: {
         flexDirection: "column"
       },
-      children: [/* @__PURE__ */jsx2(Heading, {
+      children: [/* @__PURE__ */jsx(Heading, {
         as: "h2",
         variant: "h2",
         sx: {
@@ -145,7 +71,7 @@ var AuthCard = ({
           gap: "xl",
           marginTop: "2xl"
         },
-        children: [/* @__PURE__ */jsx2(Button, {
+        children: [/* @__PURE__ */jsx(Button, {
           type: "submit",
           "aria-label": "submit-button",
           variant: "accent",
@@ -165,7 +91,7 @@ var AuthCard = ({
 // src/AuthConfirmSignUp.tsx
 import { Form, FormFieldInput, useForm, yup, yupResolver } from "@ttoss/forms";
 import { useI18n } from "@ttoss/react-i18n";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var AuthConfirmSignUp = ({
   email,
   onConfirmSignUp
@@ -199,7 +125,7 @@ var AuthConfirmSignUp = ({
   const formMethods = useForm({
     resolver: yupResolver(schema)
   });
-  return /* @__PURE__ */jsx3(Form, {
+  return /* @__PURE__ */jsx2(Form, {
     ...formMethods,
     onSubmit: ({
       code
@@ -209,7 +135,7 @@ var AuthConfirmSignUp = ({
         email
       });
     },
-    children: /* @__PURE__ */jsx3(AuthCard, {
+    children: /* @__PURE__ */jsx2(AuthCard, {
       buttonLabel: intl.formatMessage({
         id: "UNttd+",
         defaultMessage: [{
@@ -225,7 +151,7 @@ var AuthConfirmSignUp = ({
           "value": "Confirmation"
         }]
       }),
-      children: /* @__PURE__ */jsx3(FormFieldInput, {
+      children: /* @__PURE__ */jsx2(FormFieldInput, {
         name: "code",
         label: intl.formatMessage({
           id: "KY2T6J",
@@ -240,11 +166,11 @@ var AuthConfirmSignUp = ({
 };
 
 // src/AuthForgotPassword.tsx
-import { Button as Button2, Link, Text } from "@ttoss/ui";
 import { Form as Form2, FormFieldInput as FormFieldInput2, useForm as useForm2, yup as yup2, yupResolver as yupResolver2 } from "@ttoss/forms";
-import { NotificationsBox } from "@ttoss/react-notifications";
 import { useI18n as useI18n2 } from "@ttoss/react-i18n";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+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";
 var AuthForgotPassword = ({
   onForgotPassword,
   onCancel,
@@ -272,7 +198,7 @@ var AuthForgotPassword = ({
     resolver: yupResolver2(schema),
     mode: "onBlur"
   });
-  return /* @__PURE__ */jsx4(Form2, {
+  return /* @__PURE__ */jsx3(Form2, {
     ...formMethods,
     sx: {
       maxWidth: "390px"
@@ -300,7 +226,7 @@ var AuthForgotPassword = ({
           "value": "Recovering Password"
         }]
       }),
-      extraButton: /* @__PURE__ */jsx4(Button2, {
+      extraButton: /* @__PURE__ */jsx3(Button2, {
         sx: {
           textAlign: "center",
           display: "initial"
@@ -315,7 +241,7 @@ var AuthForgotPassword = ({
           }]
         })
       }),
-      children: [/* @__PURE__ */jsx4(FormFieldInput2, {
+      children: [/* @__PURE__ */jsx3(FormFieldInput2, {
         name: "email",
         label: intl.formatMessage({
           id: "XreZg+",
@@ -324,7 +250,7 @@ var AuthForgotPassword = ({
             "value": "Registered Email"
           }]
         })
-      }), /* @__PURE__ */jsx4(NotificationsBox, {}), /* @__PURE__ */jsx4(Text, {
+      }), /* @__PURE__ */jsx3(NotificationsBox, {}), /* @__PURE__ */jsx3(Text, {
         sx: {
           marginTop: "xl",
           cursor: "pointer"
@@ -343,18 +269,16 @@ var AuthForgotPassword = ({
   });
 };
 
-// src/AuthForgotPasswordResetPassword.tsx
-import * as React3 from "react";
-import { Button as Button3 } from "@ttoss/ui";
-import { Form as Form3, FormFieldInput as FormFieldInput3, FormFieldPassword, useForm as useForm3, yup as yup3, yupResolver as yupResolver3 } from "@ttoss/forms";
-import { NotificationsBox as NotificationsBox2 } from "@ttoss/react-notifications";
-
 // ../cloud-auth/src/config.ts
 var PASSWORD_MINIMUM_LENGTH = 8;
 
 // src/AuthForgotPasswordResetPassword.tsx
+import { Form as Form3, FormFieldInput as FormFieldInput3, FormFieldPassword, useForm as useForm3, yup as yup3, yupResolver as yupResolver3 } from "@ttoss/forms";
 import { useI18n as useI18n3 } from "@ttoss/react-i18n";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+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";
 var AuthForgotPasswordResetPassword = ({
   email,
   onForgotPasswordResetPassword,
@@ -363,7 +287,7 @@ var AuthForgotPasswordResetPassword = ({
   const {
     intl
   } = useI18n3();
-  const schema = React3.useMemo(() => {
+  const schema = React2.useMemo(() => {
     return yup3.object().shape({
       code: yup3.string().required(intl.formatMessage({
         id: "0XOzcH",
@@ -426,7 +350,7 @@ var AuthForgotPasswordResetPassword = ({
     resolver: yupResolver3(schema),
     mode: "onBlur"
   });
-  return /* @__PURE__ */jsx5(Form3, {
+  return /* @__PURE__ */jsx4(Form3, {
     ...formMethods,
     sx: {
       maxWidth: "390px"
@@ -457,7 +381,7 @@ var AuthForgotPasswordResetPassword = ({
           "value": "Recovering Password"
         }]
       }),
-      extraButton: /* @__PURE__ */jsx5(Button3, {
+      extraButton: /* @__PURE__ */jsx4(Button3, {
         sx: {
           textAlign: "center",
           display: "initial"
@@ -472,7 +396,7 @@ var AuthForgotPasswordResetPassword = ({
           }]
         })
       }),
-      children: [/* @__PURE__ */jsx5(FormFieldInput3, {
+      children: [/* @__PURE__ */jsx4(FormFieldInput3, {
         name: "code",
         label: intl.formatMessage({
           id: "42HafR",
@@ -481,7 +405,7 @@ var AuthForgotPasswordResetPassword = ({
             "value": "Code"
           }]
         })
-      }), /* @__PURE__ */jsx5(FormFieldPassword, {
+      }), /* @__PURE__ */jsx4(FormFieldPassword, {
         name: "password",
         label: intl.formatMessage({
           id: "PylVqx",
@@ -490,7 +414,7 @@ var AuthForgotPasswordResetPassword = ({
             "value": "Password"
           }]
         })
-      }), /* @__PURE__ */jsx5(FormFieldPassword, {
+      }), /* @__PURE__ */jsx4(FormFieldPassword, {
         name: "confirmPassword",
         label: intl.formatMessage({
           id: "lY+cuM",
@@ -499,18 +423,18 @@ var AuthForgotPasswordResetPassword = ({
             "value": "Confirm password"
           }]
         })
-      }), /* @__PURE__ */jsx5(NotificationsBox2, {})]
+      }), /* @__PURE__ */jsx4(NotificationsBox2, {})]
     })
   });
 };
 
 // src/AuthFullScreen.tsx
 import { Flex as Flex2 } from "@ttoss/ui";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var AuthFullScreen = ({
   children
 }) => {
-  return /* @__PURE__ */jsx6(Flex2, {
+  return /* @__PURE__ */jsx5(Flex2, {
     sx: {
       height: "100vh",
       width: "100vw",
@@ -525,12 +449,91 @@ var AuthFullScreen = ({
   });
 };
 
+// src/AuthProvider.tsx
+import { fetchAuthSession, fetchUserAttributes, getCurrentUser, signOut as awsSignOut } from "aws-amplify/auth";
+import { Hub } from "aws-amplify/utils";
+import * as React3 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var signOut = () => {
+  return awsSignOut();
+};
+var AuthContext = React3.createContext({
+  signOut,
+  isAuthenticated: false,
+  user: null,
+  tokens: null
+});
+var AuthProvider = ({
+  children
+}) => {
+  const [{
+    user,
+    tokens,
+    isAuthenticated
+  }, setAuthState] = React3.useState({
+    user: null,
+    tokens: null,
+    isAuthenticated: void 0
+  });
+  React3.useEffect(() => {
+    const updateUser = () => {
+      getCurrentUser().then(async ({
+        userId
+      }) => {
+        const [session, user2] = await Promise.all([fetchAuthSession(), fetchUserAttributes()]);
+        const idToken = session.tokens?.idToken?.toString() ?? "";
+        const accessToken = session.tokens?.accessToken.toString() ?? "";
+        setAuthState({
+          user: {
+            id: userId,
+            email: user2.email ?? "",
+            emailVerified: user2.email_verified ?? ""
+          },
+          tokens: {
+            idToken,
+            accessToken,
+            refreshToken: ""
+          },
+          isAuthenticated: true
+        });
+      }).catch(e => {
+        console.error(e);
+        setAuthState({
+          user: null,
+          tokens: null,
+          isAuthenticated: false
+        });
+      });
+    };
+    const updateUserListener = Hub.listen("auth", updateUser);
+    updateUser();
+    return () => {
+      updateUserListener();
+    };
+  }, []);
+  if (isAuthenticated === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */jsx6(AuthContext.Provider, {
+    value: {
+      signOut,
+      isAuthenticated,
+      user,
+      tokens
+    },
+    children
+  });
+};
+var useAuth = () => {
+  return React3.useContext(AuthContext);
+};
+
 // src/AuthSignIn.tsx
-import * as React4 from "react";
-import { Button as Button4, Flex as Flex3, Link as Link2, Text as Text2 } from "@ttoss/ui";
 import { Form as Form4, FormFieldInput as FormFieldInput4, FormFieldPassword as FormFieldPassword2, useForm as useForm4, yup as yup4, yupResolver as yupResolver4 } from "@ttoss/forms";
-import { NotificationsBox as NotificationsBox3, useNotifications as useNotifications2 } from "@ttoss/react-notifications";
 import { useI18n as useI18n4 } from "@ttoss/react-i18n";
+import { NotificationsBox as NotificationsBox3, useNotifications as useNotifications2 } from "@ttoss/react-notifications";
+import { Button as Button4, Flex as Flex3, Link as Link2, Text as Text2 } from "@ttoss/ui";
+import * as React4 from "react";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var AuthSignIn = ({
   onSignIn,
@@ -682,16 +685,13 @@ var AuthSignIn = ({
 };
 
 // src/AuthSignUp.tsx
-import * as React5 from "react";
-import { Flex as Flex4, Link as Link3, Text as Text3 } from "@ttoss/ui";
-import { Form as Form5, FormFieldInput as FormFieldInput5, FormFieldPassword as FormFieldPassword3, useForm as useForm5, yup as yup5, yupResolver as yupResolver5 } from "@ttoss/forms";
-import { NotificationsBox as NotificationsBox4, useNotifications as useNotifications3 } from "@ttoss/react-notifications";
+import { Form as Form5, FormFieldCheckbox, FormFieldInput as FormFieldInput5, FormFieldPassword as FormFieldPassword3, useForm as useForm5, yup as yup5, yupResolver as yupResolver5 } from "@ttoss/forms";
 import { useI18n as useI18n5 } from "@ttoss/react-i18n";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var AuthSignUp = ({
-  onSignUp,
-  onReturnToSignIn
-}) => {
+import { NotificationsBox as NotificationsBox4, useNotifications as useNotifications3 } from "@ttoss/react-notifications";
+import { Flex as Flex4, Link as Link3, Text as Text3 } from "@ttoss/ui";
+import * as React5 from "react";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var AuthSignUp = props => {
   const {
     intl
   } = useI18n5();
@@ -701,61 +701,106 @@ var AuthSignUp = ({
   React5.useEffect(() => {
     setNotifications(void 0);
   }, [setNotifications]);
-  const schema = yup5.object().shape({
-    email: yup5.string().required(intl.formatMessage({
-      id: "d1YCuH",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Enter your email address"
-      }]
-    })).email(intl.formatMessage({
-      id: "OhDL0i",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Invalid email"
-      }]
-    })),
-    password: yup5.string().required(intl.formatMessage({
-      id: "kdFYba",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Password field is required"
-      }]
-    })).min(PASSWORD_MINIMUM_LENGTH, intl.formatMessage({
-      id: "TZ4WUk",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Password requires "
-      }, {
-        "type": 1,
-        "value": "value"
+  const schema = React5.useMemo(() => {
+    return yup5.object().shape({
+      email: yup5.string().required(intl.formatMessage({
+        id: "d1YCuH",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Enter your email address"
+        }]
+      })).email(intl.formatMessage({
+        id: "OhDL0i",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Invalid email"
+        }]
+      })),
+      password: yup5.string().required(intl.formatMessage({
+        id: "kdFYba",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Password field is required"
+        }]
+      })).min(PASSWORD_MINIMUM_LENGTH, intl.formatMessage({
+        id: "TZ4WUk",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Password requires "
+        }, {
+          "type": 1,
+          "value": "value"
+        }, {
+          "type": 0,
+          "value": " characters"
+        }]
       }, {
-        "type": 0,
-        "value": " characters"
-      }]
-    }, {
-      value: PASSWORD_MINIMUM_LENGTH
-    })).trim(),
-    confirmPassword: yup5.string().required(intl.formatMessage({
-      id: "NJ57Qj",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Confirm password field is required"
-      }]
-    })).oneOf([yup5.ref("password")], intl.formatMessage({
-      id: "WU/CqP",
+        value: PASSWORD_MINIMUM_LENGTH
+      })).trim(),
+      confirmPassword: yup5.string().required(intl.formatMessage({
+        id: "NJ57Qj",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Confirm password field is required"
+        }]
+      })).oneOf([yup5.ref("password")], intl.formatMessage({
+        id: "WU/CqP",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Passwords are not the same"
+        }]
+      })),
+      signUpTerms: yup5.boolean().oneOf([props.signUpTerms?.isRequired], "Voc\xEA deve aceitar os Termos e Condi\xE7\xF5es.")
+    });
+  }, [intl, props.signUpTerms?.isRequired]);
+  const signUpTermsLabel = React5.useMemo(() => {
+    if (!props.signUpTerms) {
+      return null;
+    }
+    const signUpTermsFirstMessage = intl.formatMessage({
+      id: "Co3exe",
       defaultMessage: [{
         "type": 0,
-        "value": "Passwords are not the same"
+        "value": "By signing up, you agree to the following Terms and Conditions."
       }]
-    }))
-  });
+    });
+    const termsLinks = props.signUpTerms.termsAndConditions.map((term, index, termsAndConditions) => {
+      const finalPunctuation = index === termsAndConditions.length - 1 ? "." : ", ";
+      return /* @__PURE__ */jsxs5(React5.Fragment, {
+        children: [/* @__PURE__ */jsx8(Link3, {
+          href: term.url,
+          target: "_blank",
+          rel: "noreferrer",
+          children: term.label
+        }, index), finalPunctuation]
+      }, index);
+    });
+    const label = /* @__PURE__ */jsxs5(Text3, {
+      children: [signUpTermsFirstMessage, " ", termsLinks]
+    });
+    return label;
+  }, [intl, props.signUpTerms]);
+  const signUpTermsNode = React5.useMemo(() => {
+    if (!props.signUpTerms) {
+      return null;
+    }
+    if (props.signUpTerms.isRequired) {
+      return /* @__PURE__ */jsx8(FormFieldCheckbox, {
+        name: "signUpTerms",
+        label: signUpTermsLabel
+      });
+    } else {
+      return /* @__PURE__ */jsx8(Fragment2, {
+        children: signUpTermsLabel
+      });
+    }
+  }, [props.signUpTerms, signUpTermsLabel]);
   const formMethods = useForm5({
     mode: "all",
     resolver: yupResolver5(schema)
   });
   const onSubmitForm = data => {
-    return onSignUp(data);
+    return props.onSignUp(data);
   };
   return /* @__PURE__ */jsx8(Form5, {
     sx: {
@@ -784,7 +829,7 @@ var AuthSignUp = ({
         sx: {
           cursor: "pointer"
         },
-        onClick: onReturnToSignIn,
+        onClick: props.onReturnToSignIn,
         as: Link3,
         children: intl.formatMessage({
           id: "8GMUPk",
@@ -826,18 +871,13 @@ var AuthSignUp = ({
               "value": "Confirm password"
             }]
           })
-        })]
+        }), signUpTermsNode]
       }), /* @__PURE__ */jsx8(NotificationsBox4, {})]
     })
   });
 };
 
 // src/Auth.tsx
-import { Flex as Flex5 } from "@ttoss/ui";
-import { assign, createMachine } from "xstate";
-import { confirmResetPassword, confirmSignUp, resendSignUpCode, resetPassword, signIn, signUp } from "aws-amplify/auth";
-import { useMachine } from "@xstate/react";
-import { useNotifications as useNotifications4 } from "@ttoss/react-notifications";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var authMachine = createMachine({
   predictableActionArguments: true,
@@ -914,7 +954,7 @@ var authMachine = createMachine({
     })
   }
 });
-var AuthLogic = () => {
+var AuthLogic = props => {
   const {
     isAuthenticated
   } = useAuth();
@@ -1068,7 +1108,8 @@ var AuthLogic = () => {
   if (state.matches("signUp")) {
     return /* @__PURE__ */jsx9(AuthSignUp, {
       onSignUp,
-      onReturnToSignIn
+      onReturnToSignIn,
+      signUpTerms: props.signUpTerms
     });
   }
   if (state.matches("signUpConfirm")) {
@@ -1106,26 +1147,28 @@ var AuthLogic = () => {
     }
   });
 };
-var Auth = ({
-  logo,
-  layout = {
-    fullScreen: true
-  }
-}) => {
+var Auth = props => {
+  const {
+    layout = {
+      fullScreen: true
+    }
+  } = props;
   const withLogoNode = React6.useMemo(() => {
     return /* @__PURE__ */jsx9(LogoProvider, {
-      logo,
-      children: /* @__PURE__ */jsx9(AuthLogic, {})
+      logo: props.logo,
+      children: /* @__PURE__ */jsx9(AuthLogic, {
+        signUpTerms: props.signUpTerms
+      })
     });
-  }, [logo]);
+  }, [props.logo, props.signUpTerms]);
   if (layout.fullScreen) {
-    if (layout.sideImage) {
+    if (layout.sideContentPosition) {
       return /* @__PURE__ */jsx9(AuthFullScreen, {
         children: /* @__PURE__ */jsxs6(Flex5, {
           sx: {
             width: "100%",
             height: "100%",
-            flexDirection: layout.sideImagePosition === "left" ? "row" : "row-reverse"
+            flexDirection: layout.sideContentPosition === "left" ? "row" : "row-reverse"
           },
           children: [/* @__PURE__ */jsx9(Flex5, {
             sx: {
@@ -1135,7 +1178,7 @@ var Auth = ({
               justifyContent: "center",
               alignItems: "center"
             },
-            children: layout.sideImage
+            children: layout.sideContent
           }), /* @__PURE__ */jsx9(Flex5, {
             sx: {
               width: "100%",

package/dist/index.d.ts

@@ -1,41 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
-type User = {
-    id: string;
-    email: string;
-    emailVerified: string;
-} | null;
-type Tokens = {
-    idToken: string;
-    accessToken: string;
-    refreshToken: string;
-} | null;
-declare const AuthProvider: ({ children }: {
-    children: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element | null;
-declare const useAuth: () => {
-    signOut: () => Promise<any>;
-    isAuthenticated: boolean;
-    user: User;
-    tokens: Tokens;
-};
-
 type LogoContextProps = {
     logo?: React.ReactNode;
     children?: React.ReactNode;
 };
 
-type AuthLayout = {
-    fullScreen?: boolean;
-    sideImage?: React.ReactNode;
-    sideImagePosition?: 'left' | 'right';
-};
-type AuthProps = LogoContextProps & {
-    layout?: AuthLayout;
-};
-declare const Auth: ({ logo, layout }: AuthProps) => react_jsx_runtime.JSX.Element;
-
 type OnSignInInput = {
     email: string;
     password: string;
@@ -60,4 +30,49 @@ type OnForgotPasswordResetPassword = (input: {
     newPassword: string;
 }) => void;
 
+type AuthSignUpProps = {
+    onSignUp: OnSignUp;
+    onReturnToSignIn: () => void;
+    signUpTerms?: {
+        isRequired: boolean;
+        termsAndConditions: {
+            label: string;
+            url: string;
+        }[];
+    };
+};
+
+type AuthLogicProps = {
+    signUpTerms?: AuthSignUpProps['signUpTerms'];
+};
+type AuthLayout = {
+    fullScreen?: boolean;
+    sideContent?: React.ReactNode;
+    sideContentPosition?: 'left' | 'right';
+};
+type AuthProps = LogoContextProps & AuthLogicProps & {
+    layout?: AuthLayout;
+};
+declare const Auth: (props: AuthProps) => react_jsx_runtime.JSX.Element;
+
+type User = {
+    id: string;
+    email: string;
+    emailVerified: string;
+} | null;
+type Tokens = {
+    idToken: string;
+    accessToken: string;
+    refreshToken: string;
+} | null;
+declare const AuthProvider: ({ children }: {
+    children: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element | null;
+declare const useAuth: () => {
+    signOut: () => Promise<any>;
+    isAuthenticated: boolean;
+    user: User;
+    tokens: Tokens;
+};
+
 export { Auth, type AuthProps, AuthProvider, type OnConfirmSignUp, type OnForgotPassword, type OnForgotPasswordResetPassword, type OnSignIn, type OnSignInInput, type OnSignUp, type OnSignUpInput, useAuth };

package/i18n/compiled/en.json

@@ -53,6 +53,12 @@
       "value": "Forgot password?"
     }
   ],
+  "Co3exe": [
+    {
+      "type": 0,
+      "value": "By signing up, you agree to the following Terms and Conditions."
+    }
+  ],
   "D1C6fR": [
     {
       "type": 0,

package/i18n/lang/en.json

@@ -35,6 +35,9 @@
     "defaultMessage": "Forgot password?",
     "description": "Forgot password?"
   },
+  "Co3exe": {
+    "defaultMessage": "By signing up, you agree to the following Terms and Conditions."
+  },
   "EZ3YF2": {
     "defaultMessage": "Sign up",
     "description": "Sign up"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-auth",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "description": "ttoss authentication module for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -27,14 +27,14 @@
   "dependencies": {
     "@xstate/react": "^3.2.2",
     "xstate": "^4.38.3",
-    "@ttoss/forms": "^0.26.8"
+    "@ttoss/forms": "^0.27.0"
   },
   "peerDependencies": {
     "aws-amplify": "^6.0.0",
     "react": ">=16.8.0",
-    "@ttoss/react-i18n": "^2.0.8",
-    "@ttoss/ui": "^5.0.14",
-    "@ttoss/react-notifications": "^1.24.64"
+    "@ttoss/react-i18n": "^2.0.9",
+    "@ttoss/react-notifications": "^1.24.65",
+    "@ttoss/ui": "^5.0.15"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
@@ -43,13 +43,13 @@
     "jest": "^29.7.0",
     "react": "^19.0.0",
     "tsup": "^8.3.5",
-    "@ttoss/cloud-auth": "^0.12.26",
     "@ttoss/config": "^1.35.2",
-    "@ttoss/react-notifications": "^1.24.64",
+    "@ttoss/cloud-auth": "^0.12.27",
     "@ttoss/i18n-cli": "^0.7.26",
-    "@ttoss/test-utils": "^2.1.21",
-    "@ttoss/react-i18n": "^2.0.8",
-    "@ttoss/ui": "^5.0.14"
+    "@ttoss/react-i18n": "^2.0.9",
+    "@ttoss/react-notifications": "^1.24.65",
+    "@ttoss/test-utils": "^2.1.22",
+    "@ttoss/ui": "^5.0.15"
   },
   "keywords": [
     "React",