ghetto-ass login thing

package-lock.json

@@ -8,6 +8,7 @@
       "name": "jokullbase",
       "version": "0.1.0",
       "dependencies": {
+        "@supabase/supabase-js": "^2.42.0",
         "@trigger.dev/nextjs": "^2.3.18",
         "@trigger.dev/react": "^2.3.18",
         "@trigger.dev/sdk": "^2.3.18",

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^2.42.0",
     "@trigger.dev/nextjs": "^2.3.18",
     "@trigger.dev/react": "^2.3.18",
     "@trigger.dev/sdk": "^2.3.18",

src/app/login.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React, {ChangeEventHandler, useState} from 'react';
+import { createClient } from '@supabase/supabase-js';
+
+interface State {
+  username: string;
+  password: string;
+}
+
+async function doLogin(loginInfo: State) {
+  const client = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL ?? '',
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ?? ''
+  );
+
+
+  const { data, error } = await client.auth.signInWithPassword({
+    email: loginInfo.username,
+    password: loginInfo.password
+  });
+
+  console.log(data);
+  console.log(error);
+
+  alert('logged in(?)');
+}
+
+export default function Login() {
+  const [loginInfo , setLoginInfo] = useState({
+    username: '',
+    password: ''
+  });
+
+
+  const inputHandler: ChangeEventHandler<HTMLInputElement> =
+    (e) => {
+      setLoginInfo(prevState => ({
+	...prevState,
+	[e.target.name]: e.target.value,
+      }));
+    };
+
+  return (
+    <div>
+      <div>Username</div>
+      <div>
+	<input id="username" type="text" name="username" onChange={inputHandler}/>
+      </div>
+
+      <div>Password</div>
+      <div>
+	<input id="password" type="password" name="password" onChange={inputHandler}/>
+      </div>
+
+      <div>
+	<input type="submit" value="Login" onClick={() => doLogin(loginInfo)} />
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,10 +1,12 @@
 import Image from "next/image";
 import styles from "./page.module.css";
+import Login from './login';
 
 export default function Home() {
   return (
     <main className={styles.main}>
       <div className={styles.description}>
+	<Login />
         <p>
           Get started by editing&nbsp;
           <code className={styles.code}>src/app/page.tsx</code>