Sign in mechanism

src/components/AuthButton.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useState } from "react";
+
+import { signIn, signOut, useSession } from "next-auth/react";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+
+const AuthButton = () => {
+  const t = useTranslations("Nav");
+  const router = useRouter();
+  const [signingOut, setSigningOut] = useState(false);
+  const { data: sessionData } = useSession();
+
+  const handleSignOut = async () => {
+    setSigningOut(true);
+    try {
+      await signOut({ redirect: false });
+      router.push("/");
+    } finally {
+      setSigningOut(false);
+    }
+  };
+
+  if (sessionData) {
+    return (
+      <button disabled={signingOut} onClick={handleSignOut}>
+        {t("signOut")}
+      </button>
+    );
+  }
+
+  return <button onClick={() => signIn()}>{t("signIn")}</button>;
+};
+
+export default AuthButton;

src/components/InfoMessage.tsx

@@ -1,16 +1,22 @@
 import { Dispatch, SetStateAction } from "react";
 
+import { twMerge } from "tailwind-merge";
+
 import { ResponseMessage } from "@/types";
 
 const InfoMessage = ({
   responseMessage,
+  className,
 }: {
   responseMessage: ResponseMessage;
+  className?: string;
 }) => (
   <p
-    className={`${
-      responseMessage.isSuccessful ? "text-green-600" : "text-red-600"
-    } italic`}
+    className={twMerge(
+      "italic",
+      responseMessage.isSuccessful ? "text-green-600" : "text-red-600",
+      className,
+    )}
     data-test="info-message"
   >
     {responseMessage.message}