@ttoss/react-auth 1.1.0

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { FlexProps } from '@ttoss/ui';
+
+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;
+}) => JSX.Element;
+declare const useAuth: () => {
+    signOut: () => Promise<any>;
+    isAuthenticated: boolean;
+    user: User;
+    tokens: Tokens;
+};
+
+type LogoContextProps = {
+    logo?: React.ReactNode;
+    children?: React.ReactNode;
+};
+
+declare const Auth: {
+    ({ logo, ...componentProps }: Record<string, unknown> & LogoContextProps): JSX.Element;
+    displayName: string;
+};
+
+type AuthContainerProps = FlexProps & {
+    backgroundImageUrl?: string;
+};
+declare const AuthContainer: ({ sx, ...props }: AuthContainerProps) => JSX.Element;
+
+type OnSignInInput = {
+    email: string;
+    password: string;
+};
+type OnSignIn = (input: OnSignInInput) => void;
+type OnSignUpInput = {
+    email: string;
+    password: string;
+};
+type OnSignUp = (input: OnSignUpInput) => void;
+type OnConfirmSignUp = (input: {
+    email: string;
+    code: string;
+}) => void;
+
+export { Auth, AuthContainer, AuthProvider, OnConfirmSignUp, OnSignIn, OnSignInInput, OnSignUp, OnSignUpInput, useAuth };

package/dist/index.js

@@ -0,0 +1,564 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Auth: () => Auth2,
+  AuthContainer: () => AuthContainer,
+  AuthProvider: () => AuthProvider_default,
+  useAuth: () => useAuth
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/AuthProvider.tsx
+var React = __toESM(require("react"));
+var import_aws_amplify = require("aws-amplify");
+var import_jsx_runtime = require("react/jsx-runtime");
+var signOut = () => {
+  return import_aws_amplify.Auth.signOut();
+};
+var AuthContext = React.createContext({
+  signOut,
+  isAuthenticated: false,
+  user: null,
+  tokens: null
+});
+var AuthProvider = ({ children }) => {
+  const [user, setUser] = React.useState(null);
+  const [tokens, setTokens] = React.useState(null);
+  React.useEffect(() => {
+    const updateUser = () => {
+      import_aws_amplify.Auth.currentAuthenticatedUser().then(({ attributes, signInUserSession }) => {
+        setUser({
+          id: attributes.sub,
+          email: attributes.email,
+          emailVerified: attributes["email_verified"]
+        });
+        setTokens({
+          idToken: signInUserSession.idToken.jwtToken,
+          accessToken: signInUserSession.accessToken.jwtToken,
+          refreshToken: signInUserSession.refreshToken.token
+        });
+      }).catch(() => {
+        setUser(null);
+        setTokens(null);
+      });
+    };
+    const updateUserListener = import_aws_amplify.Hub.listen("auth", updateUser);
+    updateUser();
+    return () => {
+      updateUserListener();
+    };
+  }, []);
+  const isAuthenticated = !!user;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AuthContext.Provider, { value: { signOut, isAuthenticated, user, tokens }, children });
+};
+var useAuth = () => {
+  return React.useContext(AuthContext);
+};
+var AuthProvider_default = AuthProvider;
+
+// src/Auth.tsx
+var React3 = __toESM(require("react"));
+var import_aws_amplify2 = require("aws-amplify");
+
+// src/AuthCard.tsx
+var React2 = __toESM(require("react"));
+var import_ui = require("@ttoss/ui");
+var import_react_notifications = require("@ttoss/react-notifications");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var LogoContext = React2.createContext({});
+var LogoProvider = ({ children, ...values }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LogoContext.Provider, { value: values, children });
+};
+var AuthCard = ({
+  children,
+  title,
+  buttonLabel,
+  links = []
+}) => {
+  const { logo } = React2.useContext(LogoContext);
+  const { isLoading } = (0, import_react_notifications.useNotifications)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Card, { sx: { maxWidth: "564px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Flex, { sx: { flexDirection: "column", gap: 3 }, children: [
+    logo && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Flex, { sx: { width: "100%", justifyContent: "center" }, children: logo }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_ui.Text,
+      {
+        variant: "title",
+        sx: { alignSelf: "center", marginY: 4, fontSize: 5 },
+        children: title
+      }
+    ),
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Flex, { sx: { justifyContent: "space-between", marginTop: 3 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_ui.Button,
+      {
+        type: "submit",
+        "aria-label": "submit-login",
+        variant: "cta",
+        disabled: isLoading,
+        sx: { width: "100%" },
+        children: buttonLabel
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_ui.Flex,
+      {
+        sx: {
+          justifyContent: "space-between",
+          flexDirection: "column",
+          gap: 3,
+          marginTop: 4,
+          color: "text"
+        },
+        children: links.map((link) => {
+          return link && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Link, { onClick: link.onClick, children: link.label }, link.label);
+        })
+      }
+    )
+  ] }) });
+};
+
+// src/AuthConfirmSignUp.tsx
+var import_forms = require("@ttoss/forms");
+var import_react_i18n = require("@ttoss/react-i18n");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AuthConfirmSignUp = ({
+  email,
+  onConfirmSignUp
+}) => {
+  const { intl } = (0, import_react_i18n.useI18n)();
+  const schema = import_forms.yup.object().shape({
+    code: import_forms.yup.string().required(
+      intl.formatMessage({
+        description: "Required field.",
+        defaultMessage: "Required field"
+      })
+    ).max(
+      6,
+      intl.formatMessage(
+        {
+          description: "Minimum {value} characters.",
+          defaultMessage: "Minimum {value} characters"
+        },
+        { value: 6 }
+      )
+    )
+  }).required();
+  const formMethods = (0, import_forms.useForm)({
+    resolver: (0, import_forms.yupResolver)(schema)
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_forms.Form,
+    {
+      ...formMethods,
+      onSubmit: ({ code }) => {
+        return onConfirmSignUp({ code, email });
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        AuthCard,
+        {
+          buttonLabel: intl.formatMessage({
+            description: "Confirm",
+            defaultMessage: "Confirm"
+          }),
+          title: intl.formatMessage({
+            description: "Confirmation",
+            defaultMessage: "Confirmation"
+          }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_forms.FormFieldInput,
+            {
+              name: "code",
+              label: intl.formatMessage({
+                description: "Sign up confirmation code",
+                defaultMessage: "Code"
+              })
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+// src/AuthSignIn.tsx
+var import_forms2 = require("@ttoss/forms");
+
+// ../cloud-auth/dist/esm/index.js
+var PASSWORD_MINIMUM_LENGTH = 8;
+
+// src/AuthSignIn.tsx
+var import_react_i18n2 = require("@ttoss/react-i18n");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AuthSignIn = ({
+  onSignIn,
+  onSignUp,
+  defaultValues
+}) => {
+  const { intl } = (0, import_react_i18n2.useI18n)();
+  const schema = import_forms2.yup.object().shape({
+    email: import_forms2.yup.string().required(
+      intl.formatMessage({
+        description: "Email is a required field.",
+        defaultMessage: "Email field is required"
+      })
+    ).email(
+      intl.formatMessage({
+        description: "Invalid email.",
+        defaultMessage: "Invalid email"
+      })
+    ),
+    password: import_forms2.yup.string().required(
+      intl.formatMessage({
+        description: "Password is required.",
+        defaultMessage: "Password field is required"
+      })
+    ).min(
+      PASSWORD_MINIMUM_LENGTH,
+      intl.formatMessage(
+        {
+          description: "Password must be at least {value} characters long.",
+          defaultMessage: "Password requires {value} characters"
+        },
+        { value: PASSWORD_MINIMUM_LENGTH }
+      )
+    ).trim()
+  });
+  const formMethods = (0, import_forms2.useForm)({
+    defaultValues,
+    resolver: (0, import_forms2.yupResolver)(schema)
+  });
+  const onSubmitForm = (data) => {
+    return onSignIn(data);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_forms2.Form, { ...formMethods, onSubmit: onSubmitForm, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    AuthCard,
+    {
+      title: intl.formatMessage({
+        description: "Sign in title.",
+        defaultMessage: "Login"
+      }),
+      buttonLabel: intl.formatMessage({
+        description: "Button label.",
+        defaultMessage: "Login"
+      }),
+      links: [
+        {
+          onClick: onSignUp,
+          label: intl.formatMessage({
+            description: "Link to retrieve password.",
+            defaultMessage: "Do you forgot your password?"
+          })
+        },
+        {
+          onClick: onSignUp,
+          label: intl.formatMessage({
+            description: "Link to sign up.",
+            defaultMessage: "Don't have an account? Sign up"
+          })
+        }
+      ],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_forms2.FormFieldInput,
+          {
+            name: "email",
+            label: intl.formatMessage({
+              description: "Email label.",
+              defaultMessage: "Email"
+            })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_forms2.FormFieldInput,
+          {
+            name: "password",
+            label: intl.formatMessage({
+              description: "Password label.",
+              defaultMessage: "Password"
+            })
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/AuthSignUp.tsx
+var import_forms3 = require("@ttoss/forms");
+var import_react_i18n3 = require("@ttoss/react-i18n");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var AuthSignUp = ({ onSignUp, onReturnToSignIn }) => {
+  const { intl } = (0, import_react_i18n3.useI18n)();
+  const schema = import_forms3.yup.object().shape({
+    email: import_forms3.yup.string().required(
+      intl.formatMessage({
+        description: "Email is a required field.",
+        defaultMessage: "Email field is required"
+      })
+    ).email(
+      intl.formatMessage({
+        description: "Invalid email.",
+        defaultMessage: "Invalid email"
+      })
+    ),
+    password: import_forms3.yup.string().required(
+      intl.formatMessage({
+        description: "Password is required.",
+        defaultMessage: "Password field is required"
+      })
+    ).min(
+      PASSWORD_MINIMUM_LENGTH,
+      intl.formatMessage(
+        {
+          description: "Password must be at least {value} characters long.",
+          defaultMessage: "Password requires {value} characters"
+        },
+        { value: PASSWORD_MINIMUM_LENGTH }
+      )
+    ).trim()
+  });
+  const formMethods = (0, import_forms3.useForm)({
+    resolver: (0, import_forms3.yupResolver)(schema)
+  });
+  const onSubmitForm = (data) => {
+    return onSignUp(data);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_forms3.Form, { ...formMethods, onSubmit: onSubmitForm, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    AuthCard,
+    {
+      buttonLabel: intl.formatMessage({
+        description: "Create account.",
+        defaultMessage: "Create account"
+      }),
+      title: intl.formatMessage({
+        description: "Title on sign up.",
+        defaultMessage: "Register"
+      }),
+      links: [
+        {
+          label: intl.formatMessage({
+            description: "Link to sign in on sign up.",
+            defaultMessage: "Do you already have an account? Sign in"
+          }),
+          onClick: onReturnToSignIn
+        }
+      ],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_forms3.FormFieldInput,
+          {
+            name: "email",
+            label: intl.formatMessage({
+              description: "Email label.",
+              defaultMessage: "Email"
+            })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_forms3.FormFieldInput,
+          {
+            name: "password",
+            label: intl.formatMessage({
+              description: "Password label.",
+              defaultMessage: "Password"
+            })
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/Auth.tsx
+var import_xstate = require("xstate");
+var import_react = require("@xstate/react");
+var import_react_notifications2 = require("@ttoss/react-notifications");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var authMachine = (0, import_xstate.createMachine)(
+  {
+    predictableActionArguments: true,
+    initial: "signIn",
+    states: {
+      signIn: {
+        on: {
+          SIGN_UP: { target: "signUp" },
+          SIGN_UP_RESEND_CONFIRMATION: {
+            actions: ["assignEmail"],
+            target: "signUpConfirm"
+          }
+        }
+      },
+      signUp: {
+        on: {
+          SIGN_UP_CONFIRM: {
+            actions: ["assignEmail"],
+            target: "signUpConfirm"
+          },
+          RETURN_TO_SIGN_IN: { target: "signIn" }
+        }
+      },
+      signUpConfirm: {
+        on: {
+          SIGN_UP_CONFIRMED: {
+            actions: ["assignEmail"],
+            target: "signIn"
+          }
+        }
+      }
+    }
+  },
+  {
+    actions: {
+      assignEmail: (0, import_xstate.assign)({
+        email: (_, event) => {
+          return event.email;
+        }
+      })
+    }
+  }
+);
+var AuthWithoutLogo = () => {
+  const { isAuthenticated } = useAuth();
+  const [state, send] = (0, import_react.useMachine)(authMachine);
+  const { setLoading } = (0, import_react_notifications2.useNotifications)();
+  const onSignIn = React3.useCallback(
+    async ({ email, password }) => {
+      try {
+        setLoading(true);
+        await import_aws_amplify2.Auth.signIn(email, password);
+      } catch (error) {
+        switch (error.code) {
+          case "UserNotConfirmedException":
+            await import_aws_amplify2.Auth.resendSignUp(email);
+            send({ type: "SIGN_UP_RESEND_CONFIRMATION", email });
+            break;
+          default:
+        }
+      } finally {
+        setLoading(false);
+      }
+    },
+    [send, setLoading]
+  );
+  const onSignUp = React3.useCallback(
+    async ({ email, password }) => {
+      try {
+        setLoading(true);
+        await import_aws_amplify2.Auth.signUp({
+          username: email,
+          password,
+          attributes: { email }
+        });
+        send({ type: "SIGN_UP_CONFIRM", email });
+      } catch (error) {
+      } finally {
+        setLoading(false);
+      }
+    },
+    [send, setLoading]
+  );
+  const onConfirmSignUp = React3.useCallback(
+    async ({ email, code }) => {
+      try {
+        setLoading(true);
+        await import_aws_amplify2.Auth.confirmSignUp(email, code);
+        send({ type: "SIGN_UP_CONFIRMED", email });
+      } catch (error) {
+      } finally {
+        setLoading(false);
+      }
+    },
+    [send, setLoading]
+  );
+  const onReturnToSignIn = React3.useCallback(() => {
+    send({ type: "RETURN_TO_SIGN_IN" });
+  }, [send]);
+  if (isAuthenticated) {
+    return null;
+  }
+  if (state.matches("signUp")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AuthSignUp, { onSignUp, onReturnToSignIn });
+  }
+  if (state.matches("signUpConfirm")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      AuthConfirmSignUp,
+      {
+        onConfirmSignUp,
+        email: state.context.email
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    AuthSignIn,
+    {
+      onSignIn,
+      onSignUp: () => {
+        return send("SIGN_UP");
+      },
+      defaultValues: { email: state.context.email }
+    }
+  );
+};
+var withLogo = (Component) => {
+  const WithLogo = ({ logo, ...componentProps }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LogoProvider, { logo, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Component, { ...componentProps }) });
+  };
+  WithLogo.displayName = "WithLogo";
+  return WithLogo;
+};
+var Auth2 = withLogo(AuthWithoutLogo);
+
+// src/AuthContainer.tsx
+var import_ui2 = require("@ttoss/ui");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var AuthContainer = ({ sx, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_ui2.Flex,
+    {
+      ...props,
+      sx: {
+        height: "100vh",
+        justifyContent: "center",
+        alignItems: "center",
+        margin: 0,
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover",
+        ...sx
+      }
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Auth,
+  AuthContainer,
+  AuthProvider,
+  useAuth
+});

package/i18n/lang/en.json

@@ -0,0 +1,74 @@
+{
+  "0XOzcH": {
+    "defaultMessage": "Required field",
+    "description": "Required field."
+  },
+  "0cVgsc": {
+    "defaultMessage": "Login",
+    "description": "Button label."
+  },
+  "5E12mO": {
+    "defaultMessage": "Email",
+    "description": "Email label."
+  },
+  "EXZxA0": {
+    "defaultMessage": "Register",
+    "description": "Title on sign up."
+  },
+  "KY2T6J": {
+    "defaultMessage": "Code",
+    "description": "Sign up confirmation code"
+  },
+  "LU2ddR": {
+    "defaultMessage": "Do you already have an account? Sign in",
+    "description": "Link to sign in on sign up."
+  },
+  "OhDL0i": {
+    "defaultMessage": "Invalid email",
+    "description": "Invalid email."
+  },
+  "Pdio77": {
+    "defaultMessage": "Create account",
+    "description": "Create account."
+  },
+  "PylVqx": {
+    "defaultMessage": "Password",
+    "description": "Password label."
+  },
+  "R1rFNQ": {
+    "defaultMessage": "Login",
+    "description": "Sign in title."
+  },
+  "S3pjKw": {
+    "defaultMessage": "Minimum {value} characters",
+    "description": "Minimum {value} characters."
+  },
+  "TZ4WUk": {
+    "defaultMessage": "Password requires {value} characters",
+    "description": "Password must be at least {value} characters long."
+  },
+  "UNttd+": {
+    "defaultMessage": "Confirm",
+    "description": "Confirm"
+  },
+  "XC1w2U": {
+    "defaultMessage": "Don't have an account? Sign up",
+    "description": "Link to sign up."
+  },
+  "cGR2eI": {
+    "defaultMessage": "Confirmation",
+    "description": "Confirmation"
+  },
+  "kdFYba": {
+    "defaultMessage": "Password field is required",
+    "description": "Password is required."
+  },
+  "r+QgO+": {
+    "defaultMessage": "Email field is required",
+    "description": "Email is a required field."
+  },
+  "z5s0vm": {
+    "defaultMessage": "Do you forgot your password?",
+    "description": "Link to retrieve password."
+  }
+}