feat: better auth routes organisation

noodle-run · May 26, 2024 · 7580f4a · 7580f4a
1 parent 27dd6a0
commit 7580f4a
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 27 deletions.
diff --git a/...pp/(auth)/sign-in/[[...sign-in]]/page.tsx → ...d)/(auth)/sign-in/[[...sign-in]]/page.tsx b/...pp/(auth)/sign-in/[[...sign-in]]/page.tsx → ...d)/(auth)/sign-in/[[...sign-in]]/page.tsx
diff --git a/...pp/(auth)/sign-up/[[...sign-in]]/page.tsx → ...d)/(auth)/sign-up/[[...sign-in]]/page.tsx b/...pp/(auth)/sign-up/[[...sign-in]]/page.tsx → ...d)/(auth)/sign-up/[[...sign-in]]/page.tsx
diff --git a/src/app/(dashboard)/layout.tsx 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
@@ -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
@@ -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
@@ -1,11 +1,19 @@
 import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
+import { NextResponse } from 'next/server';
 
 const isProtectedRoute = createRouteMatcher(['/app(.*)']);
 
 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 = {