diff --git a/client/src/App.tsx b/client/src/App.tsx index 0e8caac..4f12c92 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -2,17 +2,23 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom' import Home from './components/Home/Home' import Register from './components/User/Register' import './App.css' +import { useEffect, useState } from 'react' +import { createClient, SupabaseClient } from '@supabase/supabase-js' +import { SupabaseProvider } from './supabase/SupabaseContext' +import { useSupabase } from './supabase/useSupabase' function App() { return ( - -
- - } /> - } /> - -
-
+ + +
+ + } /> + } /> + +
+
+
) } diff --git a/client/src/components/User/Register.tsx b/client/src/components/User/Register.tsx index 30dd037..816e6e9 100644 --- a/client/src/components/User/Register.tsx +++ b/client/src/components/User/Register.tsx @@ -1,9 +1,4 @@ import { useState } from "react"; -import { createClient } from "@supabase/supabase-js"; -import { useAuth } from "../../supabase/SupabaseContext"; - -const url = import.meta.env.VITE_SUPABASE_URL; -const key = import.meta.env.VITE_SUPABASE_KEY; interface FormInput { email: string @@ -12,11 +7,12 @@ interface FormInput { export default function Register() { const [input, setInput] = useState({email: "", password: ""}); - const { handleRegister, setUserData, setUserSession } = useAuth(); + // const { handleRegister, authData } = useSupabase(); const handleClick = () => { const { email, password } = input; - if (email && password) handleRegister(email, password, { setUserData, setUserSession }); + console.log(input); + // if (email && password) handleRegister!(email, password, authData); } return ( diff --git a/client/src/supabase/SupabaseContext.tsx b/client/src/supabase/SupabaseContext.tsx index d7144ba..b4373e2 100644 --- a/client/src/supabase/SupabaseContext.tsx +++ b/client/src/supabase/SupabaseContext.tsx @@ -1,57 +1,13 @@ -import { FunctionComponent, ReactPortal, createContext, useState, useContext, Dispatch, SetStateAction } from "react"; -import { handleRegister, handleEmailLogin } from "./authHelpers"; -import { createClient, SupabaseClient } from "@supabase/supabase-js"; +import { createContext, FC, ReactNode } from "react"; +import { SupabaseClient } from "@supabase/supabase-js"; +import { useSupabase } from "./useSupabase"; -const supabase = createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_KEY); - -interface SupabaseContextData { - supabase: SupabaseClient - userSession?: any - setUserSession?: Dispatch> - userData?: any - setUserData?: Dispatch> - handleRegister: (email: string, password: string, authData: ReactAuthData) => Promise - handleEmailLogin: (email: string, password: string, authData: ReactAuthData) => Promise -} - -interface AuthData { - user?: any - session?: any - error?: any -} - -export interface ReactAuthData { - userSession: any - setUserSession: Dispatch> - userData: any - setUserData: Dispatch> -} - -const initialState: SupabaseContextData = { - supabase: supabase, - userSession: undefined, - userData: undefined, - handleRegister: handleRegister, - handleEmailLogin: handleEmailLogin -} - -const SupabaseContext = createContext(initialState); - -export const SupabaseProvider: FunctionComponent = ({ children }) => { - const [userData, setUserData] = useState(); - const [userSession, setUserSession] = useState(); - - const store = { - supabase, userData, setUserData, userSession, setUserSession, handleRegister, handleEmailLogin - } +const SupabaseContext = createContext(undefined!); +export const SupabaseProvider: FC<{children: ReactNode, value: SupabaseClient}> = ({ children }) => { return ( - - { children } + + {children} ) -} - -export const useAuth = () => { - return useContext(SupabaseContext); } \ No newline at end of file diff --git a/client/src/supabase/SupabaseTypes.ts b/client/src/supabase/SupabaseTypes.ts index 56004c9..dc4072b 100644 --- a/client/src/supabase/SupabaseTypes.ts +++ b/client/src/supabase/SupabaseTypes.ts @@ -1 +1,22 @@ -export default {} \ No newline at end of file +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 + handleEmailLogin?: (email: string, password: string, authData: AuthData) => Promise +} + +export interface AuthData { + userSession?: any + setUserSession?: Dispatch> + userData?: any + setUserData?: Dispatch> +} + +export interface SupabaseResponseData { + user?: any + session?: any + error?: any +} \ No newline at end of file diff --git a/client/src/supabase/authHelpers.ts b/client/src/supabase/authHelpers.ts deleted file mode 100644 index 52a2748..0000000 --- a/client/src/supabase/authHelpers.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { SupabaseClient } from "@supabase/supabase-js"; -import { ReactAuthData, useAuth } from "./SupabaseContext"; - -export const handleRegister = async (email: string, password: string, authData: ReactAuthData) => { - const { setUserData } = authData; - const { supabase } = useAuth(); - - const { user, session, error } = await supabase.auth.signUp({ email, password }); - if (error) throw error; - if (user) setUserData(user); - - return { user, session, error } - // SEE USER RETURN TYPE BELOW - /** - * object { - * app_metadata: { - * provider: string - * providers: string[] - * } - * aud: string - * confirmation_sent_at: string - * created_at: string - * email: string - * id: string - * identities: Identity[] // to define below - * phone: string? - * role: string - * updated_at: string - * user_metadata: object? - * } - * - * Identity = { - * created_at, - * id, - * identity_data: { sub: string }, - * last_sign_in_at: string - * provider: email - * updated_at: string - * user_id: string - * } - */ -} - -export const handleEmailLogin = async (email: string, password: string, authData: ReactAuthData) => { - const { setUserData, setUserSession } = authData; - const { supabase } = useAuth(); - - const { user, session, error } = await supabase.auth.signIn({ email, password }); - if (error) throw error; - if (user) setUserData(user); - if (session) setUserSession(session); - - return { user, session, error }; -} \ No newline at end of file diff --git a/client/src/supabase/useSupabase.tsx b/client/src/supabase/useSupabase.tsx new file mode 100644 index 0000000..f2b8809 --- /dev/null +++ b/client/src/supabase/useSupabase.tsx @@ -0,0 +1,5 @@ +import { createClient } from "@supabase/supabase-js"; + +export const useSupabase = () => { + return createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_KEY); +} \ No newline at end of file