middle ware and profile

Author: ft4bhi

src/app/api/set-auth-cookie/route.ts

@@ -0,0 +1,44 @@
+// pages/api/set-auth-cookie/route.ts
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { getAuth } from 'firebase-admin/auth';
+import { initializeApp, getApps, cert } from 'firebase-admin/app';
+import { serialize } from 'cookie';
+
+const serviceAccount = {
+  // Replace these with your service account values
+  projectId: process.env.FIREBASE_PROJECT_ID,
+  privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, '\n'),
+  clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
+};
+
+if (!getApps().length) {
+  initializeApp({
+    credential: cert(serviceAccount as any),
+  });
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== 'POST') return res.status(405).end();
+
+  const { idToken } = req.body;
+  if (!idToken) return res.status(400).json({ error: 'ID token required' });
+
+  try {
+    const decodedToken = await getAuth().verifyIdToken(idToken);
+
+    // Set secure HttpOnly cookie
+    const cookie = serialize('authToken', idToken, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      maxAge: 60 * 60 * 24, // 1 day
+      path: '/',
+      sameSite: 'lax',
+    });
+
+    res.setHeader('Set-Cookie', cookie);
+    res.status(200).json({ success: true });
+  } catch (err) {
+    console.error(err);
+    res.status(401).json({ error: 'Invalid token' });
+  }
+}

src/app/profile/editProfile/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { ArrowLeft, ChevronDown } from "lucide-react";
+import { useState } from "react";
+
+export default function EditProfile() {
+  const router = useRouter();
+  const [sem, setSem] = useState("");
+  const [dept, setDept] = useState("");
+  const [course, setCourse] = useState("");
+
+  return (
+    <div className="min-h-screen bg-white flex flex-col items-center p-4 md:p-8">
+      <div className="w-full max-w-md">
+        <button onClick={() => router.back()} className="mb-4">
+          <ArrowLeft className="text-gray-700" />
+        </button>
+
+        <h1 className="text-2xl font-semibold text-center mb-1">Profile</h1>
+        <p className="text-center text-gray-500 mb-6">Edit Profile</p>
+
+        <div className="flex flex-col items-center mb-6">
+          <div className="w-24 h-24 bg-gray-300 rounded-full flex items-center justify-center text-sm text-gray-600 mb-2">
+            Upload Image
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <input
+            type="text"
+            placeholder="Enter Your Sem"
+            value={sem}
+            onChange={(e) => setSem(e.target.value)}
+            className="w-full px-4 py-2 border rounded-md outline-none focus:ring-2 ring-gray-300"
+          />
+          <input
+            type="text"
+            placeholder="Enter Your Department"
+            value={dept}
+            onChange={(e) => setDept(e.target.value)}
+            className="w-full px-4 py-2 border rounded-md outline-none focus:ring-2 ring-gray-300"
+          />
+          <div className="relative">
+            <select
+              value={course}
+              onChange={(e) => setCourse(e.target.value)}
+              className="w-full appearance-none px-4 py-2 border rounded-md outline-none focus:ring-2 ring-gray-300"
+            >
+              <option value="">Select Your Course</option>
+              <option value="btech">B.Tech</option>
+              <option value="mtech">M.Tech</option>
+              <option value="mba">MBA</option>
+            </select>
+            <ChevronDown className="absolute right-3 top-3 text-gray-500 pointer-events-none" />
+          </div>
+          <button className="w-full py-2 bg-gray-700 text-white rounded-md hover:bg-gray-800 transition">
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/profile/page.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { ArrowLeft } from "lucide-react";
+
+export default function Profile() {
+  const router = useRouter();
+
+  return (
+    <div className="min-h-screen bg-white flex flex-col items-center p-4 md:p-8">
+      <div className="w-full max-w-md">
+        <button onClick={() => router.back()} className="mb-4">
+          <ArrowLeft className="text-gray-700" />
+        </button>
+
+        <h1 className="text-2xl font-semibold text-center mb-1">Profile</h1>
+        <div className="w-24 h-1 bg-gray-300 mx-auto rounded-full mb-6"></div>
+
+        <div className="flex flex-col items-center">
+          <div className="w-24 h-24 bg-gray-300 rounded-full mb-4" />
+
+          <h2 className="text-lg font-medium">Name</h2>
+          <p className="text-sm text-gray-500">Sem - Dept</p>
+
+          <button
+            onClick={() => router.push("/profile/editProfile")}
+            className="mt-6 px-6 py-2 border border-gray-600 rounded-md hover:bg-gray-100 transition"
+          >
+            Edit Profile
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/topNavbar.tsx

@@ -20,7 +20,7 @@ const Header: React.FC<{
       ? `S${semester}, `
       : "";
      const handleUsrProfileClick = () => {
-    router.push("/login");
+    router.push("/profile");
   };
 
   return (

src/middleware.ts

@@ -1,43 +1,27 @@
-// middleware.ts
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
 
 export function middleware(request: NextRequest) {
-  const { pathname } = request.nextUrl
-  const token = request.cookies.get('authToken')?.value
+  const { pathname } = request.nextUrl;
+  const token = request.cookies.get('authToken')?.value;
 
-  // Define public routes that don't need authentication
-  const publicRoutes = [ '/auth']
-  
-  // Check if the current path is a public route
-  const isPublicRoute = publicRoutes.includes(pathname) || 
-                       publicRoutes.some(route => pathname.startsWith(route + '/'))
+  // Public routes that don't require auth
+  const publicRoutes = ['/auth'];
+  const isPublicRoute =
+    publicRoutes.includes(pathname) ||
+    publicRoutes.some((route) => pathname.startsWith(route + '/'));
 
-  // If user has no token and trying to access protected route
-  if (!token && !isPublicRoute) {
-    console.log(`Redirecting ${pathname} to /auth - no token`)
-    return NextResponse.redirect(new URL('/auth', request.url))
-  }
+  // If no token and trying to access protected route
+  // if (!token && !isPublicRoute) {
+  //   console.log(`Redirecting ${pathname} to /auth - no token`);
+  //   return NextResponse.redirect(new URL('/auth', request.url));
+  // }
 
-  // If user has token and trying to access auth page, redirect to home
-  if (token && pathname === '/auth') {
-    console.log(`Redirecting from /auth to / - user has token`)
-    return NextResponse.redirect(new URL('/', request.url))
-  }
-
-  return NextResponse.next()
+  return NextResponse.next();
 }
 
 export const config = {
   matcher: [
-    /*
-     * Match all request paths except for the ones starting with:
-     * - api (API routes)
-     * - _next/static (static files)
-     * - _next/image (image optimization files)
-     * - favicon.ico (favicon file)
-     * - public files (images, etc.)
-     */
     '/((?!api|_next/static|_next/image|favicon.ico|images|.*\\..*).*)',
   ],
-}
+};