diff --git a/frontend/src/routes/desktop-auth.tsx b/frontend/src/routes/desktop-auth.tsx
index b1e14d1be..f73899e82 100644
--- a/frontend/src/routes/desktop-auth.tsx
+++ b/frontend/src/routes/desktop-auth.tsx
@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { useOpenSecret } from "@opensecret/react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Loader2 } from "lucide-react";
+import { AppleAuthProvider } from "@/components/AppleAuthProvider";
 
 // Define the search parameters interface
 interface DesktopAuthSearchParams {
@@ -44,7 +45,13 @@ function DesktopAuth() {
           sessionStorage.setItem("selected_plan", selected_plan);
         }
 
-        // Initiate appropriate OAuth flow
+        // For Apple, we don't need to do anything here - the AppleAuthProvider
+        // component will handle the authentication flow with popup
+        if (provider === "apple") {
+          return;
+        }
+
+        // Initiate appropriate OAuth flow for GitHub and Google
         let auth_url;
         if (provider === "github") {
           const result = await os.initiateGitHubAuth("");
@@ -52,9 +59,6 @@ function DesktopAuth() {
         } else if (provider === "google") {
           const result = await os.initiateGoogleAuth("");
           auth_url = result.auth_url;
-        } else if (provider === "apple") {
-          const result = await os.initiateAppleAuth("");
-          auth_url = result.auth_url;
         } else {
           throw new Error("Unsupported provider");
         }
@@ -71,6 +75,35 @@ function DesktopAuth() {
     initiateAuth();
   }, [os, provider, selected_plan, navigate]);
 
+  // Special handling for Apple OAuth - use popup instead of redirect
+  if (provider === "apple") {
+    return (
+      <Card className="max-w-md mx-auto mt-20">
+        <CardHeader>
+          <CardTitle>Apple Sign In</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="mb-4">Click the button below to sign in with Apple:</p>
+          <AppleAuthProvider
+            onError={(error) => {
+              console.error("Apple auth error:", error);
+              navigate({ to: "/login" });
+            }}
+            redirectAfterLogin={(plan) => {
+              if (plan) {
+                navigate({ to: "/pricing", search: { selected_plan: plan } });
+              } else {
+                navigate({ to: "/" });
+              }
+            }}
+            selectedPlan={selected_plan}
+            inviteCode=""
+          />
+        </CardContent>
+      </Card>
+    );
+  }
+
   return (
     <Card className="max-w-md mx-auto mt-20">
       <CardHeader>
diff --git a/frontend/src/routes/login.tsx b/frontend/src/routes/login.tsx
index 20186458d..9c3e100a5 100644
--- a/frontend/src/routes/login.tsx
+++ b/frontend/src/routes/login.tsx
@@ -40,22 +40,20 @@ function LoginPage() {
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [isIOS, setIsIOS] = useState(false);
+  const [isTauriEnv, setIsTauriEnv] = useState(false);
 
-  // Check if running on iOS
+  // Check if running on iOS and in Tauri environment
   useEffect(() => {
     const checkPlatform = async () => {
       try {
         // First check if we're in a Tauri environment
-        let isTauriEnv = false;
-        try {
-          isTauriEnv = await isTauri();
-        } catch {
-          // Not in Tauri environment
-          isTauriEnv = false;
-        }
+        let tauriEnv = false;
+        tauriEnv = await isTauri();
+
+        setIsTauriEnv(tauriEnv);
 
         // Only check platform type if we're in a Tauri environment
-        if (isTauriEnv) {
+        if (tauriEnv) {
           const platform = await type();
           setIsIOS(platform === "ios");
         } else {
@@ -65,6 +63,7 @@ function LoginPage() {
       } catch (error) {
         console.error("Error checking platform:", error);
         setIsIOS(false);
+        setIsTauriEnv(false);
       }
     };
 
@@ -305,7 +304,7 @@ function LoginPage() {
           <Google className="mr-2 h-4 w-4" />
           Log in with Google
         </Button>
-        {isIOS ? (
+        {isTauriEnv ? (
           <Button onClick={handleAppleLogin} className="w-full">
             <Apple className="mr-2 h-4 w-4" />
             Log in with Apple
diff --git a/frontend/src/routes/signup.tsx b/frontend/src/routes/signup.tsx
index aeb288b54..0851be2a3 100644
--- a/frontend/src/routes/signup.tsx
+++ b/frontend/src/routes/signup.tsx
@@ -40,22 +40,20 @@ function SignupPage() {
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [isIOS, setIsIOS] = useState(false);
+  const [isTauriEnv, setIsTauriEnv] = useState(false);
 
-  // Check if running on iOS
+  // Check if running on iOS and in Tauri environment
   useEffect(() => {
     const checkPlatform = async () => {
       try {
         // First check if we're in a Tauri environment
-        let isTauriEnv = false;
-        try {
-          isTauriEnv = await isTauri();
-        } catch {
-          // Not in Tauri environment
-          isTauriEnv = false;
-        }
+        let tauriEnv = false;
+        tauriEnv = await isTauri();
+
+        setIsTauriEnv(tauriEnv);
 
         // Only check platform type if we're in a Tauri environment
-        if (isTauriEnv) {
+        if (tauriEnv) {
           const platform = await type();
           setIsIOS(platform === "ios");
         } else {
@@ -65,6 +63,7 @@ function SignupPage() {
       } catch (error) {
         console.error("Error checking platform:", error);
         setIsIOS(false);
+        setIsTauriEnv(false);
       }
     };
 
@@ -305,7 +304,7 @@ function SignupPage() {
           <Google className="mr-2 h-4 w-4" />
           Sign up with Google
         </Button>
-        {isIOS ? (
+        {isTauriEnv ? (
           <Button onClick={handleAppleSignup} className="w-full">
             <Apple className="mr-2 h-4 w-4" />
             Sign up with Apple