chore: migrate Clerk to v5 and fix middleware issue

.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

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 \

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",

public/ducks.txt

@@ -0,0 +1,5 @@
+
+>(.)__ <(.)__ <(.)__
+ (___/  (___/  (___/
+~~~~~~~~~~~~~~~~~~~~
+You found the ducks!

public/humans.txt

@@ -0,0 +1 @@
+But where are the ducks at?

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+Disallow: /admin
+Disallow: /settings

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';

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';

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';

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';

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';
 

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';

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',
                 },
             }}

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';
 

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,
 });

src/middleware.ts

@@ -1,11 +1,11 @@
-import { authMiddleware } from '@clerk/nextjs';
+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).*)', '/(.*)'],
 };