@ttoss/react-auth 1.6.42 → 1.7.0

package/i18n/compiled/en.json

@@ -11,6 +11,12 @@
       "value": "Required field"
     }
   ],
+  "42HafR": [
+    {
+      "type": 0,
+      "value": "Code"
+    }
+  ],
   "5E12mO": [
     {
       "type": 0,

package/i18n/lang/en.json

@@ -7,6 +7,10 @@
     "defaultMessage": "Required field",
     "description": "Required field."
   },
+  "42HafR": {
+    "defaultMessage": "Code",
+    "description": "Code"
+  },
   "5E12mO": {
     "defaultMessage": "Email",
     "description": "Email label."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-auth",
-  "version": "1.6.42",
+  "version": "1.7.0",
   "description": "ttoss authentication module for React apps.",
   "license": "UNLICENSED",
   "author": "ttoss",

package/src/Auth.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Auth as AmplifyAuth } from 'aws-amplify';
 import { AuthConfirmSignUp } from './AuthConfirmSignUp';
+import { AuthForgotPassword } from './AuthForgotPassword';
+import { AuthForgotPasswordResetPassword } from './AuthForgotPasswordResetPassword';
 import { AuthFullScreen } from './AuthFullScreen';
 import { AuthSignIn } from './AuthSignIn';
 import { AuthSignUp } from './AuthSignUp';
@@ -9,7 +11,13 @@ import { assign, createMachine } from 'xstate';
 import { useAuth } from './AuthProvider';
 import { useMachine } from '@xstate/react';
 import { useNotifications } from '@ttoss/react-notifications';
-import type { OnConfirmSignUp, OnSignIn, OnSignUp } from './types';
+import type {
+  OnConfirmSignUp,
+  OnForgotPassword,
+  OnForgotPasswordResetPassword,
+  OnSignIn,
+  OnSignUp,
+} from './types';
 
 type AuthState =
   | {
@@ -27,6 +35,14 @@ type AuthState =
   | {
       value: 'signUpResendConfirmation';
       context: { email: string };
+    }
+  | {
+      value: 'forgotPassword';
+      context: Record<string, never>;
+    }
+  | {
+      value: 'forgotPasswordResetPassword';
+      context: { email: string };
     };
 
 type AuthEvent =
@@ -34,7 +50,10 @@ type AuthEvent =
   | { 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: 'RETURN_TO_SIGN_IN' }
+  | { type: 'FORGOT_PASSWORD' }
+  | { type: 'FORGOT_PASSWORD_RESET_PASSWORD'; email: string }
+  | { type: 'FORGOT_PASSWORD_CONFIRMED'; email: string };
 
 type AuthContext = { email?: string };
 
@@ -50,6 +69,7 @@ const authMachine = createMachine<AuthContext, AuthEvent, AuthState>(
             actions: ['assignEmail'],
             target: 'signUpConfirm',
           },
+          FORGOT_PASSWORD: { target: 'forgotPassword' },
         },
       },
       signUp: {
@@ -69,13 +89,36 @@ const authMachine = createMachine<AuthContext, AuthEvent, AuthState>(
           },
         },
       },
+      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) => {
-          return (event as any).email;
+          if ('email' in event) {
+            return event.email;
+          }
+
+          return undefined;
         },
       }),
     },
@@ -95,11 +138,12 @@ const AuthLogic = () => {
         setLoading(true);
         await AmplifyAuth.signIn(email, password);
         // toast('Signed In');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (error: any) {
         switch (error.code) {
           case 'UserNotConfirmedException':
             await AmplifyAuth.resendSignUp(email);
-            send({ type: 'SIGN_UP_RESEND_CONFIRMATION', email } as any);
+            send({ type: 'SIGN_UP_RESEND_CONFIRMATION', email });
             break;
           default:
           // toast(JSON.stringify(error, null, 2));
@@ -122,7 +166,8 @@ const AuthLogic = () => {
           attributes: { email },
         });
         // toast('Signed Up');
-        send({ type: 'SIGN_UP_CONFIRM', email } as any);
+        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));
@@ -139,7 +184,8 @@ const AuthLogic = () => {
         setLoading(true);
         await AmplifyAuth.confirmSignUp(email, code);
         // toast('Confirmed Signed In');
-        send({ type: 'SIGN_UP_CONFIRMED', email } as any);
+        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));
@@ -154,6 +200,43 @@ const AuthLogic = () => {
     send({ type: 'RETURN_TO_SIGN_IN' });
   }, [send]);
 
+  const onForgotPassword = React.useCallback<OnForgotPassword>(
+    async ({ email }) => {
+      try {
+        setLoading(true);
+        await AmplifyAuth.forgotPassword(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 AmplifyAuth.forgotPasswordSubmit(email, code, 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;
   }
@@ -168,7 +251,29 @@ const AuthLogic = () => {
     return (
       <AuthConfirmSignUp
         onConfirmSignUp={onConfirmSignUp}
-        email={(state.context as any).email}
+        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}
       />
     );
   }
@@ -179,7 +284,10 @@ const AuthLogic = () => {
       onSignUp={() => {
         return send('SIGN_UP');
       }}
-      defaultValues={{ email: (state.context as any).email }}
+      onForgotPassword={() => {
+        return send('FORGOT_PASSWORD');
+      }}
+      defaultValues={{ email: state.context.email }}
     />
   );
 };

package/src/AuthConfirmSignUp.tsx

@@ -38,7 +38,7 @@ export const AuthConfirmSignUp = ({
     })
     .required();
 
-  const formMethods = useForm<yup.TypeOf<typeof schema>>({
+  const formMethods = useForm<yup.InferType<typeof schema>>({
     resolver: yupResolver(schema),
   });
 

package/src/{AuthRecoveryPassword.tsx → AuthForgotPassword.tsx}

@@ -3,14 +3,19 @@ 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 AuthRecoveryPasswordProps = {
-  onRecoveryPassword: (email: string) => void;
+export type AuthForgotPasswordProps = {
+  onForgotPassword: OnForgotPassword;
+  onCancel: () => void;
+  onSignUp: () => void;
 };
 
-export const AuthRecoveryPassword = ({
-  onRecoveryPassword,
-}: AuthRecoveryPasswordProps) => {
+export const AuthForgotPassword = ({
+  onForgotPassword,
+  onCancel,
+  onSignUp,
+}: AuthForgotPasswordProps) => {
   const { intl } = useI18n();
 
   const schema = yup
@@ -33,7 +38,7 @@ export const AuthRecoveryPassword = ({
     })
     .required();
 
-  const formMethods = useForm<yup.TypeOf<typeof schema>>({
+  const formMethods = useForm<yup.InferType<typeof schema>>({
     resolver: yupResolver(schema),
     mode: 'onBlur',
   });
@@ -45,7 +50,7 @@ export const AuthRecoveryPassword = ({
         maxWidth: '390px',
       }}
       onSubmit={({ email }) => {
-        return onRecoveryPassword(email);
+        return onForgotPassword({ email });
       }}
     >
       <AuthCard
@@ -62,6 +67,7 @@ export const AuthRecoveryPassword = ({
           <Button
             sx={{ textAlign: 'center', display: 'initial' }}
             variant="secondary"
+            onClick={onCancel}
           >
             {intl.formatMessage({
               description: 'Cancel',
@@ -80,7 +86,11 @@ export const AuthRecoveryPassword = ({
 
         <NotificationsBox />
 
-        <Text sx={{ marginTop: 'xl', cursor: 'pointer' }} as={Link}>
+        <Text
+          sx={{ marginTop: 'xl', cursor: 'pointer' }}
+          as={Link}
+          onClick={onSignUp}
+        >
           {intl.formatMessage({
             description: 'Sign up now',
             defaultMessage: 'Sign up now',

package/src/AuthForgotPasswordResetPassword.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { AuthCard } from './AuthCard';
+import { Button } from '@ttoss/ui';
+import {
+  Form,
+  FormFieldInput,
+  FormFieldPassword,
+  useForm,
+  yup,
+  yupResolver,
+} from '@ttoss/forms';
+import { NotificationsBox } from '@ttoss/react-notifications';
+import { PASSWORD_MINIMUM_LENGTH } from '@ttoss/cloud-auth';
+import { useI18n } from '@ttoss/react-i18n';
+import type { OnForgotPasswordResetPassword } from './types';
+
+export type AuthForgotPasswordResetPasswordProps = {
+  email: string;
+  onForgotPasswordResetPassword: OnForgotPasswordResetPassword;
+  onCancel: () => void;
+};
+
+export const AuthForgotPasswordResetPassword = ({
+  email,
+  onForgotPasswordResetPassword,
+  onCancel,
+}: AuthForgotPasswordResetPasswordProps) => {
+  const { intl } = useI18n();
+
+  const schema = React.useMemo(() => {
+    return 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 }
+            )
+          ),
+        password: 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(),
+        confirmPassword: yup
+          .string()
+          .required(
+            intl.formatMessage({
+              description: 'Confirm Password is required.',
+              defaultMessage: 'Confirm password field is required',
+            })
+          )
+          .oneOf(
+            [yup.ref('password')],
+            intl.formatMessage({
+              description: 'Passwords are not the same',
+              defaultMessage: 'Passwords are not the same',
+            })
+          ),
+      })
+      .required();
+  }, [intl]);
+
+  const formMethods = useForm<yup.InferType<typeof schema>>({
+    resolver: yupResolver(schema),
+    mode: 'onBlur',
+  });
+
+  return (
+    <Form
+      {...formMethods}
+      sx={{
+        maxWidth: '390px',
+      }}
+      onSubmit={({ code, password }) => {
+        return onForgotPasswordResetPassword({
+          email,
+          code,
+          newPassword: password,
+        });
+      }}
+    >
+      <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="code"
+          label={intl.formatMessage({
+            description: 'Code',
+            defaultMessage: 'Code',
+          })}
+        />
+        <FormFieldPassword
+          name="password"
+          label={intl.formatMessage({
+            description: 'Password label.',
+            defaultMessage: 'Password',
+          })}
+        />
+        <FormFieldPassword
+          name="confirmPassword"
+          label={intl.formatMessage({
+            description: 'Confirm Password label.',
+            defaultMessage: 'Confirm password',
+          })}
+        />
+        <NotificationsBox />
+      </AuthCard>
+    </Form>
+  );
+};

package/src/AuthSignIn.tsx

@@ -17,7 +17,7 @@ import type { OnSignIn, OnSignInInput } from './types';
 export type AuthSignInProps = {
   onSignIn: OnSignIn;
   onSignUp: () => void;
-  onForgotPassword?: () => void;
+  onForgotPassword: () => void;
   defaultValues?: Partial<OnSignInInput>;
   urlLogo?: string;
 };
@@ -141,7 +141,7 @@ export const AuthSignIn = ({
           /> */}
 
           <Text
-            sx={{ marginLeft: 'auto' }}
+            sx={{ marginLeft: 'auto', cursor: 'pointer' }}
             as={Link}
             onClick={onForgotPassword}
           >

package/src/types.ts

@@ -14,3 +14,11 @@ export type OnSignUpInput = {
 export type OnSignUp = (input: OnSignUpInput) => void;
 
 export type OnConfirmSignUp = (input: { email: string; code: string }) => void;
+
+export type OnForgotPassword = (input: { email: string }) => void;
+
+export type OnForgotPasswordResetPassword = (input: {
+  email: string;
+  code: string;
+  newPassword: string;
+}) => void;