React firebase 9 如何删除当前用户帐户？

Question

我正在做一个反应基础应用程序，它使用 firebase 身份验证登录用户。那里一切正常，但现在我想允许用户删除他们的帐户，但我不知道该怎么做。我尝试了 firebase documentacion 中的内容，但我知道出于安全考虑，我需要先对用户重新进行身份验证，而且我找不到有关如何使用 reauthenticateWithCredential() 函数的教程。

这是我的配置文件代码，在用户删除帐户之前出现一个模式作为预热，然后它调用我的 firebase 文件中的一个函数。因为看起来我需要用户再次写下他们的密码，所以模态中有一个表单将它发送到函数。

import { Fragment, useEffect, useState } from "react";
import { useRouter } from "next/router";
import { onSnapshot, query, where  } from 'firebase/firestore';
import { useAuth } from "../../auth/authUserProvider";
import { usersColRef, deleteSignedUser, auth } from "../../firebase";
import styles from "../profileRender/profileRender.module.scss";
import Modal from "react-bootstrap/Modal";

const Profile = ({queryUserId}) => {
    const router = useRouter();
    
    const { authUser, loading } = useAuth();
    const [userId, setUserId] = useState("");
    const [showModal, setShowModal] = useState(false);
    const [isUser, setIsUser] = useState(false);
    const [isLoading, setIsLoading] = useState(true);
    const [profileCreated, setProfileCreated] = useState(false);
    const [userProfile, setUserProfile] = useState({
            "userId" : "",
            "username" : "",
            "userDescription" : "",
            "profilePicture" : ""
    });


    useEffect(() => {
      //here i get the user profile info from firebase

    }, [queryUserId ,userId, authUser, profileCreated, authUser]);

    const renderEdit = () => {router.push("/profile/edit");}
    const handleOpenModal = () => {setShowModal(true)};
    const handleCloseModal = () => {setShowModal(false)};
    const deleteUser = (e) => {
        e.preventDefault();
        deleteSignedUser(e.target[0].value);
    }

    const ProfileRender = () => {
        if(profileCreated === false){
            if(isLoading === true){
                return (
                    <div className="page-background-setted-height">
                        <p>Loading...</p>
                    </div>
                    
                )
            } else {
                return (
                    <div className="page-background-setted-height">
                        <span className={styles.profile__title}>My profile</span> 
                        <hr className={styles.profile__title__hr}></hr>
                        <div className={styles.profile__createAcount}>
                            <h3 className={styles.profile__createAcount__item}>Create your profile</h3>
                            <button onClick={renderEdit} className={`btn btn-dark ${styles.profile__createAcount__item}`}>Create</button>  
                        </div>
                    </div>
                )
            }
            
        } else {
            if(isLoading === true){
                return (
                    <div className="page-background-setted-height">
                        <p>Loading</p>
                    </div>
                    
                )
            } else {
                return(
                    <div className="page-background">
                        <div className={styles.profile}>
                        <span className={styles.profile__title}>My profile</span> 
                        <hr className={styles.profile__title__hr}></hr>
                            <div className={styles.profile__top}>
                                <img className="" src={userProfile.profilePicture}/>
                                <div className={styles.profile__top__name}>
                                    <div><h3>{userProfile.username}</h3></div>
                                </div> 
                            </div>
                            <h4>About me...</h4>
                            <h6>{userProfile.userDescription}</h6>
                            {isUser && 
                            <div className={styles.profile__actions}>
                                <button onClick={renderEdit} className="btn btn-dark">Edit profile</button>
                                <button type="button" onClick={handleOpenModal} className="btn btn-danger">Delete profile</button>
                            </div>
                            }
                        </div>
                        ///the modal element
                        <div>
                        <Modal show={showModal} onHide={handleCloseModal}>
                          <Modal.Header closeButton>
                            <Modal.Title>Are you sure?</Modal.Title>
                          </Modal.Header>
                        <Modal.Body>
                          <h3>Once you delete your profile, all your blogs will be deleted permanently.</h3>
                          <h5>In order to continue, please write your password again</h5>
                          <form onSubmit={deleteUser}>
                              <label>Password</label>
                              <input type="password"/>
                              <button type="submit" className="btn btn-danger">Delete profile</button>
                          </form>
                        </Modal.Body>
                          <Modal.Footer>
                            <button className="btn btn-primary" onClick={handleCloseModal}>
                              No, thanks
                            </button>
                          </Modal.Footer>
                        </Modal>
                        </div>
                    </div>
                )
            }  
        }
    }

    return (
        <Fragment>
        <ProfileRender />
        </Fragment>
    )
}



export default Profile;

这是我从 firebase 调用的函数。

import { initializeApp } from "firebase/app";
import { 
  getAuth, 
  createUserWithEmailAndPassword,  
  signOut,
  signInWithEmailAndPassword,
  deleteUser,
  EmailAuthProvider,
  userProvidedPassword,
  reauthenticateWithCredential
} from "firebase/auth";
import { getStorage } from "firebase/storage";
import {getFirestore, collection, addDoc, deleteDoc, doc, updateDoc } from 'firebase/firestore';


const firebaseConfig = {...};
initializeApp(firebaseConfig);
const db = getFirestore();

const auth = getAuth();

const storage = getStorage();

let user;

///AUTH FUNCTIONS

const createAccount = (values) => {
  createUserWithEmailAndPassword(auth, values.email, values.password)
  .then((cred) => {
    user = cred.user;
    localStorage.setItem("user", cred.user.uid);
  })
  .catch(err => {
    console.log(err.message)
  
  })
}

const signUserOut = () => {
  signOut(auth)
  .then(() => {
    user = "";
  })
  .catch((err) => {
    console.log(err)
  })
};

const signUserIn = (values) => {
  signInWithEmailAndPassword(auth, values.email, values.password)
  .then((cred) => {
    user = cred.user;
    localStorage.setItem("user", cred.user.uid);
    
  })
  .catch((err) => {
  })
};

const deleteSignedUser = async (password) => {
  const   = EmailAuthProvider.credential(
    auth.currentUser.email,
    password
    )
  const result = await reauthenticateWithCredential(
    auth.currentUser, 
    credential
    ) 
    deleteUser(result).then(() => {
      console.log("success in deleting")
      localStorage.removeItem("user");
  }).catch(err => console.log(err));  */
}

当我运行这个代码时，我得到这个错误：

TypeError: (0 , firebase_util__WEBPACK_IMPORTED_MODULE_0_.getModularInstance)(...).delete 不是函数

有人可以帮我解决这个问题吗？

Answer 1

将reauthenticateWithCredential()returnsUserCredential but deleteUser() takes User作为参数。尝试重构如下所示：

const deleteSignedUser = async (password) => {
  const credential = EmailAuthProvider.credential(
    auth.currentUser.email,
    password
  )

  const result = await reauthenticateWithCredential(
    auth.currentUser,
    credential
  )

  // Pass result.user here
  await deleteUser(result.user)
 
  console.log("success in deleting")
  localStorage.removeItem("user");
}

React firebase 9 如何删除当前用户帐户？

React firebase 9 how to delete current user account?

javascript

firebase

reactjs

firebase-authentication