如何在JS文件中使用Firebase Authentication？解决报错与对象访问问题

我遇到了错误：createUserWithEmailAndPassword is not defined。请问如何在auth.js文件中访问index.html里初始化的auth对象？是将其作为参数传递，还是在模块化JavaScript配置中有更好的Firebase认证管理方式？恳请指导！

相关代码 #

HTML代码 #

<form id="signup-form">
    <div class="input-field">
        <input type="email" id="signup-email" required />
        <label for="signup-email">Email address</label>
    </div>
    <div class="input-field">
        <input type="password" id="signup-password" required />
        <label for="signup-password">Password</label>
    </div>
    <button type="submit">Sign Up</button>
</form>

<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
    import { getAuth } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";

    const firebaseConfig = {
        apiKey: "API_KEY",
        authDomain: "AUTH_DOMAIN",
        projectId: "PROJECT_ID",
        storageBucket: "STORAGE_BUCKET",
        messagingSenderId: "MESSAGING_SENDER_ID",
        appId: "APP_ID",
        measurementId: "MEASUREMENT_ID"
    };

    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);  // Initializes the auth service
</script>
<script src="scripts/auth.js"></script>

JS代码（scripts/auth.js） #

const signupForm = document.querySelector('#signup-form');

signupForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const email = signupForm['signup-email'].value;
    const password = signupForm['signup-password'].value;

    createUserWithEmailAndPassword(auth, email, password).then((cred) => {
        console.log(cred);
    }).catch((error) => {
        console.error("Error creating user:", error);
    });
});

1. 先解决createUserWithEmailAndPassword is not defined错误 #

该错误是因为auth.js中未导入对应的Firebase Auth方法，需在auth.js顶部添加导入语句：

// 在auth.js开头添加
import { createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";

2. 共享auth对象的两种有效方式 #

方式一：挂载到全局对象（快速实现） #

在HTML的module脚本中，将auth赋值给window全局对象，让auth.js可以直接访问：

<script type="module">
    // ... 原有初始化代码 ...
    const auth = getAuth(app);
    window.auth = auth; // 挂载到全局
</script>

方式二：模块化管理（推荐规范） #

将Firebase初始化逻辑抽成独立模块，通过ES模块导出/导入共享auth对象，避免全局变量污染：

步骤1：创建scripts/firebase.js

import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
import { getAuth } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";

const firebaseConfig = {
    apiKey: "API_KEY",
    authDomain: "AUTH_DOMAIN",
    projectId: "PROJECT_ID",
    storageBucket: "STORAGE_BUCKET",
    messagingSenderId: "MESSAGING_SENDER_ID",
    appId: "APP_ID",
    measurementId: "MEASUREMENT_ID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app); // 导出auth对象

步骤2：修改HTML引入模块

<form id="signup-form">
    <!-- 表单内容不变 -->
</form>

<script type="module" src="scripts/firebase.js"></script>
<script type="module" src="scripts/auth.js"></script>

步骤3：修改auth.js导入auth对象

import { auth } from './firebase.js';
import { createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";

const signupForm = document.querySelector('#signup-form');

signupForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const email = signupForm['signup-email'].value;
    const password = signupForm['signup-password'].value;

    createUserWithEmailAndPassword(auth, email, password).then((cred) => {
        console.log(cred);
    }).catch((error) => {
        console.error("Error creating user:", error);
    });
});

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