I have created a signup form using and odne authentiaction using firebase. I works fine normally. But when i enter the email address that i already been used for sign up, then the default firebase error pop-up saying something like "email already in use". But afther this error, when i change the email and click on submit, nothing happens. The form is not submitted again. When I refresh the page and enter the all values again (unique email address), then the form is submitted.

I have to make it work like, when someone enter the emial address that already exists, then an error should pop up, but when someone changes the email then the form should be submitted.

here is my code of signup component

import { Link, useNavigate } from "react-router-dom";
import styled from "styled-components";
import { useState} from "react";
import { auth } from "../firebase";
import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
import Alert from "./Alert";

function SignUp() {
  const [email, setEmail] = useState("");
  const [Password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [submitBtnDisabled, setSubmitBtnDisabled] = useState(false);
  const [userName, setUserName] = useState("");
  const [errorMessage, setErrorMessage] = useState(
    {
      show: false,
      msg: "",
    }
  );
  const navigate = useNavigate();

  const showError = (show = false, msg = "") => {
    setErrorMessage({ show, msg });
  };



  const submitHandler = (event) => {
    event.preventDefault();
    if (!userName || !Password || !email || !confirmPassword) {
      // setErrorMessage("Fill all fields");
      showError(true, "Fill all the fields")
      return;
    }
    if (Password !== confirmPassword) {
      // setErrorMessage("Password and Confirm password not matches");
      showError(true,"Password field not matches" )
      return;
    }
    setErrorMessage("");
    setSubmitBtnDisabled(true);
    createUserWithEmailAndPassword(auth, email, Password)
      .then(async (userDetails) => {
        setSubmitBtnDisabled(false);
        const user = userDetails.user;
        await updateProfile(user, {
          displayName: userName,
        });
        navigate("/home");
      })
      .catch((error) => {
        // setErrorMessage(error.message);
        if (error.code === "auth/email-already-in-use") {
          showError(true, "The email address is already in use");
      } else if (error.code === "auth/invalid-email") {
          showError(true, "The email address is not valid.");
      } else if (error.code === "auth/operation-not-allowed") {
          showError(true, "Operation not allowed.");
      } else if (error.code === "auth/weak-password") {
          showError(true, "The password is too weak.");
      }else{
        showError(true, error.message)
      }

      return;
        
      });
  };

  

  return (
    <Container>
      <Logo>
        <p>Cod3rs</p>
      </Logo>
      <Form>
      {errorMessage.show && <Alert {...errorMessage} removeError={showError} />}

        <input
          type="text"
          placeholder="User Name"
          value={userName}
          onChange={(event) => setUserName(event.target.value)}
        />
        <input
          type="email"
          placeholder="Email" 
          value={email}
          onChange={(event) => setEmail(event.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={Password}
          onChange={(event) => setPassword(event.target.value)}
        />
        <input
          type="password"
          placeholder=" Confirm Password"
          value={confirmPassword}
          onChange={(event) => setConfirmPassword(event.target.value)}
        />
        <button
          className="signUp-btn"
          disabled={submitBtnDisabled}
          onClick={submitHandler}
        >
          Sign Up
        </button>
      </Form>
      <AlreadyLine>
        Already have an account? <Link to="/">Login</Link>
      </AlreadyLine>

      <SignUpLine>
        <p> Or sign up with</p>
      </SignUpLine>
      <ButtonConatiner>
        <button className="google-signup-btn">
          <img src="/images/google-logo.png" alt="" /> Sign Up with Google
        </button>
        <button className="github-signup-btn">
          <img src="/images/github-logo.png" alt="" /> Sign Up with Github
        </button>
      </ButtonConatiner>
    </Container>
  );
}



export default SignUp;

here is my alert component

import React from "react";
import { useEffect } from "react";
import styled from "styled-components";

function Alert({ msg, removeError }) {
  useEffect(() => {
    const timeout = setTimeout(() => {
      removeError();
    }, 3000);
    return () => clearTimeout(timeout);
  }, [removeError]);
  return  <MSG>{msg}</MSG>;

//   
}

CodePudding user response：

I think this is because there is no setSubmitBtnDisabled(false); in you catchin the function submitHandler

CodePudding user response：

That is because you disabled your button with setSubmitBtnDisabled(false), your code is not running at the point where you enabled it again. Firebase fn exists as soon as it gets error returned.

Try setSubmitBtnDisabled(false) comment out this peace of code.