@antonvangoethem/cms NPM

@antonvangoethem/cms

A shared CMS package for Next.js projects with built-in authentication, user management, and database utilities.

Features

🔐 Authentication with JWT
👥 User Management
🗄️ Database utilities with Drizzle ORM
🎨 Pre-built UI components

Installation

npm install @antonvangoethem/cms

Quick Start

Set up your database connection in .env:

POSTGRES_URL=your_database_url
JWT_SECRET=your_secret_key

Initialize the database:

// src/db/index.ts
import { createDb } from '@antonvangoethem/cms';
export const db = createDb();

Set up authentication middleware:

// middleware.ts
import { createAuthMiddleware } from '@antonvangoethem/cms';

export const middleware = createAuthMiddleware(process.env.JWT_SECRET!, [
  '/auth/login',
  '/api/public'
]);

Create authentication actions:

// src/app/actions/auth.ts
import { createAuthActions } from '@antonvangoethem/cms';
import { db } from '@/db';

const { login, logout } = createAuthActions(db, process.env.JWT_SECRET!);
export { login, logout };

Use the login form component:

// src/app/auth/login/page.tsx
import { LoginForm } from '@antonvangoethem/cms';
import { login } from '@/app/actions/auth';

export default function LoginPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <LoginForm onSubmit={login} />
    </div>
  );
}

Set up user management:

// src/app/actions/users.ts
import { createUserManagement } from '@antonvangoethem/cms';
import { db } from '@/db';

const { createUser, getUsers, updateUser, deleteUser } = createUserManagement(db);
export { createUser, getUsers, updateUser, deleteUser };

Components

LoginForm

A pre-built login form component with error handling and loading states.

<LoginForm 
  onSubmit={async (email, password) => {
    // Handle login
  }}
  error={error}
/>

UserTable

A pre-built user management table with edit and delete functionality.

<UserTable
  users={users}
  onDelete={async (id) => {
    // Handle delete
  }}
  onEdit={async (id, data) => {
    // Handle edit
  }}
/>

Database Schema

The package includes a pre-built users table schema:

export const usersTable = pgTable('users', {
  id: serial('id').primaryKey(),
  email: varchar('email', { length: 255 }).notNull().unique(),
  password: varchar('password', { length: 255 }).notNull(),
  name: varchar('name', { length: 255 }).notNull(),
  role: varchar('role', { length: 50 }).notNull().default('editor'),
  createdAt: timestamp('created_at').defaultNow().notNull(),
  updatedAt: timestamp('updated_at').defaultNow().notNull(),
});