context appears to function at global state level

client/src/App.tsx

@@ -1,15 +1,20 @@
 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 './App.css'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
-import { createClient, SupabaseClient } from '@supabase/supabase-js'
-import { SupabaseProvider } from './supabase/SupabaseContext'
-import { useSupabase } from './supabase/useSupabase'
 
 function App() {
+  const supabase = useSupabase();
+
+  useEffect(() => {
+    console.log(supabase);
+  }, [supabase])
+
   return (
-    <SupabaseProvider value={useSupabase()}>
+    <SupabaseProvider value={getSupabaseClient()}>
       <BrowserRouter>
         <div className="App">
           <Routes>

client/src/components/User/Register.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useSupabase } from "../../supabase/SupabaseContext";
 
 interface FormInput {
     email: string
@@ -6,6 +7,7 @@ interface FormInput {
 }
 
 export default function Register() {
+    const supabase = useSupabase();
     const [input, setInput] = useState<FormInput>({email: "", password: ""});
     // const { handleRegister, authData } = useSupabase();
 
@@ -15,6 +17,10 @@ export default function Register() {
         // if (email && password) handleRegister!(email, password, authData);
     }
 
+    const handleSupabase = () => {
+        if (supabase) console.log(supabase);
+    }
+
     return (
         <section>
             <h1>Register</h1>
@@ -31,6 +37,7 @@ export default function Register() {
             </form>
 
             <button onClick={handleClick}>Register</button>
+            <button onClick={handleSupabase}>Supabase?</button>
         </section>
     )
 }

client/src/supabase/SupabaseContext.tsx

@@ -1,13 +1,18 @@
-import { createContext, FC, ReactNode } from "react";
+import { createContext, FC, ReactNode, useContext } from "react";
 import { SupabaseClient } from "@supabase/supabase-js";
-import { useSupabase } from "./useSupabase";
+import { getSupabaseClient } from "./getSupabaseClient";
 
-const SupabaseContext = createContext<SupabaseClient | undefined>(undefined!);
+const SupabaseContext = createContext<SupabaseClient | undefined>(getSupabaseClient());
 
 export const SupabaseProvider: FC<{children: ReactNode, value: SupabaseClient}> = ({ children }) => {
     return (
-        <SupabaseContext.Provider value={useSupabase()}>
+        <SupabaseContext.Provider value={getSupabaseClient()}>
             {children}
         </SupabaseContext.Provider>
     )
+}
+
+export const useSupabase = () => {
+    const context = useContext(SupabaseContext);
+    return context || "Context currently undefined";
 }

client/src/supabase/getSupabaseClient.tsx

@@ -1,5 +1,5 @@
 import { createClient } from "@supabase/supabase-js";
 
-export const useSupabase = () => {
+export const getSupabaseClient = () => {
     return createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_KEY);
 }