From 82954b5f4111cf82b35988bef0c736565f36f598 Mon Sep 17 00:00:00 2001
From: Yasamato <agent77326@gmail.com>
Date: Sun, 8 Dec 2024 19:31:08 +0100
Subject: [PATCH] Use server action to login/logout (#110)

---
 components/buttons/LoginOrOutButton.tsx | 36 ++++++++++++++-----------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/components/buttons/LoginOrOutButton.tsx b/components/buttons/LoginOrOutButton.tsx
index 44e28264..a2afb172 100644
--- a/components/buttons/LoginOrOutButton.tsx
+++ b/components/buttons/LoginOrOutButton.tsx
@@ -9,12 +9,9 @@ const LoginOrOutButton: FC = () => {
   const { data: session } = useSession()
 
   return (
-    <button
-      role={'button'}
-      className={
-        'btn w-100 btn-outline-' + (isLogin(session) ? 'danger' : 'success')
-      }
-      onClick={async () => {
+    <form
+      action={async () => {
+        'use server'
         if (isLogin(session)) {
           await signOut()
         } else {
@@ -22,16 +19,23 @@ const LoginOrOutButton: FC = () => {
         }
       }}
     >
-      {isLogin(session) ? (
-        <>
-          Sign out <FontAwesomeIcon icon={faSignOutAlt} />
-        </>
-      ) : (
-        <>
-          <FontAwesomeIcon icon={faSignInAlt} /> Sign In
-        </>
-      )}
-    </button>
+      <button
+        type='submit'
+        className={
+          'btn w-100 btn-outline-' + (isLogin(session) ? 'danger' : 'success')
+        }
+      >
+        {isLogin(session) ? (
+          <>
+            Sign out <FontAwesomeIcon icon={faSignOutAlt} />
+          </>
+        ) : (
+          <>
+            <FontAwesomeIcon icon={faSignInAlt} /> Sign In
+          </>
+        )}
+      </button>
+    </form>
   )
 }