From 8de4af52ea41b2b7207404a6e438c5e1d63f2d3b Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Fri, 7 Oct 2022 16:03:07 -0500
Subject: [PATCH] login workflow and local session storage appears successful.
 to do, place auth functions into module

---
 client/src/App.tsx                        |  5 ++-
 client/src/components/User/Login.tsx      | 46 +++++++++++++++++++++++
 client/src/components/User/Register.tsx   | 25 ++++++++----
 client/src/supabase/SupabaseContext.tsx   |  7 +++-
 client/src/supabase/SupabaseTypes.ts      | 22 -----------
 client/src/supabase/getSupabaseClient.tsx |  5 ---
 6 files changed, 72 insertions(+), 38 deletions(-)
 create mode 100644 client/src/components/User/Login.tsx
 delete mode 100644 client/src/supabase/SupabaseTypes.ts
 delete mode 100644 client/src/supabase/getSupabaseClient.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 49fa303..96c4c18 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,10 +1,10 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import Home from './components/Home/Home'
 import Register from './components/User/Register'
-import { SupabaseProvider, useSupabase } from './supabase/SupabaseContext'
-import { getSupabaseClient } from './supabase/getSupabaseClient'
+import { SupabaseProvider, getSupabaseClient, useSupabase } from './supabase/SupabaseContext'
 import './App.css'
 import { useEffect } from 'react'
+import Login from './components/User/Login'
 
 function App() {
   const supabase = useSupabase();
@@ -20,6 +20,7 @@ function App() {
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/register" element={<Register />} />
+            <Route path="/login" element={<Login />} />
           </Routes>
         </div>
       </BrowserRouter>
diff --git a/client/src/components/User/Login.tsx b/client/src/components/User/Login.tsx
new file mode 100644
index 0000000..4c7cc04
--- /dev/null
+++ b/client/src/components/User/Login.tsx
@@ -0,0 +1,46 @@
+import { useState } from "react"
+import { useSupabase } from "../../supabase/SupabaseContext";
+
+interface FormInput {
+    email: string
+    password: string
+}
+
+export default function Login() {
+    const [input, setInput] = useState<FormInput>({ email: "", password: "" });
+    const supabase = useSupabase();
+
+    const handleLogin = async () => {
+        if (typeof supabase === "string") return;
+        if (!input.email || !input.password) return;
+        console.log(input);
+
+        const { user, session, error } = await supabase.auth.signIn({ email: input.email, password: input.password });
+        if (error) throw error;
+        console.log(user, session);
+        return { user, session };
+    }
+
+    const getSession = async () => {
+        if (typeof supabase === "string") return;
+        console.log(supabase.auth.session());
+    }
+
+    return (
+        <section>
+            <form>
+                <div>
+                    <label>Email:</label>
+                    <input required type="text" onChange={(e) => setInput({...input, email: e.target.value})} />
+                </div>
+                <div>
+                    <label>Password:</label>
+                    <input required type="text" onChange={(e) => setInput({...input, password: e.target.value})} />
+                </div>
+            </form>
+
+            <button onClick={handleLogin}>Login</button>
+            <button onClick={getSession}>Session</button>
+        </section>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/User/Register.tsx b/client/src/components/User/Register.tsx
index 0e0f94c..7024d86 100644
--- a/client/src/components/User/Register.tsx
+++ b/client/src/components/User/Register.tsx
@@ -7,17 +7,27 @@ interface FormInput {
 }
 
 export default function Register() {
-    const supabase = useSupabase();
     const [input, setInput] = useState<FormInput>({email: "", password: ""});
-    // const { handleRegister, authData } = useSupabase();
+    const supabase = useSupabase();
+
+    const handleClick = async () => {
+        if (typeof supabase === "string") return;
 
-    const handleClick = () => {
         const { email, password } = input;
-        console.log(input);
-        // if (email && password) handleRegister!(email, password, authData);
+        if (email && password) {
+            const { user, session, error} = await supabase.auth.signUp({ email, password });
+            if (error) throw error;
+            console.log(user, session);
+        }
     }
 
-    const handleSupabase = () => {
+    const getSession = async () => {
+        if (typeof supabase === "string") return;
+
+        console.log(supabase.auth.session());
+    }
+
+    const checkSupabase = () => {
         if (supabase) console.log(supabase);
     }
 
@@ -37,7 +47,8 @@ export default function Register() {
             </form>
 
             <button onClick={handleClick}>Register</button>
-            <button onClick={handleSupabase}>Supabase?</button>
+            <button onClick={checkSupabase}>Supabase?</button>
+            <button onClick={getSession}>Session</button>
         </section>
     )
 }
\ No newline at end of file
diff --git a/client/src/supabase/SupabaseContext.tsx b/client/src/supabase/SupabaseContext.tsx
index 6053de0..3b01a9a 100644
--- a/client/src/supabase/SupabaseContext.tsx
+++ b/client/src/supabase/SupabaseContext.tsx
@@ -1,6 +1,9 @@
 import { createContext, FC, ReactNode, useContext } from "react";
-import { SupabaseClient } from "@supabase/supabase-js";
-import { getSupabaseClient } from "./getSupabaseClient";
+import { createClient, SupabaseClient } from "@supabase/supabase-js";
+
+export const getSupabaseClient = () => {
+    return createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_KEY);
+}
 
 const SupabaseContext = createContext<SupabaseClient | undefined>(getSupabaseClient());
 
diff --git a/client/src/supabase/SupabaseTypes.ts b/client/src/supabase/SupabaseTypes.ts
deleted file mode 100644
index dc4072b..0000000
--- a/client/src/supabase/SupabaseTypes.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { SupabaseClient } from "@supabase/supabase-js"
-import { Dispatch, SetStateAction } from "react"
-
-export interface SupabaseContextData {
-    supabase: SupabaseClient
-    authData: AuthData
-    handleRegister?: (email: string, password: string, authData: AuthData) => Promise<SupabaseResponseData>
-    handleEmailLogin?: (email: string, password: string, authData: AuthData) => Promise<SupabaseResponseData>
-}
-
-export interface AuthData {
-    userSession?: any
-    setUserSession?: Dispatch<SetStateAction<any>>
-    userData?: any
-    setUserData?: Dispatch<SetStateAction<any>>
-}
-
-export interface SupabaseResponseData {
-    user?: any
-    session?: any
-    error?: any
-}
\ No newline at end of file
diff --git a/client/src/supabase/getSupabaseClient.tsx b/client/src/supabase/getSupabaseClient.tsx
deleted file mode 100644
index ab4d54f..0000000
--- a/client/src/supabase/getSupabaseClient.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createClient } from "@supabase/supabase-js";
-
-export const getSupabaseClient = () => {
-    return createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_KEY);
-}
\ No newline at end of file