@ttoss/react-auth 2.1.0 → 2.1.1

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@ttoss/react-auth",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "ttoss authentication module for React apps.",
+  "license": "MIT",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
@@ -20,21 +21,20 @@
   },
   "files": [
     "dist",
-    "i18n",
-    "src"
+    "i18n"
   ],
   "sideEffects": false,
   "dependencies": {
     "@xstate/react": "^3.2.2",
     "xstate": "^4.38.3",
-    "@ttoss/forms": "^0.26.0"
+    "@ttoss/forms": "^0.26.1"
   },
   "peerDependencies": {
     "aws-amplify": "^6.0.0",
     "react": ">=16.8.0",
-    "@ttoss/react-i18n": "^2.0.3",
-    "@ttoss/ui": "^5.0.7",
-    "@ttoss/react-notifications": "^1.24.57"
+    "@ttoss/react-i18n": "^2.0.4",
+    "@ttoss/ui": "^5.0.8",
+    "@ttoss/react-notifications": "^1.24.58"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
@@ -43,13 +43,13 @@
     "jest": "^29.7.0",
     "react": "^18.3.1",
     "tsup": "^8.3.0",
-    "@ttoss/config": "^1.34.0",
-    "@ttoss/cloud-auth": "^0.12.21",
-    "@ttoss/i18n-cli": "^0.7.21",
-    "@ttoss/react-notifications": "^1.24.57",
-    "@ttoss/react-i18n": "^2.0.3",
-    "@ttoss/test-utils": "^2.1.16",
-    "@ttoss/ui": "^5.0.7"
+    "@ttoss/cloud-auth": "^0.12.22",
+    "@ttoss/config": "^1.34.1",
+    "@ttoss/i18n-cli": "^0.7.22",
+    "@ttoss/react-notifications": "^1.24.58",
+    "@ttoss/react-i18n": "^2.0.4",
+    "@ttoss/test-utils": "^2.1.17",
+    "@ttoss/ui": "^5.0.8"
   },
   "keywords": [
     "React",

package/src/Auth.tsx

@@ -1,328 +0,0 @@
-import * as React from 'react';
-import { AuthConfirmSignUp } from './AuthConfirmSignUp';
-import { AuthForgotPassword } from './AuthForgotPassword';
-import { AuthForgotPasswordResetPassword } from './AuthForgotPasswordResetPassword';
-import { AuthFullScreen } from './AuthFullScreen';
-import { AuthSignIn } from './AuthSignIn';
-import { AuthSignUp } from './AuthSignUp';
-import { LogoContextProps, LogoProvider } from './AuthCard';
-import { assign, createMachine } from 'xstate';
-import {
-  confirmResetPassword,
-  confirmSignUp,
-  resendSignUpCode,
-  resetPassword,
-  signIn,
-  signUp,
-} from 'aws-amplify/auth';
-import { useAuth } from './AuthProvider';
-import { useMachine } from '@xstate/react';
-import { useNotifications } from '@ttoss/react-notifications';
-import type {
-  OnConfirmSignUp,
-  OnForgotPassword,
-  OnForgotPasswordResetPassword,
-  OnSignIn,
-  OnSignUp,
-} from './types';
-
-type AuthState =
-  | {
-      value: 'signIn';
-      context: { email?: string };
-    }
-  | {
-      value: 'signUp';
-      context: Record<string, never>;
-    }
-  | {
-      value: 'signUpConfirm';
-      context: { email: string };
-    }
-  | {
-      value: 'signUpResendConfirmation';
-      context: { email: string };
-    }
-  | {
-      value: 'forgotPassword';
-      context: Record<string, never>;
-    }
-  | {
-      value: 'forgotPasswordResetPassword';
-      context: { email: string };
-    };
-
-type AuthEvent =
-  | { type: 'SIGN_UP' }
-  | { type: 'SIGN_UP_CONFIRM'; email: string }
-  | { type: 'SIGN_UP_CONFIRMED'; email: string }
-  | { type: 'SIGN_UP_RESEND_CONFIRMATION'; email: string }
-  | { type: 'RETURN_TO_SIGN_IN' }
-  | { type: 'FORGOT_PASSWORD' }
-  | { type: 'FORGOT_PASSWORD_RESET_PASSWORD'; email: string }
-  | { type: 'FORGOT_PASSWORD_CONFIRMED'; email: string };
-
-type AuthContext = { email?: string };
-
-const authMachine = createMachine<AuthContext, AuthEvent, AuthState>(
-  {
-    predictableActionArguments: true,
-    initial: 'signIn',
-    states: {
-      signIn: {
-        on: {
-          SIGN_UP: { target: 'signUp' },
-          SIGN_UP_RESEND_CONFIRMATION: {
-            actions: ['assignEmail'],
-            target: 'signUpConfirm',
-          },
-          FORGOT_PASSWORD: { target: 'forgotPassword' },
-        },
-      },
-      signUp: {
-        on: {
-          SIGN_UP_CONFIRM: {
-            actions: ['assignEmail'],
-            target: 'signUpConfirm',
-          },
-          RETURN_TO_SIGN_IN: { target: 'signIn' },
-        },
-      },
-      signUpConfirm: {
-        on: {
-          SIGN_UP_CONFIRMED: {
-            actions: ['assignEmail'],
-            target: 'signIn',
-          },
-        },
-      },
-      forgotPassword: {
-        on: {
-          RETURN_TO_SIGN_IN: { target: 'signIn' },
-          SIGN_UP: { target: 'signUp' },
-          FORGOT_PASSWORD_RESET_PASSWORD: {
-            actions: ['assignEmail'],
-            target: 'forgotPasswordResetPassword',
-          },
-        },
-      },
-      forgotPasswordResetPassword: {
-        on: {
-          FORGOT_PASSWORD_CONFIRMED: {
-            actions: ['assignEmail'],
-            target: 'signIn',
-          },
-          RETURN_TO_SIGN_IN: { target: 'signIn' },
-        },
-      },
-    },
-  },
-  {
-    actions: {
-      assignEmail: assign({
-        email: (_, event) => {
-          if ('email' in event) {
-            return event.email;
-          }
-
-          return undefined;
-        },
-      }),
-    },
-  }
-);
-
-const AuthLogic = () => {
-  const { isAuthenticated } = useAuth();
-
-  const [state, send] = useMachine(authMachine);
-
-  const { setLoading, setNotifications } = useNotifications();
-
-  const onSignIn = React.useCallback<OnSignIn>(
-    async ({ email, password }) => {
-      try {
-        setLoading(true);
-        await signIn({ username: email, password });
-        // toast('Signed In');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } catch (error: any) {
-        switch (error.code) {
-          case 'UserNotConfirmedException':
-            await resendSignUpCode({ username: email });
-            send({ type: 'SIGN_UP_RESEND_CONFIRMATION', email });
-            break;
-          default:
-          // toast(JSON.stringify(error, null, 2));
-        }
-        setNotifications({ type: 'error', message: error.message });
-      } finally {
-        setLoading(false);
-      }
-    },
-    [send, setLoading, setNotifications]
-  );
-
-  const onSignUp = React.useCallback<OnSignUp>(
-    async ({ email, password }) => {
-      try {
-        setLoading(true);
-        await signUp({
-          username: email,
-          password,
-          options: {
-            userAttributes: {
-              email,
-            },
-          },
-        });
-        // toast('Signed Up');
-        send({ type: 'SIGN_UP_CONFIRM', email });
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } catch (error: any) {
-        setNotifications({ type: 'error', message: error.message });
-        // toast(JSON.stringify(error, null, 2));
-      } finally {
-        setLoading(false);
-      }
-    },
-    [send, setLoading, setNotifications]
-  );
-
-  const onConfirmSignUp = React.useCallback<OnConfirmSignUp>(
-    async ({ email, code }) => {
-      try {
-        setLoading(true);
-        await confirmSignUp({ confirmationCode: code, username: email });
-        // toast('Confirmed Signed In');
-        send({ type: 'SIGN_UP_CONFIRMED', email });
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } catch (error: any) {
-        setNotifications({ type: 'error', message: error.message });
-        // toast(JSON.stringify(error, null, 2));
-      } finally {
-        setLoading(false);
-      }
-    },
-    [send, setLoading, setNotifications]
-  );
-
-  const onReturnToSignIn = React.useCallback(() => {
-    send({ type: 'RETURN_TO_SIGN_IN' });
-  }, [send]);
-
-  const onForgotPassword = React.useCallback<OnForgotPassword>(
-    async ({ email }) => {
-      try {
-        setLoading(true);
-        await resetPassword({ username: email });
-        // toast('Forgot Password');
-        send({ type: 'FORGOT_PASSWORD_RESET_PASSWORD', email });
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } catch (error: any) {
-        setNotifications({ type: 'error', message: error.message });
-        // toast(JSON.stringify(error, null, 2));
-      } finally {
-        setLoading(false);
-      }
-    },
-    [send, setLoading, setNotifications]
-  );
-
-  const onForgotPasswordResetPassword =
-    React.useCallback<OnForgotPasswordResetPassword>(
-      async ({ email, code, newPassword }) => {
-        try {
-          setLoading(true);
-          await confirmResetPassword({
-            confirmationCode: code,
-            username: email,
-            newPassword,
-          });
-          // toast('Forgot Password Reset Password');
-          send({ type: 'FORGOT_PASSWORD_CONFIRMED', email });
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } catch (error: any) {
-          setNotifications({ type: 'error', message: error.message });
-          // toast(JSON.stringify(error, null, 2));
-        } finally {
-          setLoading(false);
-        }
-      },
-      [send, setLoading, setNotifications]
-    );
-
-  if (isAuthenticated) {
-    return null;
-  }
-
-  if (state.matches('signUp')) {
-    return (
-      <AuthSignUp onSignUp={onSignUp} onReturnToSignIn={onReturnToSignIn} />
-    );
-  }
-
-  if (state.matches('signUpConfirm')) {
-    return (
-      <AuthConfirmSignUp
-        onConfirmSignUp={onConfirmSignUp}
-        email={state.context.email}
-      />
-    );
-  }
-
-  if (state.matches('forgotPassword')) {
-    return (
-      <AuthForgotPassword
-        onForgotPassword={onForgotPassword}
-        onCancel={onReturnToSignIn}
-        onSignUp={() => {
-          return send('SIGN_UP');
-        }}
-      />
-    );
-  }
-
-  if (state.matches('forgotPasswordResetPassword')) {
-    return (
-      <AuthForgotPasswordResetPassword
-        email={state.context.email}
-        onForgotPasswordResetPassword={onForgotPasswordResetPassword}
-        onCancel={onReturnToSignIn}
-      />
-    );
-  }
-
-  return (
-    <AuthSignIn
-      onSignIn={onSignIn}
-      onSignUp={() => {
-        return send('SIGN_UP');
-      }}
-      onForgotPassword={() => {
-        return send('FORGOT_PASSWORD');
-      }}
-      defaultValues={{ email: state.context.email }}
-    />
-  );
-};
-
-type AuthProps = LogoContextProps & {
-  fullScreen?: boolean;
-};
-
-export const Auth = ({ logo, fullScreen = true }: AuthProps) => {
-  const withLogoNode = React.useMemo(() => {
-    return (
-      <LogoProvider logo={logo}>
-        <AuthLogic />
-      </LogoProvider>
-    );
-  }, [logo]);
-
-  if (fullScreen) {
-    return <AuthFullScreen>{withLogoNode}</AuthFullScreen>;
-  }
-
-  return withLogoNode;
-};

package/src/AuthCard.tsx

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import { Box, Button, Flex, Heading } from '@ttoss/ui';
-import { useNotifications } from '@ttoss/react-notifications';
-
-export type LogoContextProps = {
-  logo?: React.ReactNode;
-  children?: React.ReactNode;
-};
-
-const LogoContext = React.createContext<LogoContextProps>({});
-
-export const LogoProvider = ({ children, ...values }: LogoContextProps) => {
-  return <LogoContext.Provider value={values}>{children}</LogoContext.Provider>;
-};
-
-type AuthCardProps = {
-  children: React.ReactNode;
-  title: string;
-  buttonLabel: string;
-  extraButton?: React.ReactNode;
-  isValidForm?: boolean;
-};
-
-export const AuthCard = ({
-  children,
-  title,
-  buttonLabel,
-  extraButton,
-  isValidForm,
-}: AuthCardProps) => {
-  const { logo } = React.useContext(LogoContext);
-
-  const { isLoading } = useNotifications();
-
-  return (
-    <Box
-      sx={{
-        width: '100%',
-        border: 'default',
-        borderColor: 'primary',
-        paddingX: '2xl',
-        paddingY: '3xl',
-        backgroundColor: 'surface',
-      }}
-    >
-      {logo && (
-        <Flex
-          sx={{
-            width: '100%',
-            maxHeight: '90px',
-            justifyContent: 'center',
-            marginBottom: '2xl',
-          }}
-        >
-          {logo}
-        </Flex>
-      )}
-      <Flex sx={{ flexDirection: 'column' }}>
-        <Heading
-          as="h2"
-          variant="h2"
-          sx={{
-            marginBottom: '2xl',
-          }}
-        >
-          {title}
-        </Heading>
-
-        {children}
-
-        <Flex
-          sx={{
-            flexDirection: 'column',
-            width: '100%',
-            gap: 'xl',
-            marginTop: '2xl',
-          }}
-        >
-          <Button
-            type="submit"
-            aria-label="submit-button"
-            variant="accent"
-            disabled={isLoading || !isValidForm}
-            sx={{ textAlign: 'center', display: 'initial' }}
-            loading={isLoading}
-          >
-            {buttonLabel}
-          </Button>
-
-          {extraButton}
-        </Flex>
-      </Flex>
-    </Box>
-  );
-};

package/src/AuthConfirmSignUp.tsx

@@ -1,73 +0,0 @@
-import { AuthCard } from './AuthCard';
-import { Form, FormFieldInput, useForm, yup, yupResolver } from '@ttoss/forms';
-import { useI18n } from '@ttoss/react-i18n';
-import type { OnConfirmSignUp } from './types';
-
-export type AuthConfirmSignUpProps = {
-  email: string;
-  onConfirmSignUp: OnConfirmSignUp;
-};
-
-export const AuthConfirmSignUp = ({
-  email,
-  onConfirmSignUp,
-}: AuthConfirmSignUpProps) => {
-  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<yup.InferType<typeof schema>>({
-    resolver: yupResolver(schema),
-  });
-
-  return (
-    <Form
-      {...formMethods}
-      onSubmit={({ code }) => {
-        return onConfirmSignUp({ code, email });
-      }}
-    >
-      <AuthCard
-        buttonLabel={intl.formatMessage({
-          description: 'Confirm',
-          defaultMessage: 'Confirm',
-        })}
-        isValidForm={formMethods.formState.isValid}
-        title={intl.formatMessage({
-          description: 'Confirmation',
-          defaultMessage: 'Confirmation',
-        })}
-      >
-        <FormFieldInput
-          name="code"
-          label={intl.formatMessage({
-            description: 'Sign up confirmation code',
-            defaultMessage: 'Code',
-          })}
-        />
-      </AuthCard>
-    </Form>
-  );
-};

package/src/AuthForgotPassword.tsx

@@ -1,102 +0,0 @@
-import { AuthCard } from './AuthCard';
-import { Button, Link, Text } from '@ttoss/ui';
-import { Form, FormFieldInput, useForm, yup, yupResolver } from '@ttoss/forms';
-import { NotificationsBox } from '@ttoss/react-notifications';
-import { useI18n } from '@ttoss/react-i18n';
-import type { OnForgotPassword } from './types';
-
-export type AuthForgotPasswordProps = {
-  onForgotPassword: OnForgotPassword;
-  onCancel: () => void;
-  onSignUp: () => void;
-};
-
-export const AuthForgotPassword = ({
-  onForgotPassword,
-  onCancel,
-  onSignUp,
-}: AuthForgotPasswordProps) => {
-  const { intl } = useI18n();
-
-  const schema = yup
-    .object()
-    .shape({
-      email: yup
-        .string()
-        .required(
-          intl.formatMessage({
-            description: 'Required field.',
-            defaultMessage: 'Enter your email address',
-          })
-        )
-        .email(
-          intl.formatMessage({
-            description: 'Please, insert a valid e-mail',
-            defaultMessage: 'Please, insert a valid e-mail',
-          })
-        ),
-    })
-    .required();
-
-  const formMethods = useForm<yup.InferType<typeof schema>>({
-    resolver: yupResolver(schema),
-    mode: 'onBlur',
-  });
-
-  return (
-    <Form
-      {...formMethods}
-      sx={{
-        maxWidth: '390px',
-      }}
-      onSubmit={({ email }) => {
-        return onForgotPassword({ email });
-      }}
-    >
-      <AuthCard
-        buttonLabel={intl.formatMessage({
-          description: 'Recover Password',
-          defaultMessage: 'Recover Password',
-        })}
-        isValidForm={formMethods.formState.isValid}
-        title={intl.formatMessage({
-          description: 'Recovering Password',
-          defaultMessage: 'Recovering Password',
-        })}
-        extraButton={
-          <Button
-            sx={{ textAlign: 'center', display: 'initial' }}
-            variant="secondary"
-            onClick={onCancel}
-          >
-            {intl.formatMessage({
-              description: 'Cancel',
-              defaultMessage: 'Cancel',
-            })}
-          </Button>
-        }
-      >
-        <FormFieldInput
-          name="email"
-          label={intl.formatMessage({
-            description: 'Registered Email',
-            defaultMessage: 'Registered Email',
-          })}
-        />
-
-        <NotificationsBox />
-
-        <Text
-          sx={{ marginTop: 'xl', cursor: 'pointer' }}
-          as={Link}
-          onClick={onSignUp}
-        >
-          {intl.formatMessage({
-            description: 'Sign up now',
-            defaultMessage: 'Sign up now',
-          })}
-        </Text>
-      </AuthCard>
-    </Form>
-  );
-};