Refactor: Improve error handling in authentication flow

frontend/src/app/login/page.tsx

@@ -1,9 +1,7 @@
 'use client';
 
-export const dynamic = 'force-dynamic';
-
 import { useEffect, useState } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { authApi } from '@/lib/api';
 import { useStore } from '@/lib/store';
 import { Button } from '@/components/ui/button';
@@ -13,17 +11,13 @@ import { toast } from 'sonner';
 
 export default function LoginPage() {
   const router = useRouter();
-  const searchParams = useSearchParams();
-  const { setUser, setToken, isAuthenticated } = useStore();
+  const { isAuthenticated } = useStore();
   const [isLoading, setIsLoading] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
-    // Check for Plex OAuth callback
-    const code = searchParams.get('code');
-    if (code) {
-      handlePlexCallback(code);
-    }
-  }, [searchParams]);
+    setIsMounted(true);
+  }, []);
 
   useEffect(() => {
     if (isAuthenticated) {
@@ -31,26 +25,6 @@ export default function LoginPage() {
     }
   }, [isAuthenticated, router]);
 
-  const handlePlexCallback = async (code: string) => {
-    setIsLoading(true);
-    try {
-      const response = await authApi.plexCallback(code);
-      const { user, token } = response.data;
-      
-      localStorage.setItem('token', token);
-      setUser(user);
-      setToken(token);
-      
-      toast.success(`Welcome, ${user.plexUsername}!`);
-      router.push('/dashboard');
-    } catch (error) {
-      toast.error('Authentication failed');
-      console.error(error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
   const handlePlexLogin = async () => {
     setIsLoading(true);
     try {
@@ -63,8 +37,24 @@ export default function LoginPage() {
     }
   };
 
+  if (!isMounted) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-950 p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader className="text-center">
+            <div className="mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4">
+              <Tv className="w-8 h-8 text-primary" />
+            </div>
+            <CardTitle className="text-2xl">CoopCredits</CardTitle>
+            <CardDescription>Loading...</CardDescription>
+          </CardHeader>
+        </Card>
+      </div>
+    );
+  }
+
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-4">
+    <div className="min-h-screen flex items-center justify-center bg-slate-950 p-4">
       <Card className="w-full max-w-md">
         <CardHeader className="text-center">
           <div className="mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4">