From 43d3a392b3e8f3b7e9b06173d060b00c6d5a40cf Mon Sep 17 00:00:00 2001
From: Amin <26092352+aminamos@users.noreply.github.com>
Date: Sun, 13 Sep 2026 20:03:59 -0500
Subject: [PATCH] feat: introduce (authenticated) route group layout for auth
 guarding (#116)

---
 docs/route-groups-auth.md                   | 10 ++++++++++
 src/app/[locale]/(authenticated)/layout.tsx | 19 +++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 docs/route-groups-auth.md
 create mode 100644 src/app/[locale]/(authenticated)/layout.tsx

diff --git a/docs/route-groups-auth.md b/docs/route-groups-auth.md
new file mode 100644
index 00000000..59c3e633
--- /dev/null
+++ b/docs/route-groups-auth.md
@@ -0,0 +1,10 @@
+# Authenticated Route Groups Architecture
+
+## Overview
+Previously, pages requiring user authentication (such as `/account`, `/change-password`, `/verify-email`) manually rendered `<ReduxGateWrapper>` and `<ProtectedPageWrapper>` within their page components or local layouts.
+
+## New Route Group Pattern
+Next.js route groups `(authenticated)` allow sharing a root authenticated layout without altering the URL path structure:
+- `src/app/[locale]/(authenticated)/layout.tsx`: Gates all subroutes with `ReduxGateWrapper` and `ProtectedPageWrapper`.
+- Individual pages under `(authenticated)` automatically inherit authorization and Redux rehydration guards without redundant boilerplate.
+- Simplifies testing and guarantees uniform authentication checks across all protected subroutes.
diff --git a/src/app/[locale]/(authenticated)/layout.tsx b/src/app/[locale]/(authenticated)/layout.tsx
new file mode 100644
index 00000000..c790a179
--- /dev/null
+++ b/src/app/[locale]/(authenticated)/layout.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ReduxGateWrapper } from '../../components/ReduxGateWrapper';
+import { ProtectedPageWrapper } from '../../components/ProtectedPageWrapper';
+
+/**
+ * Route group layout providing auth guarding and Redux hydration
+ * for all authenticated pages (e.g. account, change-password).
+ */
+export default function AuthenticatedLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.ReactElement {
+  return (
+    <ReduxGateWrapper>
+      <ProtectedPageWrapper>{children}</ProtectedPageWrapper>
+    </ReduxGateWrapper>
+  );
+}