I have set up Google Firebase for a site hosted elsewhere. I am getting an error that says “Uncaught TypeError: Cannot read properties of undefined (reading ‘getAuth’) at HTMLFormElement.” when trying to initialize the Auth library from Firebase. I have tried many various alternate versions of the command to no avail. It appears as though the regular Firebase app initializes properly, however.
The line causing the error is in auth.js “const autho = auth.getAuth(app);” Here is my setup.
HTML file calls require.js library:
<script src="../components/scripts/require.js" data-main="../components/scripts/auth"></script>
auth.js using require.js’s require to import libraries:
require.config({
paths: {
'firebase': 'https://www.gstatic.com/firebasejs/8.10.1/firebase-app',
'auth': 'https://www.gstatic.com/firebasejs/8.10.1/firebase-auth',
//'firestore': 'https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore'
}
});
require(['firebase'], function (firebase) {
require(['auth'], function (auth) {
const registerForm = document.querySelector('#register-form');
const continueButton = document.getElementById("continueButton");
var email = "";
var username ="";
var alphaNumeric = /^([0-9]|[a-z])+([0-9a-z]+)$/i;
const firebaseConfig = {
apiKey: "AIzaSyB4L71q-5qsAD2RbzYkPI8S66t1-gPmLlc",
authDomain: "milkywaymedium.firebaseapp.com",
databaseURL: "https://milkywaymedium.firebaseio.com",
projectId: "milkywaymedium",
storageBucket: "milkywaymedium.appspot.com",
messagingSenderId: "165659589186",
appId: "1:165659589186:web:14f35c3010b2e5600c0bdb",
measurementId: "G-WGKXQT89RQ"
};
// Initialize Firebase
//const autho = auth.getAuth(app);
//const autho = firebase.getAuth();
//const autho = firebase.auth();
//const db = firebase.default.firestore;
function passCreds() {
console.log("Passing credentials...");
email = document.getElementById("email").value;
username = document.getElementById("username").value;
if (email != "" &&
email.includes("@") &&
email.includes(".") &&
email.length > 5 &&
!email.includes(" ") &&
username != "" &&
username.length > 2 &&
username.match(alphaNumeric)) {
console.log("Requirements met...");
const labelEmail = document.getElementById("label-email");
const labelUsername = document.getElementById("label-username");
const captionEmail = document.getElementById("caption-email");
const captionUsername = document.getElementById("caption-username");
const box1 = document.getElementById("box1");
const box2 = document.getElementById("box2");
const button1 = document.getElementById("button1");
labelEmail.innerHTML = "<b>Password</b>";
labelUsername.innerHTML = "<b>Confirm Password</b>";
captionEmail.innerHTML = "Please enter a password that includes a number or symbol with at least eight characters...";
captionUsername.innerHTML = "Please retype your password to confirm it is correct...";
box1.innerHTML = `<input type="password" placeholder="Example: Andr0meda" id="password" name="password" required>`;
box2.innerHTML = `<input type="password" placeholder="Example: Andromed@" id="confirmPassword" name="confirmPassword" required>`;
button1.innerHTML = `<button class="button-login" style="width: 100%; height: 55px;" type="submit">CONTINUE</button>`;
console.log("Credentials passed...");
}
else {
console.log("Your credentials do not meet the standards.");
email = "";
username ="";
}
}
continueButton.addEventListener('click', (e) => {
passCreds();
});
registerForm.addEventListener('submit', (e) => {
// Create account
e.preventDefault();
const password = registerForm['password'].value;
const confirmPassword = registerForm['confirmPassword'].value;
console.log(email, username, password, confirmPassword);
const app = firebase.initializeApp(firebaseConfig);
const autho = auth.getAuth(app);
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});
//autho.createUserWithEmailAndPassword(email, password).then(cred => {
//console.log(cred);
//});
//autho.createUserWithEmailAndPassword(email, password)
// .then((userCredential) => {
// // Signed in
// var user = userCredential.user;
// console.log(userCredential);
// // ...
// })
// .catch((error) => {
// var errorCode = error.code;
// var errorMessage = error.message;
// ..
// });
});
});
});