@ttoss/react-auth-core 0.3.5 → 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

@@ -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: [{
@@ -776,7 +791,6 @@ var AuthSignUp = /* @__PURE__ */__name(props => {
 import { NotificationCard as NotificationCard3 } from "@ttoss/components/NotificationCard";
 import { notify } from "@ttoss/logger";
 import { useI18n as useI18n7 } from "@ttoss/react-i18n";
-import * as React4 from "react";
 import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
 var ErrorFallback = /* @__PURE__ */__name(({
   resetErrorBoundary
@@ -784,9 +798,9 @@ var ErrorFallback = /* @__PURE__ */__name(({
   const {
     intl
   } = useI18n7();
-  return /* @__PURE__ */React4.createElement("div", {
+  return /* @__PURE__ */React.createElement("div", {
     role: "alert"
-  }, /* @__PURE__ */React4.createElement(NotificationCard3, {
+  }, /* @__PURE__ */React.createElement(NotificationCard3, {
     type: "error",
     message: intl.formatMessage({
       id: "khMx/2",
@@ -801,18 +815,30 @@ var ErrorFallback = /* @__PURE__ */__name(({
 var ErrorBoundary = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React4.createElement(ReactErrorBoundary, {
+  return /* @__PURE__ */React.createElement(ReactErrorBoundary, {
     FallbackComponent: ErrorFallback,
     onError: /* @__PURE__ */__name(error => {
       notify({
         type: "error",
         title: "Authentication Error",
-        message: error.message
+        message: error instanceof Error ? error.message : String(error)
       });
     }, "onError")
   }, 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 {
@@ -825,7 +851,8 @@ var AuthLogic = /* @__PURE__ */__name(props => {
     onConfirmSignUpWithCode,
     onForgotPasswordResetPassword,
     passwordMinimumLength,
-    signUpTerms
+    signUpTerms,
+    maxForgotPasswordCodeLength
   } = props;
   const {
     clearNotifications,
@@ -896,7 +923,8 @@ var AuthLogic = /* @__PURE__ */__name(props => {
     return /* @__PURE__ */React5.createElement(AuthForgotPasswordResetPassword, {
       onForgotPasswordResetPassword: notificationsWrapper(onForgotPasswordResetPassword),
       onGoToSignIn,
-      email: screen.context.email
+      email: screen.context.email,
+      maxCodeLength: maxForgotPasswordCodeLength
     });
   }
   if (screen.value === "confirmSignUpWithCode" && onConfirmSignUpWithCode) {
@@ -918,11 +946,26 @@ var Auth = /* @__PURE__ */__name(props => {
       fullScreen: true
     }
   } = props;
+  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__ */React5.createElement(ErrorBoundary, null, /* @__PURE__ */React5.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__ */React5.createElement(AuthFullScreen, null, /* @__PURE__ */React5.createElement(Flex5, {
@@ -1018,16 +1061,4 @@ var useAuth = /* @__PURE__ */__name(() => {
   }
   return context;
 }, "useAuth");
-
-// src/useAuthScreen.ts
-import * as React7 from "react";
-var useAuthScreen = /* @__PURE__ */__name(initialScreen => {
-  const [screen, setScreen] = React7.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

@@ -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: [{
@@ -828,7 +843,6 @@ var AuthSignUp = /* @__PURE__ */__name(props => {
 var import_NotificationCard3 = require("@ttoss/components/NotificationCard");
 var import_logger = require("@ttoss/logger");
 var import_react_i18n7 = require("@ttoss/react-i18n");
-var React4 = __toESM(require("react"), 1);
 var import_react_error_boundary = require("react-error-boundary");
 var ErrorFallback = /* @__PURE__ */__name(({
   resetErrorBoundary
@@ -836,9 +850,9 @@ var ErrorFallback = /* @__PURE__ */__name(({
   const {
     intl
   } = (0, import_react_i18n7.useI18n)();
-  return /* @__PURE__ */React4.createElement("div", {
+  return /* @__PURE__ */React.createElement("div", {
     role: "alert"
-  }, /* @__PURE__ */React4.createElement(import_NotificationCard3.NotificationCard, {
+  }, /* @__PURE__ */React.createElement(import_NotificationCard3.NotificationCard, {
     type: "error",
     message: intl.formatMessage({
       id: "khMx/2",
@@ -853,18 +867,30 @@ var ErrorFallback = /* @__PURE__ */__name(({
 var ErrorBoundary = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React4.createElement(import_react_error_boundary.ErrorBoundary, {
+  return /* @__PURE__ */React.createElement(import_react_error_boundary.ErrorBoundary, {
     FallbackComponent: ErrorFallback,
     onError: /* @__PURE__ */__name(error => {
       (0, import_logger.notify)({
         type: "error",
         title: "Authentication Error",
-        message: error.message
+        message: error instanceof Error ? error.message : String(error)
       });
     }, "onError")
   }, 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 {
@@ -877,7 +903,8 @@ var AuthLogic = /* @__PURE__ */__name(props => {
     onConfirmSignUpWithCode,
     onForgotPasswordResetPassword,
     passwordMinimumLength,
-    signUpTerms
+    signUpTerms,
+    maxForgotPasswordCodeLength
   } = props;
   const {
     clearNotifications,
@@ -948,7 +975,8 @@ var AuthLogic = /* @__PURE__ */__name(props => {
     return /* @__PURE__ */React5.createElement(AuthForgotPasswordResetPassword, {
       onForgotPasswordResetPassword: notificationsWrapper(onForgotPasswordResetPassword),
       onGoToSignIn,
-      email: screen.context.email
+      email: screen.context.email,
+      maxCodeLength: maxForgotPasswordCodeLength
     });
   }
   if (screen.value === "confirmSignUpWithCode" && onConfirmSignUpWithCode) {
@@ -970,11 +998,26 @@ var Auth = /* @__PURE__ */__name(props => {
       fullScreen: true
     }
   } = props;
+  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__ */React5.createElement(ErrorBoundary, null, /* @__PURE__ */React5.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__ */React5.createElement(AuthFullScreen, null, /* @__PURE__ */React5.createElement(import_ui7.Flex, {
@@ -1070,18 +1113,6 @@ var useAuth = /* @__PURE__ */__name(() => {
   }
   return context;
 }, "useAuth");
-
-// src/useAuthScreen.ts
-var React7 = __toESM(require("react"), 1);
-var useAuthScreen = /* @__PURE__ */__name(initialScreen => {
-  const [screen, setScreen] = React7.useState(initialScreen || {
-    value: "signIn"
-  });
-  return {
-    screen,
-    setScreen
-  };
-}, "useAuthScreen");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Auth,

package/i18n/compiled/en.json

@@ -199,6 +199,16 @@
       "value": "Sign up"
     }
   ],
+  "UibUNJ": [
+    {
+      "type": 0,
+      "value": "Invalid Value for Field of type "
+    },
+    {
+      "type": 1,
+      "value": "expected"
+    }
+  ],
   "WU/CqP": [
     {
       "type": 0,

package/i18n/lang/en.json

@@ -205,6 +205,11 @@
     "defaultMessage": "Field is required",
     "description": "Field is required"
   },
+  "UibUNJ": {
+    "module": "@ttoss/forms",
+    "defaultMessage": "Invalid Value for Field of type {expected}",
+    "description": "Invalid Value"
+  },
   "ZhaPt0": {
     "module": "@ttoss/forms",
     "defaultMessage": "Invalid Value for Field of type {type}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-auth-core",
-  "version": "0.3.5",
+  "version": "0.4.1",
   "description": "Core authentication components and abstractions for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -25,32 +25,32 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "react-error-boundary": "^6.0.0"
+    "react-error-boundary": "^6.1.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/forms": "^0.40.2",
-    "@ttoss/logger": "^0.7.3",
-    "@ttoss/react-i18n": "^2.0.26",
-    "@ttoss/components": "^2.12.7",
-    "@ttoss/react-notifications": "^2.5.15",
-    "@ttoss/ui": "^6.5.1"
+    "@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/components": "^2.13.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@types/react": "^19.2.8",
+    "@types/react": "^19.2.14",
     "jest": "^30.2.0",
-    "react": "^19.2.3",
+    "react": "^19.2.4",
     "tsup": "^8.5.1",
-    "@ttoss/components": "^2.12.7",
-    "@ttoss/config": "^1.35.12",
-    "@ttoss/forms": "^0.40.2",
-    "@ttoss/i18n-cli": "^0.7.38",
-    "@ttoss/react-i18n": "^2.0.26",
-    "@ttoss/logger": "^0.7.3",
-    "@ttoss/react-notifications": "^2.5.15",
-    "@ttoss/test-utils": "^4.0.3",
-    "@ttoss/ui": "^6.5.1"
+    "@ttoss/components": "^2.13.0",
+    "@ttoss/forms": "^0.41.0",
+    "@ttoss/i18n-cli": "^0.7.39",
+    "@ttoss/react-i18n": "^2.1.0",
+    "@ttoss/logger": "^0.7.4",
+    "@ttoss/config": "^1.36.0",
+    "@ttoss/react-notifications": "^2.6.0",
+    "@ttoss/ui": "^6.6.0",
+    "@ttoss/test-utils": "^4.1.0"
   },
   "keywords": [
     "React",