chore: migrate Clerk to v5 and fix middleware issue

- Migrate Clerk from v4 to v5 - Bump Next.js version 14.1 to 14.2 - Fix middleware issue where 404 paths containing dots (`.`) resulted in unhandled error
compsci-adl · May 29, 2024 · 160ce70 · 160ce70
1 parent 04e6bb8
commit 160ce70
Show file tree

Hide file tree

Showing 17 changed files with 198 additions and 401 deletions.
diff --git a/.env.local.example b/.env.local.example
@@ -4,8 +4,6 @@ CLERK_SECRET_KEY=
 # DO NOT modify
 NEXT_PUBLIC_CLERK_SIGN_IN_URL=/signin
 NEXT_PUBLIC_CLERK_SIGN_UP_URL=/join
-NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
-NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
 
 # Database (DO NOT modify in development)
 DATABASE_URL=file:dev.sqlite

diff --git a/Dockerfile b/Dockerfile
@@ -25,8 +25,6 @@ COPY . .
 # Needed for build
 ENV NEXT_PUBLIC_CLERK_SIGN_IN_URL=/signin
 ENV NEXT_PUBLIC_CLERK_SIGN_UP_URL=/join
-ENV NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
-ENV NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
 
 RUN --mount=type=secret,id=DATABASE_URL,target=/run/secrets/DATABASE_URL \
     --mount=type=secret,id=REDIS_URI,target=/run/secrets/REDIS_URI \

diff --git a/package.json b/package.json
@@ -15,8 +15,8 @@
     "db:studio": "drizzle-kit studio"
   },
   "dependencies": {
-    "@clerk/clerk-react": "^4.30.3",
-    "@clerk/nextjs": "^4.29.3",
+    "@clerk/clerk-react": "^5.2.2",
+    "@clerk/nextjs": "^5.1.3",
     "@headlessui/react": "^1.7.18",
     "@hookform/resolvers": "^3.3.4",
     "@libsql/client": "0.4.0-pre.7",
@@ -26,7 +26,7 @@
     "just-submit": "^0.0.7",
     "ky": "^1.2.0",
     "nanoid": "^5.0.4",
-    "next": "14.1.1",
+    "next": "14.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/ducks.txt b/public/ducks.txt
@@ -0,0 +1,5 @@
+
+>(.)__ <(.)__ <(.)__
+ (___/  (___/  (___/
+~~~~~~~~~~~~~~~~~~~~
+You found the ducks!
diff --git a/public/humans.txt b/public/humans.txt
@@ -0,0 +1 @@
+But where are the ducks at?
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+Disallow: /admin
+Disallow: /settings
diff --git a/src/app/(account)/join/page.tsx b/src/app/(account)/join/page.tsx
@@ -1,5 +1,5 @@
 import { checkUserExists } from '@/server/check-user-exists';
-import { currentUser } from '@clerk/nextjs';
+import { currentUser } from '@clerk/nextjs/server';
 import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 import Join from './Join';

diff --git a/src/app/(account)/settings/page.tsx b/src/app/(account)/settings/page.tsx
@@ -2,7 +2,7 @@ import FancyRectangle from '@/components/FancyRectangle';
 import Title from '@/components/Title';
 import { checkUserExists } from '@/server/check-user-exists';
 import { verifyMembershipPayment } from '@/server/verify-membership-payment';
-import { currentUser } from '@clerk/nextjs';
+import { currentUser } from '@clerk/nextjs/server';
 import type { Metadata } from 'next';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';

diff --git a/src/app/(account)/signin/page.tsx b/src/app/(account)/signin/page.tsx
@@ -1,4 +1,4 @@
-import { currentUser } from '@clerk/nextjs';
+import { currentUser } from '@clerk/nextjs/server';
 import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 import SignIn from './SignIn';

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
@@ -1,7 +1,7 @@
 import FancyRectangle from '@/components/FancyRectangle';
 import Title from '@/components/Title';
 import { db } from '@/db';
-import { currentUser } from '@clerk/nextjs';
+import { currentUser } from '@clerk/nextjs/server';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import MemberForm from './MemberForm';

diff --git a/src/app/api/member/route.ts b/src/app/api/member/route.ts
@@ -1,6 +1,6 @@
 import { db } from '@/db';
 import { memberTable } from '@/db/schema';
-import { currentUser } from '@clerk/nextjs';
+import { currentUser } from '@clerk/nextjs/server';
 import { createInsertSchema } from 'drizzle-zod';
 import { z } from 'zod';
 

diff --git a/src/app/api/payment/route.ts b/src/app/api/payment/route.ts
@@ -11,7 +11,7 @@ import { env } from '@/env.mjs';
 import { redisClient } from '@/lib/redis';
 import { squareClient } from '@/lib/square';
 import { updateMemberExpiryDate } from '@/server/update-member-expiry-date';
-import { currentUser } from '@clerk/nextjs';
+import { currentUser } from '@clerk/nextjs/server';
 import { eq } from 'drizzle-orm';
 import type { CreatePaymentLinkRequest } from 'square';
 import { ApiError } from 'square';

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -41,7 +41,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
                 },
                 elements: {
                     formButtonPrimary: 'hover:bg-yellow shadow-button',
-                    card: 'shadow-card border-4 border-black',
+                    cardBox: 'shadow-card border-4 border-black',
                     formFieldInput: 'shadow-button border-2 border-black',
                 },
             }}

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,6 +1,6 @@
 import { checkUserExists } from '@/server/check-user-exists';
 import { verifyMembershipPayment } from '@/server/verify-membership-payment';
-import { currentUser } from '@clerk/nextjs';
+import { currentUser } from '@clerk/nextjs/server';
 import HeaderClient from './HeaderClient';
 import HeaderMobileClient from './HeaderMobileClient';
 

diff --git a/src/env.mjs b/src/env.mjs
@@ -19,16 +19,12 @@ export const env = createEnv({
         // when user is/isn't signed in or has/hasn't signed up.
         NEXT_PUBLIC_CLERK_SIGN_IN_URL: z.literal('/signin'),
         NEXT_PUBLIC_CLERK_SIGN_UP_URL: z.literal('/join'),
-        NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL: z.literal('/'),
-        NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL: z.literal('/'),
     },
     experimental__runtimeEnv: {
         NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
         NEXT_PUBLIC_DRIVE_LINK: process.env.NEXT_PUBLIC_DRIVE_LINK,
         NEXT_PUBLIC_CLERK_SIGN_IN_URL: process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
         NEXT_PUBLIC_CLERK_SIGN_UP_URL: process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL,
-        NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL: process.env.NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL,
-        NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL: process.env.NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL,
     },
     skipValidation: process.env.SKIP_ENV_VALIDATION,
 });
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -1,11 +1,19 @@
-import { authMiddleware } from '@clerk/nextjs';
+// import { authMiddleware } from '@clerk/nextjs';
+// const authRoutes = ['/settings', '/admin'];
+// export default authMiddleware({
+//     publicRoutes: (req) => !authRoutes.includes(req.url),
+// });
+// export const config = {
+//     matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
+// };
+import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
 
-const authRoutes = ['/settings', '/admin'];
+const isProtectedRoute = createRouteMatcher(['/settings(.*)', '/admin(.*)']);
 
-export default authMiddleware({
-    publicRoutes: (req) => !authRoutes.includes(req.url),
+export default clerkMiddleware((auth, req) => {
+    if (isProtectedRoute(req)) auth().protect();
 });
 
 export const config = {
-    matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
+    matcher: ['/((?!.*\\..*|_next).*)', '/(.*)'],
 };