@ttoss/react-auth/dist/esm/index.js

ttoss authentication module for React apps.

/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */

// src/Auth.tsx
import { useI18n as useI18n7 } from "@ttoss/react-i18n";
import { useNotifications as useNotifications2 } from "@ttoss/react-notifications";
import { Flex as Flex5 } from "@ttoss/ui";
import { confirmResetPassword, confirmSignUp, resendSignUpCode, resetPassword, signIn, signUp } from "aws-amplify/auth";
import * as React5 from "react";

// src/AuthCard.tsx
import { useNotifications } from "@ttoss/react-notifications";
import { Box, Button, Flex, Heading } from "@ttoss/ui";
import * as React from "react";

// src/ErrorBoundary.tsx
import { NotificationCard } from "@ttoss/components/NotificationCard";
import { notify } from "@ttoss/logger";
import { useI18n } from "@ttoss/react-i18n";
import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
import { jsx } from "react/jsx-runtime";
var ErrorFallback = ({
  resetErrorBoundary
}) => {
  const {
    intl
  } = useI18n();
  return /* @__PURE__ */jsx("div", {
    role: "alert",
    children: /* @__PURE__ */jsx(NotificationCard, {
      type: "error",
      message: intl.formatMessage({
        id: "khMx/2",
        defaultMessage: [{
          "type": 0,
          "value": "An error occurred with your authentication. Please try again."
        }]
      }),
      onClose: resetErrorBoundary
    })
  });
};
var ErrorBoundary = ({
  children
}) => {
  return /* @__PURE__ */jsx(ReactErrorBoundary, {
    FallbackComponent: ErrorFallback,
    onError: error => {
      notify({
        type: "error",
        title: "Authentication Error",
        message: error.message
      });
    },
    children
  });
};

// src/AuthCard.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var LogoContext = React.createContext({});
var LogoProvider = ({
  children,
  ...values
}) => {
  return /* @__PURE__ */jsx2(LogoContext.Provider, {
    value: values,
    children
  });
};
var AuthCard = ({
  children,
  title,
  buttonLabel,
  extraButton,
  isValidForm
}) => {
  const {
    logo
  } = React.useContext(LogoContext);
  const {
    isLoading
  } = useNotifications();
  return /* @__PURE__ */jsxs(Box, {
    sx: {
      maxWidth: "400px",
      width: "full",
      border: "md",
      borderColor: "display.border.muted.default",
      paddingX: "8",
      paddingY: "9",
      backgroundColor: "surface"
    },
    children: [logo && /* @__PURE__ */jsx2(Flex, {
      sx: {
        width: "full",
        maxHeight: "90px",
        justifyContent: "center",
        marginBottom: "8"
      },
      children: logo
    }), /* @__PURE__ */jsxs(Flex, {
      sx: {
        flexDirection: "column"
      },
      children: [/* @__PURE__ */jsx2(Heading, {
        as: "h2",
        variant: "h2",
        sx: {
          marginBottom: "8"
        },
        children: title
      }), /* @__PURE__ */jsx2(ErrorBoundary, {
        children
      }), /* @__PURE__ */jsxs(Flex, {
        sx: {
          flexDirection: "column",
          width: "100%",
          gap: "7",
          marginTop: "8"
        },
        children: [/* @__PURE__ */jsx2(Button, {
          type: "submit",
          "aria-label": "submit-button",
          variant: "accent",
          disabled: isLoading || !isValidForm,
          sx: {
            textAlign: "center",
            display: "initial"
          },
          loading: isLoading,
          children: buttonLabel
        }), extraButton]
      })]
    })]
  });
};

// src/AuthConfirmSignUp.tsx
import { NotificationCard as NotificationCard2 } from "@ttoss/components/NotificationCard";
import { Form, FormFieldInput, useForm, yup, yupResolver } from "@ttoss/forms";
import { useI18n as useI18n2 } from "@ttoss/react-i18n";
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var AuthConfirmSignUp = ({
  email,
  onConfirmSignUp
}) => {
  const {
    intl
  } = useI18n2();
  const schema = yup.object().shape({
    code: yup.string().required(intl.formatMessage({
      id: "0XOzcH",
      defaultMessage: [{
        "type": 0,
        "value": "Required field"
      }]
    })).max(6, intl.formatMessage({
      id: "S3pjKw",
      defaultMessage: [{
        "type": 0,
        "value": "Minimum "
      }, {
        "type": 1,
        "value": "value"
      }, {
        "type": 0,
        "value": " characters"
      }]
    }, {
      value: 6
    }))
  }).required();
  const formMethods = useForm({
    resolver: yupResolver(schema)
  });
  return /* @__PURE__ */jsx3(Form, {
    ...formMethods,
    onSubmit: ({
      code
    }) => {
      return onConfirmSignUp({
        code,
        email
      });
    },
    children: /* @__PURE__ */jsxs2(AuthCard, {
      buttonLabel: intl.formatMessage({
        id: "UNttd+",
        defaultMessage: [{
          "type": 0,
          "value": "Confirm"
        }]
      }),
      isValidForm: formMethods.formState.isValid,
      title: intl.formatMessage({
        id: "cGR2eI",
        defaultMessage: [{
          "type": 0,
          "value": "Confirmation"
        }]
      }),
      children: [/* @__PURE__ */jsx3(NotificationCard2, {
        type: "info",
        message: intl.formatMessage({
          id: "pwv2cR",
          defaultMessage: [{
            "type": 0,
            "value": "We have sent a confirmation code to your email address. Please enter the code below."
          }]
        })
      }), /* @__PURE__ */jsx3(FormFieldInput, {
        sx: {
          marginTop: "6"
        },
        name: "code",
        label: intl.formatMessage({
          id: "KY2T6J",
          defaultMessage: [{
            "type": 0,
            "value": "Code"
          }]
        })
      })]
    })
  });
};

// src/AuthForgotPassword.tsx
import { Form as Form2, FormFieldInput as FormFieldInput2, useForm as useForm2, yup as yup2, yupResolver as yupResolver2 } from "@ttoss/forms";
import { useI18n as useI18n3 } from "@ttoss/react-i18n";
import { NotificationsBox } from "@ttoss/react-notifications";
import { Button as Button2, Link, Text } from "@ttoss/ui";
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
var AuthForgotPassword = ({
  onForgotPassword,
  onCancel,
  onSignUp
}) => {
  const {
    intl
  } = useI18n3();
  const schema = yup2.object().shape({
    email: yup2.string().required(intl.formatMessage({
      id: "5oOshZ",
      defaultMessage: [{
        "type": 0,
        "value": "Enter your email address"
      }]
    })).email(intl.formatMessage({
      id: "SnONhb",
      defaultMessage: [{
        "type": 0,
        "value": "Please, insert a valid e-mail"
      }]
    }))
  }).required();
  const formMethods = useForm2({
    resolver: yupResolver2(schema),
    mode: "onBlur"
  });
  return /* @__PURE__ */jsx4(Form2, {
    ...formMethods,
    sx: {
      maxWidth: "390px"
    },
    onSubmit: ({
      email
    }) => {
      return onForgotPassword({
        email
      });
    },
    children: /* @__PURE__ */jsxs3(AuthCard, {
      buttonLabel: intl.formatMessage({
        id: "mZzmNV",
        defaultMessage: [{
          "type": 0,
          "value": "Recover Password"
        }]
      }),
      isValidForm: formMethods.formState.isValid,
      title: intl.formatMessage({
        id: "S4bbEj",
        defaultMessage: [{
          "type": 0,
          "value": "Recovering Password"
        }]
      }),
      extraButton: /* @__PURE__ */jsx4(Button2, {
        sx: {
          textAlign: "center",
          display: "initial"
        },
        variant: "secondary",
        onClick: onCancel,
        children: intl.formatMessage({
          id: "6PdOcy",
          defaultMessage: [{
            "type": 0,
            "value": "Cancel"
          }]
        })
      }),
      children: [/* @__PURE__ */jsx4(FormFieldInput2, {
        name: "email",
        label: intl.formatMessage({
          id: "XreZg+",
          defaultMessage: [{
            "type": 0,
            "value": "Registered Email"
          }]
        })
      }), /* @__PURE__ */jsx4(NotificationsBox, {}), /* @__PURE__ */jsx4(Text, {
        sx: {
          marginTop: "xl",
          cursor: "pointer"
        },
        as: Link,
        onClick: onSignUp,
        children: intl.formatMessage({
          id: "lZvoYL",
          defaultMessage: [{
            "type": 0,
            "value": "Sign up now"
          }]
        })
      })]
    })
  });
};

// ../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 useI18n4 } from "@ttoss/react-i18n";
import { NotificationsBox as NotificationsBox2 } from "@ttoss/react-notifications";
import { Button as Button3 } from "@ttoss/ui";
import * as React2 from "react";
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
var AuthForgotPasswordResetPassword = ({
  email,
  onForgotPasswordResetPassword,
  onCancel
}) => {
  const {
    intl
  } = useI18n4();
  const schema = React2.useMemo(() => {
    return yup3.object().shape({
      code: yup3.string().required(intl.formatMessage({
        id: "0XOzcH",
        defaultMessage: [{
          "type": 0,
          "value": "Required field"
        }]
      })).max(6, intl.formatMessage({
        id: "S3pjKw",
        defaultMessage: [{
          "type": 0,
          "value": "Minimum "
        }, {
          "type": 1,
          "value": "value"
        }, {
          "type": 0,
          "value": " characters"
        }]
      }, {
        value: 6
      })),
      password: yup3.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"
        }]
      }, {
        value: PASSWORD_MINIMUM_LENGTH
      })).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"
        }]
      }))
    }).required();
  }, [intl]);
  const formMethods = useForm3({
    resolver: yupResolver3(schema),
    mode: "onBlur"
  });
  return /* @__PURE__ */jsx5(Form3, {
    ...formMethods,
    sx: {
      maxWidth: "390px"
    },
    onSubmit: ({
      code,
      password
    }) => {
      return onForgotPasswordResetPassword({
        email,
        code,
        newPassword: password
      });
    },
    children: /* @__PURE__ */jsxs4(AuthCard, {
      buttonLabel: intl.formatMessage({
        id: "mZzmNV",
        defaultMessage: [{
          "type": 0,
          "value": "Recover Password"
        }]
      }),
      isValidForm: formMethods.formState.isValid,
      title: intl.formatMessage({
        id: "S4bbEj",
        defaultMessage: [{
          "type": 0,
          "value": "Recovering Password"
        }]
      }),
      extraButton: /* @__PURE__ */jsx5(Button3, {
        sx: {
          textAlign: "center",
          display: "initial"
        },
        variant: "secondary",
        onClick: onCancel,
        children: intl.formatMessage({
          id: "6PdOcy",
          defaultMessage: [{
            "type": 0,
            "value": "Cancel"
          }]
        })
      }),
      children: [/* @__PURE__ */jsx5(FormFieldInput3, {
        name: "code",
        label: intl.formatMessage({
          id: "42HafR",
          defaultMessage: [{
            "type": 0,
            "value": "Code"
          }]
        })
      }), /* @__PURE__ */jsx5(FormFieldPassword, {
        name: "password",
        label: intl.formatMessage({
          id: "PylVqx",
          defaultMessage: [{
            "type": 0,
            "value": "Password"
          }]
        })
      }), /* @__PURE__ */jsx5(FormFieldPassword, {
        name: "confirmPassword",
        label: intl.formatMessage({
          id: "lY+cuM",
          defaultMessage: [{
            "type": 0,
            "value": "Confirm password"
          }]
        })
      }), /* @__PURE__ */jsx5(NotificationsBox2, {})]
    })
  });
};

// src/AuthFullScreen.tsx
import { Flex as Flex2 } from "@ttoss/ui";
import { jsx as jsx6 } from "react/jsx-runtime";
var AuthFullScreen = ({
  children
}) => {
  return /* @__PURE__ */jsx6(Flex2, {
    sx: {
      height: "100vh",
      width: "100vw",
      justifyContent: "center",
      alignItems: "center",
      margin: 0,
      backgroundPosition: "center",
      backgroundRepeat: "no-repeat",
      backgroundSize: "cover"
    },
    children
  });
};

// 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 jsx7 } from "react/jsx-runtime";
var signOut = () => {
  return awsSignOut();
};
var AuthContext = React3.createContext({
  signOut,
  isAuthenticated: false,
  user: null,
  tokens: null,
  screen: {
    value: "signIn",
    context: {}
  },
  setScreen: () => {}
});
var AuthProvider = ({
  children
}) => {
  const [authState, setAuthState] = React3.useState({
    user: null,
    tokens: null,
    isAuthenticated: void 0
  });
  const [screen, setScreen] = React3.useState({
    value: "signIn",
    context: {}
  });
  React3.useEffect(() => {
    const updateUser = () => {
      getCurrentUser().then(async ({
        userId
      }) => {
        const [session, user] = await Promise.all([fetchAuthSession(), fetchUserAttributes()]);
        const idToken = session.tokens?.idToken?.toString() ?? "";
        const accessToken = session.tokens?.accessToken.toString() ?? "";
        setAuthState({
          user: {
            id: userId,
            email: user.email ?? "",
            emailVerified: user.email_verified ?? ""
          },
          tokens: {
            idToken,
            accessToken,
            refreshToken: ""
          },
          isAuthenticated: true
        });
      }).catch(() => {
        setAuthState({
          user: null,
          tokens: null,
          isAuthenticated: false
        });
      });
    };
    const updateUserListener = Hub.listen("auth", updateUser);
    updateUser();
    return () => {
      updateUserListener();
    };
  }, []);
  if (authState.isAuthenticated === void 0) {
    return null;
  }
  return /* @__PURE__ */jsx7(AuthContext.Provider, {
    value: {
      signOut,
      isAuthenticated: authState.isAuthenticated ?? false,
      user: authState.user,
      tokens: authState.tokens,
      screen,
      setScreen
    },
    children
  });
};
var useAuth = () => {
  return React3.useContext(AuthContext);
};

// src/AuthSignIn.tsx
import { Form as Form4, FormFieldInput as FormFieldInput4, FormFieldPassword as FormFieldPassword2, useForm as useForm4, yup as yup4, yupResolver as yupResolver4 } from "@ttoss/forms";
import { useI18n as useI18n5 } from "@ttoss/react-i18n";
import { NotificationsBox as NotificationsBox3 } from "@ttoss/react-notifications";
import { Button as Button4, Flex as Flex3, Link as Link2, Text as Text2 } from "@ttoss/ui";
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
var AuthSignIn = ({
  onSignIn,
  onSignUp,
  defaultValues,
  onForgotPassword
}) => {
  const {
    intl
  } = useI18n5();
  const schema = yup4.object().shape({
    email: yup4.string().required(intl.formatMessage({
      id: "d1YCuH",
      defaultMessage: [{
        "type": 0,
        "value": "Enter your email address"
      }]
    })).email(intl.formatMessage({
      id: "9cApwd",
      defaultMessage: [{
        "type": 0,
        "value": "Please, insert a valid e-mail"
      }]
    })),
    password: yup4.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"
      }]
    }, {
      value: PASSWORD_MINIMUM_LENGTH
    })).trim()
    // remember: yup.boolean(),
  });
  const formMethods = useForm4({
    defaultValues,
    mode: "onBlur",
    resolver: yupResolver4(schema)
  });
  const onSubmitForm = data => {
    return onSignIn(data);
  };
  return /* @__PURE__ */jsx8(Form4, {
    sx: {
      maxWidth: "390px",
      width: "100%"
    },
    ...formMethods,
    onSubmit: onSubmitForm,
    children: /* @__PURE__ */jsxs5(AuthCard, {
      title: intl.formatMessage({
        id: "SQJto2",
        defaultMessage: [{
          "type": 0,
          "value": "Sign in"
        }]
      }),
      buttonLabel: intl.formatMessage({
        id: "SQJto2",
        defaultMessage: [{
          "type": 0,
          "value": "Sign in"
        }]
      }),
      isValidForm: formMethods.formState.isValid,
      extraButton: /* @__PURE__ */jsx8(Button4, {
        type: "button",
        variant: "secondary",
        sx: {
          textAlign: "center",
          display: "initial"
        },
        onClick: onSignUp,
        "aria-label": "sign-up",
        children: intl.formatMessage({
          id: "EZ3YF2",
          defaultMessage: [{
            "type": 0,
            "value": "Sign up"
          }]
        })
      }),
      children: [/* @__PURE__ */jsxs5(Flex3, {
        sx: {
          flexDirection: "column",
          gap: "xl"
        },
        children: [/* @__PURE__ */jsx8(FormFieldInput4, {
          name: "email",
          label: intl.formatMessage({
            id: "5E12mO",
            defaultMessage: [{
              "type": 0,
              "value": "Email"
            }]
          })
        }), /* @__PURE__ */jsx8(FormFieldPassword2, {
          name: "password",
          label: intl.formatMessage({
            id: "PylVqx",
            defaultMessage: [{
              "type": 0,
              "value": "Password"
            }]
          })
        })]
      }), /* @__PURE__ */jsx8(Flex3, {
        sx: {
          justifyContent: "space-between",
          marginTop: "lg"
        },
        children: /* @__PURE__ */jsx8(Text2, {
          sx: {
            marginLeft: "auto",
            cursor: "pointer"
          },
          as: Link2,
          onClick: onForgotPassword,
          children: intl.formatMessage({
            id: "BtK6KR",
            defaultMessage: [{
              "type": 0,
              "value": "Forgot password?"
            }]
          })
        })
      }), /* @__PURE__ */jsx8(NotificationsBox3, {})]
    })
  });
};

// src/AuthSignUp.tsx
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 useI18n6 } from "@ttoss/react-i18n";
import { NotificationsBox as NotificationsBox4 } from "@ttoss/react-notifications";
import { Flex as Flex4, Link as Link3, Text as Text3 } from "@ttoss/ui";
import * as React4 from "react";
import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
var AuthSignUp = props => {
  const {
    intl
  } = useI18n6();
  const schema = React4.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"
        }]
      }, {
        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: props.signUpTerms?.isRequired ? yup5.boolean().required(intl.formatMessage({
        id: "qnQYqN",
        defaultMessage: [{
          "type": 0,
          "value": "You must accept the terms and conditions"
        }]
      })) : yup5.boolean()
    });
  }, [intl, props.signUpTerms?.isRequired]);
  const signUpTermsLabel = React4.useMemo(() => {
    if (!props.signUpTerms) {
      return null;
    }
    const signUpTermsFirstMessage = intl.formatMessage({
      id: "Co3exe",
      defaultMessage: [{
        "type": 0,
        "value": "By signing up, you agree to the following Terms and Conditions."
      }]
    });
    const termsLinks = props.signUpTerms.terms.map((term, index, terms) => {
      const finalPunctuation = index === terms.length - 1 ? "." : ", ";
      return /* @__PURE__ */jsxs6(React4.Fragment, {
        children: [/* @__PURE__ */jsx9(Link3, {
          href: term.url,
          target: "_blank",
          rel: "noreferrer",
          children: term.label
        }, index), finalPunctuation]
      }, index);
    });
    const label = /* @__PURE__ */jsxs6(Text3, {
      children: [signUpTermsFirstMessage, " ", termsLinks]
    });
    return label;
  }, [intl, props.signUpTerms]);
  const signUpTermsNode = React4.useMemo(() => {
    if (!props.signUpTerms) {
      return null;
    }
    if (props.signUpTerms.isRequired) {
      return /* @__PURE__ */jsx9(FormFieldCheckbox, {
        name: "signUpTerms",
        label: signUpTermsLabel
      });
    } else {
      return /* @__PURE__ */jsx9(Fragment2, {
        children: signUpTermsLabel
      });
    }
  }, [props.signUpTerms, signUpTermsLabel]);
  const formMethods = useForm5({
    mode: "all",
    resolver: yupResolver5(schema)
  });
  const onSubmitForm = data => {
    return props.onSignUp(data);
  };
  return /* @__PURE__ */jsx9(Form5, {
    sx: {
      maxWidth: "390px",
      width: "100%"
    },
    ...formMethods,
    onSubmit: onSubmitForm,
    children: /* @__PURE__ */jsxs6(AuthCard, {
      buttonLabel: intl.formatMessage({
        id: "URJDrG",
        defaultMessage: [{
          "type": 0,
          "value": "Sign up"
        }]
      }),
      title: intl.formatMessage({
        id: "oayEC3",
        defaultMessage: [{
          "type": 0,
          "value": "Sign up"
        }]
      }),
      isValidForm: formMethods.formState.isValid,
      extraButton: /* @__PURE__ */jsx9(Text3, {
        sx: {
          cursor: "pointer"
        },
        onClick: props.onReturnToSignIn,
        as: Link3,
        children: intl.formatMessage({
          id: "8GMUPk",
          defaultMessage: [{
            "type": 0,
            "value": "I'm already registered"
          }]
        })
      }),
      children: [/* @__PURE__ */jsxs6(Flex4, {
        sx: {
          flexDirection: "column",
          gap: "xl"
        },
        children: [/* @__PURE__ */jsx9(FormFieldInput5, {
          name: "email",
          label: intl.formatMessage({
            id: "5E12mO",
            defaultMessage: [{
              "type": 0,
              "value": "Email"
            }]
          })
        }), /* @__PURE__ */jsx9(FormFieldPassword3, {
          name: "password",
          label: intl.formatMessage({
            id: "PylVqx",
            defaultMessage: [{
              "type": 0,
              "value": "Password"
            }]
          })
        }), /* @__PURE__ */jsx9(FormFieldPassword3, {
          name: "confirmPassword",
          label: intl.formatMessage({
            id: "lY+cuM",
            defaultMessage: [{
              "type": 0,
              "value": "Confirm password"
            }]
          })
        }), signUpTermsNode]
      }), /* @__PURE__ */jsx9(NotificationsBox4, {})]
    })
  });
};

// src/Auth.tsx
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
var AuthLogic = props => {
  const {
    intl
  } = useI18n7();
  const {
    isAuthenticated,
    screen,
    setScreen
  } = useAuth();
  const {
    setLoading,
    addNotification,
    clearNotifications
  } = useNotifications2();
  React5.useEffect(() => {
    clearNotifications();
  }, [screen.value, clearNotifications]);
  React5.useEffect(() => {
    return clearNotifications;
  }, [clearNotifications]);
  const onSignIn = React5.useCallback(async ({
    email,
    password
  }) => {
    try {
      setLoading(true);
      const result = await signIn({
        username: email,
        password
      });
      if (result.nextStep.signInStep === "RESET_PASSWORD") {
        addNotification({
          type: "error",
          message: `For your security, we have updated our system and you need to reset your password in 'forgot your password?' to proceed`
        });
      } else if (result.nextStep.signInStep === "CONFIRM_SIGN_UP") {
        await resendSignUpCode({
          username: email
        });
        setScreen({
          value: "signUpResendConfirmation",
          context: {
            email
          }
        });
      } else if (result.nextStep.signInStep === "DONE") {
        addNotification({
          viewType: "toast",
          type: "success",
          message: intl.formatMessage({
            id: "EO/33N",
            defaultMessage: [{
              "type": 0,
              "value": "Signed in successfully"
            }]
          })
        });
      }
    } catch (error) {
      addNotification({
        type: "error",
        message: error.message
      });
    } finally {
      setLoading(false);
    }
  }, [addNotification, intl, setLoading, setScreen]);
  const onSignUp = React5.useCallback(async ({
    email,
    password
  }) => {
    try {
      setLoading(true);
      await signUp({
        username: email,
        password,
        options: {
          userAttributes: {
            email
          }
        }
      });
      setScreen({
        value: "signUpConfirm",
        context: {
          email
        }
      });
    } catch (error) {
      addNotification({
        type: "error",
        message: error.message
      });
    } finally {
      setLoading(false);
    }
  }, [setLoading, setScreen, addNotification]);
  const onConfirmSignUp = React5.useCallback(async ({
    email,
    code
  }) => {
    try {
      setLoading(true);
      await confirmSignUp({
        confirmationCode: code,
        username: email
      });
      setScreen({
        value: "signIn",
        context: {
          email
        }
      });
    } catch (error) {
      addNotification({
        type: "error",
        message: error.message
      });
    } finally {
      setLoading(false);
    }
  }, [setLoading, setScreen, addNotification]);
  const onReturnToSignIn = React5.useCallback(() => {
    setScreen({
      value: "signIn",
      context: {}
    });
  }, [setScreen]);
  const onForgotPassword = React5.useCallback(async ({
    email
  }) => {
    try {
      setLoading(true);
      await resetPassword({
        username: email
      });
      setScreen({
        value: "forgotPasswordResetPassword",
        context: {
          email
        }
      });
    } catch (error) {
      addNotification({
        type: "error",
        message: error.message
      });
    } finally {
      setLoading(false);
    }
  }, [setLoading, setScreen, addNotification]);
  const onForgotPasswordResetPassword = React5.useCallback(async ({
    email,
    code,
    newPassword
  }) => {
    try {
      setLoading(true);
      await confirmResetPassword({
        confirmationCode: code,
        username: email,
        newPassword
      });
      setScreen({
        value: "signIn",
        context: {
          email
        }
      });
    } catch (error) {
      addNotification({
        type: "error",
        message: error.message
      });
    } finally {
      setLoading(false);
    }
  }, [setLoading, setScreen, addNotification]);
  if (isAuthenticated) {
    return null;
  }
  if (screen.value === "signUp") {
    return /* @__PURE__ */jsx10(AuthSignUp, {
      onSignUp,
      onReturnToSignIn,
      signUpTerms: props.signUpTerms
    });
  }
  if (screen.value === "signUpConfirm" || screen.value === "signUpResendConfirmation") {
    return /* @__PURE__ */jsx10(AuthConfirmSignUp, {
      onConfirmSignUp,
      email: screen.context.email
    });
  }
  if (screen.value === "forgotPassword") {
    return /* @__PURE__ */jsx10(AuthForgotPassword, {
      onForgotPassword,
      onCancel: onReturnToSignIn,
      onSignUp: () => {
        setScreen({
          value: "signUp",
          context: {}
        });
      }
    });
  }
  if (screen.value === "forgotPasswordResetPassword") {
    return /* @__PURE__ */jsx10(AuthForgotPasswordResetPassword, {
      email: screen.context.email,
      onForgotPasswordResetPassword,
      onCancel: onReturnToSignIn
    });
  }
  return /* @__PURE__ */jsx10(AuthSignIn, {
    onSignIn,
    onSignUp: () => {
      setScreen({
        value: "signUp",
        context: {}
      });
    },
    onForgotPassword: () => {
      setScreen({
        value: "forgotPassword",
        context: {}
      });
    },
    defaultValues: {
      email: screen.context.email
    }
  });
};
var Auth = props => {
  const {
    layout = {
      fullScreen: true
    }
  } = props;
  const withLogoNode = React5.useMemo(() => {
    return /* @__PURE__ */jsx10(LogoProvider, {
      logo: props.logo,
      children: /* @__PURE__ */jsx10(ErrorBoundary, {
        children: /* @__PURE__ */jsx10(AuthLogic, {
          signUpTerms: props.signUpTerms
        })
      })
    });
  }, [props.logo, props.signUpTerms]);
  if (layout.fullScreen) {
    if (layout.sideContentPosition) {
      return /* @__PURE__ */jsx10(AuthFullScreen, {
        children: /* @__PURE__ */jsxs7(Flex5, {
          sx: {
            width: "100%",
            height: "100%",
            flexDirection: layout.sideContentPosition === "left" ? "row" : "row-reverse"
          },
          children: [/* @__PURE__ */jsx10(Flex5, {
            sx: {
              width: "100%",
              height: "100%",
              flex: [0, 0, 1],
              justifyContent: "center",
              alignItems: "center"
            },
            children: layout.sideContent
          }), /* @__PURE__ */jsx10(Flex5, {
            sx: {
              width: "100%",
              height: "100%",
              flex: [1],
              justifyContent: "center",
              alignItems: "center"
            },
            children: withLogoNode
          })]
        })
      });
    }
    return /* @__PURE__ */jsx10(AuthFullScreen, {
      children: withLogoNode
    });
  }
  return withLogoNode;
};
export { Auth, AuthProvider, useAuth };