middleware fix

Author: hanuchaudhary

app/actions/action.ts

@@ -0,0 +1,51 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { redirect } from 'next/navigation'
+import { createClient } from '@/utils/supabase/server'
+// import { signinSchema } from '@/validations/validation'
+
+// export async function login(data: { email: string, password: string }) {
+//     const supabase = await createClient()
+//     const { success, error } = signinSchema.safeParse(data);
+//     if (!success) {
+//         console.log(error);
+//         return;
+//     }
+//     // const data = {
+//     //     email: formData.get('email') as string,
+//     //     password: formData.get('password') as string,
+//     // }
+//     const { error: signInError } = await supabase.auth.signInWithPassword(data)
+//     if (signInError) {
+//         console.log(signInError);
+//         return
+//     }
+
+//     revalidatePath('/', 'layout')
+//     redirect('/dashboard');
+// }
+
+// export async function signup(formData: FormData) {
+//     const supabase = await createClient()
+//     const data = {
+//         email: formData.get('email') as string,
+//         password: formData.get('password') as string,
+//     }
+
+//     const { error } = await supabase.auth.signUp(data)
+
+//     if (error) {
+//         redirect('/error')
+//     }
+
+//     revalidatePath('/', 'layout')
+//     redirect('/')
+// }
+
+export async function signout() {
+    const supabase = await createClient();
+    await supabase.auth.signOut();
+    revalidatePath('/', 'layout');
+    redirect('/auth/signin');
+}

app/api/auth/register/route.ts

@@ -1,10 +1,11 @@
 import prisma from "@/lib/database/prismaClient";
-import { supabase } from "@/lib/supabaseClient";
 import { hashPassword } from "@/utils/hashing";
+import { createClient } from "@/utils/supabase/server";
 import { signupSchema } from "@/validations/validation";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
+    const supabase = await createClient();
     const body = await request.json();
     const { email, password, fullName, leetcodeUsername, gender } = body;
     try {

app/api/auth/user/route.ts

@@ -1,10 +1,11 @@
 import prisma from '@/lib/database/prismaClient';
 import { NextResponse } from 'next/server';
+import { createClient } from '@/utils/supabase/server'
 
-export async function POST(request: Request) {
+export async function GET(request: Request) {
     try {
-
-        const { supabaseId } = await request.json();
+        const supabase = await createClient();
+        const supabaseId = (await supabase.auth.getUser()).data.user?.id;
         const userData = await prisma.user.findUnique({
             where: { supabaseId },
             select: {
@@ -23,7 +24,7 @@ export async function POST(request: Request) {
             return NextResponse.json({ message: 'User not found' }, { status: 404 });
         }
 
-        return NextResponse.json({ user: userData },{status: 200});
+        return NextResponse.json({ user: userData }, { status: 200 });
     } catch (err) {
         console.error('Error fetching user data:', err);
         return NextResponse.json({ message: 'Error fetching user data' }, { status: 500 });

components/AuthComponent/SigninForm.tsx

@@ -33,8 +33,8 @@ import { signinSchema } from "@/validations/validation";
 type SigninFormValues = z.infer<typeof signinSchema>;
 
 export default function SigninForm() {
-  const { isSigningIn, signin, signinError } = useAuthStore();
-  const router = useRouter();
+  const router = useRouter()
+  const { isSigningIn,signin, signinError } = useAuthStore();
   const [showPassword, setShowPassword] = useState(false);
 
   const form = useForm<SigninFormValues>({
@@ -46,7 +46,7 @@ export default function SigninForm() {
   });
 
   const onSubmit = (data: SigninFormValues) => {
-    signin(data, router);
+    signin(data, router)
   };
 
   return (

components/header.tsx

@@ -1,23 +1,22 @@
-"use client"
+"use client";
 
 import { useState } from "react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { supabase } from "@/lib/supabaseClient";
-import { useRouter } from 'next/navigation';
+import { useRouter } from "next/navigation";
+import { signout } from "@/app/actions/action";
 
 const Navbar = ({ userId }: { userId?: string }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const router = useRouter(); 
+  const router = useRouter();
   return (
     <header>
       <nav className="flex justify-between items-center px-6 py-4 bg-neutral-900 text-white dark:bg-neutral-800">
         <div className="flex items-center space-x-2">
           <span className="text-2xl font-bold">📓</span>
-          <span className="text-xl font-semibold">
-            LeetCodeJournal
-          </span>
+          <span className="text-xl font-semibold">LeetCodeJournal</span>
         </div>
         <div className="hidden lg:flex space-x-6">
           <Link href="/" className="hover:text-purple-400 ">
@@ -32,14 +31,7 @@ const Navbar = ({ userId }: { userId?: string }) => {
         </div>
         <div className="hidden lg:flex items-center space-x-4">
           {userId ? (
-            <Button
-              variant="destructive" 
-              onClick={() =>
-                supabase.auth
-                  .signOut()
-                  .then(() => router.push("/"))
-              }
-            >
+            <Button variant="destructive" onClick={signout}>
               Sign Out
             </Button>
           ) : (

middleware.ts

@@ -1,17 +1,19 @@
-import { NextResponse } from 'next/server';
-import { supabase } from '@/lib/supabaseClient';
+import { type NextRequest } from 'next/server'
+import { updateSession } from '@/utils/supabase/middleware'
 
-export async function middleware(req: Request) {
-    const { data: session } = await supabase.auth.getSession();
-    const { pathname } = new URL(req.url);
-
-    if (pathname.startsWith('/dashboard') && !session) {
-        return NextResponse.redirect(('/login'));
-    }
-        
-    return NextResponse.next();
+export async function middleware(request: NextRequest) {
+  return await updateSession(request)
 }
 
 export const config = {
-    matcher: ['/dashboard/:path*'],
-};
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     * Feel free to modify this pattern to include more paths.
+     */
+    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+  ],
+}

package-lock.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.2",
+    "@supabase/ssr": "^0.5.2",
     "@types/bcryptjs": "^2.4.6",
     "axios": "^1.7.9",
     "bcryptjs": "^2.4.3",