Fixed Auth

.env.example

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_SUPABASE_ANON_KEY = ""
+NEXT_PUBLIC_SUPABASE_URL = ""
+DATABASE_URL = "postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

app/api/auth/register/route.ts

@@ -0,0 +1,80 @@
+import prisma from "@/lib/database/prismaClient";
+import { supabase } from "@/lib/supabaseClient";
+import { hashPassword } from "@/utils/hashing";
+import { signupSchema } from "@/validations/validation";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+    const body = await request.json();
+    const { email, password, fullName, leetcodeUsername, gender } = body;
+    try {
+        const { success, error } = signupSchema.safeParse({ email, password, fullName, leetcodeUsername, gender });
+
+        if (!success) {
+            return NextResponse.json({
+                success: false,
+                message: error.flatten().fieldErrors,
+            }, { status: 400 });
+        }
+
+
+        const userExists = await prisma.user.findFirst({
+            where: {
+                email: email,
+            },
+        });
+
+        if (userExists) {
+            return NextResponse.json({
+                success: false,
+                message: "User with this email already exists.",
+            }, { status: 404 });
+        }
+
+        const { data: signUpData, error: signUpError } = await supabase.auth.signUp({
+            email,
+            password: password,
+        });
+
+        if (signUpError) {
+            return NextResponse.json({
+                success: false,
+                message: signUpError.message,
+            }, { status: 401 });
+        }
+
+        const supabaseId = signUpData.user?.id;
+
+        if (!supabaseId) {
+            return NextResponse.json({
+                success: false,
+                message: "Failed to retrieve Supabase user ID.",
+            }, { status: 400 });
+        }
+
+        const hashedPassword = await hashPassword(password);
+        const user = await prisma.user.create({
+            data: {
+                email,
+                password: hashedPassword,
+                fullName,
+                leetcodeUsername,
+                gender,
+                supabaseId: supabaseId,
+                isVerified: false,
+            }
+        });
+
+        return NextResponse.json({
+            success: true,
+            message: "User created successfully",
+            user,
+        }, { status: 201 });
+
+    } catch (error: any) {
+        return NextResponse.json({
+            success: false,
+            message: error.message
+        }, { status: 500 });
+    }
+}

app/api/auth/user/route.ts

@@ -0,0 +1,37 @@
+import prisma from '@/lib/database/prismaClient';
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+    try {
+
+        const { supabaseId } = await request.json();
+        console.log("supabaseId", supabaseId);
+
+        const userData = await prisma.user.findUnique({
+            where: { supabaseId },
+            select: {
+                email: true,
+                fullName: true,
+                leetcodeUsername: true,
+                id: true,
+                isVerified: true,
+                gender: true,
+                createdAt: true,
+                supabaseId: true,
+            }
+        });
+
+        if (!userData) {
+            return NextResponse.json({ message: 'User not found' }, { status: 404 });
+        }
+
+        if (!userData.isVerified) {
+            return NextResponse.json({ message: 'User is not verified but registered', user: userData });
+        }
+
+        return NextResponse.json({ user: userData });
+    } catch (err) {
+        console.error('Error fetching user data:', err);
+        return NextResponse.json({ message: 'Error fetching user data' }, { status: 500 });
+    }
+}

app/signup/page.tsx → app/auth/register/page.tsx

@@ -1,4 +1,4 @@
-import SignupForm from "@/components/SignupForm";
+import SignupForm from "@/components/AuthComponent/SignupForm";
 
 export default function SignupPage() {
     return (

app/login/page.tsx → app/auth/signin/page.tsx

@@ -1,9 +1,9 @@
-import LoginForm from "@/components/LoginForm";
+import SigninForm from "@/components/AuthComponent/SigninForm";
 
 export default function SignupPage() {
     return (
         <div className="">
-            <LoginForm />
+            <SigninForm />
         </div>
     );
 }

app/auth/verify/page.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Mail } from 'lucide-react'
+
+export default function VerifyPage() {
+  const [resendStatus, setResendStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle')
+
+  const handleResendEmail = async () => {
+    setResendStatus('sending')
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    setResendStatus('sent')
+  }
+
+  return (
+    <main className="flex min-h-screen items-center justify-center px-4">
+      <Card className="w-full max-w-md rounded-2xl">
+        <CardHeader>
+          <div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
+            <Mail className="h-10 w-10 text-blue-600" />
+          </div>
+          <CardTitle className="text-center text-2xl">Verify Your Email</CardTitle>
+          <CardDescription className="text-center">
+            We've sent a verification link to your registered email address.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="text-center">
+          <p className="text-sm text-neutral-600">
+            Please check your inbox and click on the verification link to complete your registration.
+            If you don't see the email, please check your spam folder.
+          </p>
+        </CardContent>
+        {/* <CardFooter className="flex flex-col items-center space-y-4">
+          <Button
+            onClick={handleResendEmail}
+            disabled={resendStatus === 'sending' || resendStatus === 'sent'}
+          >
+            {resendStatus === 'sending' ? 'Resending...' : 'Resend Verification Email'}
+          </Button>
+          {resendStatus === 'sent' && (
+            <Alert variant="default" className="mt-4">
+              <AlertDescription>Verification email has been resent successfully.</AlertDescription>
+            </Alert>
+          )}
+          {resendStatus === 'error' && (
+            <Alert variant="destructive" className="mt-4">
+              <AlertDescription>Failed to resend verification email. Please try again later.</AlertDescription>
+            </Alert>
+          )}
+        </CardFooter> */}
+      </Card>
+    </main>
+  )
+}
+

app/dashboard/page.tsx

@@ -1,78 +1,97 @@
-"use client"
-import { useEffect, useState } from 'react';
-import { supabase } from '@/lib/supabaseClient';
-import { useRouter } from 'next/navigation';
-import Navbar from '@/components/header';
-import StatsCard from '@/components/Stats';
-import { fetchLeetCodeStats } from '@/lib/utils';
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuthStore } from "@/store/AuthStore/useAuthStore";
+import Navbar from "@/components/header";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Dashboard() {
-    const [userData, setUserData] = useState<any>(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-    const router = useRouter();
+  const router = useRouter();
+  const { authUser, fetchAuthUser, authUserLoading } = useAuthStore();
 
-    useEffect(() => {
-        const fetchData = async () => {
-            try {
-                const { data, error } = await supabase.auth.getSession();
+  useEffect(() => {
+    fetchAuthUser();
+  }, [fetchAuthUser]);
 
-                if (error) throw new Error("Error fetching session.");
+  useEffect(() => {
+    if (!authUserLoading && !authUser) {
+      router.push("/auth/signin");
+    }
+  }, [authUserLoading, authUser, router]);
 
-                const session = data.session;
-                if (!session) {
-                    router.push('/login');
-                    return;
-                }
-                // Fetch user-specific data in a single call
-                const { data: userInfo, error: userInfoError } = await supabase
-                    .from('user_info')
-                    .select('*')
-                    .eq('user_id', session.user.id)
-                    .single(); 
+  if (authUserLoading) {
+    return <DashboardSkeleton />;
+  }
 
-                if (userInfoError) throw userInfoError;
+  if (!authUser) {
+    return null;
+  }
 
-                setUserData(userInfo);
+  return (
+    <div className="min-h-screen">
+      <Navbar userId={authUser.id} />
+      <main className="container mx-auto p-4 space-y-6">
+        <h1 className="text-3xl font-bold">Welcome, {authUser.fullName}</h1>
 
-            } catch (err: any) {
-                console.error(err);
-                setError(err.message || 'An error occurred.');
-                router.push('/login');
-            } finally {
-                setLoading(false);
-            }
-        };
+        <Card>
+          <CardHeader>
+            <CardTitle>Your Profile</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <p>
+              <span className="font-medium">LeetCode Username:</span>{" "}
+              {authUser.leetcodeUsername}
+            </p>
+            <p>
+              <span className="font-medium">Gender:</span> {authUser.gender}
+            </p>
+          </CardContent>
+        </Card>
 
-        fetchData();
-    }, [router]);
+        <Card>
+          <CardHeader>
+            <CardTitle>LeetCode Stats</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {/* LeetCode stats component will go here */}
+            <p className="text-muted-foreground">
+              LeetCode stats are coming soon!
+            </p>
+          </CardContent>
+        </Card>
+      </main>
+    </div>
+  );
+}
 
-    if (loading) return <p>Loading...</p>;
+function DashboardSkeleton() {
+  return (
+    <div className="min-h-screen">
+      {/* <Navbar userId={} /> */}
+      <main className="container mx-auto p-4 space-y-6">
+        <Skeleton className="h-10 w-[250px]" />
 
-    if (error) {
-        return (
-            <div>
-                <Navbar userId={userData.user_id} />
-                <p className="text-red-500">{error}</p>
-            </div>
-        );
-    }
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-7 w-[100px]" />
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <Skeleton className="h-5 w-full" />
+            <Skeleton className="h-5 w-full" />
+          </CardContent>
+        </Card>
 
-    return (
-        <div>
-            <Navbar userId={userData?.user_id} />
-            <div className="container mx-auto p-4">
-                <h1 className="text-xl font-bold mb-4">Welcome, {userData.name}</h1>
-                <div className="mb-4">
-                    <p>LeetCode Username: {userData.leetcode_username}</p>
-                    <p>Gender: {userData.gender}</p>
-                </div>
-
-                <div className="mt-6">
-                    <h2 className="text-lg font-bold mb-2">LeetCode Stats</h2>
-                    <StatsCard leetcodeUsername={userData.leetcode_username} id={userData.id} />
-                </div>
-            </div>
-        </div>
-    );
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-7 w-[120px]" />
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-20 w-full" />
+          </CardContent>
+        </Card>
+      </main>
+    </div>
+  );
 }

components/AuthComponent/AuthBottom.tsx

@@ -0,0 +1,16 @@
+import Link from "next/link";
+import React from "react";
+
+interface AuthBottomProps {
+  href: string;
+  title: string;
+  toTitle: string;
+}
+
+export default function AuthBottom({ href, title, toTitle }: AuthBottomProps) {
+  return (
+    <Link href={href} className="text-sm font-semibold">
+      {title} <span className="text-blue-500 hover:underline">{toTitle}</span>
+    </Link>
+  );
+}