login workflow and local session storage appears successful. to do, place auth functions into module

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>

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>
+    )
+}

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>
     )
 }

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());
 

client/src/supabase/SupabaseTypes.ts

@@ -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
-}

client/src/supabase/getSupabaseClient.tsx

@@ -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);
-}