React + Firebase中如何实现无需发邮件的密码重置系统

你当前代码使用的sendPasswordResetEmail是Firebase Auth提供的邮件重置流程，和你要实现的「表单提交新密码直接覆盖旧密码」需求完全不匹配，且现有代码存在多个会直接导致运行异常的问题：

• 未引入useState钩子，直接调用状态声明会触发React运行错误
• 密码输入框未绑定状态变量，无法获取用户输入的新密码值
• 重置逻辑直接写在组件渲染层，每次组件重渲染都会自动触发，没有绑定到表单提交事件
• 不符合Firebase安全规则：未登录态用户不允许直接凭邮箱修改任意账号密码，如果跳过身份校验直接开放改密码接口，任何人只要知道他人邮箱就能盗用对应账号。

以下代码适配「已登录用户提交新密码重置自己账号密码」的场景，完全移除邮件发送逻辑，补上必要的身份校验和错误提示：

import './ResetPassword.css'
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { getAuth, updatePassword, reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth";

function ResetPassword() {
    const [currentPassword, setCurrentPassword] = useState('')
    const [newPassword, setNewPassword] = useState('')
    const [errorTip, setErrorTip] = useState('')
    const [successTip, setSuccessTip] = useState('')
    const navigate = useNavigate()
    const auth = getAuth();

    const handleResetSubmit = async (e) => {
        e.preventDefault()
        setErrorTip('')
        setSuccessTip('')
        const user = auth.currentUser
        if (!user) {
            setErrorTip('请先登录后再操作密码重置')
            return
        }
        try {
            // Firebase安全要求：修改密码前必须重新校验用户身份，此处用原密码做校验
            const credential = EmailAuthProvider.credential(
                user.email,
                currentPassword
            )
            await reauthenticateWithCredential(user, credential)
            // 身份校验通过后更新为新密码
            await updatePassword(user, newPassword)
            setSuccessTip('密码重置成功，3秒后跳转到登录页')
            setTimeout(() => {
                navigate('/login')
            }, 3000)
        } catch (error) {
            switch(error.code) {
                case 'auth/wrong-password':
                    setErrorTip('原密码输入错误，请重新输入')
                    break
                case 'auth/weak-password':
                    setErrorTip('新密码强度不足，长度不能少于6位')
                    break
                default:
                    setErrorTip(`重置失败：${error.message}`)
            }
        }
    }

    return (
        <div className="resetPassword-main">
            <div className="resetPassword-container">
                <h2>重置密码</h2>
                {errorTip && <div className="error-tip" style={{color: 'red'}}>{errorTip}</div>}
                {successTip && <div className="success-tip" style={{color: 'green'}}>{successTip}</div>}
                <div className="resetPassword-form">
                    <form onSubmit={handleResetSubmit}>
                        <label>原密码</label> <br />
                        <input 
                            className="resetCurrentPwInput" 
                            placeholder="请输入当前登录密码" 
                            type="password" 
                            value={currentPassword}
                            onChange={(e) => setCurrentPassword(e.target.value)}
                            required 
                        /> <br/>

                        <label>新密码</label> <br />
                        <input 
                            className="resetPwInput" 
                            placeholder="请输入新密码" 
                            type="password"
                            value={newPassword}
                            onChange={(e) => setNewPassword(e.target.value)}
                            required
                        /> <br/>

                        <button className="resetBtn" type="submit">确认重置密码</button>
                    </form>
                </div>
            </div>
        </div>
    )
}

export default ResetPassword;

• 如果你要实现未登录状态下的无邮件密码重置，不能跳过身份校验环节。你可以将上述代码中的原密码校验逻辑替换为短信验证码校验、密保问题校验等其他身份核验方式，校验通过后必须通过Firebase Admin SDK在服务端完成密码更新，绝对不要在前端直接开放无校验的改密码接口。
• 已登录场景下不需要额外输入邮箱，auth.currentUser会自动获取当前登录用户的账号信息。
• 所有Firebase Auth相关的异步逻辑必须做错误捕获，给用户返回明确的操作提示，不要留空的catch块。

内容的提问来源于stack exchange，提问作者Adele