From 408c7a4bc0ee2135b44071566638bb8d81e39285 Mon Sep 17 00:00:00 2001
From: Shun Usami <usatie@gmail.com>
Date: Tue, 6 Feb 2024 21:17:04 -0800
Subject: [PATCH 1/2] [frontend] Fix redirect issue after signin by using
 router.replace from client component

---
 frontend/app/lib/actions.ts         | 6 +++++-
 frontend/app/ui/auth/login-form.tsx | 5 +++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/app/lib/actions.ts b/frontend/app/lib/actions.ts
index 52d0d237..faec5598 100644
--- a/frontend/app/lib/actions.ts
+++ b/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() {
diff --git a/frontend/app/ui/auth/login-form.tsx b/frontend/app/ui/auth/login-form.tsx
index 579ac115..f31b9316 100644
--- a/frontend/app/ui/auth/login-form.tsx
+++ b/frontend/app/ui/auth/login-form.tsx
@@ -7,6 +7,7 @@ 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";
 
 export default function LoginForm() {
   return (
@@ -26,6 +27,10 @@ export default function LoginForm() {
 function Form() {
   const { currentUser } = useAuthContext();
   const [code, action] = useFormState(authenticate, undefined);
+  const router = useRouter();
+  if (code === "Authenticated") {
+    router.replace("/");
+  }
   return (
     <>
       <form action={action}>

From d4fa13b9cd41c26696083db2231e93627ff8dc82 Mon Sep 17 00:00:00 2001
From: Shun Usami <usatie@gmail.com>
Date: Tue, 6 Feb 2024 21:45:27 -0800
Subject: [PATCH 2/2] [frontend] Add useEffect for router.replace after signin

---
 frontend/app/ui/auth/login-form.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/app/ui/auth/login-form.tsx b/frontend/app/ui/auth/login-form.tsx
index f31b9316..261fd9ab 100644
--- a/frontend/app/ui/auth/login-form.tsx
+++ b/frontend/app/ui/auth/login-form.tsx
@@ -8,6 +8,7 @@ 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 (
@@ -28,9 +29,11 @@ function Form() {
   const { currentUser } = useAuthContext();
   const [code, action] = useFormState(authenticate, undefined);
   const router = useRouter();
-  if (code === "Authenticated") {
-    router.replace("/");
-  }
+  useEffect(() => {
+    if (code === "Authenticated") {
+      router.replace("/");
+    }
+  }, [code, router]);
   return (
     <>
       <form action={action}>