Firist commit

src/components/auth/login.tsx

@@ -0,0 +1,19 @@
+import { auth } from "@/lib/auth";
+import { LoginButton } from "./login_button";
+import { LogoutButton } from "./logout_button";
+
+/**
+ * This is a server component, then the buttons are client
+ */
+export default async function LogIn(): Promise<JSX.Element | undefined> {
+  const session = await auth();
+  if (session) {
+    return (
+      <LogoutButton/>
+    );
+  } else {
+    return (
+      <LoginButton/>
+    );
+  }
+}

src/components/auth/login_button.tsx

@@ -0,0 +1,12 @@
+"use client";
+import { UserCircleIcon } from '@heroicons/react/24/outline';
+import { signIn } from "next-auth/react";
+
+export function LoginButton(): JSX.Element {
+  return (
+    <button className="p-1 hover:bg-dracula-bglight rounded-3xl transition-colors group" onClick={() => void signIn('cognito')}>
+      <UserCircleIcon className='stroke-dracula-cyan h-8 w-auto group-hover:stroke-dracula-orange transition-colors'/>
+      <span className="sr-only">Log in</span>
+    </button>
+  );
+}

src/components/auth/logout_button.tsx

@@ -0,0 +1,12 @@
+"use client";
+import { UserCircleIcon } from '@heroicons/react/24/outline';
+import { signOut } from "next-auth/react";
+
+export function LogoutButton(): JSX.Element {
+  return (
+    <button className="p-1 hover:bg-dracula-bglight rounded-3xl transition-colors group" onClick={() => void signOut()}>
+      <UserCircleIcon className='stroke-dracula-cyan h-8 w-auto group-hover:stroke-dracula-red transition-colors'/>
+      <span className="sr-only">Log out</span>
+    </button>
+  ); 
+}