@ttoss/react-auth 1.1.0

package/README.md

@@ -0,0 +1,146 @@
+# @ttoss/react-auth
+
+## About
+
+This module handles auth in your applications and other ttoss modules.
+
+This module is intended to use with AWS Cognito. It uses [AWS Amplify](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js) under the hood.
+
+[Amplify Auth configuration](https://docs.amplify.aws/lib/auth/start/q/platform/js#re-use-existing-authentication-resource) must be provided in your App to make Auth Module works properly.
+
+## Getting Started
+
+### Install
+
+```shell
+$ yarn add @ttoss/auth @ttoss/react-notifications
+```
+
+## Examples of use
+
+### Amplify config
+
+```ts
+import Amplify from 'aws-amplify';
+
+Amplify.configure({
+  Auth: {
+    // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID
+    identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',
+
+    // REQUIRED - Amazon Cognito Region
+    region: 'XX-XXXX-X',
+
+    // OPTIONAL - Amazon Cognito Federated Identity Pool Region
+    // Required only if it's different from Amazon Cognito Region
+    identityPoolRegion: 'XX-XXXX-X',
+
+    // OPTIONAL - Amazon Cognito User Pool ID
+    userPoolId: 'XX-XXXX-X_abcd1234',
+
+    // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
+    userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3',
+
+    // OPTIONAL - Enforce user authentication prior to accessing AWS resources or not
+    mandatorySignIn: false,
+
+    // OPTIONAL - Configuration for cookie storage
+    // Note: if the secure flag is set to true, then the cookie transmission requires a secure protocol
+    cookieStorage: {
+      // REQUIRED - Cookie domain (only required if cookieStorage is provided)
+      domain: '.yourdomain.com',
+      // OPTIONAL - Cookie path
+      path: '/',
+      // OPTIONAL - Cookie expiration in days
+      expires: 365,
+      // OPTIONAL - See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite
+      sameSite: 'strict' | 'lax',
+      // OPTIONAL - Cookie secure flag
+      // Either true or false, indicating if the cookie transmission requires a secure protocol (https).
+      secure: true,
+    },
+
+    // OPTIONAL - customized storage object
+    storage: MyStorage,
+
+    // OPTIONAL - Manually set the authentication flow type. Default is 'USER_SRP_AUTH'
+    authenticationFlowType: 'USER_PASSWORD_AUTH',
+
+    // OPTIONAL - Manually set key value pairs that can be passed to Cognito Lambda Triggers
+    clientMetadata: { myCustomKey: 'myCustomValue' },
+
+    // OPTIONAL - Hosted UI configuration
+    oauth: {
+      domain: 'your_cognito_domain',
+      scope: [
+        'phone',
+        'email',
+        'profile',
+        'openid',
+        'aws.cognito.signin.user.admin',
+      ],
+      redirectSignIn: 'http://localhost:3000/',
+      redirectSignOut: 'http://localhost:3000/',
+      responseType: 'code', // or 'token', note that REFRESH token will only be generated when the responseType is code
+    },
+  },
+});
+```
+
+### PrivateRoute component
+
+```tsx
+import { useAuth } from '@ttoss/react-auth';
+
+const PrivateRoute = (props: any) => {
+  const { isAuthenticated } = useAuth();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ redirectTo: props.path || '/' }} />;
+  }
+  return <Route {...props} />;
+};
+```
+
+### Login Page
+
+```tsx
+import { Auth, useAuth } from '@ttoss/react-auth';
+
+const Login = () => {
+  const auth = useAuth();
+
+  const onSuccess = () => {
+    // Navigate to logged-area
+  };
+
+  return (
+    <div>
+      <h1>Login Page</h1>
+
+      <Auth onSignIn={onSuccess} />
+
+      <button onClick={auth.signOut}>Logout</button>
+    </div>
+  );
+};
+export default Login;
+```
+
+## Auth with Progressbar
+
+```tsx
+import { AuthProvider } from '@ttoss/react-auth';
+import { NotificationsProvider } from '@ttoss/react-notifications';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <NotificationsProvider>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </NotificationsProvider>
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+```

package/dist/esm/index.js

@@ -0,0 +1,529 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// src/AuthProvider.tsx
+import * as React from "react";
+import { Auth, Hub } from "aws-amplify";
+import { jsx } from "react/jsx-runtime";
+var signOut = () => {
+  return 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 = () => {
+      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 = Hub.listen("auth", updateUser);
+    updateUser();
+    return () => {
+      updateUserListener();
+    };
+  }, []);
+  const isAuthenticated = !!user;
+  return /* @__PURE__ */ jsx(AuthContext.Provider, { value: { signOut, isAuthenticated, user, tokens }, children });
+};
+var useAuth = () => {
+  return React.useContext(AuthContext);
+};
+var AuthProvider_default = AuthProvider;
+
+// src/Auth.tsx
+import * as React3 from "react";
+import { Auth as AmplifyAuth } from "aws-amplify";
+
+// src/AuthCard.tsx
+import * as React2 from "react";
+import { Button, Card, Flex, Link, Text } from "@ttoss/ui";
+import { useNotifications } from "@ttoss/react-notifications";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var LogoContext = React2.createContext({});
+var LogoProvider = ({ children, ...values }) => {
+  return /* @__PURE__ */ jsx2(LogoContext.Provider, { value: values, children });
+};
+var AuthCard = ({
+  children,
+  title,
+  buttonLabel,
+  links = []
+}) => {
+  const { logo } = React2.useContext(LogoContext);
+  const { isLoading } = useNotifications();
+  return /* @__PURE__ */ jsx2(Card, { sx: { maxWidth: "564px" }, children: /* @__PURE__ */ jsxs(Flex, { sx: { flexDirection: "column", gap: 3 }, children: [
+    logo && /* @__PURE__ */ jsx2(Flex, { sx: { width: "100%", justifyContent: "center" }, children: logo }),
+    /* @__PURE__ */ jsx2(
+      Text,
+      {
+        variant: "title",
+        sx: { alignSelf: "center", marginY: 4, fontSize: 5 },
+        children: title
+      }
+    ),
+    children,
+    /* @__PURE__ */ jsx2(Flex, { sx: { justifyContent: "space-between", marginTop: 3 }, children: /* @__PURE__ */ jsx2(
+      Button,
+      {
+        type: "submit",
+        "aria-label": "submit-login",
+        variant: "cta",
+        disabled: isLoading,
+        sx: { width: "100%" },
+        children: buttonLabel
+      }
+    ) }),
+    /* @__PURE__ */ jsx2(
+      Flex,
+      {
+        sx: {
+          justifyContent: "space-between",
+          flexDirection: "column",
+          gap: 3,
+          marginTop: 4,
+          color: "text"
+        },
+        children: links.map((link) => {
+          return link && /* @__PURE__ */ jsx2(Link, { onClick: link.onClick, children: link.label }, link.label);
+        })
+      }
+    )
+  ] }) });
+};
+
+// src/AuthConfirmSignUp.tsx
+import { Form, FormFieldInput, useForm, yup, yupResolver } from "@ttoss/forms";
+import { useI18n } from "@ttoss/react-i18n";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var AuthConfirmSignUp = ({
+  email,
+  onConfirmSignUp
+}) => {
+  const { intl } = useI18n();
+  const schema = yup.object().shape({
+    code: 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 = useForm({
+    resolver: yupResolver(schema)
+  });
+  return /* @__PURE__ */ jsx3(
+    Form,
+    {
+      ...formMethods,
+      onSubmit: ({ code }) => {
+        return onConfirmSignUp({ code, email });
+      },
+      children: /* @__PURE__ */ jsx3(
+        AuthCard,
+        {
+          buttonLabel: intl.formatMessage({
+            description: "Confirm",
+            defaultMessage: "Confirm"
+          }),
+          title: intl.formatMessage({
+            description: "Confirmation",
+            defaultMessage: "Confirmation"
+          }),
+          children: /* @__PURE__ */ jsx3(
+            FormFieldInput,
+            {
+              name: "code",
+              label: intl.formatMessage({
+                description: "Sign up confirmation code",
+                defaultMessage: "Code"
+              })
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+// src/AuthSignIn.tsx
+import { Form as Form2, FormFieldInput as FormFieldInput2, useForm as useForm2, yup as yup2, yupResolver as yupResolver2 } from "@ttoss/forms";
+
+// ../cloud-auth/dist/esm/index.js
+var PASSWORD_MINIMUM_LENGTH = 8;
+
+// src/AuthSignIn.tsx
+import { useI18n as useI18n2 } from "@ttoss/react-i18n";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var AuthSignIn = ({
+  onSignIn,
+  onSignUp,
+  defaultValues
+}) => {
+  const { intl } = useI18n2();
+  const schema = yup2.object().shape({
+    email: yup2.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: yup2.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 = useForm2({
+    defaultValues,
+    resolver: yupResolver2(schema)
+  });
+  const onSubmitForm = (data) => {
+    return onSignIn(data);
+  };
+  return /* @__PURE__ */ jsx4(Form2, { ...formMethods, onSubmit: onSubmitForm, children: /* @__PURE__ */ jsxs2(
+    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__ */ jsx4(
+          FormFieldInput2,
+          {
+            name: "email",
+            label: intl.formatMessage({
+              description: "Email label.",
+              defaultMessage: "Email"
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          FormFieldInput2,
+          {
+            name: "password",
+            label: intl.formatMessage({
+              description: "Password label.",
+              defaultMessage: "Password"
+            })
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/AuthSignUp.tsx
+import { Form as Form3, FormFieldInput as FormFieldInput3, useForm as useForm3, yup as yup3, yupResolver as yupResolver3 } from "@ttoss/forms";
+import { useI18n as useI18n3 } from "@ttoss/react-i18n";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var AuthSignUp = ({ onSignUp, onReturnToSignIn }) => {
+  const { intl } = useI18n3();
+  const schema = yup3.object().shape({
+    email: yup3.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: yup3.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 = useForm3({
+    resolver: yupResolver3(schema)
+  });
+  const onSubmitForm = (data) => {
+    return onSignUp(data);
+  };
+  return /* @__PURE__ */ jsx5(Form3, { ...formMethods, onSubmit: onSubmitForm, children: /* @__PURE__ */ jsxs3(
+    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__ */ jsx5(
+          FormFieldInput3,
+          {
+            name: "email",
+            label: intl.formatMessage({
+              description: "Email label.",
+              defaultMessage: "Email"
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          FormFieldInput3,
+          {
+            name: "password",
+            label: intl.formatMessage({
+              description: "Password label.",
+              defaultMessage: "Password"
+            })
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/Auth.tsx
+import { assign, createMachine } from "xstate";
+import { useMachine } from "@xstate/react";
+import { useNotifications as useNotifications2 } from "@ttoss/react-notifications";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var authMachine = 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: assign({
+        email: (_, event) => {
+          return event.email;
+        }
+      })
+    }
+  }
+);
+var AuthWithoutLogo = () => {
+  const { isAuthenticated } = useAuth();
+  const [state, send] = useMachine(authMachine);
+  const { setLoading } = useNotifications2();
+  const onSignIn = React3.useCallback(
+    async ({ email, password }) => {
+      try {
+        setLoading(true);
+        await AmplifyAuth.signIn(email, password);
+      } catch (error) {
+        switch (error.code) {
+          case "UserNotConfirmedException":
+            await AmplifyAuth.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 AmplifyAuth.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 AmplifyAuth.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__ */ jsx6(AuthSignUp, { onSignUp, onReturnToSignIn });
+  }
+  if (state.matches("signUpConfirm")) {
+    return /* @__PURE__ */ jsx6(
+      AuthConfirmSignUp,
+      {
+        onConfirmSignUp,
+        email: state.context.email
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6(
+    AuthSignIn,
+    {
+      onSignIn,
+      onSignUp: () => {
+        return send("SIGN_UP");
+      },
+      defaultValues: { email: state.context.email }
+    }
+  );
+};
+var withLogo = (Component) => {
+  const WithLogo = ({ logo, ...componentProps }) => {
+    return /* @__PURE__ */ jsx6(LogoProvider, { logo, children: /* @__PURE__ */ jsx6(Component, { ...componentProps }) });
+  };
+  WithLogo.displayName = "WithLogo";
+  return WithLogo;
+};
+var Auth2 = withLogo(AuthWithoutLogo);
+
+// src/AuthContainer.tsx
+import { Flex as Flex2 } from "@ttoss/ui";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var AuthContainer = ({ sx, ...props }) => {
+  return /* @__PURE__ */ jsx7(
+    Flex2,
+    {
+      ...props,
+      sx: {
+        height: "100vh",
+        justifyContent: "center",
+        alignItems: "center",
+        margin: 0,
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover",
+        ...sx
+      }
+    }
+  );
+};
+export {
+  Auth2 as Auth,
+  AuthContainer,
+  AuthProvider_default as AuthProvider,
+  useAuth
+};