Restructure application to use /home for authenticated pages

- Move authenticated home page from /[locale] to /[locale]/home
- Move login page from /[locale]/login to /[locale] (new landing page)
- Move all restricted pages (bill, location, year-month, print, account) under /[locale]/home
- Simplify middleware to protect all routes under /home instead of using publicPages array
- Update auth config: change signIn page from /login to /
- Update SignInButton callback URL to redirect to /home after login
- Update all internal links throughout the application to reflect new structure
- Update server action redirects in navigationActions.ts
- Public share routes (/share/*) remain unchanged

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/settings.local.json

@@ -11,7 +11,8 @@
       "mcp__serena__replace_regex",
       "Bash(npm install:*)",
       "mcp__ide__getDiagnostics",
-      "mcp__serena__execute_shell_command"
+      "mcp__serena__execute_shell_command",
+      "mcp__serena__check_onboarding_performed"
     ]
   },
   "enableAllProjectMcpServers": true,

app/[locale]/home/account/page.tsx

@@ -16,7 +16,7 @@ const Page: FC = async () => {
                 <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
                     <div className="card-body">
                         <h2 className="card-title"><AccountCircle /> {t('title')}</h2>
-                        <Link href={`/${locale}/account/settings`} className='btn btn-neutral'><SettingsIcon /> {t('settings-button')}</Link>
+                        <Link href={`/${locale}/home/account/settings`} className='btn btn-neutral'><SettingsIcon /> {t('settings-button')}</Link>
                         <LogoutButton />
                     </div>
                 </div>

app/[locale]/home/page.tsx

@@ -0,0 +1,31 @@
+import { FC, Suspense } from 'react';
+import { Main } from '@/app/ui/Main';
+import HomePage from '@/app/ui/HomePage';
+import { MonthCardSkeleton } from '@/app/ui/MonthCardSkeleton';
+
+export interface PageProps {
+  searchParams?: {
+    year?: string;
+    month?: string;
+  };
+}
+
+const HomePageSkeleton = () => 
+<>
+  <MonthCardSkeleton checked={true} />
+  <MonthCardSkeleton />
+  <MonthCardSkeleton />
+</>
+
+const Page:FC<PageProps> = async ({ searchParams }) => {
+
+ return (
+    <Main>
+      <Suspense fallback={<HomePageSkeleton />}>
+        <HomePage searchParams={searchParams} />
+      </Suspense>
+    </Main>
+  );
+}
+
+export default Page;

app/[locale]/login/page.tsx

@@ -1,109 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { Main } from '@/app/ui/Main';
-
-import { authConfig } from "@/app/lib/auth";
-import { SignInButton } from '@/app/ui/SignInButton';
-import Image from 'next/image';
-import { getTranslations } from "next-intl/server";
-import isWebview from "is-ua-webview";
-import { headers } from 'next/headers'
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-
-type Provider = {
-  id: string;
-  name: string;
-  type: string;
-  style: {
-    logo: string;
-    bg: string;
-    text: string;
-  };
-};
-
-function getProviders(): Provider[] {
-  const providerKeys: (keyof Provider)[] = ["id", "name", "type", "style"];
-  return authConfig.providers.map((provider) =>
-    getKeyValuesFromObject<Provider>(provider, providerKeys)
-  );
-}
-
-function getKeyValuesFromObject<T>(obj: any, keys: (keyof T)[]): T {
-  return keys.reduce((acc, key) => {
-    if (obj[key]) {
-      acc[key] = obj[key];
-    }
-    return acc;
-  }, {} as T);
-}
-
-const Page:FC = async () => {
-
-  const providers = await getProviders();
-  const t = await getTranslations("login-page");
-  // get userAgent from NextJS
-
-  const headersList = headers();
-  const userAgent = headersList.get("user-agent") as string;
-
-  const insideWebeview = isWebview(userAgent);
-
- return (
-    <Main>
-      <h1 className="text-3xl font-bold text-center">
-        <span className="text-neutral-50 mr-3">{t("main-card.title-1")}</span>
-        <span className="text-indigo-400">{t("main-card.title-2")}</span>
-        <span className="text-neutral-50 ml-3">{t("main-card.title-3")}</span>
-      </h1>
-      <p className="p mt-[1em] text-center">{t("main-card.text-1")}</p>
-      <p className="p mb-[1em] text-center">{t("main-card.text-2")}</p>
-      {
-        // Google will refuse OAuth signin if it's inside a webview (i.e. Facebook)
-        insideWebeview &&
-        <div className="card card-side bg-base-100 shadow-xl max-w-[30em] mx-auto mb-4">
-          <figure className='pl-4 pr-1 pt-[2rem] min-w-[100px] max-w-[100px] self-start'>
-            <ExclamationTriangleIcon className="text-red-600 self-start" />
-          </figure>
-          <div className="card-body pl-2">
-            {
-              t.rich("main-card.in-app-browser-warning", {
-                  br: () => <br />,
-                  strong: (chunks:ReactNode) => <strong className='text-indigo-300' >{chunks}</strong>,
-                  hint: (chunks:ReactNode) => <span className='text-indigo-300 block'> {chunks}</span> 
-              })
-            }
-          </div>
-        </div>
-      }
-      <span className="flex justify-center">
-        {
-          Object.values(providers).map((provider) => (
-            <div key={provider.name}>
-              <SignInButton provider={provider} />
-            </div>
-          ))
-        }
-      </span>
-      <video className="m-auto mt-4" title={t("main-card.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("main-card.image-url")}>
-        <source src={t("main-card.video-url")} type="video/webm" />
-      </video>
-
-      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-1.title")}</h1>
-      <p className="p mt-[1em]">{t("card-1.text")}</p>
-      <video className="m-auto mt-4" title={t("card-1.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-1.image-url")}>
-        <source src={t("card-1.video-url")} type="video/webm" />
-      </video>
-
-      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-2.title")}</h1>
-      <p className="p mt-[1em]">{t("card-2.text")}</p>
-      <Image src="/status-color-demo.png" alt="Boje označavaju status računa" className="m-auto mt-4" width={423} height={145} />
-
-      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-3.title")}</h1>
-      <p className="p mt-[1em]">{t("card-3.text")}</p>
-      <video className="m-auto mt-4" title={t("card-3.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-3.image-url")}>
-        <source src={t("card-3.video-url")} type="video/webm" />
-      </video>
-    </Main>
-  );
-}
-
-export default Page;

app/[locale]/page.tsx

@@ -1,29 +1,107 @@
-import { FC, Suspense } from 'react';
+import { FC, ReactNode } from 'react';
 import { Main } from '@/app/ui/Main';
-import HomePage from '@/app/ui/HomePage';
-import { MonthCardSkeleton } from '@/app/ui/MonthCardSkeleton';
 
-export interface PageProps {
-  searchParams?: {
-    year?: string;
-    month?: string;
+import { authConfig } from "@/app/lib/auth";
+import { SignInButton } from '@/app/ui/SignInButton';
+import Image from 'next/image';
+import { getTranslations } from "next-intl/server";
+import isWebview from "is-ua-webview";
+import { headers } from 'next/headers'
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+
+type Provider = {
+  id: string;
+  name: string;
+  type: string;
+  style: {
+    logo: string;
+    bg: string;
+    text: string;
   };
+};
+
+function getProviders(): Provider[] {
+  const providerKeys: (keyof Provider)[] = ["id", "name", "type", "style"];
+  return authConfig.providers.map((provider) =>
+    getKeyValuesFromObject<Provider>(provider, providerKeys)
+  );
 }
 
-const HomePageSkeleton = () => 
-<>
-  <MonthCardSkeleton checked={true} />
-  <MonthCardSkeleton />
-  <MonthCardSkeleton />
-</>
+function getKeyValuesFromObject<T>(obj: any, keys: (keyof T)[]): T {
+  return keys.reduce((acc, key) => {
+    if (obj[key]) {
+      acc[key] = obj[key];
+    }
+    return acc;
+  }, {} as T);
+}
 
-const Page:FC<PageProps> = async ({ searchParams }) => {
+const Page:FC = async () => {
+
+  const providers = await getProviders();
+  const t = await getTranslations("login-page");
+  // get userAgent from NextJS
+
+  const headersList = headers();
+  const userAgent = headersList.get("user-agent") as string;
+
+  const insideWebeview = isWebview(userAgent);
 
  return (
     <Main>
-      <Suspense fallback={<HomePageSkeleton />}>
-        <HomePage searchParams={searchParams} />
-      </Suspense>
+      <h1 className="text-3xl font-bold text-center">
+        <span className="text-neutral-50 mr-3">{t("main-card.title-1")}</span>
+        <span className="text-indigo-400">{t("main-card.title-2")}</span>
+        <span className="text-neutral-50 ml-3">{t("main-card.title-3")}</span>
+      </h1>
+      <p className="p mt-[1em] text-center">{t("main-card.text-1")}</p>
+      <p className="p mb-[1em] text-center">{t("main-card.text-2")}</p>
+      {
+        // Google will refuse OAuth signin if it's inside a webview (i.e. Facebook)
+        insideWebeview &&
+        <div className="card card-side bg-base-100 shadow-xl max-w-[30em] mx-auto mb-4">
+          <figure className='pl-4 pr-1 pt-[2rem] min-w-[100px] max-w-[100px] self-start'>
+            <ExclamationTriangleIcon className="text-red-600 self-start" />
+          </figure>
+          <div className="card-body pl-2">
+            {
+              t.rich("main-card.in-app-browser-warning", {
+                  br: () => <br />,
+                  strong: (chunks:ReactNode) => <strong className='text-indigo-300' >{chunks}</strong>,
+                  hint: (chunks:ReactNode) => <span className='text-indigo-300 block'> {chunks}</span> 
+              })
+            }
+          </div>
+        </div>
+      }
+      <span className="flex justify-center">
+        {
+          Object.values(providers).map((provider) => (
+            <div key={provider.name}>
+              <SignInButton provider={provider} />
+            </div>
+          ))
+        }
+      </span>
+      <video className="m-auto mt-4" title={t("main-card.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("main-card.image-url")}>
+        <source src={t("main-card.video-url")} type="video/webm" />
+      </video>
+
+      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-1.title")}</h1>
+      <p className="p mt-[1em]">{t("card-1.text")}</p>
+      <video className="m-auto mt-4" title={t("card-1.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-1.image-url")}>
+        <source src={t("card-1.video-url")} type="video/webm" />
+      </video>
+
+      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-2.title")}</h1>
+      <p className="p mt-[1em]">{t("card-2.text")}</p>
+      <Image src="/status-color-demo.png" alt="Boje označavaju status računa" className="m-auto mt-4" width={423} height={145} />
+
+      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-3.title")}</h1>
+      <p className="p mt-[1em]">{t("card-3.text")}</p>
+      <video className="m-auto mt-4" title={t("card-3.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-3.image-url")}>
+        <source src={t("card-3.video-url")} type="video/webm" />
+      </video>
     </Main>
   );
 }

app/lib/actions/navigationActions.ts

@@ -5,14 +5,14 @@ import { redirect } from 'next/navigation';
 import { YearMonth } from "../db-types";
 
 export async function gotoHome({year, month}: YearMonth) {
-    const path = `/?year=${year}&month=${month}`;
+    const path = `/home?year=${year}&month=${month}`;
     await gotoUrl(path);
 }
 
 export async function gotoHomeWithMessage(locale: string, message: string, yearMonth?: YearMonth) {
     const path = yearMonth
-        ? `/${locale}?year=${yearMonth.year}&month=${yearMonth.month}&${message}=true`
-        : `/${locale}?${message}=true`;
+        ? `/${locale}/home?year=${yearMonth.year}&month=${yearMonth.month}&${message}=true`
+        : `/${locale}/home?${message}=true`;
     await gotoUrl(path);
 }
 

app/lib/auth.ts

@@ -88,7 +88,7 @@ export const authConfig: NextAuthConfig = {
       strategy: 'jwt'
    },
    pages: {
-      signIn: `/${defaultLocale}/login`,
+      signIn: `/${defaultLocale}`,
    },
 };
 

app/ui/AddLocationButton.tsx

@@ -17,7 +17,7 @@ export const AddLocationButton:React.FC<AddLocationButtonProps> = ({yearMonth})
 
     return(
         <div className="card card-compact card-bordered bg-base-100 shadow-s my-1">
-            <Link href={`/location/${ formatYearMonth(yearMonth) }/add`} className="card-body tooltip self-center" data-tip={t("tooltip")}>
+            <Link href={`/home/location/${ formatYearMonth(yearMonth) }/add`} className="card-body tooltip self-center" data-tip={t("tooltip")}>
                 <span className='flex self-center'>
                     <HomeIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
                     <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-xl text-green-500 ml-[-.6em] mt-[-.4em]"  />

app/ui/AddMonthButton.tsx

@@ -18,7 +18,7 @@ export const AddMonthButton:React.FC<AddMonthButtonProps> = ({ yearMonth }) => {
 
     return(
         <div className="card card-compact shadow-s mb-4">
-            <Link href={`/${locale}/year-month/${formatYearMonth(yearMonth)}/add`} className='grid self-center tooltip' data-tip={t("tooltip")}>
+            <Link href={`/${locale}/home/year-month/${formatYearMonth(yearMonth)}/add`} className='grid self-center tooltip' data-tip={t("tooltip")}>
                 <span className='flex self-center'>
                     <CalendarDaysIcon className="h-[1em] w-[1em] cursor-pointer text-4xl"  />
                     <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-xl text-green-500 ml-[-.4em] mt-[-.4em]"  />

app/ui/BillBadge.tsx

@@ -8,6 +8,6 @@ export interface BillBadgeProps {
 };
 
 export const BillBadge:FC<BillBadgeProps> = ({ locationId, bill: { _id: billId, name, paid, hasAttachment }}) =>
-<Link href={`/bill/${locationId}-${billId}/edit`} className={`badge badge-lg ${paid?"badge-success":" badge-outline"} ${ !paid && hasAttachment ? "btn-outline btn-success" : "" }  cursor-pointer`}>
+<Link href={`/home/bill/${locationId}-${billId}/edit`} className={`badge badge-lg ${paid?"badge-success":" badge-outline"} ${ !paid && hasAttachment ? "btn-outline btn-success" : "" }  cursor-pointer`}>
     {name}
 </Link>;

app/ui/BillDeleteForm.tsx

@@ -62,7 +62,7 @@ export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) => {
                     
                     <div className="pt-4 text-center">
                         <button className="btn btn-primary w-[5.5em]">{t("confirm-button")}</button>
-                        <Link className="btn btn-neutral w-[5.5em] ml-3" href={`/bill/${location._id}-${bill._id}/edit/`}>{t("cancel-button")}</Link>
+                        <Link className="btn btn-neutral w-[5.5em] ml-3" href={`/home/bill/${location._id}-${bill._id}/edit/`}>{t("cancel-button")}</Link>
                     </div>
                 </form>
             </div>

app/ui/BillEditForm.tsx

@@ -122,7 +122,7 @@ export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
                     {
                         // don't show the delete button if we are adding a new bill
                         bill ?
-                            <Link href={`/${locale}/bill/${locationID}-${billID}/delete/`} data-tip={t("delete-tooltip")}>
+                            <Link href={`/${locale}/home/bill/${locationID}-${billID}/delete/`} data-tip={t("delete-tooltip")}>
                                 <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
                             </Link> : null
                     }

app/ui/LocationCard.tsx

@@ -44,7 +44,7 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
     return (
         <div data-key={_id} className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral my-1">
             <div className="card-body">
-                <Link href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip={t("edit-card-tooltip")}>
+                <Link href={`/home/location/${_id}/edit`} className="card-subtitle tooltip" data-tip={t("edit-card-tooltip")}>
                     <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-[-.2rem] right-0 text-2xl" />
                 </Link>
                 <h2 className="card-title mr-[2em] mt-[-1em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
@@ -58,7 +58,7 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
                     ) : null
                 }
                 <div className="flex justify-between items-center mb-0">
-                    <Link href={`/bill/${_id}/add`} className="tooltip" data-tip={t("add-bill-button-tooltip")}>
+                    <Link href={`/home/bill/${_id}/add`} className="tooltip" data-tip={t("add-bill-button-tooltip")}>
                         <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline" /><span className="text-xs ml-[0.2rem]">{t("add-bill-button-tooltip")}</span>
                     </Link>
                     <ShareIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline hover:text-red-500" title="create sharable link" onClick={handleCopyLinkClick} />

app/ui/LocationDeleteForm.tsx

@@ -58,7 +58,7 @@ export const LocationDeleteForm:FC<LocationDeleteFormProps> = ({ location }) =>
                     )}
                     <div className="pt-4 text-center">
                         <button className="btn btn-primary w-[5.5em]">{t("confirm-button")}</button>
-                        <Link className="btn btn-neutral w-[5.5em] ml-3" href={`/location/${location._id}/edit/`}>{t("cancel-button")}</Link>
+                        <Link className="btn btn-neutral w-[5.5em] ml-3" href={`/home/location/${location._id}/edit/`}>{t("cancel-button")}</Link>
                     </div>
                 </form>
             </div>

app/ui/LocationEditForm.tsx

@@ -61,7 +61,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                 <form action={dispatch}>
                     {
                         location &&
-                        <Link href={`/${locale}/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip={t("delete-tooltip")}>
+                        <Link href={`/${locale}/home/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip={t("delete-tooltip")}>
                             <TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
                         </Link>
                     }

app/ui/MonthLocationList.tsx

@@ -106,10 +106,10 @@ export const MonthLocationList:React.FC<MonthLocationListProps  > = ({
     const handleMonthToggle = (yearMonth:YearMonth) => {
         // if the month is already expanded, collapse it
         if(expandedMonth === yearMonth.month) {
-            // router.push(`/?year=${yearMonth.year}`);
+            // router.push(`/home?year=${yearMonth.year}`);
             setExpandedMonth(-1); // no month is expanded
         } else  {
-            // router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`);
+            // router.push(`/home?year=${yearMonth.year}&month=${yearMonth.month}`);
             setExpandedMonth(yearMonth.month);
         }
     }

app/ui/NotFoundPage.tsx

@@ -12,7 +12,7 @@ export const NotFoundPage:FC<NotFoundPageProps> = ({ title="404 Not Found", desc
         <FaceFrownIcon className="w-10 text-gray-400" />
         <h2 className="text-xl font-semibold">{title}</h2>
         <p>{description}</p>
-        <Link href="/" className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400">
+        <Link href="/home" className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400">
             Go Back
         </Link>
     </main>

app/ui/PageFooter.tsx

@@ -16,7 +16,7 @@ export const PageFooter: React.FC = () => {
                         <div className="font-title inline-flex text-3xl font-black ml-2">Režije</div>
                     </div>
                     <p className="text-base-content/70 mb-5">{t('app-description')}</p>
-                    <Link href="/" className="link link-hover">{t('links.home')}</Link>
+                    <Link href="/home" className="link link-hover">{t('links.home')}</Link>
                     <Link href="/policy/" className="link link-hover">{t('links.privacy-policy')}</Link>
                     <Link href="/terms/" className="link link-hover">{t('links.terms-of-service')}</Link>
                 </div>

app/ui/PageHeader.tsx

@@ -5,10 +5,10 @@ import AccountCircle from "@mui/icons-material/AccountCircle";
 
 export const PageHeader = () =>
     <div className="navbar bg-base-100 mb-6">
-        <Link className="btn btn-ghost text-xl" href="/"><Image src="/icon3.png" alt="logo" width={48} height={48} /> Režije</Link>
+        <Link className="btn btn-ghost text-xl" href="/home"><Image src="/icon3.png" alt="logo" width={48} height={48} /> Režije</Link>
         <span className="grow">&nbsp;</span>
         <SelectLanguage />
-        <Link href="/account/" className="btn btn-ghost btn-circle">
+        <Link href="/home/account/" className="btn btn-ghost btn-circle">
             <AccountCircle  />
         </Link>
     </div>

app/ui/PrintButton.tsx

@@ -12,7 +12,7 @@ export const PrintButton: React.FC<PrintButtonProps> = ({ yearMonth }) => {
   const t = useTranslations("home-page.month-card");
 
   const handlePrintClick = () => {
-    window.open(`/print/${yearMonth.year}/${yearMonth.month}`, '_blank');
+    window.open(`/home/print/${yearMonth.year}/${yearMonth.month}`, '_blank');
   };
 
   return (

app/ui/SignInButton.tsx

@@ -21,7 +21,7 @@ export const SignInButton:React.FC<{ provider: {id:string, name:string} }> = ({
   const t = useTranslations("login-page");
 
     return(
-        <button className="btn btn-neutral m-1" onClick={() => signIn(provider.id, { callbackUrl:"https://rezije.app/" }) }>
+        <button className="btn btn-neutral m-1" onClick={() => signIn(provider.id, { callbackUrl:"/home" }) }>
             <Image alt="Provider Logo" loading="lazy" height="24" width="24" id="provider-logo-dark" src={providerLogo(provider)} />
             <span>
                 {t("sign-in-button")} {provider.name}</span>

middleware.ts

@@ -9,9 +9,6 @@ import { NextRequest, NextResponse } from 'next/server';
 import { locales, defaultLocale } from '@/app/i18n';
 import { Session } from 'next-auth';
 
-// http://localhost:3000/share/location/675c41b227d0df76a35f106e
-const publicPages = ['/terms', '/policy', '/login', '/share/location/.*', '/share/bill/.*', '/share/attachment/.*', '/share/proof-of-payment/.*'];
- 
 const intlMiddleware = createIntlMiddleware({
   locales,
   localePrefix: 'as-needed',
@@ -19,19 +16,19 @@ const intlMiddleware = createIntlMiddleware({
 });
 
 export default async function middleware(req: NextRequest) {
-  const publicPathnameRegex = RegExp(
-    `^(/(${locales.join('|')}))?(${publicPages
-      .flatMap((p) => (p === '/' ? ['', '/'] : p))
-      .join('|')})/?$`,
+  // All routes under /home require authentication
+  // Check if the path (after optional locale prefix) starts with /home
+  const homeRouteRegex = RegExp(
+    `^(/(${locales.join('|')}))?/home(/.*)?$`,
     'i'
   );
-  const isPublicPage = publicPathnameRegex.test(req.nextUrl.pathname);
+  const isProtectedPage = homeRouteRegex.test(req.nextUrl.pathname);
 
-  // for public pages we call only localisation middleware
-  // this is not an official way to do it - it's a hack
+  // For protected pages (under /home), verify authentication
+  // This is not an official way to do it - it's a hack
   // based on https://github.com/nextauthjs/next-auth/discussions/8961
   // The official way of chaining middlewares in AuthJS v5 does not work and is not fully documented
-  if (!isPublicPage) {
+  if (isProtectedPage) {
 
     const session = await myAuth();