I am following an outdated youtube tutorial, so I have been using documentation to update parts of the code. I added data manually into firestore in the firebase console, and when I try to access the documents within the collection “guides”, it says that the snapshot is empty.
I’ve tried updating everything to be like the documentation and have consistently gotten feedback that there are no documents in the returned querySnapshot.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Game Guidez</title>
</head>
<body class="grey lighten-3">
<nav class="z-depth-0 grey lighten-4">
<div class="nav-wrapper container">
<a href="#" class="brand-logo">
<img src="img/logo.svg" style="width: 180px; margin-top: 10px;">
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="logged-in">
<a href="#" class="grey-text modal-trigger" data-target="modal-account">Account</a>
</li>
<li class="logged-in">
<a href="#" class="grey-text" id="logout">Logout</a>
</li>
<li class="logged-in">
<a href="#" class="grey-text modal-trigger" data-target="modal-create">Create Guide</a>
</li>
<li class="logged-out">
<a href="#" class="grey-text modal-trigger" data-target="modal-login">Login</a>
</li>
<li class="logged-out">
<a href="#" class="grey-text modal-trigger" data-target="modal-signup">Sign up</a>
</li>
</span>
</ul>
</div>
</nav>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="module" src="scripts/auth.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
auth.js
// signup
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-app.js";
import { getAuth, createUserWithEmailAndPassword, signOut, signInWithEmailAndPassword, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-auth.js";
import { getFirestore, collection, getDocs } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-firestore.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
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyBYbLUpvawWie-C-d2rglmqEcKbLbYitm4",
authDomain: "tut-b7d0e.firebaseapp.com",
projectId: "tut-b7d0e",
storageBucket: "tut-b7d0e.appspot.com",
messagingSenderId: "590080106180",
appId: "1:590080106180:web:5e49369cc7bc0495cdb391",
measurementId: "G-J1T5VTHNR4"
// databaseURL: "https://(default).firebaseio.com"
};
// firebase.initializeApp(config);
// Initialize Firebase
// const auth = firebase.auth();
// const db = firebase.firestore();
const app = initializeApp(firebaseConfig)
const auth = getAuth(app)
const db = getFirestore(app, {
timestampsInSnapshots: true
})
// get data
/*getDocs(collection(db, 'guides')).then(snapshot => {
console.log(snapshot.docs)
})*/
console.log(collection(db, 'guides'))
getDocs(collection(db, 'guides')).then(snapshot => {
if (snapshot.empty) {
console.log('No matching documents.');
return;
}
console.log("Documents in 'guides' collection:");
snapshot.docs.forEach(doc => {
console.log(doc.id, '=>', doc.data());
});
}).catch(error => {
console.error("Error getting documents: ", error);
});
// listen for auth status changes
onAuthStateChanged(auth, (user) => {
if (user) {
console.log('user logged in: ', user)
} else {
console.log('user logged out')
}
})
// update firestore settings
/* initializeFirestore(app, {
timestampsInSnapshots: true
})*/
const signupForm = document.querySelector('#signup-form');
signupForm.addEventListener('submit', (e) => {
e.preventDefault();
// get user info
const email = signupForm['signup-email'].value
const password = signupForm['signup-password'].value
// sign up the user
createUserWithEmailAndPassword(auth, email, password).then(cred => {
const modal = document.querySelector('#modal-signup')
M.Modal.getInstance(modal).close();
signupForm.reset()
});
})
// logout
const logout = document.querySelector('#logout')
logout.addEventListener('click', (e) => {
e.preventDefault()
signOut(auth)
})
// login
const loginForm = document.querySelector('#login-form')
loginForm.addEventListener('submit', (e) => {
e.preventDefault()
// get user info
const email = loginForm['login-email'].value;
const password = loginForm['login-password'].value;
signInWithEmailAndPassword(auth, email, password).then(cred => {
//close login modal and reset form
const modal = document.querySelector('#modal-login')
M.Modal.getInstance(modal).close();
loginForm.reset();
})
})
index.js:
// setup materialize components
document.addEventListener('DOMContentLoaded', function() {
var modals = document.querySelectorAll('.modal');
M.Modal.init(modals);
var items = document.querySelectorAll('.collapsible');
M.Collapsible.init(items);
});
