@ttoss/react-auth-core 0.4.0 → 0.4.1

package/README.md

@@ -124,6 +124,8 @@ const {
 
 Main authentication flow component.
 
+#### With External Screen State Management
+
 ```tsx
 <Auth
   screen={screen} // Current screen state
@@ -142,6 +144,28 @@ Main authentication flow component.
 />
 ```
 
+#### With Internal Screen State Management
+
+You can also let the Auth component manage its own screen state by using the `initialScreen` prop instead of `screen`/`setScreen`:
+
+```tsx
+<Auth
+  initialScreen={{ value: 'signUp' }} // Start on sign up screen (optional)
+  onSignIn={handleSignIn}
+  onSignUp={handleSignUp}
+  onForgotPassword={handleForgotPassword}
+/>
+```
+
+This is useful when you don't need to control the screen state externally. The `initialScreen` prop accepts any valid `AuthScreen` value:
+
+- `{ value: 'signIn' }` - Sign in screen (default)
+- `{ value: 'signUp' }` - Sign up screen
+- `{ value: 'forgotPassword' }` - Forgot password screen
+- `{ value: 'confirmSignUpCheckEmail' }` - Email confirmation reminder
+- `{ value: 'confirmSignUpWithCode', context: { email: string } }` - Code confirmation with email context
+- `{ value: 'confirmResetPassword', context: { email: string } }` - Password reset with email context
+
 ### useAuthScreen Hook
 
 Manages authentication screen state and transitions.

package/dist/esm/index.js

@@ -9,7 +9,7 @@ var __name = (target, value) => __defProp(target, "name", {
 // src/Auth.tsx
 import { useNotifications as useNotifications2 } from "@ttoss/react-notifications";
 import { Flex as Flex5 } from "@ttoss/ui";
-import * as React4 from "react";
+import * as React5 from "react";
 
 // src/AuthCard.tsx
 import { useNotifications } from "@ttoss/react-notifications";
@@ -310,14 +310,29 @@ var AuthForgotPasswordResetPassword = /* @__PURE__ */__name(props => {
   const {
     intl
   } = useI18n4();
+  const codeValidation = yup3.string().required(intl.formatMessage({
+    id: "0XOzcH",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Required field"
+    }]
+  }));
   const schema = yup3.object().shape({
-    code: yup3.string().required(intl.formatMessage({
-      id: "0XOzcH",
+    code: props.maxCodeLength ? codeValidation.min(props.maxCodeLength, intl.formatMessage({
+      id: "S3pjKw",
       defaultMessage: [{
         "type": 0,
-        "value": "Required field"
+        "value": "Minimum "
+      }, {
+        "type": 1,
+        "value": "value"
+      }, {
+        "type": 0,
+        "value": " characters"
       }]
-    })).max(6, intl.formatMessage({
+    }, {
+      value: props.maxCodeLength
+    })).max(props.maxCodeLength, intl.formatMessage({
       id: "SfWKyS",
       defaultMessage: [{
         "type": 0,
@@ -330,8 +345,8 @@ var AuthForgotPasswordResetPassword = /* @__PURE__ */__name(props => {
         "value": " characters"
       }]
     }, {
-      value: 6
-    })),
+      value: props.maxCodeLength
+    })) : codeValidation,
     newPassword: yup3.string().required(intl.formatMessage({
       id: "kdFYba",
       defaultMessage: [{
@@ -812,6 +827,18 @@ var ErrorBoundary = /* @__PURE__ */__name(({
   }, children);
 }, "ErrorBoundary");
 
+// src/useAuthScreen.ts
+import * as React4 from "react";
+var useAuthScreen = /* @__PURE__ */__name(initialScreen => {
+  const [screen, setScreen] = React4.useState(initialScreen || {
+    value: "signIn"
+  });
+  return {
+    screen,
+    setScreen
+  };
+}, "useAuthScreen");
+
 // src/Auth.tsx
 var AuthLogic = /* @__PURE__ */__name(props => {
   const {
@@ -824,16 +851,17 @@ var AuthLogic = /* @__PURE__ */__name(props => {
     onConfirmSignUpWithCode,
     onForgotPasswordResetPassword,
     passwordMinimumLength,
-    signUpTerms
+    signUpTerms,
+    maxForgotPasswordCodeLength
   } = props;
   const {
     clearNotifications,
     setLoading
   } = useNotifications2();
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     clearNotifications();
   }, [screen.value, clearNotifications]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     return clearNotifications;
   }, [clearNotifications]);
   const onGoToSignIn = /* @__PURE__ */__name(() => {
@@ -841,7 +869,7 @@ var AuthLogic = /* @__PURE__ */__name(props => {
       value: "signIn"
     });
   }, "onGoToSignIn");
-  const onGoToSignUp = React4.useCallback(() => {
+  const onGoToSignUp = React5.useCallback(() => {
     if (!onSignUp) {
       return void 0;
     }
@@ -849,7 +877,7 @@ var AuthLogic = /* @__PURE__ */__name(props => {
       value: "signUp"
     });
   }, [onSignUp, setScreen]);
-  const onGoToForgotPassword = React4.useCallback(() => {
+  const onGoToForgotPassword = React5.useCallback(() => {
     if (!onForgotPassword) {
       return void 0;
     }
@@ -869,7 +897,7 @@ var AuthLogic = /* @__PURE__ */__name(props => {
     };
   }, "notificationsWrapper");
   if (screen.value === "signIn") {
-    return /* @__PURE__ */React4.createElement(AuthSignIn, {
+    return /* @__PURE__ */React5.createElement(AuthSignIn, {
       onSignIn: notificationsWrapper(onSignIn),
       onGoToSignUp: onSignUp && onGoToSignUp,
       onGoToForgotPassword: onForgotPassword && onGoToForgotPassword,
@@ -877,7 +905,7 @@ var AuthLogic = /* @__PURE__ */__name(props => {
     });
   }
   if (screen.value === "signUp" && onSignUp) {
-    return /* @__PURE__ */React4.createElement(AuthSignUp, {
+    return /* @__PURE__ */React5.createElement(AuthSignUp, {
       onSignUp: notificationsWrapper(onSignUp),
       passwordMinimumLength,
       onGoToSignIn,
@@ -885,27 +913,28 @@ var AuthLogic = /* @__PURE__ */__name(props => {
     });
   }
   if (screen.value === "forgotPassword" && onForgotPassword) {
-    return /* @__PURE__ */React4.createElement(AuthForgotPassword, {
+    return /* @__PURE__ */React5.createElement(AuthForgotPassword, {
       onForgotPassword: notificationsWrapper(onForgotPassword),
       onGoToSignIn,
       onGoToSignUp: onSignUp && onGoToSignUp
     });
   }
   if (screen.value === "confirmResetPassword" && onForgotPasswordResetPassword) {
-    return /* @__PURE__ */React4.createElement(AuthForgotPasswordResetPassword, {
+    return /* @__PURE__ */React5.createElement(AuthForgotPasswordResetPassword, {
       onForgotPasswordResetPassword: notificationsWrapper(onForgotPasswordResetPassword),
       onGoToSignIn,
-      email: screen.context.email
+      email: screen.context.email,
+      maxCodeLength: maxForgotPasswordCodeLength
     });
   }
   if (screen.value === "confirmSignUpWithCode" && onConfirmSignUpWithCode) {
-    return /* @__PURE__ */React4.createElement(AuthConfirmSignUpWithCode, {
+    return /* @__PURE__ */React5.createElement(AuthConfirmSignUpWithCode, {
       onConfirmSignUpWithCode: notificationsWrapper(onConfirmSignUpWithCode),
       email: screen.context.email
     });
   }
   if (screen.value === "confirmSignUpCheckEmail" && onConfirmSignUpCheckEmail) {
-    return /* @__PURE__ */React4.createElement(AuthConfirmSignUpCheckEmail, {
+    return /* @__PURE__ */React5.createElement(AuthConfirmSignUpCheckEmail, {
       onConfirmSignUpCheckEmail
     });
   }
@@ -917,20 +946,35 @@ var Auth = /* @__PURE__ */__name(props => {
       fullScreen: true
     }
   } = props;
-  const withLogoNode = React4.useMemo(() => {
-    return /* @__PURE__ */React4.createElement(LogoProvider, {
+  const authScreenHook = useAuthScreen(props.initialScreen);
+  const screen = props.screen ?? authScreenHook.screen;
+  const setScreen = props.setScreen ?? authScreenHook.setScreen;
+  const withLogoNode = React5.useMemo(() => {
+    return /* @__PURE__ */React5.createElement(LogoProvider, {
       logo: props.logo
-    }, /* @__PURE__ */React4.createElement(ErrorBoundary, null, /* @__PURE__ */React4.createElement(AuthLogic, props)));
-  }, [props]);
+    }, /* @__PURE__ */React5.createElement(ErrorBoundary, null, /* @__PURE__ */React5.createElement(AuthLogic, {
+      screen,
+      setScreen,
+      signUpTerms: props.signUpTerms,
+      passwordMinimumLength: props.passwordMinimumLength,
+      maxForgotPasswordCodeLength: props.maxForgotPasswordCodeLength,
+      onSignIn: props.onSignIn,
+      onSignUp: props.onSignUp,
+      onConfirmSignUpCheckEmail: props.onConfirmSignUpCheckEmail,
+      onConfirmSignUpWithCode: props.onConfirmSignUpWithCode,
+      onForgotPassword: props.onForgotPassword,
+      onForgotPasswordResetPassword: props.onForgotPasswordResetPassword
+    })));
+  }, [props, screen, setScreen]);
   if (layout.fullScreen) {
     if (layout.sideContentPosition) {
-      return /* @__PURE__ */React4.createElement(AuthFullScreen, null, /* @__PURE__ */React4.createElement(Flex5, {
+      return /* @__PURE__ */React5.createElement(AuthFullScreen, null, /* @__PURE__ */React5.createElement(Flex5, {
         sx: {
           width: "100%",
           height: "100%",
           flexDirection: layout.sideContentPosition === "left" ? "row" : "row-reverse"
         }
-      }, /* @__PURE__ */React4.createElement(Flex5, {
+      }, /* @__PURE__ */React5.createElement(Flex5, {
         sx: {
           width: "100%",
           height: "100%",
@@ -938,7 +982,7 @@ var Auth = /* @__PURE__ */__name(props => {
           justifyContent: "center",
           alignItems: "center"
         }
-      }, layout.sideContent), /* @__PURE__ */React4.createElement(Flex5, {
+      }, layout.sideContent), /* @__PURE__ */React5.createElement(Flex5, {
         sx: {
           width: "100%",
           height: "100%",
@@ -948,15 +992,15 @@ var Auth = /* @__PURE__ */__name(props => {
         }
       }, withLogoNode)));
     }
-    return /* @__PURE__ */React4.createElement(AuthFullScreen, null, withLogoNode);
+    return /* @__PURE__ */React5.createElement(AuthFullScreen, null, withLogoNode);
   }
   return withLogoNode;
 }, "Auth");
 
 // src/AuthProvider.tsx
 import { useNotifications as useNotifications3 } from "@ttoss/react-notifications";
-import * as React5 from "react";
-var AuthContext = /* @__PURE__ */React5.createContext(null);
+import * as React6 from "react";
+var AuthContext = /* @__PURE__ */React6.createContext(null);
 var UNAUTHENTICATED_USER = {
   user: null,
   tokens: null,
@@ -970,15 +1014,15 @@ var AuthProvider = /* @__PURE__ */__name(props => {
   const {
     setLoading
   } = useNotifications3();
-  const [authData, setAuthData] = React5.useState({
+  const [authData, setAuthData] = React6.useState({
     user: null,
     tokens: null,
     isAuthenticated: void 0
   });
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     setLoading(authData.isAuthenticated === void 0);
   }, [authData.isAuthenticated, setLoading]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const fetchAuthData = /* @__PURE__ */__name(async () => {
       try {
         const data = await getAuthData?.();
@@ -993,14 +1037,14 @@ var AuthProvider = /* @__PURE__ */__name(props => {
     }, "fetchAuthData");
     fetchAuthData();
   }, [getAuthData]);
-  const signOut = React5.useCallback(async () => {
+  const signOut = React6.useCallback(async () => {
     await signOutProp?.();
     setAuthData(UNAUTHENTICATED_USER);
   }, [signOutProp]);
   if (authData.isAuthenticated === void 0) {
     return null;
   }
-  return /* @__PURE__ */React5.createElement(AuthContext.Provider, {
+  return /* @__PURE__ */React6.createElement(AuthContext.Provider, {
     value: {
       signOut,
       isAuthenticated: authData.isAuthenticated ?? false,
@@ -1011,22 +1055,10 @@ var AuthProvider = /* @__PURE__ */__name(props => {
   }, props.children);
 }, "AuthProvider");
 var useAuth = /* @__PURE__ */__name(() => {
-  const context = React5.useContext(AuthContext);
+  const context = React6.useContext(AuthContext);
   if (!context) {
     throw new Error("useAuth must be used within an AuthProvider");
   }
   return context;
 }, "useAuth");
-
-// src/useAuthScreen.ts
-import * as React6 from "react";
-var useAuthScreen = /* @__PURE__ */__name(initialScreen => {
-  const [screen, setScreen] = React6.useState(initialScreen || {
-    value: "signIn"
-  });
-  return {
-    screen,
-    setScreen
-  };
-}, "useAuthScreen");
 export { Auth, AuthConfirmSignUpCheckEmail, AuthConfirmSignUpWithCode, AuthForgotPassword, AuthForgotPasswordResetPassword, AuthFullScreen, AuthProvider, AuthSignIn, AuthSignUp, ErrorBoundary, useAuth, useAuthScreen };

package/dist/index.d.cts

@@ -46,7 +46,8 @@ type AuthScreen = {
 } | {
     value: 'confirmResetPassword';
     context: {
-        email: string;
+        email?: string;
+        code?: string;
     };
 };
 type OnSignInInput = {
@@ -67,8 +68,8 @@ type OnForgotPasswordInput = {
     email: string;
 };
 type OnForgotPasswordResetPasswordInput = {
-    email: string;
-    code: string;
+    email?: string;
+    code?: string;
     newPassword: string;
 };
 type OnSignIn = (input: OnSignInInput) => Promise<void> | void;
@@ -85,11 +86,10 @@ type SignUpTerms = {
     }[];
 };
 
-type AuthLogicProps = {
-    screen: AuthScreen;
-    setScreen: (screen: AuthScreen) => void;
+type AuthPropsBase = {
     signUpTerms?: SignUpTerms;
     passwordMinimumLength?: number;
+    maxForgotPasswordCodeLength?: number;
     onSignIn: OnSignIn;
     onSignUp?: OnSignUp;
     onConfirmSignUpCheckEmail?: OnConfirmSignUpCheckEmail;
@@ -97,12 +97,22 @@ type AuthLogicProps = {
     onForgotPassword?: OnForgotPassword;
     onForgotPasswordResetPassword?: OnForgotPasswordResetPassword;
 };
+type AuthPropsWithScreen = AuthPropsBase & {
+    screen: AuthScreen;
+    setScreen: (screen: AuthScreen) => void;
+    initialScreen?: never;
+};
+type AuthPropsWithInitialScreen = AuthPropsBase & {
+    screen?: never;
+    setScreen?: never;
+    initialScreen?: AuthScreen;
+};
 type AuthLayout = {
     fullScreen?: boolean;
     sideContent?: React$1.ReactNode;
     sideContentPosition?: 'left' | 'right';
 };
-type AuthProps = LogoContextProps & AuthLogicProps & {
+type AuthProps = LogoContextProps & (AuthPropsWithScreen | AuthPropsWithInitialScreen) & {
     layout?: AuthLayout;
 };
 declare const Auth: (props: AuthProps) => react_jsx_runtime.JSX.Element;
@@ -126,7 +136,8 @@ type AuthForgotPasswordProps = {
 declare const AuthForgotPassword: (props: AuthForgotPasswordProps) => react_jsx_runtime.JSX.Element;
 
 type AuthForgotPasswordResetPasswordProps = {
-    email: string;
+    email?: string;
+    maxCodeLength?: number;
     onForgotPasswordResetPassword: OnForgotPasswordResetPassword;
     onGoToSignIn: () => void;
     passwordMinimumLength?: number;

package/dist/index.d.ts

@@ -46,7 +46,8 @@ type AuthScreen = {
 } | {
     value: 'confirmResetPassword';
     context: {
-        email: string;
+        email?: string;
+        code?: string;
     };
 };
 type OnSignInInput = {
@@ -67,8 +68,8 @@ type OnForgotPasswordInput = {
     email: string;
 };
 type OnForgotPasswordResetPasswordInput = {
-    email: string;
-    code: string;
+    email?: string;
+    code?: string;
     newPassword: string;
 };
 type OnSignIn = (input: OnSignInInput) => Promise<void> | void;
@@ -85,11 +86,10 @@ type SignUpTerms = {
     }[];
 };
 
-type AuthLogicProps = {
-    screen: AuthScreen;
-    setScreen: (screen: AuthScreen) => void;
+type AuthPropsBase = {
     signUpTerms?: SignUpTerms;
     passwordMinimumLength?: number;
+    maxForgotPasswordCodeLength?: number;
     onSignIn: OnSignIn;
     onSignUp?: OnSignUp;
     onConfirmSignUpCheckEmail?: OnConfirmSignUpCheckEmail;
@@ -97,12 +97,22 @@ type AuthLogicProps = {
     onForgotPassword?: OnForgotPassword;
     onForgotPasswordResetPassword?: OnForgotPasswordResetPassword;
 };
+type AuthPropsWithScreen = AuthPropsBase & {
+    screen: AuthScreen;
+    setScreen: (screen: AuthScreen) => void;
+    initialScreen?: never;
+};
+type AuthPropsWithInitialScreen = AuthPropsBase & {
+    screen?: never;
+    setScreen?: never;
+    initialScreen?: AuthScreen;
+};
 type AuthLayout = {
     fullScreen?: boolean;
     sideContent?: React$1.ReactNode;
     sideContentPosition?: 'left' | 'right';
 };
-type AuthProps = LogoContextProps & AuthLogicProps & {
+type AuthProps = LogoContextProps & (AuthPropsWithScreen | AuthPropsWithInitialScreen) & {
     layout?: AuthLayout;
 };
 declare const Auth: (props: AuthProps) => react_jsx_runtime.JSX.Element;
@@ -126,7 +136,8 @@ type AuthForgotPasswordProps = {
 declare const AuthForgotPassword: (props: AuthForgotPasswordProps) => react_jsx_runtime.JSX.Element;
 
 type AuthForgotPasswordResetPasswordProps = {
-    email: string;
+    email?: string;
+    maxCodeLength?: number;
     onForgotPasswordResetPassword: OnForgotPasswordResetPassword;
     onGoToSignIn: () => void;
     passwordMinimumLength?: number;

package/dist/index.js

@@ -61,7 +61,7 @@ module.exports = __toCommonJS(index_exports);
 // src/Auth.tsx
 var import_react_notifications6 = require("@ttoss/react-notifications");
 var import_ui7 = require("@ttoss/ui");
-var React4 = __toESM(require("react"), 1);
+var React5 = __toESM(require("react"), 1);
 
 // src/AuthCard.tsx
 var import_react_notifications = require("@ttoss/react-notifications");
@@ -362,14 +362,29 @@ var AuthForgotPasswordResetPassword = /* @__PURE__ */__name(props => {
   const {
     intl
   } = (0, import_react_i18n4.useI18n)();
+  const codeValidation = import_forms3.yup.string().required(intl.formatMessage({
+    id: "0XOzcH",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Required field"
+    }]
+  }));
   const schema = import_forms3.yup.object().shape({
-    code: import_forms3.yup.string().required(intl.formatMessage({
-      id: "0XOzcH",
+    code: props.maxCodeLength ? codeValidation.min(props.maxCodeLength, intl.formatMessage({
+      id: "S3pjKw",
       defaultMessage: [{
         "type": 0,
-        "value": "Required field"
+        "value": "Minimum "
+      }, {
+        "type": 1,
+        "value": "value"
+      }, {
+        "type": 0,
+        "value": " characters"
       }]
-    })).max(6, intl.formatMessage({
+    }, {
+      value: props.maxCodeLength
+    })).max(props.maxCodeLength, intl.formatMessage({
       id: "SfWKyS",
       defaultMessage: [{
         "type": 0,
@@ -382,8 +397,8 @@ var AuthForgotPasswordResetPassword = /* @__PURE__ */__name(props => {
         "value": " characters"
       }]
     }, {
-      value: 6
-    })),
+      value: props.maxCodeLength
+    })) : codeValidation,
     newPassword: import_forms3.yup.string().required(intl.formatMessage({
       id: "kdFYba",
       defaultMessage: [{
@@ -864,6 +879,18 @@ var ErrorBoundary = /* @__PURE__ */__name(({
   }, children);
 }, "ErrorBoundary");
 
+// src/useAuthScreen.ts
+var React4 = __toESM(require("react"), 1);
+var useAuthScreen = /* @__PURE__ */__name(initialScreen => {
+  const [screen, setScreen] = React4.useState(initialScreen || {
+    value: "signIn"
+  });
+  return {
+    screen,
+    setScreen
+  };
+}, "useAuthScreen");
+
 // src/Auth.tsx
 var AuthLogic = /* @__PURE__ */__name(props => {
   const {
@@ -876,16 +903,17 @@ var AuthLogic = /* @__PURE__ */__name(props => {
     onConfirmSignUpWithCode,
     onForgotPasswordResetPassword,
     passwordMinimumLength,
-    signUpTerms
+    signUpTerms,
+    maxForgotPasswordCodeLength
   } = props;
   const {
     clearNotifications,
     setLoading
   } = (0, import_react_notifications6.useNotifications)();
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     clearNotifications();
   }, [screen.value, clearNotifications]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     return clearNotifications;
   }, [clearNotifications]);
   const onGoToSignIn = /* @__PURE__ */__name(() => {
@@ -893,7 +921,7 @@ var AuthLogic = /* @__PURE__ */__name(props => {
       value: "signIn"
     });
   }, "onGoToSignIn");
-  const onGoToSignUp = React4.useCallback(() => {
+  const onGoToSignUp = React5.useCallback(() => {
     if (!onSignUp) {
       return void 0;
     }
@@ -901,7 +929,7 @@ var AuthLogic = /* @__PURE__ */__name(props => {
       value: "signUp"
     });
   }, [onSignUp, setScreen]);
-  const onGoToForgotPassword = React4.useCallback(() => {
+  const onGoToForgotPassword = React5.useCallback(() => {
     if (!onForgotPassword) {
       return void 0;
     }
@@ -921,7 +949,7 @@ var AuthLogic = /* @__PURE__ */__name(props => {
     };
   }, "notificationsWrapper");
   if (screen.value === "signIn") {
-    return /* @__PURE__ */React4.createElement(AuthSignIn, {
+    return /* @__PURE__ */React5.createElement(AuthSignIn, {
       onSignIn: notificationsWrapper(onSignIn),
       onGoToSignUp: onSignUp && onGoToSignUp,
       onGoToForgotPassword: onForgotPassword && onGoToForgotPassword,
@@ -929,7 +957,7 @@ var AuthLogic = /* @__PURE__ */__name(props => {
     });
   }
   if (screen.value === "signUp" && onSignUp) {
-    return /* @__PURE__ */React4.createElement(AuthSignUp, {
+    return /* @__PURE__ */React5.createElement(AuthSignUp, {
       onSignUp: notificationsWrapper(onSignUp),
       passwordMinimumLength,
       onGoToSignIn,
@@ -937,27 +965,28 @@ var AuthLogic = /* @__PURE__ */__name(props => {
     });
   }
   if (screen.value === "forgotPassword" && onForgotPassword) {
-    return /* @__PURE__ */React4.createElement(AuthForgotPassword, {
+    return /* @__PURE__ */React5.createElement(AuthForgotPassword, {
       onForgotPassword: notificationsWrapper(onForgotPassword),
       onGoToSignIn,
       onGoToSignUp: onSignUp && onGoToSignUp
     });
   }
   if (screen.value === "confirmResetPassword" && onForgotPasswordResetPassword) {
-    return /* @__PURE__ */React4.createElement(AuthForgotPasswordResetPassword, {
+    return /* @__PURE__ */React5.createElement(AuthForgotPasswordResetPassword, {
       onForgotPasswordResetPassword: notificationsWrapper(onForgotPasswordResetPassword),
       onGoToSignIn,
-      email: screen.context.email
+      email: screen.context.email,
+      maxCodeLength: maxForgotPasswordCodeLength
     });
   }
   if (screen.value === "confirmSignUpWithCode" && onConfirmSignUpWithCode) {
-    return /* @__PURE__ */React4.createElement(AuthConfirmSignUpWithCode, {
+    return /* @__PURE__ */React5.createElement(AuthConfirmSignUpWithCode, {
       onConfirmSignUpWithCode: notificationsWrapper(onConfirmSignUpWithCode),
       email: screen.context.email
     });
   }
   if (screen.value === "confirmSignUpCheckEmail" && onConfirmSignUpCheckEmail) {
-    return /* @__PURE__ */React4.createElement(AuthConfirmSignUpCheckEmail, {
+    return /* @__PURE__ */React5.createElement(AuthConfirmSignUpCheckEmail, {
       onConfirmSignUpCheckEmail
     });
   }
@@ -969,20 +998,35 @@ var Auth = /* @__PURE__ */__name(props => {
       fullScreen: true
     }
   } = props;
-  const withLogoNode = React4.useMemo(() => {
-    return /* @__PURE__ */React4.createElement(LogoProvider, {
+  const authScreenHook = useAuthScreen(props.initialScreen);
+  const screen = props.screen ?? authScreenHook.screen;
+  const setScreen = props.setScreen ?? authScreenHook.setScreen;
+  const withLogoNode = React5.useMemo(() => {
+    return /* @__PURE__ */React5.createElement(LogoProvider, {
       logo: props.logo
-    }, /* @__PURE__ */React4.createElement(ErrorBoundary, null, /* @__PURE__ */React4.createElement(AuthLogic, props)));
-  }, [props]);
+    }, /* @__PURE__ */React5.createElement(ErrorBoundary, null, /* @__PURE__ */React5.createElement(AuthLogic, {
+      screen,
+      setScreen,
+      signUpTerms: props.signUpTerms,
+      passwordMinimumLength: props.passwordMinimumLength,
+      maxForgotPasswordCodeLength: props.maxForgotPasswordCodeLength,
+      onSignIn: props.onSignIn,
+      onSignUp: props.onSignUp,
+      onConfirmSignUpCheckEmail: props.onConfirmSignUpCheckEmail,
+      onConfirmSignUpWithCode: props.onConfirmSignUpWithCode,
+      onForgotPassword: props.onForgotPassword,
+      onForgotPasswordResetPassword: props.onForgotPasswordResetPassword
+    })));
+  }, [props, screen, setScreen]);
   if (layout.fullScreen) {
     if (layout.sideContentPosition) {
-      return /* @__PURE__ */React4.createElement(AuthFullScreen, null, /* @__PURE__ */React4.createElement(import_ui7.Flex, {
+      return /* @__PURE__ */React5.createElement(AuthFullScreen, null, /* @__PURE__ */React5.createElement(import_ui7.Flex, {
         sx: {
           width: "100%",
           height: "100%",
           flexDirection: layout.sideContentPosition === "left" ? "row" : "row-reverse"
         }
-      }, /* @__PURE__ */React4.createElement(import_ui7.Flex, {
+      }, /* @__PURE__ */React5.createElement(import_ui7.Flex, {
         sx: {
           width: "100%",
           height: "100%",
@@ -990,7 +1034,7 @@ var Auth = /* @__PURE__ */__name(props => {
           justifyContent: "center",
           alignItems: "center"
         }
-      }, layout.sideContent), /* @__PURE__ */React4.createElement(import_ui7.Flex, {
+      }, layout.sideContent), /* @__PURE__ */React5.createElement(import_ui7.Flex, {
         sx: {
           width: "100%",
           height: "100%",
@@ -1000,15 +1044,15 @@ var Auth = /* @__PURE__ */__name(props => {
         }
       }, withLogoNode)));
     }
-    return /* @__PURE__ */React4.createElement(AuthFullScreen, null, withLogoNode);
+    return /* @__PURE__ */React5.createElement(AuthFullScreen, null, withLogoNode);
   }
   return withLogoNode;
 }, "Auth");
 
 // src/AuthProvider.tsx
 var import_react_notifications7 = require("@ttoss/react-notifications");
-var React5 = __toESM(require("react"), 1);
-var AuthContext = /* @__PURE__ */React5.createContext(null);
+var React6 = __toESM(require("react"), 1);
+var AuthContext = /* @__PURE__ */React6.createContext(null);
 var UNAUTHENTICATED_USER = {
   user: null,
   tokens: null,
@@ -1022,15 +1066,15 @@ var AuthProvider = /* @__PURE__ */__name(props => {
   const {
     setLoading
   } = (0, import_react_notifications7.useNotifications)();
-  const [authData, setAuthData] = React5.useState({
+  const [authData, setAuthData] = React6.useState({
     user: null,
     tokens: null,
     isAuthenticated: void 0
   });
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     setLoading(authData.isAuthenticated === void 0);
   }, [authData.isAuthenticated, setLoading]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const fetchAuthData = /* @__PURE__ */__name(async () => {
       try {
         const data = await getAuthData?.();
@@ -1045,14 +1089,14 @@ var AuthProvider = /* @__PURE__ */__name(props => {
     }, "fetchAuthData");
     fetchAuthData();
   }, [getAuthData]);
-  const signOut = React5.useCallback(async () => {
+  const signOut = React6.useCallback(async () => {
     await signOutProp?.();
     setAuthData(UNAUTHENTICATED_USER);
   }, [signOutProp]);
   if (authData.isAuthenticated === void 0) {
     return null;
   }
-  return /* @__PURE__ */React5.createElement(AuthContext.Provider, {
+  return /* @__PURE__ */React6.createElement(AuthContext.Provider, {
     value: {
       signOut,
       isAuthenticated: authData.isAuthenticated ?? false,
@@ -1063,24 +1107,12 @@ var AuthProvider = /* @__PURE__ */__name(props => {
   }, props.children);
 }, "AuthProvider");
 var useAuth = /* @__PURE__ */__name(() => {
-  const context = React5.useContext(AuthContext);
+  const context = React6.useContext(AuthContext);
   if (!context) {
     throw new Error("useAuth must be used within an AuthProvider");
   }
   return context;
 }, "useAuth");
-
-// src/useAuthScreen.ts
-var React6 = __toESM(require("react"), 1);
-var useAuthScreen = /* @__PURE__ */__name(initialScreen => {
-  const [screen, setScreen] = React6.useState(initialScreen || {
-    value: "signIn"
-  });
-  return {
-    screen,
-    setScreen
-  };
-}, "useAuthScreen");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Auth,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-auth-core",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Core authentication components and abstractions for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -29,12 +29,12 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/components": "^2.13.0",
-    "@ttoss/react-i18n": "^2.1.0",
     "@ttoss/forms": "^0.41.0",
     "@ttoss/react-notifications": "^2.6.0",
+    "@ttoss/react-i18n": "^2.1.0",
+    "@ttoss/logger": "^0.7.4",
     "@ttoss/ui": "^6.6.0",
-    "@ttoss/logger": "^0.7.4"
+    "@ttoss/components": "^2.13.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
@@ -43,14 +43,14 @@
     "react": "^19.2.4",
     "tsup": "^8.5.1",
     "@ttoss/components": "^2.13.0",
-    "@ttoss/config": "^1.36.0",
+    "@ttoss/forms": "^0.41.0",
     "@ttoss/i18n-cli": "^0.7.39",
     "@ttoss/react-i18n": "^2.1.0",
-    "@ttoss/react-notifications": "^2.6.0",
-    "@ttoss/test-utils": "^4.1.0",
-    "@ttoss/forms": "^0.41.0",
     "@ttoss/logger": "^0.7.4",
-    "@ttoss/ui": "^6.6.0"
+    "@ttoss/config": "^1.36.0",
+    "@ttoss/react-notifications": "^2.6.0",
+    "@ttoss/ui": "^6.6.0",
+    "@ttoss/test-utils": "^4.1.0"
   },
   "keywords": [
     "React",