Implemented complete auth system using Supabase

.github/workflows/ci.yml

@@ -58,3 +58,6 @@ jobs:
 
       - name: Build project
         run: npm run build
+        env:
+          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
+          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}

apps/web/package.json

@@ -17,14 +17,17 @@
     "clean": "npx rimraf .next next-env.d.ts node_modules"
   },
   "dependencies": {
+    "@supabase/auth-helpers-nextjs": "^0.10.0",
+    "@supabase/auth-helpers-react": "^0.5.0",
+    "@supabase/supabase-js": "^2.50.0",
     "@tanstack/react-query": "^5.22.0",
     "@tanstack/react-query-devtools": "^5.22.0",
     "axios": "^1.6.7",
+    "easy-fixer-shared": "1.0.0",
     "next": "15.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-hook-form": "^7.50.1",
-    "easy-fixer-shared": "1.0.0"
+    "react-hook-form": "^7.50.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

apps/web/src/app/_landing/page.tsx

@@ -12,14 +12,14 @@ export default function LandingPage() {
 
       <div className="flex gap-4">
         <Link
-          href="/login"
+          href="/auth/login"
           aria-label="Login to your account"
           className="bg-primary text-white px-6 py-2 rounded hover:brightness-90"
         >
           Login
         </Link>
         <Link
-          href="/register"
+          href="/auth/register"
           aria-label="Create a new account"
           className="bg-secondary text-accent3 px-6 py-2 rounded hover:brightness-90"
         >

apps/web/src/app/auth/callback/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+export const dynamic = "force-dynamic";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import AuthRedirect from "@/components/AuthRedirect";
+import * as authServices from "@/lib/supabase/authServices";
+
+export default function OAuthCallback() {
+  const router = useRouter();
+  const [readyToRedirect, setReadyToRedirect] = useState(false);
+  const [hasRole, setHasRole] = useState(false);
+
+  useEffect(() => {
+    async function handleCallback() {
+      try {
+        const user = await authServices.getUser();
+
+        if (!user) {
+          router.replace("/auth/login");
+          return;
+        }
+
+        const userTypeFromLocal = localStorage.getItem("UserRole");
+
+        if (userTypeFromLocal) {
+          try {
+            await authServices.updateUserRole(userTypeFromLocal);
+            localStorage.removeItem("UserRole");
+            setHasRole(true);
+          } catch {
+            alert("Failed to update user role");
+            router.replace("/auth/login");
+            return;
+          }
+        } else {
+          const role = user.user_metadata?.role;
+          if (role) {
+            setHasRole(true);
+          } else {
+            router.replace("/auth/register");
+          }
+        }
+
+        setReadyToRedirect(true);
+      } catch {
+        router.replace("/auth/login");
+      }
+    }
+
+    handleCallback();
+  }, [router]);
+
+  if (!readyToRedirect) return <p>Loading...</p>;
+  if (hasRole) return <AuthRedirect />;
+}

apps/web/src/app/auth/forgot-password/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+import { useState } from "react";
+import { useForgotPassword } from "./useForgotPassword";
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState("");
+  const { sendResetLink, loading, error, success } = useForgotPassword();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await sendResetLink(email);
+  };
+
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-gray-100 p-4">
+      <div className="bg-white p-6 rounded shadow-md max-w-md w-full">
+        <h1 className="text-xl font-semibold mb-4">Forgot your password?</h1>
+        <form onSubmit={handleSubmit}>
+          <input
+            type="email"
+            placeholder="Enter your email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            className="w-full p-2 border rounded mb-4"
+          />
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700"
+          >
+            {loading ? "Sending..." : "Send Reset Link"}
+          </button>
+        </form>
+        {error && <p className="text-red-500 mt-2">{error}</p>}
+        {success && (
+          <p className="text-green-600 mt-2">
+            A password reset link has been sent to your email.
+          </p>
+        )}
+      </div>
+    </main>
+  );
+}

apps/web/src/app/auth/forgot-password/useForgotPassword.ts

@@ -0,0 +1,31 @@
+"use client";
+import { useState } from "react";
+import { sendPasswordResetLink } from "@/lib/supabase/authServices";
+
+export const useForgotPassword = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const sendResetLink = async (email: string) => {
+    setLoading(true);
+    setError(null);
+    setSuccess(false);
+
+    try {
+      await sendPasswordResetLink(email);
+      setSuccess(true);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("Something went wrong");
+      }
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { sendResetLink, loading, error, success };
+};

apps/web/src/app/auth/login/GoogleLoginButton.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { signInWithGoogle } from "@/lib/supabase/authServices";
+import Image from "next/image";
+interface GoogleLoginButtonProps {
+  role?: "client" | "provider";
+}
+
+export default function GoogleLoginButton({ role }: GoogleLoginButtonProps) {
+  const handleGoogleSignIn = async () => {
+    try {
+      await signInWithGoogle(role);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        alert(err.message);
+      } else {
+        alert("Failed to initiate Google sign-in");
+      }
+    }
+  };
+
+  return (
+    <button
+      onClick={handleGoogleSignIn}
+      className="flex items-center justify-center gap-2 w-full py-3 bg-white text-gray-800 border border-gray-300 rounded-md shadow-md hover:bg-gray-100 transition text-sm font-semibold"
+    >
+      <Image
+        src="/Googleicon.png"
+        alt="Google icon"
+        width={16}
+        height={16}
+        className="mr-2"
+      />
+      Continue with Google
+    </button>
+  );
+}

apps/web/src/app/auth/login/LoginForm.tsx

@@ -0,0 +1,85 @@
+"use client";
+import { useState } from "react";
+import { useLogin } from "./useLogin";
+import Link from "next/link";
+import GoogleLoginButton from "./GoogleLoginButton";
+import AuthRedirect from "@/components/AuthRedirect";
+import Logo from "../../../components/logo";
+import Back from "../../../components/Backbutton";
+export default function LoginForm() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loginSuccess, setLoginSuccess] = useState(false);
+  const { login, loading, error } = useLogin();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const result = await login(email, password);
+    if (result) {
+      setLoginSuccess(true);
+    }
+  };
+
+  return (
+    <>
+      <Logo />
+
+      <div className="bg-[#cce6ff] rounded-xl w-[429px] mx-auto my-10 p-8 shadow-md space-y-6">
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {loginSuccess && <AuthRedirect />}
+
+          <h3 className="text-center text-2xl font-bold mb-5 text-black">
+            Login to your account
+          </h3>
+
+          <input
+            type="email"
+            placeholder="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 bg-white text-sm"
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 bg-white text-sm"
+          />
+
+          {error && (
+            <p className="text-red-600 text-sm font-semibold">{error}</p>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-md text-base font-semibold shadow-md transition"
+          >
+            {loading ? "Logging in ..." : "Login"}
+          </button>
+
+          <div className="text-center mt-2 text-sm text-gray-700">
+            <Link
+              href="/auth/forgot-password"
+              className="text-blue-600 font-medium hover:underline"
+            >
+              Forgot your password?
+            </Link>
+          </div>
+
+          <div className="flex items-center my-6 text-gray-600 text-sm">
+            <div className="flex-grow h-[1px] bg-gray-300"></div>
+            <span className="mx-3">or</span>
+            <div className="flex-grow h-[1px] bg-gray-300"></div>
+          </div>
+
+          <GoogleLoginButton />
+        </form>
+        <Back />
+      </div>
+    </>
+  );
+}

apps/web/src/app/auth/login/page.tsx

@@ -0,0 +1,9 @@
+import LoginForm from "../login/LoginForm";
+
+export default function LoginPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <LoginForm />
+    </div>
+  );
+}

apps/web/src/app/auth/login/useLogin.ts

@@ -0,0 +1,28 @@
+"use client";
+import { useState } from "react";
+import { signInWithEmail } from "@/lib/supabase/authServices";
+
+export const useLogin = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const login = async (email: string, password: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await signInWithEmail(email, password);
+      return data;
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("Something went wrong");
+      }
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { login, loading, error };
+};