second commit

my-nextjs-app/src/app/dashboard/page.js

@@ -1,19 +1,38 @@
 "use client";
 import { useEffect, useState } from "react";
 import { supabase } from "@/lib/supabase";
+import { getUserRole } from "@/lib/roles";
 import { useRouter } from "next/navigation";
 
 export default function Dashboard() {
   const [user, setUser] = useState(null);
+  const [role, setRole] = useState("read"); // Default role
   const router = useRouter();
 
   useEffect(() => {
-    const checkUser = async () => {
-      const { data: user } = await supabase.auth.getUser();
-      if (!user) router.push("/login");
-      else setUser(user);
+    const fetchUserData = async () => {
+      const { data: { session }, error } = await supabase.auth.getSession();
+      console.log("Session:", session);
+      
+      if (error || !session?.user) {
+        console.error("Session error:", error);
+        router.push("/login");
+        return;
+      }
+
+      setUser(session.user);
+
+      try {
+        const userRole = await getUserRole(session.user.id);
+        console.log("User Role:", userRole);
+        setRole(userRole);
+      } catch (error) {
+        console.error("Error fetching role:", error);
+        setRole("read"); // Default to read-only
+      }
     };
-    checkUser();
+
+    fetchUserData();
   }, []);
 
   const handleLogout = async () => {
@@ -24,6 +43,17 @@ export default function Dashboard() {
   return (
     <div className="flex flex-col items-center justify-center min-h-screen">
       <h1 className="text-3xl font-bold">Welcome, {user?.email || "Guest"}!</h1>
+      <p className="text-lg mt-2">Your Role: <strong>{role}</strong></p>
+
+      {/* Conditional rendering based on role */}
+      {role === "write" && (
+        <div className="mt-4 p-4 bg-gray-100 rounded-lg">
+          <h2 className="text-xl font-semibold">Editable Content</h2>
+          <textarea className="border p-2 w-full mt-2" placeholder="Edit this content..."></textarea>
+          <button className="bg-blue-500 text-white px-4 py-2 rounded mt-2">Save</button>
+        </div>
+      )}
+
       <button onClick={handleLogout} className="bg-red-500 text-white px-4 py-2 rounded mt-4">
         Logout
       </button>

my-nextjs-app/src/app/login/page.js

@@ -10,14 +10,14 @@ export default function Login() {
 
   const handleSignUp = async () => {
     const { error } = await supabase.auth.signUp({ email, password });
-    if (error) alert(error.message);
-    else alert("Check your email for confirmation!");
+    error ? alert(error.message) : alert("Check your email for confirmation!");
   };
 
   const handleSignIn = async () => {
     const { error } = await supabase.auth.signInWithPassword({ email, password });
-    if (error) alert(error.message);
-    else {
+    if (error) {
+      alert(error.message);
+    } else {
       alert("Logged in successfully!");
       router.push("/dashboard");
     }
@@ -27,24 +27,10 @@ export default function Login() {
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
       <div className="bg-white p-6 rounded-lg shadow-lg w-80">
         <h2 className="text-2xl font-bold mb-4">Login / Sign Up</h2>
-        <input
-          type="email"
-          placeholder="Email"
-          className="border p-2 w-full mb-2"
-          onChange={(e) => setEmail(e.target.value)}
-        />
-        <input
-          type="password"
-          placeholder="Password"
-          className="border p-2 w-full mb-2"
-          onChange={(e) => setPassword(e.target.value)}
-        />
-        <button onClick={handleSignIn} className="bg-blue-500 text-white px-4 py-2 rounded w-full mb-2">
-          Sign In
-        </button>
-        <button onClick={handleSignUp} className="bg-green-500 text-white px-4 py-2 rounded w-full">
-          Sign Up
-        </button>
+        <input type="email" placeholder="Email" className="border p-2 w-full mb-2" onChange={(e) => setEmail(e.target.value)} />
+        <input type="password" placeholder="Password" className="border p-2 w-full mb-2" onChange={(e) => setPassword(e.target.value)} />
+        <button onClick={handleSignIn} className="bg-blue-500 text-white px-4 py-2 rounded w-full mb-2">Sign In</button>
+        <button onClick={handleSignUp} className="bg-green-500 text-white px-4 py-2 rounded w-full">Sign Up</button>
       </div>
     </div>
   );

my-nextjs-app/src/lib/auth.js

@@ -1,11 +1,15 @@
 import { supabase } from "./supabase";
 
 export const getUser = async () => {
-  const { data: user } = await supabase.auth.getUser();
+  const { data: user, error } = await supabase.auth.getUser();
+  if (error) {
+    console.error("Error fetching user:", error);
+    return null;
+  }
   return user;
 };
 
 export const logout = async () => {
   await supabase.auth.signOut();
-  window.location.href = "/login";
+  window.location.href = "/login"; // Redirect to login after logout
 };

my-nextjs-app/src/lib/roles.js

@@ -0,0 +1,16 @@
+import { supabase } from "./supabase";
+
+export const getUserRole = async (userId) => {
+  const { data, error } = await supabase
+    .from("user_roles")
+    .select("role")
+    .eq("user_id", userId)
+    .maybeSingle();
+
+  if (error) {
+    console.error("Error fetching role:", error);
+    return "read"; // Default role if there's an error
+  }
+
+  return data?.role || "read"; // Default to "read" if no role is found
+};

my-nextjs-app/src/middlewares/middleware.js

@@ -0,0 +1,14 @@
+import { NextResponse } from "next/server";
+import { supabase } from "./lib/supabase";
+
+export async function middleware(req) {
+  const { data } = await supabase.auth.getUser();
+  if (!data?.user) {
+    return NextResponse.redirect(new URL("/login", req.url));
+  }
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["./dashboard"], // Protect the dashboard route
+};