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 = {