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

artifacts/fb-publisher/src/App.tsx

@@ -1,14 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import {
-  ClerkProvider,
-  SignIn,
-  SignUp,
-  Show,
-  useClerk,
-  useAuth,
-} from "@clerk/react";
-import { arSA } from "@clerk/localizations";
-import { shadcn } from "@clerk/themes";
+import { StackProvider, StackTheme, useStackApp, Stack, SignIn, SignUp, useUser } from "@stackframe/react";
 import { setAuthTokenGetter } from "@workspace/api-client-react";
 import {
   Switch,
@@ -30,8 +21,8 @@ import Admin from "@/pages/Admin";
 import NotFound from "@/pages/not-found";
 import UpdateBanner from "@/components/UpdateBanner";
 
-const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY as string;
-const clerkProxyUrl = import.meta.env.VITE_CLERK_PROXY_URL as string | undefined;
+const stackProjectId = import.meta.env.VITE_STACK_PROJECT_ID as string;
+const stackPublishableKey = import.meta.env.VITE_STACK_PUBLISHABLE_KEY as string;
 const basePath = import.meta.env.BASE_URL.replace(/\/$/, "");
 
 function stripBase(path: string): string {
@@ -40,66 +31,17 @@ function stripBase(path: string): string {
     : path;
 }
 
-if (!clerkPubKey) {
-  throw new Error("Missing VITE_CLERK_PUBLISHABLE_KEY");
+if (!stackProjectId) {
+  throw new Error("Missing VITE_STACK_PROJECT_ID");
 }
 
-const clerkAppearance = {
-  theme: shadcn,
-  cssLayerName: "clerk",
-  options: {
-    logoPlacement: "inside" as const,
-    logoLinkUrl: basePath || "/",
-    logoImageUrl: `${window.location.origin}${basePath}/logo.svg`,
-  },
-  variables: {
-    colorPrimary: "#bb86fc",
-    colorForeground: "#f5f5f7",
-    colorMutedForeground: "#a8a8b3",
-    colorDanger: "#ff6b6b",
-    colorBackground: "#16162a",
-    colorInput: "#1f1f3a",
-    colorInputForeground: "#f5f5f7",
-    colorNeutral: "#3a3a55",
-    fontFamily: '"Tajawal", "Inter", system-ui, sans-serif',
-    borderRadius: "12px",
-  },
-  elements: {
-    rootBox: "w-full",
-    cardBox: "bg-[#16162a] rounded-2xl w-[440px] max-w-full overflow-hidden border border-[#3a3a55]/40",
-    card: "!shadow-none !border-0 !bg-transparent !rounded-none",
-    footer: "!shadow-none !border-0 !bg-transparent !rounded-none",
-    headerTitle: "text-white",
-    headerSubtitle: "text-gray-300",
-    socialButtonsBlockButtonText: "text-white",
-    formFieldLabel: "text-gray-200",
-    footerActionLink: "text-[#bb86fc] hover:text-[#d4b3ff]",
-    footerActionText: "text-gray-300",
-    dividerText: "text-gray-400",
-    identityPreviewEditButton: "text-[#bb86fc]",
-    formFieldSuccessText: "text-green-300",
-    alertText: "text-gray-200",
-    logoBox: "mb-2",
-    logoImage: "h-10 w-10",
-    socialButtonsBlockButton: "bg-[#1f1f3a] hover:bg-[#2a2a4a] border border-[#3a3a55] text-white",
-    formButtonPrimary: "btn-primary-grad",
-    formFieldInput: "bg-[#1f1f3a] border-[#3a3a55] text-white",
-    footerAction: "text-gray-300",
-    dividerLine: "bg-[#3a3a55]",
-    alert: "bg-[#1f1f3a] border-[#3a3a55]",
-    otpCodeFieldInput: "bg-[#1f1f3a] border-[#3a3a55] text-white",
-    main: "text-white",
-  },
-};
-
 function SignInPage() {
   return (
     <div className="flex min-h-[100dvh] items-center justify-center px-4">
       <SignIn
-        routing="path"
-        path={`${basePath}/sign-in`}
-        signUpUrl={`${basePath}/sign-up`}
-        forceRedirectUrl={`${basePath}/app`}
+        firstTab="password"
+        automaticRedirect={true}
+        redirectUrl={`${basePath}/app`}
       />
     </div>
   );
@@ -110,10 +52,8 @@ function SignUpPage() {
     <div className="flex min-h-[100dvh] items-center justify-center px-4">
       <div className="w-full max-w-md space-y-4">
         <SignUp
-          routing="path"
-          path={`${basePath}/sign-up`}
-          signInUrl={`${basePath}/sign-in`}
-          forceRedirectUrl={`${basePath}/app`}
+          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>{" "}
@@ -127,43 +67,44 @@ function SignUpPage() {
   );
 }
 
+function HomePage() {
+  const user = useUser();
+  
+  if (user) {
+    return <Redirect to="/app" />;
+  }
+  
+  return <Landing />;
+}
+
 function ProtectedPublisher() {
-  return (
-    <>
-      <Show when="signed-in">
-        <Publisher />
-      </Show>
-      <Show when="signed-out">
-        <Redirect to="/sign-in" />
-      </Show>
-    </>
-  );
+  const user = useUser();
+  
+  if (!user) {
+    return <Redirect to="/sign-in" />;
+  }
+  
+  return <Publisher />;
 }
 
 function ProtectedSubscription() {
-  return (
-    <>
-      <Show when="signed-in">
-        <Subscription />
-      </Show>
-      <Show when="signed-out">
-        <Redirect to="/sign-in" />
-      </Show>
-    </>
-  );
+  const user = useUser();
+  
+  if (!user) {
+    return <Redirect to="/sign-in" />;
+  }
+  
+  return <Subscription />;
 }
 
 function ProtectedExtension() {
-  return (
-    <>
-      <Show when="signed-in">
-        <InstallExtension />
-      </Show>
-      <Show when="signed-out">
-        <Redirect to="/sign-in" />
-      </Show>
-    </>
-  );
+  const user = useUser();
+  
+  if (!user) {
+    return <Redirect to="/sign-in" />;
+  }
+  
+  return <InstallExtension />;
 }
 
 function ServerKeepAlive() {
@@ -200,82 +141,74 @@ function ServerKeepAlive() {
   );
 }
 
-function ClerkAuthTokenSetter() {
-  const { getToken } = useAuth();
+function StackAuthTokenSetter() {
+  const app = useStackApp();
+  
   useEffect(() => {
-    setAuthTokenGetter(() => getToken());
+    setAuthTokenGetter(async () => {
+      const token = await app.getAccessToken();
+      return token ?? null;
+    });
     return () => setAuthTokenGetter(null);
-  }, [getToken]);
+  }, [app]);
+
   return null;
 }
 
-function ClerkQueryClientCacheInvalidator() {
-  const { addListener } = useClerk();
+function StackQueryClientCacheInvalidator() {
+  const user = useUser();
   const qc = useQueryClient();
   const prevUserIdRef = useRef<string | null | undefined>(undefined);
 
   useEffect(() => {
-    const unsubscribe = addListener(({ user }) => {
-      const userId = user?.id ?? null;
-      if (prevUserIdRef.current !== undefined && prevUserIdRef.current !== userId) {
-        qc.clear();
-      }
-      prevUserIdRef.current = userId;
-    });
-    return unsubscribe;
-  }, [addListener, qc]);
+    const userId = user?.id ?? null;
+    if (prevUserIdRef.current !== undefined && prevUserIdRef.current !== userId) {
+      qc.clear();
+    }
+    prevUserIdRef.current = userId;
+  }, [user?.id, qc]);
 
   return null;
 }
 
-function ClerkProviderWithRoutes() {
+function StackProviderWithRoutes() {
   const [, setLocation] = useLocation();
 
   return (
-    <ClerkProvider
-      publishableKey={clerkPubKey}
-      proxyUrl={clerkProxyUrl}
-      appearance={clerkAppearance}
-      signInUrl={`${basePath}/sign-in`}
-      signUpUrl={`${basePath}/sign-up`}
-      localization={{
-        ...arSA,
-        formFieldInputPlaceholder__emailAddress: "أدخل بريدك الإلكتروني",
-        signIn: { ...arSA.signIn, start: { ...((arSA.signIn as any)?.start), title: "تسجيل الدخول", subtitle: "أدخل بياناتك للوصول إلى حسابك" } },
-        signUp: { ...arSA.signUp, start: { ...((arSA.signUp as any)?.start), title: "إنشاء حساب جديد", subtitle: "ابدأ تجربتك المجانية لمدة شهر كامل" } },
-        signIn__forgotPasswordLink: "نسيت كلمة المرور؟",
-      }}
-      routerPush={(to) => setLocation(stripBase(to))}
-      routerReplace={(to) => setLocation(stripBase(to), { replace: true })}
+    <StackProvider
+      projectId={stackProjectId}
+      publishableClientKey={stackPublishableKey}
     >
-      <QueryClientProvider client={queryClient}>
-        <ServerKeepAlive />
-        <ClerkAuthTokenSetter />
-        <ClerkQueryClientCacheInvalidator />
-        <TooltipProvider>
-          <Switch>
-            <Route path="/" component={Landing} />
-            <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>
-    </ClerkProvider>
+      <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>
   );
 }
 
 export default function App() {
   return (
     <WouterRouter base={basePath}>
-      <ClerkProviderWithRoutes />
+      <StackProviderWithRoutes />
     </WouterRouter>
   );
 }