feat: enhance authentication and user profile features

- Refactored authentication logic to include error handling and logging.
- Introduced new utility functions for user data extraction and validation.
- Added support for token-based and credentials-based authentication.
- Enhanced user profile data structure to include organizations, projects, and social links.
- Created new components for user profile loading states and layout.
- Updated landing page to include a button for creating crowdfunding projects.
- Improved session management to populate user data in the session object.
- Added custom error classes for better error handling in authentication processes.

Author: 0xdevcollins

app/(landing)/profile/[username]/layout.tsx

@@ -0,0 +1,29 @@
+import { ReactNode, Suspense } from 'react';
+
+interface ProfileLayoutProps {
+  children: ReactNode;
+  params: Promise<{
+    username: string;
+  }>;
+}
+
+export const dynamic = 'force-dynamic';
+
+export default function ProfileLayout({ children }: ProfileLayoutProps) {
+  return (
+    <main className='flex-1 px-6 py-5 md:px-10 md:py-20 xl:px-[100px]'>
+      <Suspense fallback={<ProfileLoadingFallback />}>{children}</Suspense>
+    </main>
+  );
+}
+
+function ProfileLoadingFallback() {
+  return (
+    <section className='flex min-h-screen items-center justify-center'>
+      <div className='flex flex-col items-center gap-4'>
+        <div className='h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600'></div>
+        <div className='text-white'>Loading profile...</div>
+      </div>
+    </section>
+  );
+}

app/(landing)/profile/[username]/loading.tsx

@@ -0,0 +1,58 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function ProfileLoading() {
+  return (
+    <section className='min-h-screen'>
+      <article className='flex w-[500px] flex-col gap-11 text-white'>
+        {/* Profile Header Skeleton */}
+        <main className='flex flex-col gap-6'>
+          <header className='flex items-end gap-4'>
+            <Skeleton className='aspect-square size-[150px] rounded-full' />
+            <div className='flex flex-col gap-3 py-3'>
+              <Skeleton className='h-8 w-48' />
+              <Skeleton className='h-4 w-32' />
+            </div>
+          </header>
+          <Skeleton className='h-4 w-full' />
+          <Skeleton className='h-4 w-3/4' />
+
+          {/* Social Links Skeleton */}
+          <div className='flex items-center space-x-4'>
+            {[1, 2, 3, 4].map(i => (
+              <Skeleton key={i} className='h-6 w-6 rounded' />
+            ))}
+          </div>
+
+          {/* Buttons Skeleton */}
+          <div className='flex gap-4'>
+            <Skeleton className='h-10 w-24' />
+            <Skeleton className='h-10 w-20' />
+          </div>
+        </main>
+
+        {/* Stats Skeleton */}
+        <div className='flex items-center gap-8'>
+          {[1, 2, 3, 4].map(i => (
+            <div key={i} className='flex items-center gap-1'>
+              <Skeleton className='h-4 w-8' />
+              <Skeleton className='h-3 w-16' />
+            </div>
+          ))}
+        </div>
+
+        {/* Organizations Skeleton */}
+        <main className='flex flex-col gap-3'>
+          <Skeleton className='h-4 w-32' />
+          <div className='flex flex-col gap-3'>
+            {[1, 2].map(i => (
+              <div key={i} className='flex items-center gap-3 px-3'>
+                <Skeleton className='size-[46px] rounded-full' />
+                <Skeleton className='h-4 w-32' />
+              </div>
+            ))}
+          </div>
+        </main>
+      </article>
+    </section>
+  );
+}

app/(landing)/profile/[username]/page.tsx

@@ -0,0 +1,17 @@
+import { ProfileData } from './profile-data';
+
+interface ProfilePageProps {
+  params: Promise<{
+    username: string;
+  }>;
+}
+
+export default async function ProfilePage({ params }: ProfilePageProps) {
+  const { username } = await params;
+
+  return (
+    <section className='min-h-[70vh]'>
+      <ProfileData username={username} />
+    </section>
+  );
+}

app/(landing)/profile/[username]/profile-data.tsx

@@ -0,0 +1,33 @@
+import { getUserProfileByUsername, getMe } from '@/lib/api/auth';
+import { GetMeResponse } from '@/lib/api/types';
+import { auth } from '@/auth';
+import ProfileOverview from '@/components/profile/ProfileOverview';
+
+interface ProfileDataProps {
+  username: string;
+}
+
+export async function ProfileData({ username }: ProfileDataProps) {
+  try {
+    const session = await auth();
+    const isOwnProfile = session?.user?.username === username;
+    let userData: GetMeResponse;
+
+    if (isOwnProfile && session?.user?.accessToken) {
+      userData = await getMe(session.user.accessToken);
+    } else {
+      userData = await getUserProfileByUsername(
+        username,
+        session?.user?.accessToken
+      );
+    }
+
+    return <ProfileOverview username={username} user={userData} />;
+  } catch {
+    return (
+      <section className='flex min-h-screen items-center justify-center'>
+        <div className='text-red-500'>Failed to load user profile</div>
+      </section>
+    );
+  }
+}

app/profile/[username]/projects/page.tsx …ng)/profile/[username]/projects/page.tsxapp/profile/[username]/projects/page.tsx renamed to app/(landing)/profile/[username]/projects/page.tsx app/profile/[username]/projects/page.tsx renamed to app/(landing)/profile/[username]/projects/page.tsx

@@ -67,13 +67,18 @@ export default function DashboardPage() {
                 <Avatar className='h-12 w-12'>
                   <AvatarImage src={session.user.image || ''} />
                   <AvatarFallback>
-                    {session.user.name?.charAt(0) ||
-                      session.user.email.charAt(0)}
+                    {(session.user.firstName || session.user.lastName)?.charAt(
+                      0
+                    ) || session.user.email.charAt(0)}
                   </AvatarFallback>
                 </Avatar>
                 <div>
                   <p className='font-medium'>
-                    {session.user.name || 'No name'}
+                    {session.user.firstName && session.user.lastName
+                      ? `${session.user.firstName} ${session.user.lastName}`
+                      : session.user.firstName ||
+                        session.user.lastName ||
+                        'No name'}
                   </p>
                   <p className='text-sm text-gray-500'>{session.user.email}</p>
                 </div>

app/dashboard/page.tsx

@@ -29,7 +29,8 @@ export default function UserPage() {
           {/* Header Section */}
           <div className='mb-8'>
             <h1 className='text-2xl leading-[120%] font-medium tracking-[-0.64px] text-white sm:text-3xl lg:text-[32px]'>
-              Hello, {user?.name?.split(' ')[0] || 'User'}
+              Hello,{' '}
+              {user?.profile?.firstName || user?.profile?.lastName || 'User'}
             </h1>
           </div>
           {/* Stats Cards Grid */}