feat: add endpoints - authenticate [passkeys]

.env.example

@@ -48,3 +48,6 @@ BACKUP_FILE_PUBLIC_KEY=MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEAoVLU6+xg0/joE
 # Temporary:
 NEXT_PUBLIC_APPLICATION_ID=""
 NEXT_PUBLIC_CLIENT_ID=""
+
+# Passkeys:
+SIGNUP_EMAIL_ADDRESS="" # email address without the domain

.gitignore

@@ -41,3 +41,4 @@ next-env.d.ts
 
 ## supabase
 /supabase/
+.qodo

README.md

@@ -142,4 +142,4 @@ pnpm db:regenerate-migrations
 
 If this worked, you should see 5 triggers in Supabase under [Database > Triggers > auth](https://supabase.com/dashboard/project/pboorlggoqpyiucxmneq/database/triggers?schema=auth).
 
-Also, make sure you delete your Supabase users under Authentication, as those are no longer duplicated in the `UserProfile` table.
+Also, make sure you delete your Supabase users under Authentication, as those are no longer duplicated in the `UserProfile` table.

app/auth/callback/apple/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { supabase } from "@/client/utils/supabase/supabase-client-client"
+
+const redirectToHash = (path: string, params?: Record<string, string>) => {
+  const baseUrl = window.location.origin;
+  let url = `${baseUrl}/#${path}`;
+
+  // Add query params if provided
+  if (params) {
+    const queryString = Object.entries(params)
+      .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+      .join('&');
+    url += `?${queryString}`;
+  }
+
+  console.log("Redirecting to:", url);
+  window.location.replace(url);
+};
+
+export default function AppleAuthCallback() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleAuthCallback = async () => {
+      try {
+        console.log("Processing Apple OAuth callback");
+
+        // Get the auth code from the URL
+        const { data, error } = await supabase.auth.exchangeCodeForSession(
+          window.location.href
+        );
+
+        if (error) {
+          console.error("Error exchanging code for session:", error);
+          redirectToHash('/', { error: "Authentication failed" });
+          return;
+        }
+
+        console.log("Apple authentication successful", data);
+
+        // Save the session token in localStorage
+        if (data.session?.access_token) {
+          localStorage.setItem('authToken', data.session.access_token);
+          // Make sure we don't have any conflicting auth flags
+          localStorage.removeItem('isCustomAuth');
+
+          // We can also store the refresh token if available
+          if (data.session.refresh_token) {
+            localStorage.setItem('refreshToken', data.session.refresh_token);
+          }
+        }
+
+        // Redirect to the auth/restore-shares path after successful authentication
+        redirectToHash('/auth/restore-shares');
+      } catch (error) {
+        console.error("Error during Apple authentication callback:", error);
+        // Redirect to login page if there's an error
+        redirectToHash('/', { error: "Authentication failed" });
+      }
+    };
+
+    handleAuthCallback();
+  }, [router]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="text-center">
+        <h2 className="text-2xl font-semibold mb-4">Authenticating with Apple...</h2>
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900 mx-auto"></div>
+      </div>
+    </div>
+  );
+}

app/auth/callback/google/page.tsx

@@ -4,25 +4,131 @@ import { useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { supabase } from "../../../../client/utils/supabase/supabase-client-client"
 
+const redirectToHash = (path: string, params?: Record<string, string>) => {
+  const baseUrl = window.location.origin;
+  let url = `${baseUrl}/#${path}`;
+
+  // Add query params if provided
+  if (params) {
+    const queryString = Object.entries(params)
+      .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+      .join('&');
+    url += `?${queryString}`;
+  }
+
+  console.log("Redirecting to:", url);
+  window.location.replace(url);
+};
+
 export default function AuthCallbackPage() {
   const router = useRouter()
 
   useEffect(() => {
     const handleAuthCallback = async () => {
-      const { data, error } = await supabase.auth.getSession()
-      if (error) {
-        console.error("Error during auth callback:", error)
-        router.push("/login?error=Unable to authenticate")
-      } else if (data.session) {
-        router.push("/dashboard")
-      } else {
-        router.push("/login?error=No session found")
+      try {
+        console.log("Processing Google OAuth callback");
+        console.log("Current URL:", window.location.href);
+        console.log("Origin:", window.location.origin);
+
+        // Add protection for double processing
+        const urlParams = new URLSearchParams(window.location.search);
+        const hashParams = new URLSearchParams(window.location.hash.replace('#', ''));
+        const codeParam = urlParams.get('code') || hashParams.get('code');
+
+        if (!codeParam) {
+          console.warn("No code parameter found in URL, cannot exchange for session");
+          redirectToHash('/login', { error: "Missing authentication code" });
+          return;
+        }
+
+        // Try the code exchange
+        try {
+          console.log("Attempting to exchange code for session...");
+          const { data, error } = await supabase.auth.exchangeCodeForSession(window.location.href);
+
+          if (error) {
+            console.error("Error exchanging code for session:", error);
+            // Redirect to login with error using hash-based format
+            redirectToHash('/login', { error: "Unable to authenticate: " + error.message });
+            return;
+          }
+
+          console.log("Authentication successful, session data:", 
+            data.session ? {
+              hasAccessToken: !!data.session.access_token,
+              hasRefreshToken: !!data.session.refresh_token,
+              expiresAt: data.session.expires_at,
+              user: data.session.user ? {
+                id: data.session.user.id,
+                email: data.session.user.email
+              } : null
+            } : "No session"
+          );
+
+          // Save the session token in localStorage
+          if (data.session?.access_token) {
+            console.log("Storing access token in localStorage");
+            localStorage.setItem('authToken', data.session.access_token);
+
+            // Make sure we don't have any conflicting auth flags
+            localStorage.removeItem('isCustomAuth');
+
+            // We can also store the refresh token if available
+            if (data.session.refresh_token) {
+              localStorage.setItem('refreshToken', data.session.refresh_token);
+            }
+
+            // Additional information for debugging
+            localStorage.setItem('userId', data.session.user?.id || '');
+
+            // For debugging, also log any other session properties
+            console.log("Session expires at:", data.session.expires_at ? 
+              new Date(data.session.expires_at * 1000).toLocaleString() : 
+              "No expiration time"
+            );
+
+            // Force a delay before redirecting to ensure localStorage is updated
+            await new Promise(resolve => setTimeout(resolve, 500));
+
+            // Detect if we're in the extension context (port 5173)
+            const isExtension = window.location.origin.includes('localhost:5173') || 
+                               window.location.origin.includes('chrome-extension://');
+
+            console.log("Is extension context:", isExtension);
+
+            // Successfully authenticated, redirect to auth/restore-shares using hash-based format
+            // Make sure we're using the right format for the extension
+            if (isExtension) {
+              // For extension, use a simpler redirect format
+              console.log("Using extension redirect format");
+              window.location.replace(`${window.location.origin}/#/auth/restore-shares`);
+            } else {
+              // For web app, use the standard format
+              console.log("Using web app redirect format");
+              redirectToHash('/auth/restore-shares');
+            }
+          } else {
+            console.error("No access token in session data");
+            redirectToHash('/login', { error: "No access token received" });
+          }
+        } catch (exchangeError: unknown) {
+          console.error("Exception during code exchange:", exchangeError);
+          const errorMessage = exchangeError instanceof Error ? exchangeError.message : "Unknown error";
+          redirectToHash('/login', { error: "Error during authentication: " + errorMessage });
+        }
+      } catch (err) {
+        console.error("Error during auth callback:", err);
+        // Redirect to login with error using hash-based format
+        redirectToHash('/login', { error: "Authentication process failed" });
       }
     }
 
-    handleAuthCallback()
+    // Delay slightly to ensure DOM is fully loaded
+    setTimeout(() => {
+      handleAuthCallback();
+    }, 100);
   }, [router])
 
-  return <div>Processing authentication...</div>
+  return <div>Processing Google authentication...</div>
 }
 

app/dashboard/page.tsx

@@ -6,6 +6,7 @@ import { trpc } from "@/client/utils/trpc/trpc-client"
 import { ProtectedApiInteraction } from "../../client/components/ProtectedApiInteraction"
 import { useAuth } from "@/client/hooks/useAuth"
 import { supabase } from "@/client/utils/supabase/supabase-client-client"
+import RefreshTokenTest from "@/client/components/RefreshTokenTest"
 
 export default function DashboardPage() {
   const router = useRouter();
@@ -19,19 +20,16 @@ export default function DashboardPage() {
     }
   }, [isAuthLoading, user, router])
 
-  const handleRefresh = async () => {
-    await supabase.auth.refreshSession();
-  }
-
   const handleLogout = async () => {
     try {
       setIsLoading(true);
 
       await logoutMutation.mutateAsync();
       await supabase.auth.signOut();
+
+      router.push("/");
     } catch (error) {
       setIsLoading(false);
-
       console.error("Logout failed:", error)
     }
   }
@@ -43,13 +41,6 @@ export default function DashboardPage() {
     <div className="container mx-auto px-4 py-8">
       <div className="flex justify-between items-center mb-8">
         <h1 className="text-3xl font-bold">Dashboard</h1>
-        <button
-          onClick={handleRefresh}
-          className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-        >
-          Refresh Session
-        </button>
-
         <button
           onClick={handleLogout}
           className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
@@ -58,6 +49,13 @@ export default function DashboardPage() {
         </button>
       </div>
       <p className="mb-4">Welcome, user with ID: {user.id}</p>
+
+      {/* Include the RefreshTokenTest component */}
+      <div className="mb-8">
+        <h2 className="text-xl font-bold mb-4">Session Management</h2>
+        <RefreshTokenTest />
+      </div>
+
       <ProtectedApiInteraction />
     </div>
   )

app/globals.css

@@ -1,3 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Your custom styles below */
+
 body {
   font-family: Arial, Helvetica, sans-serif;
 }