[frontend] Fix redirect issue after signin by using router.replace fr…

…om client component (#246)

* [frontend] Fix redirect issue after signin by using router.replace from client component

* [frontend] Add useEffect for router.replace after signin

frontend/app/lib/actions.ts

@@ -57,13 +57,17 @@ export async function authenticate(
       password: formData.get("password") as string,
     });
     revalidatePath("/", "layout");
-    redirect("/");
   } catch (error) {
     if ((error as Error).message.includes("Authentication failed")) {
       return "CredentialSignin";
     }
     throw error;
   }
+  // This is a temporary fix for the redirect issue. It seems that the redirect is not working as expected.
+  // Instead of redirecting from server action, router.refresh from client component is used.
+  // Maybe this is related?: https://github.com/vercel/next.js/issues/58263
+  // redirect('/', 'layout');
+  return "Authenticated";
 }
 
 function getAccessToken() {

frontend/app/ui/auth/login-form.tsx

@@ -7,6 +7,8 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useFormState, useFormStatus } from "react-dom";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
 export default function LoginForm() {
   return (
@@ -26,6 +28,12 @@ export default function LoginForm() {
 function Form() {
   const { currentUser } = useAuthContext();
   const [code, action] = useFormState(authenticate, undefined);
+  const router = useRouter();
+  useEffect(() => {
+    if (code === "Authenticated") {
+      router.replace("/");
+    }
+  }, [code, router]);
   return (
     <>
       <form action={action}>