feature: Add login page and logout button

3 files changed, 56 insertions, 0 deletions

diff --git a/packages/web/app/signin/components/SignInForm.tsx b/packages/web/app/signin/components/SignInForm.tsx
new file mode 100644
index 00000000..ea19dedb
--- /dev/null
+++ b/packages/web/app/signin/components/SignInForm.tsx
@@ -0,0 +1,16 @@
+import { getProviders, signIn } from "next-auth/react";
+import SignInProviderButton from "./SignInProviderButton";
+
+export default async function SignInForm() {
+  const providers = (await getProviders()) ?? [];
+
+  return (
+    <div>
+      {Object.values(providers).map((provider) => (
+        <div key={provider.name}>
+          <SignInProviderButton provider={provider} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/web/app/signin/components/SignInProviderButton.tsx b/packages/web/app/signin/components/SignInProviderButton.tsx
new file mode 100644
index 00000000..0831236c
--- /dev/null
+++ b/packages/web/app/signin/components/SignInProviderButton.tsx
@@ -0,0 +1,21 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { ClientSafeProvider, signIn } from "next-auth/react";
+
+export default function SignInProviderButton({
+  provider,
+}: {
+  provider: ClientSafeProvider;
+}) {
+  return (
+    <Button
+      onClick={() =>
+        signIn(provider.id, {
+          callbackUrl: "/",
+        })
+      }
+    >
+      Sign in with {provider.name}
+    </Button>
+  );
+}
diff --git a/packages/web/app/signin/page.tsx b/packages/web/app/signin/page.tsx
new file mode 100644
index 00000000..afe63dd3
--- /dev/null
+++ b/packages/web/app/signin/page.tsx
@@ -0,0 +1,19 @@
+import { Brain } from "lucide-react";
+import SignInForm from "./components/SignInForm";
+
+export default async function SignInPage() {
+  // TODO Add support for email and credential signin form
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <div className="flex space-x-2">
+        <span>
+          <Brain size="30" className="h-full" />
+        </span>
+        <span className="text-4xl">Remember</span>
+      </div>
+      <div className="mt-20 flex w-96 flex-col items-center rounded-xl border border-gray-300 p-20">
+        <SignInForm />
+      </div>
+    </div>
+  );
+}