create-nextblock 0.0.1

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "create-nextblock",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "bin": {
+    "create-nextblock": "./bin/create-nextblock.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "sync-template": "node ./scripts/sync-template.js",
+    "prepack": "npm run sync-template"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "commander": "^14.0.1",
+    "fs-extra": "^11.3.2",
+    "inquirer": "^12.10.0",
+    "ora": "^8.0.1"
+  }
+}

package/scripts/sync-template.js

@@ -0,0 +1,284 @@
+#!/usr/bin/env node
+
+import { resolve, relative, sep, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import fs from 'fs-extra';
+import chalk from 'chalk';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const PROJECT_ROOT = resolve(__dirname, '..');
+const SOURCE_DIR = resolve(PROJECT_ROOT, '../nextblock');
+const TARGET_DIR = resolve(PROJECT_ROOT, 'templates/nextblock-template');
+const REPO_ROOT = resolve(PROJECT_ROOT, '..', '..');
+const UI_GLOBALS_SOURCE = resolve(PROJECT_ROOT, '../../libs/ui/src/styles/globals.css');
+const BACKUP_SOURCE_DIR = resolve(SOURCE_DIR, 'backup');
+const BACKUP_TARGET_DIR = resolve(TARGET_DIR, 'backup');
+const UI_PROXY_MODULES = [
+  'avatar',
+  'badge',
+  'button',
+  'card',
+  'checkbox',
+  'ColorPicker',
+  'ConfirmationDialog',
+  'CustomSelectWithInput',
+  'dialog',
+  'dropdown-menu',
+  'input',
+  'label',
+  'popover',
+  'progress',
+  'select',
+  'separator',
+  'Skeleton',
+  'table',
+  'textarea',
+  'tooltip',
+  'ui',
+];
+
+const IGNORED_SEGMENTS = new Set([
+  'node_modules',
+  '.git',
+  '.next',
+  'dist',
+  'tmp',
+  'coverage',
+]);
+
+async function ensureTemplateSync() {
+  const sourceExists = await fs.pathExists(SOURCE_DIR);
+  if (!sourceExists) {
+    throw new Error(
+      `Source project not found at ${SOURCE_DIR}. Please ensure apps/nextblock exists before syncing.`,
+    );
+  }
+
+  console.log(
+    chalk.blue(
+      `Syncing template from ${chalk.bold(relative(PROJECT_ROOT, SOURCE_DIR))} to ${chalk.bold(
+        relative(PROJECT_ROOT, TARGET_DIR),
+      )}`,
+    ),
+  );
+
+  await fs.ensureDir(TARGET_DIR);
+  await fs.emptyDir(TARGET_DIR);
+
+  await fs.copy(SOURCE_DIR, TARGET_DIR, {
+    dereference: true,
+    filter: (src) => {
+      const rel = relative(SOURCE_DIR, src);
+      if (!rel) {
+        return true;
+      }
+
+      const segments = rel.split(sep);
+      return segments.every((segment) => !IGNORED_SEGMENTS.has(segment));
+    },
+  });
+
+  await ensureEnvExample();
+  await ensureGlobalStyles();
+  await ensureClientTranslations();
+  await sanitizeBlockEditorImports();
+  await sanitizeUiImports();
+  await ensureUiProxies();
+  await ensureBackups();
+  await ensureTemplateProjectJson();
+
+  console.log(chalk.green('Template sync complete.'));
+}
+
+async function ensureEnvExample() {
+  const envTargets = [
+    resolve(REPO_ROOT, '.env.example'),
+    resolve(REPO_ROOT, '.env.exemple'),
+    resolve(SOURCE_DIR, '.env.example'),
+    resolve(SOURCE_DIR, '.env.exemple'),
+  ];
+
+  const destination = resolve(TARGET_DIR, '.env.example');
+
+  for (const envPath of envTargets) {
+    if (await fs.pathExists(envPath)) {
+      await fs.copy(envPath, destination);
+      return;
+    }
+  }
+
+  const placeholder = `# Environment variables for NextBlock CMS
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
+SUPABASE_SERVICE_ROLE_KEY=
+SUPABASE_JWT_SECRET=
+NEXT_PUBLIC_URL=http://localhost:3000
+`;
+
+  await fs.writeFile(destination, placeholder);
+}
+
+async function ensureGlobalStyles() {
+  const destination = resolve(TARGET_DIR, 'app/globals.css');
+
+  if (await fs.pathExists(destination)) {
+    await fs.remove(destination);
+  }
+
+  if (await fs.pathExists(UI_GLOBALS_SOURCE)) {
+    await fs.copy(UI_GLOBALS_SOURCE, destination);
+    return;
+  }
+
+  const fallback = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`;
+
+  await fs.outputFile(destination, fallback);
+}
+
+async function ensureClientTranslations() {
+  const providersPath = resolve(TARGET_DIR, 'app/providers.tsx');
+  if (!(await fs.pathExists(providersPath))) {
+    return;
+  }
+
+  let content = await fs.readFile(providersPath, 'utf8');
+  const wrapperImportPath = '@nextblock-cms/utils';
+  const wrapperImportStatement = `import { TranslationsProvider } from '${wrapperImportPath}';`;
+  const existingImportRegex =
+    /import\s+\{\s*TranslationsProvider\s*\}\s*from\s*['"]@nextblock-cms\/utils['"];?/;
+  const legacyImportRegex =
+    /import\s+\{\s*TranslationsProvider\s*\}\s*from\s*['"]@\/lib\/client-translations['"];?/;
+
+  if (existingImportRegex.test(content) || legacyImportRegex.test(content)) {
+    content = content
+      .replace(existingImportRegex, wrapperImportStatement)
+      .replace(legacyImportRegex, wrapperImportStatement);
+  } else if (!content.includes(wrapperImportStatement)) {
+    const lines = content.split(/\r?\n/);
+    const insertIndex = lines.findIndex((line) => line.startsWith('import')) + 1;
+    if (insertIndex > 0) {
+      lines.splice(insertIndex, 0, wrapperImportStatement);
+      content = lines.join('\n');
+    } else {
+      content = `${wrapperImportStatement}\n${content}`;
+    }
+  }
+
+  await fs.writeFile(providersPath, content);
+
+  const wrapperPath = resolve(TARGET_DIR, 'lib/client-translations.tsx');
+  if (await fs.pathExists(wrapperPath)) {
+    await fs.remove(wrapperPath);
+  }
+}
+
+async function sanitizeBlockEditorImports() {
+  const blockEditorPath = resolve(TARGET_DIR, 'app/cms/blocks/components/BlockEditorArea.tsx');
+  if (!(await fs.pathExists(blockEditorPath))) {
+    return;
+  }
+
+  const replacements = [
+    { pattern: /(\.\.\/editors\/[A-Za-z0-9_-]+)\.js/g, replacement: '$1.tsx' },
+    { pattern: /(\.\.\/actions)\.js/g, replacement: '$1.ts' },
+  ];
+
+  const content = await fs.readFile(blockEditorPath, 'utf8');
+  let updated = content;
+
+  for (const { pattern, replacement } of replacements) {
+    updated = updated.replace(pattern, replacement);
+  }
+
+  if (updated !== content) {
+    await fs.writeFile(blockEditorPath, updated);
+  }
+}
+
+async function sanitizeUiImports() {
+  const searchDirs = ['app', 'components', 'context', 'lib'];
+  const validExtensions = new Set(['.ts', '.tsx', '.js', '.jsx']);
+  const filesToProcess = [];
+
+  for (const relativeDir of searchDirs) {
+    const absoluteDir = resolve(TARGET_DIR, relativeDir);
+    if (await fs.pathExists(absoluteDir)) {
+      await collectFiles(absoluteDir, filesToProcess, validExtensions);
+    }
+  }
+
+  for (const filePath of filesToProcess) {
+    const original = await fs.readFile(filePath, 'utf8');
+    const replaced = original.replace(/@nextblock-cms\/ui\/(?!styles\/)[A-Za-z0-9/_-]+/g, '@nextblock-cms/ui');
+
+    if (replaced !== original) {
+      await fs.writeFile(filePath, replaced);
+    }
+  }
+}
+
+async function collectFiles(directory, accumulator, extensions) {
+  const entries = await fs.readdir(directory, { withFileTypes: true });
+  for (const entry of entries) {
+    const fullPath = resolve(directory, entry.name);
+    if (entry.isDirectory()) {
+      await collectFiles(fullPath, accumulator, extensions);
+    } else {
+      const dotIndex = entry.name.lastIndexOf('.');
+      if (dotIndex !== -1) {
+        const ext = entry.name.slice(dotIndex);
+        if (extensions.has(ext)) {
+          accumulator.push(fullPath);
+        }
+      }
+    }
+  }
+}
+
+async function ensureUiProxies() {
+  const proxiesDir = resolve(TARGET_DIR, 'lib/ui');
+  await fs.ensureDir(proxiesDir);
+
+  const proxyContent = "export * from '@nextblock-cms/ui';\n";
+
+  for (const moduleName of UI_PROXY_MODULES) {
+    const proxyPath = resolve(proxiesDir, `${moduleName}.ts`);
+    if (!(await fs.pathExists(proxyPath))) {
+      await fs.outputFile(proxyPath, proxyContent);
+    }
+  }
+}
+
+async function ensureBackups() {
+  if (!(await fs.pathExists(BACKUP_SOURCE_DIR))) {
+    await fs.remove(BACKUP_TARGET_DIR).catch(() => undefined);
+    return;
+  }
+
+  await fs.ensureDir(BACKUP_TARGET_DIR);
+  await fs.copy(BACKUP_SOURCE_DIR, BACKUP_TARGET_DIR, {
+    dereference: true,
+  });
+}
+
+async function ensureTemplateProjectJson() {
+  const projectJsonPath = resolve(TARGET_DIR, 'project.json');
+  const minimalConfig = {
+    name: 'nextblock-template',
+    projectType: 'application',
+    root: 'apps/create-nextblock/templates/nextblock-template',
+    sourceRoot: 'apps/create-nextblock/templates/nextblock-template',
+    targets: {},
+  };
+
+  await fs.writeJSON(projectJsonPath, minimalConfig, { spaces: 2 });
+}
+
+ensureTemplateSync().catch((error) => {
+  console.error(chalk.red(error instanceof Error ? error.message : String(error)));
+  process.exit(1);
+});

package/templates/nextblock-template/.env.example

@@ -0,0 +1,37 @@
+NEXT_PUBLIC_URL=
+# Vercel / Supabase
+SUPABASE_PROJECT_ID=
+POSTGRES_URL=
+POSTGRES_PRISMA_URL=
+SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_URL=
+POSTGRES_URL_NON_POOLING=
+SUPABASE_JWT_SECRET=
+POSTGRES_USER=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
+POSTGRES_PASSWORD=
+POSTGRES_DATABASE=
+SUPABASE_SERVICE_ROLE_KEY=
+POSTGRES_HOST=
+SUPABASE_ANON_KEY=
+
+# Cloudflare
+NEXT_PUBLIC_R2_BASE_URL=
+R2_ACCESS_KEY_ID=
+R2_SECRET_ACCESS_KEY=
+R2_BUCKET_NAME=
+R2_ACCOUNT_ID=
+NEXT_PUBLIC_R2_PUBLIC_URL=
+R2_TOKEN_VALUE=
+
+NEXTJS_REVALIDATE_URL=
+REVALIDATE_SECRET_TOKEN=
+LHCI_GITHUB_APP_TOKEN=
+
+# Email SMTP Configuration
+SMTP_HOST=
+SMTP_PORT=
+SMTP_USER=
+SMTP_PASS=
+SMTP_FROM_EMAIL=
+SMTP_FROM_NAME=

package/templates/nextblock-template/.swcrc

@@ -0,0 +1,30 @@
+{
+  "jsc": {
+    "target": "es2017",
+    "parser": {
+      "syntax": "typescript",
+      "decorators": true,
+      "dynamicImport": true
+    },
+    "transform": {
+      "decoratorMetadata": true,
+      "legacyDecorator": true
+    },
+    "keepClassNames": true,
+    "externalHelpers": true,
+    "loose": true
+  },
+  "module": {
+    "type": "commonjs"
+  },
+  "sourceMaps": true,
+  "exclude": [
+    "jest.config.ts",
+    ".*\\.spec.tsx?$",
+    ".*\\.test.tsx?$",
+    "./src/jest-setup.ts$",
+    "./**/jest-setup.ts$",
+    ".*.js$",
+    ".*.d.ts$"
+  ]
+}

package/templates/nextblock-template/README.md

@@ -0,0 +1,194 @@
+# Next.js 15 & Supabase - Ultra-Fast CMS Template
+
+This project is a starter template for building an ultra-fast, localized, block-based Content Management System (CMS) using Next.js 15 (App Router), Supabase for the backend (PostgreSQL, Auth, Storage via R2), Tailwind CSS for styling, and shadcn/ui for components.
+
+It features:
+- Role-Based Access Control (Admin, Writer, User)
+- Internationalization (i18n) with client-side language switching on single URLs
+- Block-based content editor for Pages and Posts
+- Media uploads to Cloudflare R2 with a Media Library
+- Static Site Generation (SSG) with Incremental Static Regeneration (ISR) for public-facing content
+- On-demand revalidation via Supabase Database Webhooks
+
+## Features Implemented (Phases 1-6)
+
+* **Authentication & Authorization (Phase 1):** User roles (ADMIN, WRITER, USER), profiles table linked to `auth.users`, Row Level Security (RLS) on tables, Next.js middleware for route protection, and client-side auth context.
+* **Internationalization (Phase 2):** `languages` table in Supabase, client-side language switching using `LanguageContext` without URL path changes (e.g., `/about-us` serves content based on selected language), and auto-creation of localized placeholder content.
+* **CMS Schema & Core CRUD (Phase 3):** Database tables for `pages`, `posts`, `media`, `blocks`, `navigation_items`. CRUD UIs and server actions for managing Pages, Posts, Navigation Items, Users (role changes), and Languages.
+* **Block-Based Content Builder (Phase 4):** Dynamic block system for Pages (and Posts), UI for adding, editing (basic forms), deleting, and drag-and-drop reordering of content blocks.
+* **Rich Text & Media (Phase 5):** Tiptap rich text editor integrated into "Text" blocks, image insertion from Media Library into Tiptap, and media uploads to Cloudflare R2 with a Media Library UI (upload, view, delete, edit metadata).
+* **SSG & Revalidation (Phase 6):** Static generation of public pages/posts (default language), client-side content fetching for language changes, `generateStaticParams`, `generateMetadata`, and on-demand revalidation via Supabase Database Webhooks calling a Next.js API route.
+
+## Clone and Run Locally
+
+1.  **Create a Supabase Project:**
+    * Go to the [Supabase dashboard](https://database.new) and create a new project.
+
+2.  **Clone This Repository:**
+    ```bash
+    git clone <your-repository-url> your-cms-app
+    cd your-cms-app
+    ```
+
+3.  **Install Dependencies:**
+    ```bash
+    npm install
+    # or
+    yarn install
+    # or
+    pnpm install
+    ```
+
+4.  **Set Up Environment Variables:**
+    * Rename `.env.example` to `.env.local`.
+    * Update the following variables in `.env.local` with your Supabase project details and other configurations:
+
+        ```env
+        # Supabase Project Connection (from your Supabase project's API settings)
+        NEXT_PUBLIC_SUPABASE_URL=[https://your-project-ref.supabase.co](https://your-project-ref.supabase.co)
+        NEXT_PUBLIC_SUPABASE_ANON_KEY=your-public-anon-key
+        SUPABASE_SERVICE_ROLE_KEY=your-service-role-key # Found in API settings, needed for admin actions like deleting users
+        SUPABASE_PROJECT_ID=your-supabase-project-id # Used by the Supabase CLI (e.g., in supabase/config.toml)
+
+        # Cloudflare R2 Storage (from your Cloudflare R2 bucket settings & API token)
+        NEXT_PUBLIC_R2_BASE_URL=[https://your-r2-public-url.r2.dev/your-bucket-name](https://your-r2-public-url.r2.dev/your-bucket-name) # Or your custom domain for R2
+        R2_ACCOUNT_ID=your_cloudflare_account_id
+        R2_ACCESS_KEY_ID=your_r2_access_key_id
+        R2_SECRET_ACCESS_KEY=your_r2_secret_access_key
+        R2_BUCKET_NAME=your_r2_bucket_name
+        R2_S3_ENDPOINT=https://<R2_ACCOUNT_ID>.r2.cloudflarestorage.com # e.g., [https://abcdef12345.r2.cloudflarestorage.com](https://abcdef12345.r2.cloudflarestorage.com)
+        R2_REGION=auto # Typically 'auto' for R2
+
+        # Next.js Site Configuration
+        NEXT_PUBLIC_SITE_URL=http://localhost:3000 # For local dev; update for production (e.g., [https://www.yourdomain.com](https://www.yourdomain.com))
+        REVALIDATE_SECRET_TOKEN=generate_a_strong_random_string_here # Used to secure the on-demand revalidation API endpoint
+        ```
+    * `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` can be found in your Supabase project's API settings.
+    * `SUPABASE_SERVICE_ROLE_KEY` is also in API settings (typically hidden by default, click "Reveal").
+    * Generate a strong, unique string for `REVALIDATE_SECRET_TOKEN`.
+
+5.  **Apply Supabase Migrations:**
+    * Ensure you have the Supabase CLI installed and are logged in (`supabase login`).
+    * Link your local project to your Supabase project:
+        ```bash
+        supabase link --project-ref your-project-ref
+        ```
+    * Apply all database migrations:
+        ```bash
+        supabase db push
+        ```
+        Alternatively, if you prefer to run migrations individually (e.g., for a fresh setup or to ensure order):
+        ```bash
+        supabase migration up
+        ```
+    * This will create all necessary tables (`profiles`, `languages`, `pages`, `posts`, `media`, `blocks`, `navigation_items`), roles, RLS policies, and helper functions.
+
+6.  **Configure Supabase Database Webhooks for On-Demand Revalidation:**
+    Since this project avoids using Supabase Edge Functions (and their Docker dependency) for revalidation, you need to manually set up Database Webhooks to call your Next.js API endpoint directly.
+
+    * Go to your Supabase Project Dashboard -> Database -> Webhooks.
+    * Click "Create a new webhook".
+
+    * **For the `pages` Table:**
+        * **Name:** `Next.js Revalidate Pages` (or similar)
+        * **Table:** Select `pages` (from the `public` schema).
+        * **Events:** Check `INSERT`, `UPDATE`, `DELETE`.
+        * **Webhook Type:** `HTTP Request`
+        * **HTTP URL:** Your Next.js application's revalidation API endpoint.
+            * For local development (if using a tunneling service like ngrok to expose localhost): `http://your-ngrok-url.ngrok.io/api/revalidate`
+            * For production (e.g., Vercel): `https://your-app-name.vercel.app/api/revalidate`
+        * **HTTP Method:** `POST`
+        * **HTTP Headers:**
+            * Click "Add header".
+                * Header name: `x-revalidate-secret`
+                * Header value: The same `REVALIDATE_SECRET_TOKEN` you set in your `.env.local`.
+            * Click "Add header" again.
+                * Header name: `Content-Type`
+                * Header value: `application/json`
+        * Click "Create webhook".
+
+    * **For the `posts` Table:**
+        * Create another webhook with similar settings:
+            * **Name:** `Next.js Revalidate Posts`
+            * **Table:** `posts`
+            * **Events:** `INSERT`, `UPDATE`, `DELETE`.
+            * **HTTP URL:** Same as above.
+            * **HTTP Method:** `POST`
+            * **HTTP Headers:**
+                * `x-revalidate-secret`: Your `REVALIDATE_SECRET_TOKEN`
+                * `Content-Type`: `application/json`
+            * Click "Create webhook".
+
+7.  **Run the Next.js Development Server:**
+    ```bash
+    npm run dev
+    # or
+    yarn dev
+    # or
+    pnpm dev
+    ```
+    The application should now be running on [http://localhost:3000](http://localhost:3000/).
+
+8.  **Initial Admin User Setup:**
+    * Sign up for a new user account through the application's sign-up page.
+    * After signing up and verifying the email, you'll need to manually update this user's role to `ADMIN` in the Supabase `profiles` table. You can do this via the Supabase Studio (Table Editor -> `profiles` table).
+        * Find your user's row (by their ID, which matches `auth.users.id`).
+        * Change the `role` column value from `USER` to `ADMIN`.
+
+9.  **Shadcn/UI Styling (Optional):**
+    * This template comes with the default shadcn/ui style initialized. If you want to customize the theme or use a different base color, you can delete `components.json` and re-initialize shadcn/ui following their [official documentation](https://ui.shadcn.com/docs/installation/next).
+
+## Project Structure Highlights
+
+* `app/`: Next.js App Router.
+    * `app/(auth-pages)/`: Routes for sign-in, sign-up, etc.
+    * `app/cms/`: CMS admin panel routes and layouts.
+        * `app/cms/[entity]/`: CRUD pages for different content types (pages, posts, media, users, navigation, languages).
+        * `app/cms/blocks/`: Components and actions related to the block editor.
+    * `app/[slug]/`: Dynamic route for public "Pages".
+    * `app/blog/[slug]/`: Dynamic route for public "Posts".
+    * `app/api/`: API routes (e.g., for revalidation, R2 pre-signed URLs).
+* `components/`: Shared UI components (shadcn/ui based).
+    * `components/ui/`: shadcn/ui components.
+* `context/`: React Context providers (e.g., `AuthContext`, `LanguageContext`).
+* `lib/`: Utility functions and configurations.
+    * `lib/cloudflare/`: Client for Cloudflare R2.
+* `utils/supabase/`: Supabase client setup, types, and middleware helpers.
+* `supabase/migrations/`: SQL database migrations.
+
+## Documentation
+
+For a deeper understanding of the CMS's internal workings, please refer to the detailed documentation:
+
+*   **[CMS Application Overview](./docs/cms-application-overview.md):** A high-level guide to the Next.js application structure, core modules, and key functionalities.
+*   **[Block Editor Architecture](./docs/cms-architecture-overview.md):** A technical deep-dive into the architecture of the block-based content editor.
+
+## Deployment
+
+This project is optimized for deployment on [Vercel](https://vercel.com/).
+
+1.  Push your code to a GitHub/GitLab/Bitbucket repository.
+2.  Import the project into Vercel.
+3.  **Configure Environment Variables in Vercel:**
+    * Add all the environment variables from your `.env.local` file to your Vercel project settings (Project Settings -> Environment Variables). This includes Supabase keys, R2 keys, `NEXT_PUBLIC_SITE_URL` (set to your production domain), and `REVALIDATE_SECRET_TOKEN`.
+4.  Vercel will automatically build and deploy your Next.js application.
+5.  Ensure your Supabase Database Webhooks are pointing to your production Next.js API endpoint for revalidation.
+
+## Database Backup
+
+This project includes a simple script to backup your Supabase PostgreSQL database.
+
+**Requirements:**
+*   You must have the PostgreSQL command-line tools (`pg_dump`) installed and available in your system's PATH.
+
+**Usage:**
+To create a backup, run the following command from your project root:
+
+```bash
+npm run db:backup
+```
+
+This command will generate a timestamped SQL dump file and save it to the `backup/` directory.
+## Feedback and Issues
+
+Please file feedback and issues on the GitHub repository for this project.

package/templates/nextblock-template/app/(auth-pages)/forgot-password/page.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React from "react";
+import { forgotPasswordAction } from "../../actions";
+import { FormMessage, Message } from "../../../components/form-message";
+import { SubmitButton } from "../../../components/submit-button";
+import { Input } from "@nextblock-cms/ui";
+import { Label } from "@nextblock-cms/ui";
+import Link from "next/link";
+import { useTranslations } from "@nextblock-cms/utils";
+import { useSearchParams } from "next/navigation";
+
+function getMessage(searchParams: URLSearchParams): Message | undefined {
+    if (searchParams.has('error')) {
+        const error = searchParams.get('error');
+        if (error) return { error };
+    }
+    if (searchParams.has('success')) {
+        const success = searchParams.get('success');
+        if (success) return { success };
+    }
+    if (searchParams.has('message')) {
+        const message = searchParams.get('message');
+        if (message) return { message };
+    }
+    return undefined;
+}
+
+export default function ForgotPassword() {
+  const { t } = useTranslations();
+  const searchParams = useSearchParams();
+  const formMessage = getMessage(searchParams);
+
+  return (
+    <>
+      <form className="flex-1 flex flex-col w-full gap-2 text-foreground [&>input]:mb-6 min-w-64 max-w-64 mx-auto">
+        <div>
+          <h1 className="text-2xl font-medium">{t('reset_password')}</h1>
+          <p className="text-sm text-secondary-foreground">
+            {t('already_have_account')}{" "}
+            <Link className="text-primary underline" href="/sign-in">
+              {t('sign_in')}
+            </Link>
+          </p>
+        </div>
+        <div className="flex flex-col gap-2 [&>input]:mb-3 mt-8">
+          <Label htmlFor="email">{t('email')}</Label>
+          <Input name="email" placeholder={t('you_at_example_com')} required />
+          <SubmitButton formAction={forgotPasswordAction}>
+            {t('reset_password')}
+          </SubmitButton>
+          <FormMessage message={formMessage} />
+        </div>
+      </form>
+    </>
+  );
+}

package/templates/nextblock-template/app/(auth-pages)/layout.tsx

@@ -0,0 +1,9 @@
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="max-w-7xl mx-auto flex flex-col gap-12 items-start mb-4">{children}</div>
+  );
+}

package/templates/nextblock-template/app/(auth-pages)/post-sign-in/page.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+
+export default function PostSignIn() {
+  const searchParams = useSearchParams();
+  const redirectTo = searchParams.get('redirect_to');
+
+  useEffect(() => {
+    if (redirectTo) {
+      window.location.href = redirectTo;
+    } else {
+      window.location.href = '/';
+    }
+  }, [redirectTo]);
+
+  return (
+    <div className="flex justify-center items-center h-full w-full py-20">
+      <div className="relative">
+        <div className="h-16 w-16 rounded-full border-t-4 border-b-4 border-primary animate-spin"></div>
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="h-10 w-10 rounded-full bg-background"></div>
+        </div>
+      </div>
+    </div>
+  );
+}