Update artifacts/fb-publisher/src/App.tsx

artifacts/fb-publisher/src/App.tsx

@@ -1,35 +1,36 @@
 import { useEffect, useState } from "react";
-import { initializeApp } from "firebase/app";
-import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged, signOut, getIdToken } from "firebase/auth";
+import { createClient } from "@supabase/supabase-js";
+import { Auth } from "@supabase/auth-ui-react";
+import { ThemeSupa } from "@supabase/auth-ui-shared";
 import { setAuthTokenGetter } from "@workspace/api-client-react";
-import { Switch, Route, Router as WouterRouter, Redirect } from "wouter";
+import {
+  Switch,
+  Route,
+  Router as WouterRouter,
+  Redirect,
+} from "wouter";
 import { QueryClientProvider, useQueryClient } from "@tanstack/react-query";
 import { queryClient } from "./lib/queryClient";
 import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import UpdateBanner from "@/components/UpdateBanner"; // ✅ أضف هذا
 import Publisher from "@/pages/Publisher";
+import Subscription from "@/pages/Subscription";
+import SubscriptionReturn from "@/pages/SubscriptionReturn";
+import InstallExtension from "@/pages/InstallExtension";
+import Admin from "@/pages/Admin";
+import NotFound from "@/pages/not-found";
+import UpdateBanner from "@/components/UpdateBanner";
 
-const firebaseConfig = {
-  apiKey: "AIzaSyBMZV3pjYNxpMWbkyJbp1anaE2p1YCRWcg",
-  authDomain: "fb-publisher-pro.firebaseapp.com",
-  projectId: "fb-publisher-pro",
-  storageBucket: "fb-publisher-pro.firebasestorage.app",
-  messagingSenderId: "1003179857534",
-  appId: "1:1003179857534:web:8ede54d5d8c22685ad2a2f",
-};
-
-const app = initializeApp(firebaseConfig);
-const auth = getAuth(app);
-const googleProvider = new GoogleAuthProvider();
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string;
+const supabase = createClient(supabaseUrl, supabaseAnonKey);
 const basePath = import.meta.env.BASE_URL?.replace(/\/$/, "") || "";
 
-function FirebaseAuthTokenSetter() {
+function SupabaseAuthTokenSetter() {
   useEffect(() => {
     setAuthTokenGetter(async () => {
-      const user = auth.currentUser;
-      if (user) return await getIdToken(user);
-      return null;
+      const { data } = await supabase.auth.getSession();
+      return data.session?.access_token ?? null;
     });
     return () => setAuthTokenGetter(null);
   }, []);
@@ -37,123 +38,107 @@ function FirebaseAuthTokenSetter() {
 }
 
 function HomePage() {
-  const [user, setUser] = useState<any>(() => {
-    const saved = localStorage.getItem("firebase_user");
-    return saved ? JSON.parse(saved) : null;
-  });
-  const [loading, setLoading] = useState(!localStorage.getItem("firebase_user"));
+  const [session, setSession] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
-      console.log("🔥 Firebase user:", firebaseUser?.email);
-      if (firebaseUser) {
-        const userData = {
-          uid: firebaseUser.uid,
-          email: firebaseUser.email,
-          displayName: firebaseUser.displayName,
-          photoURL: firebaseUser.photoURL,
-        };
-        setUser(userData);
-        localStorage.setItem("firebase_user", JSON.stringify(userData));
-        
-        fetch(`/api/me?userId=${firebaseUser.uid}&userEmail=${firebaseUser.email}`, { credentials: 'include' })
-          .then(res => res.json())
-          .then(data => console.log("✅ Supabase:", data))
-          .catch(err => console.error("❌", err));
-      } else {
-        setUser(null);
-        localStorage.removeItem("firebase_user");
-      }
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
       setLoading(false);
     });
-    return () => unsubscribe();
-  }, []);
 
-  const handleLogin = async () => {
-    try {
-      const result = await signInWithPopup(auth, googleProvider);
-      console.log("✅ تسجيل دخول ناجح:", result.user.email);
-    } catch (error) {
-      console.error("❌ خطأ في تسجيل الدخول:", error);
-      setLoading(false);
-    }
-  };
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+      setSession(session);
+    });
 
-  const handleLogout = () => {
-    signOut(auth);
-    localStorage.removeItem("firebase_user");
-    setUser(null);
-  };
+    return () => subscription.unsubscribe();
+  }, []);
 
   if (loading) {
     return <div className="min-h-screen bg-[#0f0f1e] flex items-center justify-center text-white text-xl">جاري التحميل...</div>;
   }
 
-  if (user) {
-    return (
-      <div className="min-h-screen bg-[#0f0f1e] flex flex-col items-center justify-center gap-4">
-        <h1 className="text-white text-2xl font-bold">✅ تم التسجيل!</h1>
-        <p className="text-gray-400">مرحباً، {user.displayName || user.email}</p>
-        <p className="text-gray-500">UID: {user.uid}</p>
-        <button onClick={handleLogout} className="bg-red-600 text-white px-6 py-3 rounded-lg">تسجيل خروج</button>
-        <a href="/app" className="bg-[#bb86fc] text-white px-8 py-4 rounded-xl text-lg font-bold">اذهب للتطبيق</a>
-      </div>
-    );
+  if (session) {
+    fetch(`/api/me?userId=${session.user.id}&userEmail=${session.user.email}`, {
+      credentials: 'include',
+      headers: { 'Authorization': `Bearer ${session.access_token}` }
+    }).catch(() => {});
+
+    return <Redirect to="/app" />;
   }
 
   return (
-    <div className="min-h-screen bg-[#0f0f1e] flex flex-col items-center justify-center gap-4">
-      <h1 className="text-white text-2xl font-bold">FB Publisher PRO</h1>
-      <p className="text-gray-400">سجل دخولك للمتابعة</p>
-      <button onClick={handleLogin} className="bg-[#bb86fc] text-white px-8 py-4 rounded-xl text-lg font-bold hover:bg-[#a070e0] transition-colors">
-        تسجيل الدخول بـ Google
-      </button>
+    <div className="min-h-screen bg-[#0f0f1e] flex items-center justify-center">
+      <div className="w-full max-w-md p-6">
+        <h1 className="text-white text-2xl font-bold text-center mb-6">FB Publisher PRO</h1>
+        <Auth
+          supabaseClient={supabase}
+          appearance={{ theme: ThemeSupa }}
+          providers={["google"]}
+          redirectTo={`${window.location.origin}/app`}
+        />
+      </div>
     </div>
   );
 }
 
 function ProtectedPublisher() {
-  const [user, setUser] = useState<any>(() => {
-    const saved = localStorage.getItem("firebase_user");
-    return saved ? JSON.parse(saved) : null;
-  });
+  const [session, setSession] = useState<any>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
-      if (firebaseUser) {
-        const userData = {
-          uid: firebaseUser.uid,
-          email: firebaseUser.email,
-          displayName: firebaseUser.displayName,
-          photoURL: firebaseUser.photoURL,
-        };
-        setUser(userData);
-        localStorage.setItem("firebase_user", JSON.stringify(userData));
-      } else {
-        setUser(null);
-        localStorage.removeItem("firebase_user");
-      }
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
       setLoading(false);
     });
-    return () => unsubscribe();
   }, []);
 
   if (loading) return <div className="min-h-screen bg-[#0f0f1e] flex items-center justify-center text-white">جاري التحميل...</div>;
-  if (!user) return <Redirect to="/" />;
+  if (!session) return <Redirect to="/" />;
 
   return <Publisher />;
 }
 
+function ProtectedSubscription() {
+  const [session, setSession] = useState<any>(null);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+    });
+  }, []);
+
+  if (!session) return <Redirect to="/" />;
+  return <Subscription />;
+}
+
+function ProtectedExtension() {
+  const [session, setSession] = useState<any>(null);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+    });
+  }, []);
+
+  if (!session) return <Redirect to="/" />;
+  return <InstallExtension />;
+}
+
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <WouterRouter base={basePath}>
-        <FirebaseAuthTokenSetter />
+        <SupabaseAuthTokenSetter />
         <TooltipProvider>
           <Switch>
             <Route path="/" component={HomePage} />
             <Route path="/app" component={ProtectedPublisher} />
+            <Route path="/subscription" component={ProtectedSubscription} />
+            <Route path="/subscription/return" component={SubscriptionReturn} />
+            <Route path="/extension" component={ProtectedExtension} />
+            <Route path="/admin" component={Admin} />
+            <Route component={NotFound} />
           </Switch>
           <UpdateBanner />
           <Toaster />