From 8fe86033d2d0b3375488fe554347222ff29b8716 Mon Sep 17 00:00:00 2001
From: rachaelch3n <rchen2027@berkeley.edu>
Date: Tue, 15 Oct 2024 15:58:44 -0700
Subject: [PATCH] [feat] User Auth: Created a simple login page that supports
 sign up and sign in. (#5)

---
 app/(auth)/login/page.tsx | 74 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 app/(auth)/login/page.tsx

diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
new file mode 100644
index 0000000..c00c6e1
--- /dev/null
+++ b/app/(auth)/login/page.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import supabase from '../../../api/supabase/createClient';
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const { push } = useRouter();
+
+  const handleSignUp = async () => {
+    const { data, error } = await supabase.auth.signUp({
+      email,
+      password,
+    });
+
+    if (error) {
+      // Check if the error is due to an already registered email
+      if (error.message.includes('User already registered')) {
+        throw new Error(
+          'This email is already registered. Please try signing in instead.',
+        );
+      } else {
+        throw new Error(
+          `An error occurred trying to sign up: ${error.message}`,
+        );
+      }
+    }
+
+    push('/');
+
+    return data;
+  };
+
+  const handleSignInWithEmail = async () => {
+    const { data, error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+
+    if (error) {
+      throw new Error(`An error occurred trying to sign in: ${error}`);
+    }
+
+    push('/');
+
+    return data;
+  };
+
+  return (
+    <>
+      <input
+        name="email"
+        onChange={e => setEmail(e.target.value)}
+        value={email}
+        placeholder="Email"
+      />
+      <input
+        type="password"
+        name="password"
+        onChange={e => setPassword(e.target.value)}
+        value={password}
+        placeholder="Password"
+      />
+      <button type="button" onClick={handleSignUp}>
+        Sign up
+      </button>
+      <button type="button" onClick={handleSignInWithEmail}>
+        Sign in
+      </button>
+    </>
+  );
+}