@ttoss/react-auth 1.1.0

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@ttoss/react-auth",
+  "version": "1.1.0",
+  "description": "ttoss authentication module for React apps.",
+  "license": "UNLICENSED",
+  "author": "ttoss",
+  "contributors": [
+    "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "files": [
+    "dist",
+    "i18n",
+    "src"
+  ],
+  "scripts": {
+    "prebuild": "ttoss-i18n --no-compile",
+    "build": "tsup",
+    "test": "jest"
+  },
+  "typings": "./dist/index.d.ts",
+  "dependencies": {
+    "@ttoss/cloud-auth": "^0.2.0",
+    "@ttoss/forms": "^0.11.4",
+    "@xstate/react": "^3.0.1",
+    "xstate": "^4.35.0"
+  },
+  "peerDependencies": {
+    "@ttoss/react-i18n": "^1.17.2",
+    "@ttoss/react-notifications": "^1.18.3",
+    "@ttoss/ui": "^1.26.3",
+    "aws-amplify": "5.x.x",
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@ttoss/config": "^1.25.0",
+    "@ttoss/i18n-cli": "^0.2.0",
+    "@ttoss/react-i18n": "^1.17.2",
+    "@ttoss/react-notifications": "^1.19.0",
+    "@ttoss/test-utils": "^1.18.3",
+    "@ttoss/ui": "^1.27.0",
+    "aws-amplify": "^5.0.7"
+  },
+  "keywords": [
+    "React",
+    "authentication"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "01759d9c247bed2fe52ca580e87c0b21544cac49"
+}

package/src/Auth.tsx

@@ -0,0 +1,199 @@
+import * as React from 'react';
+import { Auth as AmplifyAuth } from 'aws-amplify';
+import { AuthConfirmSignUp } from './AuthConfirmSignUp';
+import { AuthSignIn } from './AuthSignIn';
+import { AuthSignUp } from './AuthSignUp';
+import { LogoContextProps, LogoProvider } from './AuthCard';
+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';
+
+type AuthState =
+  | {
+      value: 'signIn';
+      context: { email?: string };
+    }
+  | {
+      value: 'signUp';
+      context: Record<string, never>;
+    }
+  | {
+      value: 'signUpConfirm';
+      context: { email: string };
+    }
+  | {
+      value: 'signUpResendConfirmation';
+      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 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',
+          },
+        },
+      },
+      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 as any).email;
+        },
+      }),
+    },
+  }
+);
+
+const AuthWithoutLogo = () => {
+  const { isAuthenticated } = useAuth();
+
+  const [state, send] = useMachine(authMachine);
+
+  const { setLoading } = useNotifications();
+
+  const onSignIn = React.useCallback<OnSignIn>(
+    async ({ email, password }) => {
+      try {
+        setLoading(true);
+        await AmplifyAuth.signIn(email, password);
+        // toast('Signed In');
+      } catch (error) {
+        switch ((error as any).code) {
+          case 'UserNotConfirmedException':
+            await AmplifyAuth.resendSignUp(email);
+            send({ type: 'SIGN_UP_RESEND_CONFIRMATION', email } as any);
+            break;
+          default:
+          // toast(JSON.stringify(error, null, 2));
+        }
+      } finally {
+        setLoading(false);
+      }
+    },
+    [send, setLoading]
+  );
+
+  const onSignUp = React.useCallback<OnSignUp>(
+    async ({ email, password }) => {
+      try {
+        setLoading(true);
+        await AmplifyAuth.signUp({
+          username: email,
+          password,
+          attributes: { email },
+        });
+        // toast('Signed Up');
+        send({ type: 'SIGN_UP_CONFIRM', email } as any);
+      } catch (error) {
+        // toast(JSON.stringify(error, null, 2));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [send, setLoading]
+  );
+
+  const onConfirmSignUp = React.useCallback<OnConfirmSignUp>(
+    async ({ email, code }) => {
+      try {
+        setLoading(true);
+        await AmplifyAuth.confirmSignUp(email, code);
+        // toast('Confirmed Signed In');
+        send({ type: 'SIGN_UP_CONFIRMED', email } as any);
+      } catch (error) {
+        // toast(JSON.stringify(error, null, 2));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [send, setLoading]
+  );
+
+  const onReturnToSignIn = React.useCallback(() => {
+    send({ type: 'RETURN_TO_SIGN_IN' });
+  }, [send]);
+
+  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 as any).email}
+      />
+    );
+  }
+
+  return (
+    <AuthSignIn
+      onSignIn={onSignIn}
+      onSignUp={() => {
+        return send('SIGN_UP');
+      }}
+      defaultValues={{ email: (state.context as any).email }}
+    />
+  );
+};
+
+const withLogo = <T extends Record<string, unknown>>(
+  Component: React.ComponentType<T>
+) => {
+  const WithLogo = ({ logo, ...componentProps }: T & LogoContextProps) => {
+    return (
+      <LogoProvider logo={logo}>
+        <Component {...(componentProps as T)} />
+      </LogoProvider>
+    );
+  };
+
+  WithLogo.displayName = 'WithLogo';
+
+  return WithLogo;
+};
+
+export const Auth = withLogo(AuthWithoutLogo);

package/src/AuthCard.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { Button, Card, Flex, Link, Text } 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 LinkProps = {
+  label: string;
+  onClick: () => void;
+};
+
+type AuthCardProps = {
+  children: React.ReactNode;
+  title: string;
+  buttonLabel: string;
+  links?: LinkProps[];
+};
+
+export const AuthCard = ({
+  children,
+  title,
+  buttonLabel,
+  links = [],
+}: AuthCardProps) => {
+  const { logo } = React.useContext(LogoContext);
+
+  const { isLoading } = useNotifications();
+
+  return (
+    <Card sx={{ maxWidth: '564px' }}>
+      <Flex sx={{ flexDirection: 'column', gap: 3 }}>
+        {logo && (
+          <Flex sx={{ width: '100%', justifyContent: 'center' }}>{logo}</Flex>
+        )}
+        <Text
+          variant="title"
+          sx={{ alignSelf: 'center', marginY: 4, fontSize: 5 }}
+        >
+          {title}
+        </Text>
+        {children}
+        <Flex sx={{ justifyContent: 'space-between', marginTop: 3 }}>
+          <Button
+            type="submit"
+            aria-label="submit-login"
+            variant="cta"
+            disabled={isLoading}
+            sx={{ width: '100%' }}
+          >
+            {buttonLabel}
+          </Button>
+        </Flex>
+
+        <Flex
+          sx={{
+            justifyContent: 'space-between',
+            flexDirection: 'column',
+            gap: 3,
+            marginTop: 4,
+            color: 'text',
+          }}
+        >
+          {links.map((link) => {
+            return (
+              link && (
+                <Link key={link.label} onClick={link.onClick}>
+                  {link.label}
+                </Link>
+              )
+            );
+          })}
+        </Flex>
+      </Flex>
+    </Card>
+  );
+};

package/src/AuthConfirmSignUp.tsx

@@ -0,0 +1,70 @@
+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 const AuthConfirmSignUp = ({
+  email,
+  onConfirmSignUp,
+}: {
+  email: string;
+  onConfirmSignUp: 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<yup.TypeOf<typeof schema>>({
+    resolver: yupResolver(schema),
+  });
+
+  return (
+    <Form
+      {...formMethods}
+      onSubmit={({ code }) => {
+        return onConfirmSignUp({ code, email });
+      }}
+    >
+      <AuthCard
+        buttonLabel={intl.formatMessage({
+          description: 'Confirm',
+          defaultMessage: 'Confirm',
+        })}
+        title={intl.formatMessage({
+          description: 'Confirmation',
+          defaultMessage: 'Confirmation',
+        })}
+      >
+        <FormFieldInput
+          name="code"
+          label={intl.formatMessage({
+            description: 'Sign up confirmation code',
+            defaultMessage: 'Code',
+          })}
+        />
+      </AuthCard>
+    </Form>
+  );
+};

package/src/AuthContainer.tsx

@@ -0,0 +1,21 @@
+import { Flex, FlexProps } from '@ttoss/ui';
+
+export type AuthContainerProps = FlexProps & { backgroundImageUrl?: string };
+
+export const AuthContainer = ({ sx, ...props }: AuthContainerProps) => {
+  return (
+    <Flex
+      {...props}
+      sx={{
+        height: '100vh',
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: 0,
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        ...sx,
+      }}
+    />
+  );
+};

package/src/AuthProvider.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { Auth, Hub } from 'aws-amplify';
+
+type User = {
+  id: string;
+  email: string;
+  emailVerified: string;
+} | null;
+
+type Tokens = {
+  idToken: string;
+  accessToken: string;
+  refreshToken: string;
+} | null;
+
+const signOut = () => {
+  return Auth.signOut();
+};
+
+const AuthContext = React.createContext<{
+  signOut: () => Promise<any>;
+  isAuthenticated: boolean;
+  user: User;
+  tokens: Tokens;
+}>({
+  signOut,
+  isAuthenticated: false,
+  user: null,
+  tokens: null,
+});
+
+const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const [user, setUser] = React.useState<User>(null);
+
+  const [tokens, setTokens] = React.useState<Tokens>(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);
+
+    /**
+     * Check manually the first time.
+     */
+    updateUser();
+
+    return () => {
+      updateUserListener();
+    };
+  }, []);
+
+  const isAuthenticated = !!user;
+
+  return (
+    <AuthContext.Provider value={{ signOut, isAuthenticated, user, tokens }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  return React.useContext(AuthContext);
+};
+
+export default AuthProvider;

package/src/AuthSignIn.tsx

@@ -0,0 +1,111 @@
+import { AuthCard } from './AuthCard';
+import { Form, FormFieldInput, useForm, yup, yupResolver } from '@ttoss/forms';
+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;
+  defaultValues?: Partial<OnSignInInput>;
+  urlLogo?: string;
+};
+
+export const AuthSignIn = ({
+  onSignIn,
+  onSignUp,
+  defaultValues,
+}: AuthSignInProps) => {
+  const { intl } = useI18n();
+
+  const schema = yup.object().shape({
+    email: yup
+      .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: 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(),
+  });
+
+  const formMethods = useForm<OnSignInInput>({
+    defaultValues,
+    resolver: yupResolver(schema),
+  });
+
+  const onSubmitForm = (data: OnSignInInput) => {
+    return onSignIn(data);
+  };
+
+  return (
+    <Form {...formMethods} onSubmit={onSubmitForm}>
+      <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",
+            }),
+          },
+        ]}
+      >
+        <FormFieldInput
+          name="email"
+          label={intl.formatMessage({
+            description: 'Email label.',
+            defaultMessage: 'Email',
+          })}
+        />
+        <FormFieldInput
+          name="password"
+          label={intl.formatMessage({
+            description: 'Password label.',
+            defaultMessage: 'Password',
+          })}
+        />
+      </AuthCard>
+    </Form>
+  );
+};