fterdal · Rend1027 · Jul 30, 2025 · Jul 30, 2025 · Jul 31, 2025 · Jul 31, 2025
diff --git a/.env.example b/.env.example
diff --git a/dist/images/3a426ca7e83eb4d81d6e.png b/dist/images/3a426ca7e83eb4d81d6e.png
diff --git a/dist/index.html b/dist/index.html
@@ -1,13 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="favicon.ico" />
-    <title>Capstone 1</title>
-    <script defer src="main.js"></script>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- ⚠️ Only for development -->
+  <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">
+
+  <link rel="icon" href="favicon.ico" />
+  <title>Capstone 1</title>
+  <script defer src="main.js"></script>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,12 +14,13 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@auth0/auth0-react": "^2.3.0",
+    "@auth0/auth0-react": "^2.4.0",
     "@babel/core": "^7.27.4",
     "@babel/preset-react": "^7.27.1",
     "axios": "^1.10.0",
     "babel-loader": "^10.0.0",
     "dotenv": "^17.1.0",
+    "jwt-decode": "^4.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.3",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,45 +1,102 @@
 import React, { useState, useEffect } from "react";
 import { createRoot } from "react-dom/client";
-import axios from "axios";
+// import axios from "axios";
 import "./AppStyles.css";
 import NavBar from "./components/NavBar";
+import Dashboard from "./components/Dashboard";
+import NowPlaying from "./components/NowPlaying";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Login from "./components/Login";
 import Signup from "./components/Signup";
-import Home from "./components/Home";
+// import Home from "./components/Home";
 import NotFound from "./components/NotFound";
-import { API_URL } from "./shared";
+// import CallBack from "./components/CallBack";
+// import { jwtDecode } from "jwt-decode";
+// import { API_URL } from "./shared";
+import axios from './utils/axiosInstance';
+import { Auth0Provider, useAuth0 } from "@auth0/auth0-react";
+
+// AUTH0 CONFIGURATION
+const AUTH0_DOMAIN = process.env.REACT_APP_AUTH0_DOMAIN;
+const AUTH0_CLIENT_ID = process.env.REACT_APP_AUTH0_CLIENT_ID;
 
 const App = () => {
   const [user, setUser] = useState(null);
+  console.log("this is user--->", user)
+  //const [token, setToken] = useState("");
 
-  const checkAuth = async () => {
-    try {
-      const response = await axios.get(`${API_URL}/auth/me`, {
-        withCredentials: true,
-      });
-      setUser(response.data.user);
-    } catch {
-      console.log("Not authenticated");
-      setUser(null);
-    }
-  };
+  const {
+    isAuthenticated,
+    user: auth0User,
+    getIdTokenClaims,
+  } = useAuth0(); // swapped getAccessTokenSilently for getIdTokenClaims
 
-  // Check authentication status on app load
   useEffect(() => {
+    const checkAuth = async () => {
+      try {
+        const response = await axios.get("/auth/me", {
+          withCredentials: true,
+        });
+        setUser(response.data.user);
+      } catch {
+        console.log("Not authenticated");
+        setUser(null);
+      }
+    };
     checkAuth();
   }, []);
 
-  const handleLogout = async () => {
-    try {
-      // Logout from our backend
-      await axios.post(
-        `${API_URL}/auth/logout`,
-        {},
-        {
+  useEffect(() => {
+    const syncSpotifyAndFetchUser = async () => {
+      if (!isAuthenticated || !auth0User) {
+        console.warn("User not authenticated or auth0User not ready.");
+        return;
+      }
+
+      try {
+        const claims = await getIdTokenClaims();
+        const spotifyAccessToken = claims["https://localbeats.app/spotify_access_token"];
+
+        if (!spotifyAccessToken) {
+          console.warn("No Spotify access token found in ID token claims.");
+          return;
+        }
+
+        //  Sync with backend — this will update DB & create session token
+        await axios.post("/auth/spotify/sync", {}, {
+          headers: {
+            Authorization: `Bearer ${spotifyAccessToken}`,
+          },
           withCredentials: true,
         }
-      );
+        );
+
+
+        // Fetch user info from DB (using session token)
+        const res = await axios.get("/auth/me", { withCredentials: true });
+        console.log("this is data-->", res.data)
+        setUser(res.data.user);
+      } catch (err) {
+        console.error("Post-login sync failed:", err);
+      }
+    };
+
+    // Update frontend state
+    // setUser({
+    //   name: auth0User.name,
+    //   email: auth0User.email,
+    //   picture: auth0User.picture,
+    // });
+
+    console.log("Auth0 state ->", { isAuthenticated, auth0User });
+    syncSpotifyAndFetchUser();
+  }, [isAuthenticated, auth0User, getIdTokenClaims]);
+
+
+
+  const handleLogout = async () => {
+    try {
+      await axios.post('/auth/logout', {}, { withCredentials: true });
       setUser(null);
     } catch (error) {
       console.error("Logout error:", error);
@@ -51,21 +108,47 @@ const App = () => {
       <NavBar user={user} onLogout={handleLogout} />
       <div className="app">
         <Routes>
-          <Route path="/login" element={<Login setUser={setUser} />} />
+          <Route path="/" element={<Login setUser={setUser} />} />
           <Route path="/signup" element={<Signup setUser={setUser} />} />
-          <Route exact path="/" element={<Home />} />
+          <Route path="/dashboard" element={
+            <>
+              <Dashboard user={user} />
+              <NowPlaying />
+            </>
+          } />
+
           <Route path="*" element={<NotFound />} />
         </Routes>
       </div>
     </div>
   );
 };
 
+// ✅ Root with Spotify audience + scopes
 const Root = () => {
   return (
-    <Router>
-      <App />
-    </Router>
+    // <Auth0Provider
+    //   domain={AUTH0_DOMAIN}
+    //   clientId={AUTH0_CLIENT_ID}
+    //   authorizationParams={{
+    //     redirect_uri: window.location.origin + "/callback",
+    //     audience: "https://api.spotify.com",
+    //     scope: "user-read-email user-read-private user-read-playback-state user-read-currently-playing offline_access",
+    //   }}
+    //   cacheLocation="localstorage"
+    // >
+    <Auth0Provider
+      domain={AUTH0_DOMAIN}
+      clientId={AUTH0_CLIENT_ID}
+      authorizationParams={{
+        redirect_uri: window.location.origin + "/dashboard"
+      }}
+      cacheLocation="localstorage"
+    >
+      <Router>
+        <App />
+      </Router>
+    </Auth0Provider>
   );
 };
 

diff --git a/src/assets/LocalBeats.png b/src/assets/LocalBeats.png
diff --git a/src/components/ActiveListener.jsx b/src/components/ActiveListener.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import ListenerCard from "./LIstenerCard";
+
+const Activelistener = ({ user }) => {
+    // console.log("this is user from actiive listener---> ", user)
+    return (
+        <main>
+            <h1>
+                Active Listeners
+            </h1>
+            {/* <div className="active-listener-cards">
+                <ul>
+                    {user.map((element) => (
+                        <li key={user.id}>
+                            <ListenerCard element={element} />
+                        </li>
+                    ))}
+                </ul>
+            </div> */}
+
+        </main>
+    )
+}
+
+export default Activelistener;
diff --git a/src/components/AuthStyles.css b/src/components/AuthStyles.css
@@ -1,5 +1,7 @@
 .auth-container {
   display: flex;
+  flex-direction: column;
+  gap: 5rem;
   justify-content: center;
   align-items: center;
   min-height: 60vh;
@@ -143,4 +145,4 @@
 
 .auth-link a:hover {
   text-decoration: underline;
-}
+}