При получении примера аутентификации пользовательского интерфейса firebase: Uncaught FirebaseError: No Firebase App '[DEFAULT]

Я следую примеру репозитория пользовательского интерфейса firebase, но получаю следующую ошибку:

Uncaught FirebaseError: Firebase: приложение Firebase «[ПО УМОЛЧАНИЮ]» не создано — вызовите Firebase App.initializeApp() (app-compat/no-app).

Я пробовал уже несколько вещей, но они не работают. Когда я проверяю код, кажется, что он сначала запускает строку, содержащую var ui = new firebaseui.auth.AuthUI(firebase.auth());, до const app = initializeApp(firebaseConfig);, даже если она после.

Это мой код, помощь будет приветствоваться:

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8" />
    <title>Sample FirebaseUI App</title>
    <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>
    <script type = "module">
      // Import the functions you need from the SDKs you need
      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.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
      const firebaseConfig = {
        apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
      };

      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
    </script>
    <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"
    />
    <script type = "text/javascript">
      // FirebaseUI config.
      var uiConfig = {
        signInSuccessUrl: "<url-to-redirect-to-on-success>",
        signInOptions: [
          // Leave the lines as is for the providers you want to offer your users.
          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 and privacyPolicyUrl accept either url string or a callback
        // function.
        // Terms of service url/callback.
        tosUrl: "<your-tos-url>",
        // Privacy policy url/callback.
        privacyPolicyUrl: function () {
          window.location.assign("<your-privacy-policy-url>");
        },
      };

      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // The start method will wait until the DOM is loaded.
      ui.start("#firebaseui-auth-container", uiConfig);
    </script>
  </head>
  <body>
    <!-- The surrounding HTML is left untouched by FirebaseUI.
         Your app may use that space for branding, controls and other customizations.-->
    <h1>Welcome to My Awesome App</h1>
    <div id = "firebaseui-auth-container"></div>
  </body>
</html>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
60
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Поскольку вы используете совместимые SDK, инициализируйте Firebase SDK, как показано ниже:

const app = firebase.initializeApp(firebaseConfig);
const auth = firebase.auth(); 

Это не сработало само по себе, но было частью проблемы. Спасибо, в любом случае!

Escachator 08.01.2023 14:12
Ответ принят как подходящий

Вы должны изменить порядок кода:

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8" />
    <title>Sample FirebaseUI App</title>
    <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>
   
    <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"
    />
  </head>
  <body>
    <!-- The surrounding HTML is left untouched by FirebaseUI.
         Your app may use that space for branding, controls and other customizations.-->
    <h1>Welcome to My Awesome App</h1>
    <div id = "firebaseui-auth-container"></div>
    <script type = "text/javascript">
      // FirebaseUI config.
      var uiConfig = {
        signInSuccessUrl: "<url-to-redirect-to-on-success>",
        signInOptions: [
          // Leave the lines as is for the providers you want to offer your users.
          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 and privacyPolicyUrl accept either url string or a callback
        // function.
        // Terms of service url/callback.
        tosUrl: "<your-tos-url>",
        // Privacy policy url/callback.
        privacyPolicyUrl: function () {
          window.location.assign("<your-privacy-policy-url>");
        },
      };


      // Your web app's Firebase configuration
      const firebaseConfig = {
        apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
      };

      // Initialize Firebase
      const app = firebase.initializeApp(firebaseConfig);

      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(app.auth());
      // The start method will wait until the DOM is loaded.
      ui.start("#firebaseui-auth-container", uiConfig);
    </script>
  </body>
</html>

Вы используете режим совместимости с Firebase (теперь новый API отличается, https://firebase.google.com/docs/web/modular-upgrade)

Вы должны поместить свой код перед тегом </body>, поэтому, когда DOM будет готов, скрипты вне функции будут загружены (http://www.cev.washington.edu/lc/CLWEBCLB/jst/js_whereto.html )

Обратите внимание, что вы раскрываете конфигурацию Firebase, если вы помещаете ее в строку, вам следует использовать другую стратегию https://medium.com/@devesu/how-to-secure-your-firebase-project-even-when-your- api -ключ-является-общедоступным-a462a2a58843. Есть несколько стратегий, которые вы можете использовать.

Это был потрясающий ответ, и он сработал! СПАСИБО Мауро!

Escachator 08.01.2023 14:11

Другие вопросы по теме