@ttoss/react-auth 2.1.0 → 2.2.0

package/src/AuthForgotPasswordResetPassword.tsx

@@ -1,158 +0,0 @@
-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/AuthFullScreen.tsx

@@ -1,25 +0,0 @@
-import { Flex } from '@ttoss/ui';
-
-export type AuthFullScreenProps = {
-  backgroundImageUrl?: string;
-  children: React.ReactNode;
-};
-
-export const AuthFullScreen = ({ children }: AuthFullScreenProps) => {
-  return (
-    <Flex
-      sx={{
-        height: '100vh',
-        width: '100vw',
-        justifyContent: 'center',
-        alignItems: 'center',
-        margin: 0,
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: 'cover',
-      }}
-    >
-      {children}
-    </Flex>
-  );
-};

package/src/AuthProvider.tsx

@@ -1,119 +0,0 @@
-import * as React from 'react';
-import { Hub } from 'aws-amplify/utils';
-import {
-  signOut as awsSignOut,
-  fetchAuthSession,
-  fetchUserAttributes,
-  getCurrentUser,
-} from 'aws-amplify/auth';
-
-type User = {
-  id: string;
-  email: string;
-  emailVerified: string;
-} | null;
-
-type Tokens = {
-  idToken: string;
-  accessToken: string;
-  refreshToken: string;
-} | null;
-
-const signOut = () => {
-  return awsSignOut();
-};
-
-const AuthContext = React.createContext<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  signOut: () => Promise<any>;
-  isAuthenticated: boolean;
-  user: User;
-  tokens: Tokens;
-}>({
-  signOut,
-  isAuthenticated: false,
-  user: null,
-  tokens: null,
-});
-
-export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
-  const [{ user, tokens, isAuthenticated }, setAuthState] = React.useState<{
-    user: User;
-    tokens: Tokens;
-    isAuthenticated: boolean | undefined;
-  }>({
-    user: null,
-    tokens: null,
-    isAuthenticated: undefined,
-  });
-
-  React.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((e) => {
-          // eslint-disable-next-line no-console
-          console.error(e);
-          setAuthState({
-            user: null,
-            tokens: null,
-            isAuthenticated: false,
-          });
-        });
-    };
-
-    const updateUserListener = Hub.listen('auth', updateUser);
-
-    /**
-     * Check manually the first time.
-     */
-    updateUser();
-
-    return () => {
-      updateUserListener();
-    };
-  }, []);
-
-  if (isAuthenticated === undefined) {
-    return null;
-  }
-
-  return (
-    <AuthContext.Provider
-      value={{
-        signOut,
-        isAuthenticated,
-        user,
-        tokens,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
-  );
-};
-
-export const useAuth = () => {
-  return React.useContext(AuthContext);
-};

package/src/AuthSignIn.tsx

@@ -1,159 +0,0 @@
-import * as React from 'react';
-import { AuthCard } from './AuthCard';
-import { Button, Flex, Link, Text } from '@ttoss/ui';
-import {
-  Form,
-  FormFieldInput,
-  FormFieldPassword,
-  useForm,
-  yup,
-  yupResolver,
-} from '@ttoss/forms';
-import { NotificationsBox, useNotifications } from '@ttoss/react-notifications';
-import { PASSWORD_MINIMUM_LENGTH } from '@ttoss/cloud-auth';
-import { useI18n } from '@ttoss/react-i18n';
-import type { OnSignIn, OnSignInInput } from './types';
-
-export type AuthSignInProps = {
-  onSignIn: OnSignIn;
-  onSignUp: () => void;
-  onForgotPassword: () => void;
-  defaultValues?: Partial<OnSignInInput>;
-  urlLogo?: string;
-};
-
-export const AuthSignIn = ({
-  onSignIn,
-  onSignUp,
-  defaultValues,
-  onForgotPassword,
-}: AuthSignInProps) => {
-  const { intl } = useI18n();
-  const { setNotifications } = useNotifications();
-
-  React.useEffect(() => {
-    setNotifications(undefined);
-  }, [setNotifications]);
-
-  const schema = yup.object().shape({
-    email: yup
-      .string()
-      .required(
-        intl.formatMessage({
-          description: 'Email is a required field.',
-          defaultMessage: 'Enter your email address',
-        })
-      )
-      .email(
-        intl.formatMessage({
-          description: 'Invalid email.',
-          defaultMessage: 'Please, insert a valid e-mail',
-        })
-      ),
-    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(),
-    // remember: yup.boolean(),
-  });
-
-  const formMethods = useForm<OnSignInInput>({
-    defaultValues,
-    mode: 'onChange',
-    resolver: yupResolver(schema),
-  });
-
-  const onSubmitForm = (data: OnSignInInput) => {
-    return onSignIn(data);
-  };
-
-  return (
-    <Form
-      sx={{ maxWidth: '390px', width: '100%' }}
-      {...formMethods}
-      onSubmit={onSubmitForm}
-    >
-      <AuthCard
-        title={intl.formatMessage({
-          description: 'Sign in title.',
-          defaultMessage: 'Log in',
-        })}
-        buttonLabel={intl.formatMessage({
-          description: 'Button label.',
-          defaultMessage: 'Log in',
-        })}
-        isValidForm={formMethods.formState.isValid}
-        extraButton={
-          <Button
-            type="button"
-            variant="secondary"
-            sx={{ textAlign: 'center', display: 'initial' }}
-            onClick={onSignUp}
-            aria-label="sign-up"
-          >
-            {intl.formatMessage({
-              description: 'Sign up',
-              defaultMessage: 'Sign up',
-            })}
-          </Button>
-        }
-      >
-        <Flex sx={{ flexDirection: 'column', gap: 'xl' }}>
-          <FormFieldInput
-            name="email"
-            label={intl.formatMessage({
-              description: 'Email label.',
-              defaultMessage: 'Email',
-            })}
-          />
-          <FormFieldPassword
-            name="password"
-            label={intl.formatMessage({
-              description: 'Password label.',
-              defaultMessage: 'Password',
-            })}
-          />
-        </Flex>
-
-        <Flex sx={{ justifyContent: 'space-between', marginTop: 'lg' }}>
-          {/* TODO: temporally commented */}
-          {/* <FormFieldCheckbox
-            name="remember"
-            label={intl.formatMessage({
-              description: 'Remember',
-              defaultMessage: 'Remember',
-            })}
-          /> */}
-
-          <Text
-            sx={{ marginLeft: 'auto', cursor: 'pointer' }}
-            as={Link}
-            onClick={onForgotPassword}
-          >
-            {intl.formatMessage({
-              description: 'Forgot password?',
-              defaultMessage: 'Forgot password?',
-            })}
-          </Text>
-        </Flex>
-
-        <NotificationsBox />
-      </AuthCard>
-    </Form>
-  );
-};

package/src/AuthSignUp.tsx

@@ -1,143 +0,0 @@
-import * as React from 'react';
-import { AuthCard } from './AuthCard';
-import { Flex, Link, Text } from '@ttoss/ui';
-import {
-  Form,
-  FormFieldInput,
-  FormFieldPassword,
-  useForm,
-  yup,
-  yupResolver,
-} from '@ttoss/forms';
-import { NotificationsBox, useNotifications } from '@ttoss/react-notifications';
-import { PASSWORD_MINIMUM_LENGTH } from '@ttoss/cloud-auth';
-import { useI18n } from '@ttoss/react-i18n';
-import type { OnSignUp, OnSignUpInput } from './types';
-
-export type AuthSignUpProps = {
-  onSignUp: OnSignUp;
-  onReturnToSignIn: () => void;
-};
-
-export const AuthSignUp = ({ onSignUp, onReturnToSignIn }: AuthSignUpProps) => {
-  const { intl } = useI18n();
-  const { setNotifications } = useNotifications();
-
-  React.useEffect(() => {
-    setNotifications(undefined);
-  }, [setNotifications]);
-
-  const schema = yup.object().shape({
-    email: yup
-      .string()
-      .required(
-        intl.formatMessage({
-          description: 'Email is a required field.',
-          defaultMessage: 'Enter your email address',
-        })
-      )
-      .email(
-        intl.formatMessage({
-          description: 'Invalid email.',
-          defaultMessage: 'Invalid email',
-        })
-      ),
-    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',
-        })
-      ),
-  });
-
-  const formMethods = useForm<OnSignUpInput>({
-    mode: 'all',
-    resolver: yupResolver(schema),
-  });
-
-  const onSubmitForm = (data: OnSignUpInput) => {
-    return onSignUp(data);
-  };
-
-  return (
-    <Form
-      sx={{ maxWidth: '390px', width: '100%' }}
-      {...formMethods}
-      onSubmit={onSubmitForm}
-    >
-      <AuthCard
-        buttonLabel={intl.formatMessage({
-          description: 'Create account.',
-          defaultMessage: 'Sign up',
-        })}
-        title={intl.formatMessage({
-          description: 'Title on sign up.',
-          defaultMessage: 'Sign up',
-        })}
-        isValidForm={formMethods.formState.isValid}
-        extraButton={
-          <Text sx={{ cursor: 'pointer' }} onClick={onReturnToSignIn} as={Link}>
-            {intl.formatMessage({
-              description: 'Link to sign in on sign up.',
-              defaultMessage: "I'm already registered",
-            })}
-          </Text>
-        }
-      >
-        <Flex sx={{ flexDirection: 'column', gap: 'xl' }}>
-          <FormFieldInput
-            name="email"
-            label={intl.formatMessage({
-              description: 'Email label.',
-              defaultMessage: 'Email',
-            })}
-          />
-          <FormFieldPassword
-            name="password"
-            label={intl.formatMessage({
-              description: 'Password label.',
-              defaultMessage: 'Password',
-            })}
-          />
-          <FormFieldPassword
-            name="confirmPassword"
-            label={intl.formatMessage({
-              description: 'Confirm Password label.',
-              defaultMessage: 'Confirm password',
-            })}
-          />
-        </Flex>
-
-        <NotificationsBox />
-      </AuthCard>
-    </Form>
-  );
-};

package/src/index.ts

@@ -1,3 +0,0 @@
-export { AuthProvider, useAuth } from './AuthProvider';
-export { Auth } from './Auth';
-export * from './types';

package/src/types.ts

@@ -1,24 +0,0 @@
-export type OnSignInInput = {
-  email: string;
-  password: string;
-};
-
-export type OnSignIn = (input: OnSignInInput) => void;
-
-export type OnSignUpInput = {
-  email: string;
-  password: string;
-  confirmPassword: string;
-};
-
-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;