I am following the example of the firebase UI repo but I get the following error:
Uncaught FirebaseError: Firebase: No Firebase App ‘[DEFAULT]’ has been created – call Firebase App.initializeApp() (app-compat/no-app).
I’ve tried already several things, but they don’t work. When I inspect the code it seems that it runs first the line containing var ui = new firebaseui.auth.AuthUI(firebase.auth()); before const app = initializeApp(firebaseConfig); even if it is afterwards.
This is my code, help will be welcomed:
<!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>
2
Answers
As you are using compat SDKs, initialize Firebase SDK as shown below:
You should reorder the code:
You are using Firebase Compatibility Mode (the new API is different now, https://firebase.google.com/docs/web/modular-upgrade)
You should put your code before </body> tag, so when the DOM is ready the scripts outside a function are loaded (http://www.cev.washington.edu/lc/CLWEBCLB/jst/js_whereto.html)
Note that you are exposing the Firebase config if you put it inline, you should adopt another strategy https://medium.com/@devesu/how-to-secure-your-firebase-project-even-when-your- api -key-is-publicly-available-a462a2a58843. There are several strategies you can adopt.