From 7580f4a56235fa6e41bfdf773e6adb529daa25bd Mon Sep 17 00:00:00 2001
From: Ahmed Elsakaan <ahmedtarek3214@gmail.com>
Date: Sun, 26 May 2024 01:37:12 +0100
Subject: [PATCH] feat: better auth routes organisation

---
 .../(auth)/sign-in/[[...sign-in]]/page.tsx    |  0
 .../(auth)/sign-up/[[...sign-in]]/page.tsx    |  0
 src/app/(dashboard)/layout.tsx                | 20 ++++++++++++++
 src/app/(marketing)/page.tsx                  | 11 +-------
 src/app/layout.tsx                            | 27 +++++++------------
 src/middleware.ts                             |  8 ++++++
 6 files changed, 39 insertions(+), 27 deletions(-)
 rename src/app/{ => (dashboard)}/(auth)/sign-in/[[...sign-in]]/page.tsx (100%)
 rename src/app/{ => (dashboard)}/(auth)/sign-up/[[...sign-in]]/page.tsx (100%)
 create mode 100644 src/app/(dashboard)/layout.tsx

diff --git a/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx b/src/app/(dashboard)/(auth)/sign-in/[[...sign-in]]/page.tsx
similarity index 100%
rename from src/app/(auth)/sign-in/[[...sign-in]]/page.tsx
rename to src/app/(dashboard)/(auth)/sign-in/[[...sign-in]]/page.tsx
diff --git a/src/app/(auth)/sign-up/[[...sign-in]]/page.tsx b/src/app/(dashboard)/(auth)/sign-up/[[...sign-in]]/page.tsx
similarity index 100%
rename from src/app/(auth)/sign-up/[[...sign-in]]/page.tsx
rename to src/app/(dashboard)/(auth)/sign-up/[[...sign-in]]/page.tsx
diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
new file mode 100644
index 00000000..5a0d04da
--- /dev/null
+++ b/src/app/(dashboard)/layout.tsx
@@ -0,0 +1,20 @@
+import { TRPCReactProvider } from '@/lib/trpc/react';
+import { ClerkProvider } from '@clerk/nextjs';
+import { dark } from '@clerk/themes';
+import type { PropsWithChildren } from 'react';
+
+/**
+ * The layout of the dashboard routes, this supplies the clerk & trpc providers mainly.
+ * @param props The props of the layout.
+ * @param props.children The children of the layout, which are all the routes under this route group.
+ * @returns A react component.
+ */
+export default function DashboardLayout({ children }: PropsWithChildren) {
+  return (
+    <ClerkProvider
+      appearance={{ baseTheme: dark, variables: { colorPrimary: '#F9617B' } }}
+    >
+      <TRPCReactProvider>{children}</TRPCReactProvider>
+    </ClerkProvider>
+  );
+}
diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
index 61d99014..a2d1f764 100644
--- a/src/app/(marketing)/page.tsx
+++ b/src/app/(marketing)/page.tsx
@@ -1,7 +1,4 @@
 import Link from 'next/link';
-import { redirect } from 'next/navigation';
-
-import { currentUser } from '@clerk/nextjs/server';
 import { ChevronRightIcon, StarIcon } from 'lucide-react';
 
 import { constants } from '@/constants';
@@ -13,13 +10,7 @@ import { HomePreview } from './_components/home-preview';
  * The marketing home page.
  * @returns A react component representing the marketing home page.
  */
-export default async function Home() {
-  const session = await currentUser();
-
-  if (session) {
-    redirect('/app');
-  }
-
+export default function Home() {
   return (
     <main className="flex flex-col items-center justify-center gap-6 pt-24">
       <Button variant="outline" asChild className="rounded-full font-normal">
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9c76917c..ae8dfb4c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,5 @@
 import type { Metadata } from 'next';
 
-import { ClerkProvider } from '@clerk/nextjs';
-import { dark } from '@clerk/themes';
 import { GeistMono } from 'geist/font/mono';
 import { GeistSans } from 'geist/font/sans';
 
@@ -12,7 +10,6 @@ import { ThemeProvider } from 'next-themes';
 import type { PropsWithChildren } from 'react';
 
 import { constructMetadata } from '@/lib/utils';
-import { TRPCReactProvider } from '@/lib/trpc/react';
 
 export const metadata: Metadata = constructMetadata();
 
@@ -25,20 +22,16 @@ export const metadata: Metadata = constructMetadata();
  */
 export default function RootLayout({ children }: PropsWithChildren) {
   return (
-    <ClerkProvider
-      appearance={{ baseTheme: dark, variables: { colorPrimary: '#F9617B' } }}
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${GeistSans.variable} ${GeistMono.variable}`}
     >
-      <html
-        lang="en"
-        suppressHydrationWarning
-        className={`${GeistSans.variable} ${GeistMono.variable}`}
-      >
-        <body>
-          <ThemeProvider attribute="class" disableTransitionOnChange>
-            <TRPCReactProvider>{children}</TRPCReactProvider>
-          </ThemeProvider>
-        </body>
-      </html>
-    </ClerkProvider>
+      <body>
+        <ThemeProvider attribute="class" disableTransitionOnChange>
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
   );
 }
diff --git a/src/middleware.ts b/src/middleware.ts
index ca9d5e46..03f7098e 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,4 +1,5 @@
 import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
+import { NextResponse } from 'next/server';
 
 const isProtectedRoute = createRouteMatcher(['/app(.*)']);
 
@@ -6,6 +7,13 @@ export default clerkMiddleware((auth, req) => {
   if (isProtectedRoute(req)) {
     auth().protect();
   }
+
+  // if the user is authenticated and is trying to access anything other than the dashboard, redirect them to the dashboard
+  if (auth().userId && !isProtectedRoute(req)) {
+    return NextResponse.redirect(new URL(`${req.nextUrl.origin}/app`));
+  }
+
+  return NextResponse.next();
 });
 
 export const config = {