1.5 Re-factor for good

Author: one-aalam

src/lib/auth/AuthContext.tsx

@@ -0,0 +1,62 @@
+import { createContext, FunctionComponent, useState } from 'react'
+import { supabase } from '~/lib/supabase'
+import { useMessage } from '~/lib/message'
+import { SupabaseAuthPayload } from './auth.types'
+
+export type AuthContextProps = {
+    signUp: (payload: SupabaseAuthPayload) => void,
+    signIn: (payload: SupabaseAuthPayload) => void,
+    loading: boolean
+}
+
+export const AuthContext = createContext<Partial<AuthContextProps>>({})
+
+export const AuthProvider: FunctionComponent = ({
+    children,
+  }) => {
+    const [ loading, setLoading ] = useState(false)
+    const { handleMessage } = useMessage()
+
+    const signUp = async (payload: SupabaseAuthPayload) => {
+        try {
+          setLoading(true)
+          const { error } = await supabase.auth.signUp(payload)
+          if (error) {
+            handleMessage({ message: error.message, type: 'error' })
+          }
+          else { 
+            handleMessage({ message: 'Signup successful. Please check your inbox for a confirmation email!', type: 'success' })
+          }
+        } catch (error) {
+          handleMessage({ message: error.error_description || error, type: 'error' })
+        } finally {
+          setLoading(false)
+        }
+    }
+    
+    const signIn = async (payload: SupabaseAuthPayload) => {
+        try {
+            setLoading(true)
+          const { error } = await supabase.auth.signIn(payload)
+          if (error) {
+            handleMessage({ message: error.message, type: 'error' })
+          } else {
+            handleMessage({ message: 'Log in successful. I\'ll redirect you once I\'m done', type: 'success' })
+          }
+        } catch (error) {
+          handleMessage({ message: error.error_description || error, type: 'error' })
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    
+    return (<AuthContext.Provider value={{ 
+                signUp, 
+                signIn,
+                loading 
+            }}>
+            {children}
+        </AuthContext.Provider>
+    )
+}

src/lib/auth/auth.types.ts

@@ -0,0 +1,5 @@
+  
+export type SupabaseAuthPayload = {
+    email: string,
+    password: string
+}

src/lib/auth/index.ts

@@ -0,0 +1,3 @@
+export * from './auth.types'
+export * from './AuthContext'
+export * from './useAuth'

src/lib/auth/useAuth.tsx

@@ -0,0 +1,14 @@
+import { useContext } from 'react'
+import { AuthContext } from './AuthContext'
+
+export const useAuth = () => {
+    const context = useContext(AuthContext)
+  
+    if (context === undefined) {
+      throw new Error(
+        'useAuth must be used within a AuthContext.Provider'
+      )
+    }
+  
+    return context
+}

src/pages/_app.tsx

@@ -8,6 +8,7 @@ import { DefaultSeo } from 'next-seo';
 
 import SEO from '../../next-seo.config';
 import { MessageProvider } from '~/lib/message'
+import { AuthProvider } from '~/lib/auth'
 
 function MyApp({ Component, pageProps }: AppProps) {
   const pageMeta = (Component as any)?.defaultProps?.meta || {}
@@ -19,7 +20,9 @@ function MyApp({ Component, pageProps }: AppProps) {
     </Head>
     <DefaultSeo {...pageSEO } />
     <MessageProvider>
-      <Component {...pageProps} />
+      <AuthProvider>
+        <Component {...pageProps} />
+      </AuthProvider>
     </MessageProvider>
   </React.Fragment>
 }

src/pages/index.tsx

@@ -3,70 +3,34 @@ import { NextPage } from 'next'
 import { FaLock } from 'react-icons/fa'
 import { NextAppPageProps } from '~/types/app'
 import Layout from '~/components/Layout'
-import { useMessage } from '~/lib/message'
-import { useFormFields } from '~/lib/utils'
-import { supabase } from '~/lib/supabase'
 import Spinner from '~/components/Spinner'
-
+import { useFormFields } from '~/lib/utils'
+import { useAuth } from '~/lib/auth'
 
 
 type SignUpFieldProps = {
   email: string,
   password: string
 }
 
-type SupabaseAuthPayload = SignUpFieldProps
-
 const FORM_VALUES: SignUpFieldProps = {
   email: '',
   password: ''
 }
 
 const IndexPage: NextPage<NextAppPageProps> = ({}) => {
-  const [loading, setLoading] = useState(false)
-  const [isSignIn, setIsSignIn] = useState(true)
-  const { handleMessage } = useMessage()
+  const [ isSignIn, setIsSignIn ] = useState(true)
+  const { loading, signIn, signUp } = useAuth()
   // Now since we have our form ready, what we're gonna need for signing up our users
   // 1. let users provide email and password
-  const [values, handleChange ] = useFormFields<SignUpFieldProps>(FORM_VALUES)
+  const [ values, handleChange ] = useFormFields<SignUpFieldProps>(FORM_VALUES)
   // 2. send the provided details to Supabase
-  const signUp = async (payload: SupabaseAuthPayload) => {
-    try {
-      setLoading(true)
-      const { error } = await supabase.auth.signUp(payload)
-      if (error) {
-        handleMessage({ message: error.message, type: 'error' })
-      }
-      else { 
-        handleMessage({ message: 'Signup successful. Please check your inbox for a confirmation email!', type: 'success' })
-      }
-    } catch (error) {
-      handleMessage({ message: error.error_description || error, type: 'error' })
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const signIn = async (payload: SupabaseAuthPayload) => {
-    try {
-      const { error } = await supabase.auth.signIn(payload)
-      if (error) {
-        handleMessage({ message: error.message, type: 'error' })
-      } else {
-        handleMessage({ message: 'Log in successful. I\'ll redirect you once I\'m done', type: 'success' })
-      }
-    } catch (error) {
-      handleMessage({ message: error.error_description || error, type: 'error' })
-    }
-  }
-
 
   const handleSumbit = (event: React.FormEvent) => {
     event.preventDefault()
-    isSignIn ? signIn(values) : signUp(values)
+    isSignIn ?  signIn(values) : signUp(values)
   }
 
-
   return (
     <Layout useBackdrop={true} usePadding={false}>
       <div className="h-screen flex flex-col justify-center items-center relative">