Firebase UI认证示例报错：未创建[DEFAULT] Firebase应用

问题根源 #

你遇到的错误核心有两个：

1. SDK版本混用：同时加载了Firebase的兼容模式（firebase-app-compat.js）和模块化SDK（通过import加载的firebase-app.js），两者的初始化逻辑不互通，导致兼容模式下的firebase.auth()找不到已初始化的App。
2. 脚本执行顺序问题：type="module"的脚本是异步执行的，即使它写在FirebaseUI初始化脚本前面，实际执行顺序反而靠后，导致firebaseui.auth.AuthUI初始化时，Firebase还没完成初始化。

解决方案 #

统一使用Firebase兼容模式（适配FirebaseUI v6.x的API），调整脚本顺序确保初始化优先执行：

修正后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Sample FirebaseUI App</title>
    <!-- 只加载Firebase兼容模式SDK -->
    <script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
    <!-- 先初始化Firebase，确保在FirebaseUI之前执行 -->
    <script type="text/javascript">
      // Your web app's Firebase configuration
      const firebaseConfig = {
        apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
      };
      // 使用兼容模式初始化Firebase
      firebase.initializeApp(firebaseConfig);
    </script>
    <!-- 加载FirebaseUI资源 -->
    <script src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.js"></script>
    <link
      type="text/css"
      rel="stylesheet"
      href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css"
    />
    <!-- 初始化FirebaseUI -->
    <script type="text/javascript">
      // FirebaseUI config.
      var uiConfig = {
        signInSuccessUrl: "<url-to-redirect-to-on-success>",
        signInOptions: [
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.FacebookAuthProvider.PROVIDER_ID,
          firebase.auth.TwitterAuthProvider.PROVIDER_ID,
          firebase.auth.GithubAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID,
          firebase.auth.PhoneAuthProvider.PROVIDER_ID,
          firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID,
        ],
        tosUrl: "<your-tos-url>",
        privacyPolicyUrl: function () {
          window.location.assign("<your-privacy-policy-url>");
        },
      };
      // 初始化FirebaseUI Widget
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      ui.start("#firebaseui-auth-container", uiConfig);
    </script>
  </head>
  <body>
    <h1>Welcome to My Awesome App</h1>
    <div id="firebaseui-auth-container"></div>
  </body>
</html>

关键修改说明 #

• 移除了模块化SDK的import代码，全程使用Firebase兼容模式API（firebase.initializeApp()）。
• 将Firebase初始化脚本移到FirebaseUI脚本之前，确保App初始化完成后再创建AuthUI实例。
• 去掉了type="module"标记，避免异步执行导致的顺序问题。

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