@ttoss/react-auth 2.0.9 → 2.1.1

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>
-  );
-};

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);
-};