SignUp Page

SignUp.tsx

.
.
import { useNavigate } from "react-router-dom";
import useAuth from "../hooks/useAuth";
import { useEffect } from "react";
import LoadingSpinner from "../components/LoadingSpinner";

export default function SignUp() {
.
.
  const {
    signUp,
    isAuthenticated,
    isAuthenticating,
    unverifiedAccount,
    confirmAccount,
  } = useAuth();

 .
 .
 
  useEffect(() => {
    if (isAuthenticated) {
      navigate("/", { replace: true });
    }
  }, [isAuthenticated]);

  if (isAuthenticating || isAuthenticated) {
    return <LoadingSpinner />;
  }
  
  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
     .
     .
        {!confirmMode ? (
          <Formik
            initialValues={{
              firstName: "",
              lastName: "",
              email: "",
              password: "",
              submit: null,
            }}
            validationSchema={validationSchema}
            onSubmit={async (
              values: any,
              { setErrors, setStatus, setSubmitting }: any
            ): Promise<void> => {
              try {
                setSubmitting(true);
                // sign up user
                await signUp({
                  firstName: values.firstName,
                  lastName: values.lastName,
                  email: values.email,
                  password: values.password,
                });
                setConfirmMode(true);
                setSubmitting(false);
              } catch (err: any) {
                setStatus({ success: false });
                setErrors({ submit: err.message });
                setSubmitting(false);
              }
            }}
          >
            {({
              errors,
              handleChange,
              handleSubmit,
              isSubmitting,
              touched,
              values,
            }): JSX.Element => (
              <Box
               component="form"
               noValidate
               onSubmit={handleSubmit}
               sx={{ mt: 3 }}
              >
              .
              .
              </Box>
            )}
          </Formik>
        ) : (
          <>
            <Divider sx={{ my: 2 }} />
            {/*Confirmation Code */}
            <Formik
              initialValues={{
                code: "",
                submit: null,
              }}
              validationSchema={Yup.object({
                code: Yup.string()
                  .min(6, "Confirmation Code should contain 6 characters")
                  .required("Code is required"),
              })}
              onSubmit={async (
                values: any,
                { setErrors, setStatus, setSubmitting }: any
              ): Promise<void> => {
                try {
                  setSubmitting(true);
                  // confirm sign up user
                  await confirmAccount({ code: values.code });
                  setSubmitting(false);
                  // navigate to dashboard
                  navigate("/", { replace: true });
                } catch (err: any) {
                  setStatus({ success: false });
                  setErrors({ submit: err.message });
                  setSubmitting(false);
                }
              }}
            >
              {({
                errors,
                handleChange,
                handleSubmit,
                isSubmitting,
                touched,
                values,
              }): JSX.Element => (
                <Grid
                  component="form"
                  onSubmit={handleSubmit}
                  container
                  spacing={2}
                >
                . 
                .
                </Grid>
              )}
            </Formik>
          </>
        )}
   .
   .
    </Container>
  );
}