Firebase身份验证会自动登录到其退出的帐户，而无需输入电子邮件和密码

我正在使用firebase认证和firestore在我的网站上创建用户认证。
然而，在使用firebase方法createUserWithEmailAndPassword和signInWithEmailAndPassword成功创建用户身份验证后，我似乎无法注销当前用户。
我的onAuthStateChanged不会让我特别在调用它的组件上。我的意思是，如果我在登录组件上调用onAuthStateChanged，当我导航到登录页面时，我会自动登录到我注销的帐户。如果在home组件上调用onAuthStateChanged方法，当我导航到home时，我自动登录到我退出的帐户。请告诉我，当我退出帐户时，我可以做些什么来确保我只能通过使用电子邮件和密码登录才能重新登录？
这里是注册和登录代码

const collectionUserRef = collection(db, "user");

  const provider = new GoogleAuthProvider();

  const [user, setUser] = useState();
  const [loading, setLoading] = useState(true);

  // SignIn WithGoogle
  const SignInWithGoogle = async () => {
    try {
      const popup = await signInWithPopup(auth, provider);
      const user = popup.user;
      const Query = query(collectionUserRef, where("uid", "===", 
user.uid));
      const docs = await getDocs(Query);
      if (docs.docs.legnth === 0)
        await (collectionUserRef,
        {
          uid: user?.uid,
          name: user?.displayName,
          email: user?.email,
          iamge: user?.photo,
          authProvider: popup?.providerId,
        });
    } catch (error) {
      console.error(error);
      alert(error.message);
    }
  };

 // SignIn WithEmailandPassword handler
  const signInHandleSubmit = async (email, password) => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
    } catch (error) {
      console.error(error);
      alert(error.message);
    }
  };

 // SignUp WithEmailandPassword handler
  const signUpHandleSubmit = async (
    firstname,
    lastname,
    username,
    email,
    password
  ) => {
    try {
      const userCredentials = await createUserWithEmailAndPassword(
        auth,
        email,
        password
      );
      const user = userCredentials.user;

      await addDoc(collectionUserRef, {
        uid: user.uid,
        firstname,
        lastname,
        username,
        providerId: "email/password",
        email: user.email,
      });

      await updateProfile(user, { displayName: username });
    } catch (error) {
      console.error(error);
      alert(error.message);
    }
  };

字符串
这是我的home组件中的onAuthStateChanged方法

useEffect(() => {
    setLoading(true);
    onAuthStateChanged(auth, (currentUser) => {
      if (currentUser) {
        setUser(currentUser);
        setLoading(true);
      } else {
        setUser(null);
        setLoading(false);
      }
    });
  }, [setUser]);

型
下面是我如何在我的注册和登录页面上使用它

//USER NAMES AND PASSWORD RULES
const NAME_REGX = /^[a-zA-Z-]{3,23}$/;
const USER_REGX = /^[a-zA-Z][A-Za-z0-9-_]{3,23}$/;
const PWD_REGX =
  /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*()_+{}\[\]:;<>,.?

型
[-]）.{4，24}$/;

const EMAIL_REGX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

const Rgistration = () => {
  const { signUpHandleSubmit } = useGlobalContext();

 
  const navigate = useNavigate();

  const [firstName, setFirstName] = useState("");
  const [firsNameFocus, setFirstNameFocus] = useState(false);
  const [validFirstName, setvalidFirstName] = useState(false);

  const [lastName, setLastName] = useState("");
  const [lastNameFocus, setLastNameFocus] = useState(false);
  const [validLastName, setvalidLastName] = useState(false);

  const [user, setUser] = useState("");
  const [validUser, setValidUser] = useState(false);
  const [userFocus, setUserFocus] = useState(false);

  const [email, setEmail] = useState("");
  const [validEmail, setValidEmail] = useState(false);
  const [emailFocus, setEmailFocus] = useState(false);

  const [pwd, setPwd] = useState("");
  const [validPwd, setValidPwd] = useState(false);
  const [pwdFocus, setPwdFocus] = useState(false);

  const [matchPwd, setMatchPwd] = useState("");
  const [validMatch, setValidMatch] = useState(false);
  const [matchFocus, setMatchFocus] = useState(false);

  //On logiN
  const [errorMsg, setErrorMsg] = useState("");
  // const [success, setSuccess] = useState(false);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    userRefFocus.current.focus();
  }, []);

  useEffect(() => {
    const checkNameRules = NAME_REGX.test(firstName);
    setvalidFirstName(checkNameRules);
  }, [firstName]);

  useEffect(() => {
    const checkNameRules = NAME_REGX.test(lastName);
    setvalidLastName(checkNameRules);
  }, [lastName]);

  useEffect(() => {
    const checkUserRules = USER_REGX.test(user);
    console.log(checkUserRules);
    console.log(user);
    setValidUser(checkUserRules);
  }, [user]);

  useEffect(() => {
    const checkEmailRules = EMAIL_REGX.test(email);
    console.log(checkEmailRules);
    console.log(email);
    setValidEmail(checkEmailRules);
  }, [email]);

  useEffect(() => {
    const checkPWDRules = PWD_REGX.test(pwd);
    console.log(checkPWDRules);
    console.log(pwd);
    setValidPwd(checkPWDRules);
    const pwdMatch = pwd === matchPwd;
    setValidMatch(pwdMatch);
  }, [pwd, matchPwd]);

  useEffect(() => {
    setErrorMsg("");
  }, [user, pwd, matchPwd]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    //if button enabled with JS hack
    const v1 = USER_REGX.test(user);
    const v2 = EMAIL_REGX.test(email);
    const v3 = PWD_REGX.test(pwd);
    const v4 = NAME_REGX.test(firstName);
    const v5 = NAME_REGX.test(lastName);
    const v6 = PWD_REGX.test(matchPwd);

    if (v1 && v2 && v3 && v4 && v5 && v6) {
      try {
        await signUpHandleSubmit(firstName, lastName, user, email, 
pwd);
        setLoading(true);
        navigate("/SignIn");
        console.log("Account succesfully created");
      } catch (error) {
        console.error("Error Occured during registration:", error);
        if (error.response) {
          console.error("Firebase Error response:", 
error.response.data);
        }
      }
    } else {
      setLoading(false);
      alert("There is a missing field");
    }
  };

  return (
    <section className="Register-card">
   //input details
    </section>
  );
};

//Sig-in component

const USER_REGX =
  /^(?:[a-zA-Z][A-Za-z0-9-_]{3,23}|[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.

型
[a-zA-Z]{2，}）$/; const PWD_REGX = /^（？=. [a-z]）（？=.[A-Z]）（？=.[0-9]）（？=.[！@#$%^&*（）_+{}[]：;<>，.？~/-]）.{4，24}$/;

const SignIn = () => {
  const userRefFocus = useRef();
  const errorRefAlert = useRef();
  const navigate = useNavigate();

  const [usernameOrEmail, setUsernameOrEmail] = useState("");
  const [validUsernameOrEmail, setValidUsernameOrEmail] = 
useState(false);

  const [pwd, setPwd] = useState("");
  const [validPwd, setValidPwd] = useState(false);
  const [pwdFocus, setPwdFocus] = useState(false);

  const [errorMsg, setErrorMsg] = useState("");

  const [loading, setLoading] = useState(false);

  const { signInHandleSubmit, SignInWithGoogle, user, userData } =
    useGlobalContext();

  useEffect(() => {
    const checkUserRules = USER_REGX.test(usernameOrEmail);
    console.log(checkUserRules);
    console.log(usernameOrEmail);
    setValidUsernameOrEmail(checkUserRules);
  }, [usernameOrEmail]);

  useEffect(() => {
    const checkPwdRules = PWD_REGX.test(pwd);
    console.log(checkPwdRules);
    console.log(pwd);
    setValidPwd(checkPwdRules);
  }, [pwd]);

  useEffect(() => {
    setErrorMsg("");
  }, [usernameOrEmail, pwd]);

  //Sign in handler
  const handleSubmit = async (e) => {
    e.preventDefault();
    const v1 = USER_REGX.test(usernameOrEmail);
    const v2 = PWD_REGX.test(pwd);
    if (v1 && v2) {
      try {
        await signInHandleSubmit(usernameOrEmail, pwd);
        setLoading(true);
        navigate("/");
      } catch (error) {
         navigate("/SignIn");
        console.error("Error Occured while signing in:", error);
        alert("Invalid Username/Email/Password");
      }
    } else {
      setLoading(false);
      navigate("/SignIn");
      alert("Invid Username/Email/Password");
    }
  };

  return (
    <section className="Register-card">
 sign in details
    </section>
  );
};

型

Firebase身份验证会自动登录到其退出的帐户，而无需输入电子邮件和密码

1条答案

相关问题

热门标签

最新问答