User info display error using Firebase web
Question
I'm trying to get my user to stay logged in and have their data display once logged in. I'm getting the current error. I'm not sure what's causing this error:
Uncaught SyntaxError: Cannot use import statement outside a module
This is my current code for the function. This is all the code for my HTML and javascript:
HTML:
<!doctype html>
<html>
<head>
<!---Required meta tags--->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/studiodash.css">
<!---Required meta tags--->
<!---Like Button JavaScript--->
<script src="https://kit.fontawesome.com/f6dcf461c1.js" crossorigin="anonymous"></script>
<!---Bootstrap CSS--->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>StudioPick</title>
<script>
// SignOut
function signOut() {
auth.signOut();
alert("SignOut Successfully from System");
window.location.href ="login.html?error";
alert("No active user please sign or sign up.");
}
</script>
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType" style="position: relative; top: -20px; right: -51px; font-size: 10px !important">profile type</p>
<ul>
<li>
<img src="./assets/icons/user.png" /><a href="studiodash.html">Dashboard</a>
</li>
<li>
<img src="./assets/icons/edit.png" /><a href="editprofile.html">Edit profile</a>
</li>
<li>
<img src="./assets/icons/envelope.png" /><a href="#">Inbox</a>
</li>
<li>
<img src="./assets/icons/settings.png" /><a href="#">Setting</a>
</li>
<li><img src="./assets/icons/question.png" /><a href="#">Help</a></li>
<li>
<img src="./assets/icons/log-out.png" /><a href="#" onclick="signOut();">Logout</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<!---Dashboard Body--->
<div class="container" id="dashboard">
<h1 class="page-title"><strong>Studio Dashboard</strong></h1>
<!---Booking Calendar--->
<div class="notifications">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Schedule</strong></h5>
</div>
<button class="calendar-view">View Full Calendar</button>
</div>
<!---Booking Calendar--->
<!---Edit Profile--->
<div class="edit-profile" id="edit-profile">
<div class="card-body">
<form id="studioForm">
<h5 class="card-title text-muted"><strong>Edit Profile</strong></h5>
<p class="profile-title" id="studioName"><b>Enter Studio Name</b></p>
<p class="profile-location" id="profile-location">Bethesda, MD</p>
<img class="star" src="Images/Star.png">
<p class="profile-rating" id="profile-rating">4.25</p>
<p class="profile-reviews" id="profile-reviews">8 reviews</p>
<img class="card-img-bottom" id="profile-image" src="Images/placeholder.png">
<button type="button" id="editprofilebutton" onclick="window.location.href='editprofile.html'">Edit Profile</button>
</form>
</div>
</div>
<!---Edit Profile--->
<!---Current Session--->
<div class="session-info">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Current Session</strong></h5>
<div class="current-client">
</div>
<p class="current-date text-muted">Date:</p>
<p class="todays-date">08/30/2022</p>
<p class="current-service text-muted">Service:</p>
<p class="todays-service">W Engineer</p>
<p class="current-room text-muted">Room:</p>
<p class="todays-room">A</p>
<p class="current-duration text-muted">Duration:</p>
<p class="todays-duration">3 hours</p>
<p class="current-start-time text-muted">Start Time:</p>
<p class="todays-start-time">4:00 pm</p>
<p class="current-end-time text-muted">End Time:</p>
<p class="todays-end-time">7:00 pm</p>
</div>
</div>
<!---Current Session--->
<!---Payment History--->
<div class="payment-history">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Payment History</strong></h5>
<div class="transaction">
<p class="customer">- Highway</p>
<p class="payment">+ $1,000</p>
</div>
<div class="transaction-two">
<p class="customer2">- TyFontaine</p>
<p class="payment2">+ $1,000</p>
</div>
<button class="history-view">View Payment History</button>
</div>
</div>
<!---Payment History--->
<!---Upcoming Sessions--->
<div class="sessions">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Upcoming Sessions</strong></h5>
<div class="new-session">
<p class="session-price">$100</p>
<p class="customer-name">Grmln!</p>
<p class="session-room text-muted">Room A: </p>
<p class="session-type text-muted">No Engineer</p>
<p class="session-length text-muted">2:00 pm - 4:00 pm</p>
<p class="session-date text-muted">08/27/2022</p>
</div>
<div class="new-session2">
<p class="session-price2">$100</p>
<p class="customer-name2">Grmln!</p>
<p class="session-room2 text-muted">Room A: </p>
<p class="session-type2 text-muted">No Engineer</p>
<p class="session-length2 text-muted">2:00 pm - 4:00 pm</p>
<p class="session-date2 text-muted">08/27/2022</p>
</div>
<div class="new-session3">
<p class="session-price3">$100</p>
<p class="customer-name3">Grmln!</p>
<p class="session-room3 text-muted">Room A: </p>
<p class="session-type3 text-muted">No Engineer</p>
<p class="session-length3 text-muted">2:00 pm - 4:00 pm</p>
<p class="session-date3 text-muted">08/27/2022</p>
</div>
<button class="upcoming-view">View Upcoming Sessions</button>
</div>
</div>
<!---Upcoming Sessions--->
<!---Session Status--->
<div class="session-status">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Session Status</strong></h5>
<div class="session-option">
<button class="accept-button">Accept</button>
<button class="reject-button">Reject</button>
<button class="change-button">Change Time/Date</button>
</div>
</div>
</div>
<!---Session Status--->
<!---Pending Sessions--->
<div class="pending-sessions">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Pending Sessions</strong></h5>
<div class="pending">
<p class="pending-session-price">$100</p>
<p class="pending-customer-name">Joony</p>
<p class="pending-session-room text-muted">Room A: </p>
<p class="pending-session-type text-muted">No Engineer</p>
<p class="pending-session-length text-muted">2:00 pm - 4:00 pm</p>
<p class="pending-session-date text-muted">08/27/2022</p>
</div>
</div>
<div class="pending2">
<p class="pending-session-price2">$100</p>
<p class="pending-customer-name2">Tae Dawg</p>
<p class="pending-session-room2 text-muted">Room D: </p>
<p class="pending-session-type2 text-muted">With Engineer</p>
<p class="pending-session-length2 text-muted">2:00 pm - 4:00 pm</p>
<p class="pending-session-date2 text-muted">09/27/2022</p>
</div>
<button class="pending-view">View Pending Sessions</button>
</div>
</div>
<!---Pending Sessions--->
<!---Edit Prices--->
<div class="edit-prices">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Edit Prices</strong></h5>
<div class="roomA">
<p class="description-one">Room A:</p>
<p class="type text-muted">With Engineer</p>
<p class="dollarsign-one">$</p>
<p class="price-one">45</p>
<p class="time-type">/Hr</p>
</div>
<div class="roomB">
<p class="description-two">Room B:</p>
<p class="type2 text-muted">With Engineer</p>
<p class="dollarsign-two">$</p>
<p class="price-two">50</p>
<p class="time-type2">/Hr</p>
</div>
<button class="editPrice-button">Edit Prices</button>
</div>
</div>
<!---Edit Prices--->
<!---Messages--->
<div class="messages">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Messages</strong></h5>
<div class="notification-one">
<p class="person-one">Chris Brown</p>
<p class="text-one text-muted">I'm omw. 20 mins out. I ran into some traffic bc of this real bad accident. If I don't get there in time, I'll pay extra. </p>
<p class="time-occurred-one text-muted">3 min ago</p>
</div>
<div class="notification-two">
<p class="person-two">Kanye West</p>
<p class="text-two text-muted">I'm omw. 45 mins out. I ran into some traffic bc of this real bad accident. If I don't get there in time, I'll pay extra. </p>
<p class="time-occurred-two text-muted">12 min ago</p>
</div>
<button class="view-messages">View Messages</button>
</div>
</div>
<!---Messages--->
<!---Footer--->
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">© 2022 StudioPick.</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Support</a></li>
</ul>
</footer>
<!---Footer--->
<!---Dashboard Body--->
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
<!---Javascript--->
<script src="Javascript/studiodash.js"></script>
<!---Javascript--->
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>
JS:
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Initialize variables
const database = firebase.database();
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
if (user) {
database.ref('/studiopick/studio/users/' + user.uid).get().then(snapshot =>{
document.getElementById("studioName").innerText = snapshot.val().studioName;
document.getElementById("profile-name").innerText = snapshot.val().studioName;
}).catch(e => {console.log(e)})
// ...
} else {
window.location.href ="login.html?error";
alert("No active user please sign or sign up.");
}
});
1 answers
solution1
0 2022-09-11 10:14:20
You are actually mixing the JS SDKs version 8 and 9.
With <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script> you import the V8 SDK,
but the following code is V9 syntax
const auth = getAuth();
onAuthStateChanged(auth, (user) => {...});
and the following code is V8 syntax...
database.ref('/studiopick/studio/users/' + user.uid).get()...
You can either continue to use the SDK V8 as follows:
JS
const firebaseConfig = {
//...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
//const auth = getAuth();
firebase.auth().onAuthStateChanged((user) => {
if (user) {
database.ref('/studiopick/studio/users/' + user.uid).get().then(snapshot => {
document.getElementById("studioName").innerText = snapshot.val().studioName;
document.getElementById("profile-name").innerText = snapshot.val().studioName;
}).catch(e => { console.log(e) })
// ...
} else {
window.location.href = "login.html?error";
alert("No active user please sign or sign up.");
}
});
HTML
// ....
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use -->
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
<!---Javascript--->
<script defer src="Javascript/studiodash.js"></script>
<!---Javascript--->
<!----More Bootstrap--->
// ...
<!----More Bootstrap--->
</body>
</html>
Or change to V9, which is recommended, as follows:
JS
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.9.4/firebase-app.js';
// Add Firebase products that you want to use
import { getAuth, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.9.4/firebase-auth.js';
import { getDatabase, ref, get } from "https://www.gstatic.com/firebasejs/9.9.4/firebase-database.js"
const firebaseConfig = {
//...
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const database = getDatabase(app);
onAuthStateChanged(auth, (user) => {
if (user) {
// See documentation for V9
// https://firebase.google.com/docs/database/web/read-and-write#read_data_once
// ...
} else {
window.location.href = "login.html?error";
alert("No active user please sign or sign up.");
}
});
HTML
// ...
<!---Javascript--->
<script type="module" src="Javascript/studiodash.js"></script>
<!---Javascript--->
<!----More Bootstrap--->
// ...
<!----More Bootstrap--->
</body>
</html>
More details in the doc:
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.
Related Question
How to keep a user logged in Flutter web app using Firebase Authentication
How do you display user values safely when using Firebase?
How do you display user info in fragment?
Getting error while using firebase.User method to get username of logged in user from firebase angular project
How to retrieve the user's info that is currently logged in from Firestore/Firebase?
How to display current User data from firebase?
Using user info in AWS Amplify GraphQL schema
Getting error "invalid_request: Invalid web redirect url" when using Apple ID sign-in with Firebase
How do i display Firebase formatting errors as an Alert and display it to the user?
Firebase: Error (auth/user-token-expired)
Related Tags