raggr-frontend/src/api/userService.ts

@@ -55,6 +55,21 @@ class UserService {
     return data.access_token;
   }
 
+  async validateToken(): Promise<boolean> {
+    const refreshToken = localStorage.getItem("refresh_token");
+
+    if (!refreshToken) {
+      return false;
+    }
+
+    try {
+      await this.refreshToken();
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+
   async fetchWithAuth(
     url: string,
     options: RequestInit = {},

raggr-frontend/src/components/LoginScreen.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { userService } from "../api/userService";
 
 type LoginScreenProps = {
@@ -9,8 +9,23 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
   const [username, setUsername] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const [error, setError] = useState<string>("");
+  const [isChecking, setIsChecking] = useState<boolean>(true);
+
+  useEffect(() => {
+    // Check if user is already authenticated
+    const checkAuth = async () => {
+      const isValid = await userService.validateToken();
+      if (isValid) {
+        setAuthenticated(true);
+      }
+      setIsChecking(false);
+    };
+    checkAuth();
+  }, [setAuthenticated]);
+
+  const handleLogin = async (e?: React.FormEvent) => {
+    e?.preventDefault();
 
-  const handleLogin = async () => {
     if (!username || !password) {
       setError("Please enter username and password");
       return;
@@ -28,6 +43,25 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
     }
   };
 
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleLogin();
+    }
+  };
+
+  // Show loading state while checking authentication
+  if (isChecking) {
+    return (
+      <div className="h-screen bg-opacity-20">
+        <div className="bg-white/85 h-screen flex items-center justify-center">
+          <div className="text-center">
+            <p className="text-lg sm:text-xl">Checking authentication...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="h-screen bg-opacity-20">
       <div className="bg-white/85 h-screen">
@@ -52,6 +86,7 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
                 name="username"
                 value={username}
                 onChange={(e) => setUsername(e.target.value)}
+                onKeyPress={handleKeyPress}
                 className="border border-s-slate-950 p-3 rounded-md min-h-[44px]"
               />
               <label htmlFor="password" className="text-sm sm:text-base">
@@ -63,6 +98,7 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
                 name="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
+                onKeyPress={handleKeyPress}
                 className="border border-s-slate-950 p-3 rounded-md min-h-[44px]"
               />
               {error && (