fix: resolve session persistence by converting to client-side auth and fix Docker entrypoint line endings

Author: HugeFrog24

backend/api/views.py

@@ -57,7 +57,17 @@ def post(self, request, *args, **kwargs):
 
         if user is not None:
             auth_login(request, user)
-            return JsonResponse({"detail": "Successfully logged in."})
+            return JsonResponse({
+                "detail": "Successfully logged in.",
+                "user": {
+                    "id": user.id,
+                    "username": user.username,
+                    "email": user.email,
+                    "is_staff": user.is_staff,
+                    "is_superuser": user.is_superuser,
+                },
+                "token": None  # Session-based auth, no token needed
+            })
         else:
             return JsonResponse(
                 {"detail": "Invalid login credentials."},

frontend/Dockerfile.dev

@@ -8,12 +8,13 @@ COPY package*.json .npmrc ./
 # Install dependencies with CI-optimized flags
 RUN npm ci --prefer-offline --no-audit --no-fund
 
-# Copy entrypoint script and make it executable
-COPY docker-entrypoint.sh /usr/local/bin/
-RUN chmod +x /usr/local/bin/docker-entrypoint.sh
-
+# Copy application files
 COPY . .
 
+# Copy entrypoint script, convert Windows line endings to Unix, and make it executable
+COPY docker-entrypoint.sh /usr/local/bin/
+RUN sed -i 's/\r$//' /usr/local/bin/docker-entrypoint.sh && chmod +x /usr/local/bin/docker-entrypoint.sh
+
 EXPOSE 3000
 
 ENTRYPOINT ["/usr/local/bin/docker-entrypoint.sh"]

frontend/app/components/Login.tsx

@@ -1,40 +1,27 @@
 import * as React from 'react';
 import type { FC, ChangeEvent } from "react";
 import { Container, Grid } from '@mui/material';
-import { useNavigate, Form, useSubmit, useActionData } from '@remix-run/react';
+import { useNavigate } from '@remix-run/react';
 import { TextField, Typography, Button, CircularProgress } from '@mui/material';
 import ReCAPTCHA from 'react-google-recaptcha';
 import type { ReCAPTCHA as ReCAPTCHAType } from 'react-google-recaptcha';
 import UserContext from '../contexts/UserContext';
 
 interface LoginProps {
-    onLogin: () => void;
+    onLogin: (username: string, password: string, recaptcha: string) => Promise<{ success: boolean }>;
     recaptchaSiteKey: string;
 }
 
-export const Login: FC<LoginProps> = ({ recaptchaSiteKey }) => {
+export const Login: FC<LoginProps> = ({ recaptchaSiteKey, onLogin }) => {
     const [username, setUsername] = React.useState<string>("");
     const [password, setPassword] = React.useState<string>("");
     const [usernameInvalid, setUsernameInvalid] = React.useState<boolean>(false);
     const [passwordInvalid, setPasswordInvalid] = React.useState<boolean>(false);
     const [isLoading, setIsLoading] = React.useState<boolean>(false);
 
     const navigate = useNavigate();
-    const submit = useSubmit();
     const recaptchaRef = React.useRef<ReCAPTCHAType>(null);
-    const formRef = React.useRef<HTMLFormElement>(null);
-    const actionData = useActionData<{ success?: boolean; error?: string; user?: any }>();
-    const { updateUser } = React.useContext(UserContext);
-
-    React.useEffect(() => {
-        if (actionData?.success && actionData.user) {
-            updateUser(actionData.user);
-            navigate("/");
-        }
-        if (actionData?.error) {
-            setIsLoading(false);
-        }
-    }, [actionData, navigate, updateUser]);
+    const [error, setError] = React.useState<string>("");
 
     const validateForm = (): boolean => {
         const isUsernameInvalid = !username;
@@ -65,23 +52,20 @@ export const Login: FC<LoginProps> = ({ recaptchaSiteKey }) => {
                 return;
             }
 
-            if (formRef.current) {
-                const formData = new FormData(formRef.current);
-                formData.set('username', username);
-                formData.set('password', password);
-                formData.set('recaptcha', token);
-
-                console.log('Submitting form with data:', {
-                    username,
-                    recaptcha: 'present'
-                });
-                
-                submit(formData, {
-                    method: 'post'
-                });
+            console.log('Calling onLogin with data:', {
+                username,
+                recaptcha: 'present'
+            });
+            
+            // Call the client-side login handler
+            const result = await onLogin(username, password, token);
+            if (result.success) {
+                setIsLoading(false);
             }
+            
         } catch (error) {
-            console.error('Error during form submission:', error);
+            console.error('Error during login:', error);
+            setError(error instanceof Error ? error.message : 'Login failed');
             setIsLoading(false);
         }
     };
@@ -101,12 +85,12 @@ export const Login: FC<LoginProps> = ({ recaptchaSiteKey }) => {
             <Grid container justifyContent="center">
                 <Grid item xs={12} md={8} lg={3}>
                     <Typography variant="h4" component="h2" sx={{ mb: 3 }}>Login</Typography>
-                    {actionData?.error && (
+                    {error && (
                         <Typography color="error" sx={{ mb: 2 }}>
-                            {actionData.error}
+                            {error}
                         </Typography>
                     )}
-                    <Form ref={formRef} method="post">
+                    <form>
                         <input type="hidden" name="recaptcha" value="" />
                         <TextField
                             id="username"
@@ -168,7 +152,7 @@ export const Login: FC<LoginProps> = ({ recaptchaSiteKey }) => {
                         >
                             Forgot Password?
                         </Button>
-                    </Form>
+                    </form>
                 </Grid>
             </Grid>
         </Container>

frontend/app/routes/_app.login.tsx

@@ -26,52 +26,7 @@ export async function loader() {
   });
 }
 
-export async function action({ request }: ActionFunctionArgs) {
-  const formData = await request.formData();
-  const username = formData.get("username");
-  const password = formData.get("password");
-  const recaptcha = formData.get("recaptcha");
-
-  if (typeof username !== "string" || typeof password !== "string" || typeof recaptcha !== "string") {
-    return json(
-      { error: "Invalid form submission" },
-      { status: 400 }
-    );
-  }
-
-  if (!username || !password || !recaptcha) {
-    return json(
-      { error: "All fields are required" },
-      { status: 400 }
-    );
-  }
-
-  try {
-    const response = await api.post('/auth/login/', {
-      username,
-      password,
-      recaptcha,
-    });
-
-    return json({ 
-      success: true,
-      user: response.data.user,
-      token: response.data.token 
-    });
-
-  } catch (error) {
-    if (isAxiosError(error) && error.response) {
-      return json(
-        { error: error.response.data.detail || "Login failed" },
-        { status: error.response.status }
-      );
-    }
-    return json(
-      { error: "Login failed. Please check your credentials." },
-      { status: 401 }
-    );
-  }
-}
+// Remove server-side action - login will be handled client-side
 
 export default function LoginPage() {
   const data = useLoaderData<typeof loader>();
@@ -87,6 +42,29 @@ export default function LoginPage() {
     // Set the navigate function for the API utility
     api.setNavigate(navigate);
   }, [navigate]);
+
+  const handleLogin = async (username: string, password: string, recaptcha: string) => {
+    try {
+      const response = await api.post('/auth/login/', {
+        username,
+        password,
+        recaptcha,
+      });
+
+      // Update user context with the logged-in user
+      updateUser(response.data.user);
+      
+      // Navigate to home page
+      navigate('/');
+      
+      return { success: true };
+    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        throw new Error(error.response.data.detail || "Login failed");
+      }
+      throw new Error("Login failed. Please check your credentials.");
+    }
+  };
 
   if (!data.RECAPTCHA_SITE_KEY) {
     return (
@@ -108,12 +86,9 @@ export default function LoginPage() {
   }
 
   return (
-    <Login 
-      recaptchaSiteKey={data.RECAPTCHA_SITE_KEY} 
-      onLogin={() => {
-        // The Login component will call this without arguments
-        // but we'll update the user context when we get the response in the action
-      }} 
+    <Login
+      recaptchaSiteKey={data.RECAPTCHA_SITE_KEY}
+      onLogin={handleLogin}
     />
   );
 }

frontend/app/routes/_app.tsx

@@ -19,11 +19,10 @@ export interface LoaderData {
 
 export const loader: LoaderFunction = async ({ request }) => {
   try {
-    const [siteData, user] = await Promise.all([
-      fetchSiteTitle(),
-      fetchAuthenticatedUser(request),
-    ]);
-    return json<LoaderData>({ siteData, user });
+    const siteData = await fetchSiteTitle();
+    // Don't try to fetch user on server-side due to cookie forwarding issues
+    // User will be fetched client-side after hydration
+    return json<LoaderData>({ siteData, user: null });
   } catch (error) {
     return json<LoaderData>({
       siteData: { site_name: "Our Platform" },
@@ -45,6 +44,28 @@ export default function AppLayout() {
   // Use cached loader data instead of regular useLoaderData
   const { siteData, user } = useCachedLoaderData<LoaderData>();
   const [currentUser, setUser] = React.useState<User | null>(user);
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  // Fetch user client-side after hydration to avoid cookie forwarding issues
+  React.useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        const response = await fetch('http://localhost/api/users/me/', {
+          credentials: 'include',
+        });
+        if (response.ok) {
+          const userData = await response.json();
+          setUser(userData);
+        }
+      } catch (error) {
+        console.log('User not authenticated or error fetching user:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchUser();
+  }, []);
 
   const userContextValue: UserContextType = {
     user: currentUser,