Firebase注册表单无法创建新用户，寻求技术解决建议

我正在学习使用Firebase开发小型项目，编写了如下HTML注册表单及JavaScript代码。配置认证功能时，点击注册按钮既无法创建新用户，也未弹出错误提示弹窗，恳请各位提供解决建议。

HTML代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>EduVerse - Sign Up</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/sign-up.css">
        <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
        <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />
    </head>
    <body>
        <div class="form_container">
            <div class="title_container">
                <p class="title">Create a new Account</p>
                <span class="subtitle">Already have an account? &nbsp;<a href="sign-in.html">Sign In</a></span>
            </div>
            <br>
            <div class="bottom-sect">
                <div class="left">
                    <div class="input_container">
                        <label class="input_label" for="user_field">User Name</label>
                        <input placeholder="Name1234" name="input-name" type="text" class="input_field" id="username">
                    </div>
                    <div class="input_container">
                        <label class="input_label" for="email_field">Email</label>
                        <input placeholder="name@mail.com" name="input-name" type="text" class="input_field" id="email">
                    </div>
                    <div class="input_container">
                        <label class="input_label" for="password_field">Password</label>
                        <input placeholder="Password" name="input-name" type="password" class="input_field" id="password">
                    </div>
                    <button type="submit" class="sign-up_btn" id="signUp">
                        <span>Sign Up</span>
                    </button>
                </div>
                <div class="separator">
                    <span>Or</span>
                </div>
                <div class="right">
                    <button type="submit" class="sign-up_ggl">
                        <span>Sign Up with Google</span>
                    </button>
                    <button type="submit" class="sign-up_apl">
                        <span>Sign Up with Apple</span>
                    </button>
                </div>
            </div>
            <p class="note">Terms of use &amp; Conditions</p>
        </form>
    </body>
    <script type="module" src="js/sign-up.js"></script>
</html>

JavaScript代码 #

// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-app.js";
import { getDatabase } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-database.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-analytics.js";
import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-auth.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "AIzaSyDqWEjfCm8D-bvD-Zt_UhBZzScgzGaL-v0",
    authDomain: "eduverse-7d36a.firebaseapp.com",
    projectId: "eduverse-7d36a",
    storageBucket: "eduverse-7d36a.appspot.com",
    messagingSenderId: "706418380914",
    appId: "1:706418380914:web:ab8091755c0204c4e272eb",
    measurementId: "G-V57JJGKFR8"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const database = getDatabase(app);
const auth = getAuth();
signUp.addEventListener('click', (e) => {

    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;

    createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
        // Signed in 
        const user = userCredential.user;
        alert("userInitialized");
    })
    .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        alert(errorMessage);
    });
})

解决建议 #

• 阻止按钮默认提交行为：注册按钮类型为submit，点击会触发页面刷新，直接中断Firebase代码执行。需在事件回调开头添加阻止默认行为的代码：

  signUp.addEventListener('click', (e) => {
      e.preventDefault(); // 新增此行
      // 原有逻辑...
  })
  

• 确保DOM元素正确获取：直接使用signUp变量可能因DOM未完全加载导致事件绑定失败，建议显式获取元素：

  const signUpBtn = document.getElementById('signUp');
  signUpBtn.addEventListener('click', (e) => {
      e.preventDefault();
      // 原有逻辑...
  })
  

• 关联Firebase Auth与App实例：当前getAuth()未传入初始化的App实例，需修正为：

  const auth = getAuth(app); // 传入已初始化的app变量
  

• 修复HTML标签不匹配问题：HTML开头用了<div class="form_container">，结尾却是</form>，标签不闭合会导致DOM解析异常。将开头的<div>改为<form>，或结尾的</form>改为</div>。

• 查看控制台错误信息：打开浏览器开发者工具（F12）的Console面板，检查是否有模块加载失败、变量未定义等报错，这些信息能直接定位问题根源。

• 检查Firebase控制台配置：在Firebase控制台的Authentication模块中，确认已开启电子邮件/密码登录方式，未开启的话createUserWithEmailAndPassword调用会直接失败。

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