feat: upgrade to Clerk v5 and use Clerk's Core 2

.env

@@ -15,8 +15,6 @@ DATABASE_URL=file:next-js-boilerplate.db
 # Clerk authentication
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_b3Blbi1zdGlua2J1Zy04LmNsZXJrLmFjY291bnRzLmRldiQ
 
-NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
-
 ######## [BEGIN] SENSITIVE DATA ######## For security reason, don't update the following variables (secret key) directly in this file.
 ######## Please create a new file named `.env.local`, all environment files ending with `.local` won't be tracked by Git.
 ######## After creating the file, you can add the following variables.

package.json

@@ -26,8 +26,8 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@clerk/localizations": "^1.28.4",
-    "@clerk/nextjs": "^4.30.1",
+    "@clerk/localizations": "^2.3.0",
+    "@clerk/nextjs": "^5.0.6",
     "@hookform/resolvers": "^3.3.4",
     "@libsql/client": "^0.6.0",
     "@logtail/pino": "^0.4.21",

src/app/[locale]/(auth)/(center)/layout.tsx

@@ -1,4 +1,4 @@
-import { auth } from '@clerk/nextjs';
+import { auth } from '@clerk/nextjs/server';
 import { redirect } from 'next/navigation';
 
 export default function CenteredLayout(props: { children: React.ReactNode }) {

src/app/[locale]/(auth)/(center)/sign-in/[[...sign-in]]/page.tsx

@@ -1,6 +1,8 @@
 import { SignIn } from '@clerk/nextjs';
 import { getTranslations } from 'next-intl/server';
 
+import { getI18nPath } from '@/utils/Helpers';
+
 export async function generateMetadata(props: { params: { locale: string } }) {
   const t = await getTranslations({
     locale: props.params.locale,
@@ -13,6 +15,8 @@ export async function generateMetadata(props: { params: { locale: string } }) {
   };
 }
 
-const SignInPage = () => <SignIn />;
+const SignInPage = (props: { params: { locale: string } }) => (
+  <SignIn path={getI18nPath('/sign-in', props.params.locale)} />
+);
 
 export default SignInPage;

src/app/[locale]/(auth)/(center)/sign-up/[[...sign-up]]/page.tsx

@@ -1,6 +1,8 @@
 import { SignUp } from '@clerk/nextjs';
 import { getTranslations } from 'next-intl/server';
 
+import { getI18nPath } from '@/utils/Helpers';
+
 export async function generateMetadata(props: { params: { locale: string } }) {
   const t = await getTranslations({
     locale: props.params.locale,
@@ -13,6 +15,8 @@ export async function generateMetadata(props: { params: { locale: string } }) {
   };
 }
 
-const SignUpPage = () => <SignUp />;
+const SignUpPage = (props: { params: { locale: string } }) => (
+  <SignUp path={getI18nPath('/sign-up', props.params.locale)} />
+);
 
 export default SignUpPage;

src/app/[locale]/(auth)/dashboard/user-profile/[[...user-profile]]/page.tsx

@@ -1,6 +1,8 @@
 import { UserProfile } from '@clerk/nextjs';
 import { getTranslations } from 'next-intl/server';
 
+import { getI18nPath } from '@/utils/Helpers';
+
 export async function generateMetadata(props: { params: { locale: string } }) {
   const t = await getTranslations({
     locale: props.params.locale,
@@ -12,9 +14,11 @@ export async function generateMetadata(props: { params: { locale: string } }) {
   };
 }
 
-const UserProfilePage = () => (
+const UserProfilePage = (props: { params: { locale: string } }) => (
   <div className="my-6 -ml-16">
-    <UserProfile />
+    <UserProfile
+      path={getI18nPath('/dashboard/user-profile', props.params.locale)}
+    />
   </div>
 );
 

src/app/[locale]/(auth)/layout.tsx

@@ -25,8 +25,8 @@ export default function AuthLayout(props: {
       localization={clerkLocale}
       signInUrl={signInUrl}
       signUpUrl={signUpUrl}
-      afterSignInUrl={dashboardUrl}
-      afterSignUpUrl={dashboardUrl}
+      signInFallbackRedirectUrl={dashboardUrl}
+      signUpFallbackRedirectUrl={dashboardUrl}
     >
       {props.children}
     </ClerkProvider>

src/components/Hello.tsx

@@ -1,4 +1,4 @@
-import { currentUser } from '@clerk/nextjs';
+import { currentUser } from '@clerk/nextjs/server';
 import { getTranslations } from 'next-intl/server';
 
 const Hello = async () => {

src/libs/Env.ts

@@ -12,7 +12,6 @@ export const Env = createEnv({
   client: {
     NEXT_PUBLIC_APP_URL: z.string().optional(),
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
-    NEXT_PUBLIC_CLERK_SIGN_IN_URL: z.string().min(1),
   },
   // You need to destructure all the keys manually
   runtimeEnv: {
@@ -23,6 +22,5 @@ export const Env = createEnv({
     NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
       process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
-    NEXT_PUBLIC_CLERK_SIGN_IN_URL: process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
   },
 });

src/middleware.ts

@@ -1,5 +1,4 @@
-import { authMiddleware, redirectToSignIn } from '@clerk/nextjs';
-import type { NextRequest } from 'next/server';
+import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
 import createMiddleware from 'next-intl/middleware';
 
 import { AppConfig } from './utils/AppConfig';
@@ -10,22 +9,12 @@ const intlMiddleware = createMiddleware({
   defaultLocale: AppConfig.defaultLocale,
 });
 
-export default authMiddleware({
-  publicRoutes: (req: NextRequest) =>
-    !req.nextUrl.pathname.includes('/dashboard'),
+const isProtectedRoute = createRouteMatcher(['/:locale/dashboard(.*)']);
 
-  beforeAuth: (req) => {
-    // Execute next-intl middleware before Clerk's auth middleware
-    return intlMiddleware(req);
-  },
+export default clerkMiddleware((auth, req) => {
+  if (isProtectedRoute(req)) auth().protect();
 
-  // eslint-disable-next-line consistent-return
-  afterAuth(auth, req) {
-    // Handle users who aren't authenticated
-    if (!auth.userId && !auth.isPublicRoute) {
-      return redirectToSignIn({ returnBackUrl: req.url });
-    }
-  },
+  return intlMiddleware(req);
 });
 
 export const config = {

src/utils/Helpers.test.ts

@@ -0,0 +1,20 @@
+import { AppConfig } from './AppConfig';
+import { getI18nPath } from './Helpers';
+
+describe('Helpers', () => {
+  describe('getI18nPath function', () => {
+    it('should not change the path for default language', () => {
+      const url = '/random-url';
+      const locale = AppConfig.defaultLocale;
+
+      expect(getI18nPath(url, locale)).toBe(url);
+    });
+
+    it('should prepend the locale to the path for non-default language', () => {
+      const url = '/random-url';
+      const locale = 'fr';
+
+      expect(getI18nPath(url, locale)).toMatch(/^\/fr/);
+    });
+  });
+});

src/utils/Helpers.ts

@@ -1,3 +1,5 @@
+import { AppConfig } from './AppConfig';
+
 export const getBaseUrl = () => {
   if (process.env.NEXT_PUBLIC_APP_URL) {
     return process.env.NEXT_PUBLIC_APP_URL;
@@ -9,3 +11,11 @@ export const getBaseUrl = () => {
 
   return 'http://localhost:3000';
 };
+
+export const getI18nPath = (url: string, locale: string) => {
+  if (locale === AppConfig.defaultLocale) {
+    return url;
+  }
+
+  return `/${locale}${url}`;
+};