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

artifacts/fb-publisher/src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { StackProvider, StackTheme, useStackApp, Stack, SignIn, SignUp, useUser } from "@stackframe/react";
+import { KindeProvider, useKindeAuth } from "@kinde-oss/kinde-auth-react";
 import { setAuthTokenGetter } from "@workspace/api-client-react";
 import {
   Switch,
@@ -21,92 +21,37 @@ import Admin from "@/pages/Admin";
 import NotFound from "@/pages/not-found";
 import UpdateBanner from "@/components/UpdateBanner";
 
-const stackProjectId = import.meta.env.VITE_STACK_PROJECT_ID as string;
-const stackPublishableKey = import.meta.env.VITE_STACK_PUBLISHABLE_KEY as string;
+const kindeDomain = import.meta.env.VITE_KINDE_DOMAIN as string;
+const kindeClientId = import.meta.env.VITE_KINDE_CLIENT_ID as string;
 const basePath = import.meta.env.BASE_URL.replace(/\/$/, "");
 
-function stripBase(path: string): string {
-  return basePath && path.startsWith(basePath)
-    ? path.slice(basePath.length) || "/"
-    : path;
-}
-
-if (!stackProjectId) {
-  throw new Error("Missing VITE_STACK_PROJECT_ID");
-}
-
-function SignInPage() {
-  return (
-    <div className="flex min-h-[100dvh] items-center justify-center px-4">
-      <SignIn
-        firstTab="password"
-        automaticRedirect={true}
-        redirectUrl={`${basePath}/app`}
-      />
-    </div>
-  );
-}
-
-function SignUpPage() {
-  return (
-    <div className="flex min-h-[100dvh] items-center justify-center px-4">
-      <div className="w-full max-w-md space-y-4">
-        <SignUp
-          automaticRedirect={true}
-          redirectUrl={`${basePath}/app`}
-        />
-        <div className="rounded-lg border border-red-500/30 bg-red-950/20 p-3 text-center text-sm text-red-300 backdrop-blur-sm">
-          ⚠️ <strong>تنبيه هام لمكافحة السبام والرسائل المزعجة (Spam):</strong>{" "}
-          التسجيل باستخدام البريد الإلكتروني المؤقت (مثل{" "}
-          <code className="rounded bg-red-950/40 px-1">tempumail.art</code>)
-          ممنوع تمامًا وسيؤدي إلى <strong>حظر الحساب فور اكتشافه</strong>. يُرجى
-          استخدام بريد إلكتروني حقيقي ودائم.
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function HomePage() {
-  const user = useUser();
-  
-  if (user) {
-    return <Redirect to="/app" />;
-  }
-  
-  return <Landing />;
-}
-
 function ProtectedPublisher() {
-  const user = useUser();
+  const { isAuthenticated, isLoading } = useKindeAuth();
   
-  if (!user) {
-    return <Redirect to="/sign-in" />;
-  }
+  if (isLoading) return <div className="min-h-screen flex items-center justify-center"><div className="text-gray-300">جاري التحميل...</div></div>;
+  if (!isAuthenticated) return <Redirect to="/sign-in" />;
   
   return <Publisher />;
 }
 
 function ProtectedSubscription() {
-  const user = useUser();
-  
-  if (!user) {
-    return <Redirect to="/sign-in" />;
-  }
-  
+  const { isAuthenticated } = useKindeAuth();
+  if (!isAuthenticated) return <Redirect to="/sign-in" />;
   return <Subscription />;
 }
 
 function ProtectedExtension() {
-  const user = useUser();
-  
-  if (!user) {
-    return <Redirect to="/sign-in" />;
-  }
-  
+  const { isAuthenticated } = useKindeAuth();
+  if (!isAuthenticated) return <Redirect to="/sign-in" />;
   return <InstallExtension />;
 }
 
+function HomePage() {
+  const { isAuthenticated } = useKindeAuth();
+  if (isAuthenticated) return <Redirect to="/app" />;
+  return <Landing />;
+}
+
 function ServerKeepAlive() {
   const [waking, setWaking] = useState(false);
 
@@ -141,22 +86,21 @@ function ServerKeepAlive() {
   );
 }
 
-function StackAuthTokenSetter() {
-  const app = useStackApp();
+function KindeAuthTokenSetter() {
+  const { getToken } = useKindeAuth();
   
   useEffect(() => {
     setAuthTokenGetter(async () => {
-      const token = await app.getAccessToken();
-      return token ?? null;
+      return await getToken() ?? null;
     });
     return () => setAuthTokenGetter(null);
-  }, [app]);
+  }, [getToken]);
 
   return null;
 }
 
-function StackQueryClientCacheInvalidator() {
-  const user = useUser();
+function KindeQueryClientCacheInvalidator() {
+  const { user, isAuthenticated } = useKindeAuth();
   const qc = useQueryClient();
   const prevUserIdRef = useRef<string | null | undefined>(undefined);
 
@@ -171,44 +115,40 @@ function StackQueryClientCacheInvalidator() {
   return null;
 }
 
-function StackProviderWithRoutes() {
-  const [, setLocation] = useLocation();
-
+function KindeProviderWithRoutes() {
   return (
-    <StackProvider
-      projectId={stackProjectId}
-      publishableClientKey={stackPublishableKey}
+    <KindeProvider
+      domain={kindeDomain}
+      clientId={kindeClientId}
+      redirectUri={`${window.location.origin}/api/kinde/callback`}
+      logoutUri={`${window.location.origin}`}
     >
-      <StackTheme>
-        <QueryClientProvider client={queryClient}>
-          <ServerKeepAlive />
-          <StackAuthTokenSetter />
-          <StackQueryClientCacheInvalidator />
-          <TooltipProvider>
-            <Switch>
-              <Route path="/" component={HomePage} />
-              <Route path="/sign-in/*?" component={SignInPage} />
-              <Route path="/sign-up/*?" component={SignUpPage} />
-              <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 />
-          </TooltipProvider>
-        </QueryClientProvider>
-      </StackTheme>
-    </StackProvider>
+      <QueryClientProvider client={queryClient}>
+        <ServerKeepAlive />
+        <KindeAuthTokenSetter />
+        <KindeQueryClientCacheInvalidator />
+        <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 />
+        </TooltipProvider>
+      </QueryClientProvider>
+    </KindeProvider>
   );
 }
 
 export default function App() {
   return (
     <WouterRouter base={basePath}>
-      <StackProviderWithRoutes />
+      <KindeProviderWithRoutes />
     </WouterRouter>
   );
 }