Uncaught ReferenceError: firebase is not defined for Web
Question
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
<!-- update the version number as needed -->
<script defer src="/__/firebase/7.17.1/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/7.17.1/firebase-auth.js"></script>
<script defer src="/__/firebase/7.17.1/firebase-database.js"></script>
<script defer src="/__/firebase/7.17.1/firebase-messaging.js"></script>
<script defer src="/__/firebase/7.17.1/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/ui/4.6.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.0/firebase-ui-auth.css" />
<script defer>
var uiConfig = {
signInSuccessUrl: 'main.html',
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
tosUrl: '<your-tos-url>',
// Privacy policy url/callback.
privacyPolicyUrl: function() {
window.location.assign('<your-privacy-policy-url>');
}
};
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);
</script>
When I open up the page in my browser, I get the following error Uncaught ReferenceError: firebase is not defined . I'm not sure how to rectify this problem. I'm using the reserved hosting urls to download the Firebase JS SDK. My understanding is that the config variable and the initializeApp() method that you see in other posts about the problem are not needed, right? I'm really not sure what's going on. I tried inserting the scripts in the body and head of the document. I even tried using a separate js file inserted at the bottom of the body element..
An Update.
I placed the code in the sign in script at the bottom of the body and combined it with some code that checks the auth state. It looks like this
<script>
document.addEventListener('DOMContentLoaded', function() {
firebase.auth().onAuthStateChanged(user => {console.log("user: " + user);});
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
});
var uiConfig = {
signInSuccessUrl: 'main.html',
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
tosUrl: '<your-tos-url>',
// Privacy policy url/callback.
privacyPolicyUrl: function() {
window.location.assign('<your-privacy-policy-url>');
}
};
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);
</script>
The console.log("user: " + user) statement prints user: null, suggesting the firebase object in the addEventListner() is defined. Yet, the firebase.auth.GoogleAuthProvider.PROVIDER_ID, line throws the same error as it did before. why?
1 answers
solution1
0 ACCPTED 2020-08-07 13:20:38
I could not resolve the problem. In the end I choose not to use FirebaseUI and created my own sign in flow instead.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.