I am currently working on developing a login system using Firebase authentication and I have encountered some issues in the process. After following Google's tutorial (https://www.youtube.com/watch?v=rQvOAnNvcNQ), and creating a simple "Index.html" & "Index.js" test, I came across an error stating "Uncaught SyntaxError: Cannot use import statement outside a module index.js:1". I attempted to resolve this by changing the .js file to a .mjs and loading it as a module, but then the .html file had trouble finding the functions in the .mjs file.
The onAuthStateChanged() function consistently logs "No user", indicating that it is functioning correctly.
All of my testing has been done via localhost so far.
If anyone could provide assistance with this issue, it would be highly appreciated!
index.mjs
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js';
import { getAuth, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js';
const firebaseConfig = {
...
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
onAuthStateChanged(auth, (user) => {
if (user) {
console.log('logged in!');
} else {
console.log('No user');
}
});
function login() {
window.alert("Login successful")
}
function signUp() {
window.alert("Signup successful");
}
index.html
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> test </title>
<script type="module" src="/index.mjs"></script>
</head>
<body>
<div class = "login-form">
<input type = "email" class="login-username" id="login-username" autofocus="true" required="true" placeholder="Email" />
<input type = "password" class="login-password" id="login-password" required="true" placeholder="Password" />
<input type = "submit" name="Login" value="Login" class="login-submit" onclick = "login()"/>
<input type = "submit" name="Signup" value="Signup" class="login-submit" onclick = "signUp()"/>
</div>
</body>
</html>