[feat] created AuthContext

app/(auth)/login/page.tsx

@@ -1,51 +1,21 @@
 'use client';
 
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import supabase from '../../../api/supabase/createClient';
+import { useAuth } from '../../utils/AuthProvider';
 
 export default function Login() {
+  const { signIn } = useAuth();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const { push } = useRouter();
 
-  const handleSignUp = async () => {
-    const { data, error } = await supabase.auth.signUp({
-      email,
-      password,
-    });
-
-    if (error) {
-      // Check if the error is due to an already registered email
-      if (error.message.includes('User already registered')) {
-        throw new Error(
-          'This email is already registered. Please try signing in instead.',
-        );
-      } else {
-        throw new Error(
-          `An error occurred trying to sign up: ${error.message}`,
-        );
+  const handleSignIn = async () => {
+    try {
+      await signIn(email, password);
+    } catch (error) {
+      if (error instanceof Error) {
+        console.error(error.message);
       }
     }
-
-    push('/');
-
-    return data;
-  };
-
-  const handleSignInWithEmail = async () => {
-    const { data, error } = await supabase.auth.signInWithPassword({
-      email,
-      password,
-    });
-
-    if (error) {
-      throw new Error(`An error occurred trying to sign in: ${error}`);
-    }
-
-    push('/');
-
-    return data;
   };
 
   return (
@@ -63,12 +33,10 @@ export default function Login() {
         value={password}
         placeholder="Password"
       />
-      <button type="button" onClick={handleSignUp}>
-        Sign up
-      </button>
-      <button type="button" onClick={handleSignInWithEmail}>
+      <button type="button" onClick={handleSignIn}>
         Sign in
-      </button>
+      </button>{' '}
+      {/* Sign in button */}
     </>
   );
 }

app/(auth)/signup/page.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useState } from 'react';
+import { useAuth } from '../../utils/AuthProvider';
+
+export default function SignUp() {
+  const { signUp } = useAuth();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSignUp = async () => {
+    // Define handleSignUp
+    try {
+      await signUp(email, password);
+    } catch (error) {
+      if (error instanceof Error) {
+        console.error(error.message);
+      }
+    }
+  };
+
+  return (
+    <div>
+      <input
+        name="email"
+        onChange={e => setEmail(e.target.value)}
+        value={email}
+        placeholder="Email"
+      />
+      <input
+        type="password"
+        name="password"
+        onChange={e => setPassword(e.target.value)}
+        value={password}
+        placeholder="Password"
+      />
+      <input
+        type="password"
+        name="Confirm Password"
+        onChange={e => setPassword(e.target.value)}
+        value={password}
+        placeholder="Confirm Password"
+      />
+      <button type="button" onClick={handleSignUp}>
+        Sign up
+      </button>{' '}
+      {/* Sign up button */}
+    </div>
+  );
+}

app/dashboard/page.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { AuthProvider, useAuth } from '../utils/AuthProvider';
+
+export default function DashboardPage() {
+  return (
+    <AuthProvider>
+      <Dashboard />
+    </AuthProvider>
+  );
+}
+
+function Dashboard() {
+  const { authUser, isLoggedIn, signOut } = useAuth();
+
+  if (!authUser) {
+    return <p>Loading...</p>;
+  }
+
+  return (
+    <>
+      <header>
+        <h1>Dashboard</h1>
+      </header>
+
+      <main>
+        <p>User is currently: {isLoggedIn ? 'Logged In' : 'Logged Out'}</p>
+        {/* Display user's email */}
+        {authUser && <p>User name: {authUser.email}</p>}{' '}
+        <button onClick={signOut}>Log Out</button> {/* Logout button */}
+      </main>
+    </>
+  );
+}

app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import StyledComponentsRegistry from '@/lib/registry';
+import { AuthProvider } from './utils/AuthProvider';
 
 // font definitions
 const sans = Inter({
@@ -22,7 +23,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={sans.className}>
-        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+        <AuthProvider>
+          <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+        </AuthProvider>
       </body>
     </html>
   );

app/utils/AuthProvider.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import { useRouter } from 'next/navigation';
+import supabase from '../../api/supabase/createClient';
+
+interface AuthContextType {
+  authUser: AuthUser | null;
+  isLoggedIn: boolean;
+  signUp: (email: string, password: string) => Promise<void>;
+  signIn: (email: string, password: string) => Promise<void>;
+  signOut: () => Promise<void>;
+  loading: boolean;
+}
+
+interface AuthUser {
+  id: string;
+  email: string;
+}
+
+// Create the AuthContext
+const AuthContext = createContext<AuthContextType | null>(null);
+
+// Custom hook to use AuthContext
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}
+
+// AuthProvider component that wraps around your app or specific pages
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [authUser, setAuthUser] = useState<AuthUser | null>(null);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const { push } = useRouter(); // Get Next.js router for navigation
+
+  // Sign Up function
+  const signUp = async (email: string, password: string) => {
+    try {
+      const { data, error } = await supabase.auth.signUp({ email, password });
+      if (error) throw new Error(error.message);
+
+      if (data.user) {
+        // Map the user data to AuthUser type, ensuring `id` and `email` are defined
+        const user: AuthUser = {
+          id: data.user.id ?? '', // Fallback to an empty string if `id` is undefined
+          email: data.user.email ?? '', // Fallback to an empty string if `email` is undefined
+        };
+
+        setAuthUser(user);
+        setIsLoggedIn(true);
+        push('/dashboard'); // Redirect to dashboard after sign-up
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        console.error('Sign-up Error:', error.message);
+      }
+    }
+  };
+
+  // Sign In function
+  const signIn = async (email: string, password: string) => {
+    try {
+      const { data, error } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+      });
+      if (error) throw new Error(error.message);
+
+      // Map the user data to AuthUser type
+      const user: AuthUser = {
+        id: data.user.id ?? '', // Fallback to an empty string if `id` is undefined
+        email: data.user.email ?? '', // Fallback to an empty string if `email` is undefined
+      };
+
+      setAuthUser(user);
+      setIsLoggedIn(true);
+      push('/dashboard'); // Redirect to dashboard after sign-in
+    } catch (error) {
+      if (error instanceof Error) {
+        console.error('Sign-in Error:', error.message);
+      }
+    }
+  };
+
+  // Sign Out function
+  const signOut = async () => {
+    try {
+      const { error } = await supabase.auth.signOut();
+      if (error) throw new Error(error.message);
+      setAuthUser(null);
+      setIsLoggedIn(false);
+      push('/login'); // Redirect to login after sign-out
+    } catch (error) {
+      if (error instanceof Error) {
+        console.error('Sign-out Error:', error.message);
+      }
+    }
+  };
+
+  // Fetch the currently logged-in user on mount and redirect to dashboard if signed in
+  useEffect(() => {
+    const getUser = async () => {
+      setLoading(true);
+      const { data } = await supabase.auth.getUser();
+      if (data.user && data.user.id && data.user.email) {
+        // Map the user data to AuthUser type
+        const user: AuthUser = {
+          id: data.user.id,
+          email: data.user.email,
+        };
+
+        setAuthUser(user);
+        setIsLoggedIn(true);
+      } else {
+        setAuthUser(null);
+        setIsLoggedIn(false);
+      }
+      setLoading(false);
+    };
+
+    getUser();
+
+    // Listen for auth state changes
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      if (session?.user) {
+        const user: AuthUser = {
+          id: session.user.id ?? '', // Fallback to empty string if `id` is undefined
+          email: session.user.email ?? '', // Fallback to empty string if `email` is undefined
+        };
+
+        setAuthUser(user);
+        setIsLoggedIn(true);
+      } else {
+        setAuthUser(null);
+        setIsLoggedIn(false);
+
+        if (!loading) {
+          if (window.location.pathname !== '/signup') {
+            push('/login');
+          }
+        }
+      }
+    });
+
+    return () => subscription?.unsubscribe();
+  }, [push]);
+
+  const value: AuthContextType = {
+    authUser,
+    isLoggedIn,
+    signUp,
+    signIn,
+    signOut,
+    loading,
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {!loading ? children : <div>Loading...</div>}
+    </AuthContext.Provider>
+  );
+}

package.json

@@ -33,7 +33,7 @@
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.1.5",
     "prettier": "^3.3.3",
-    "typescript": "^5",
+    "typescript": "5.4",
     "yarnhook": "^0.6.2"
   }
 }