Everything you need to deploy GRC Crest.

Project Structure

This is a Next.js 15 application with React 19, TypeScript 5.8, Tailwind CSS 4, Vercel AI SDK 4, and NextAuth v5. The codebase is structured for clarity, separation of concerns, and long-term maintainability.

grc-command-center/
  │
  ├── src/
  │   │
  │   ├── types/
  │   │   ├── grc.ts                 ← ALL domain TypeScript interfaces
  │   │   │                                Single source of truth for every data shape.
  │   │   └── next-auth.d.ts         ← NextAuth v5 module augmentation
  │   │                                    Adds mfaVerified and role to Session + JWT types
  │   │
  │   ├── lib/
  │   │   ├── constants.ts           ← All static data (layers, events, incidents)
  │   │   ├── aiClient.ts            ← Browser-side AI client — NO API keys here
  │   │   │                                Calls /api/ai proxy only
  │   │   ├── prompts.ts             ← All AI system prompts as versioned constants
  │   │   ├── auth.ts                ← NextAuth v5 config, JWT callbacks, authorized guard
  │   │   ├── users.ts               ← User store (AUTHORISED_USERS env var)
  │   │   │                                Replace with Prisma/DB for production scale
  │   │   └── mfa.ts                 ← TOTP (otplib) + Email OTP (Nodemailer)
  │   │
  │   ├── styles/
  │   │   └── globals.css            ← Tailwind v4 import + CSS custom properties
  │   │
  │   ├── components/
  │   │   ├── ui/                   ← Reusable primitive components
  │   │   │   ├── StatusBadge.tsx
  │   │   │   ├── GlowButton.tsx
  │   │   │   └── CodeBlock.tsx
  │   │   ├── tabs/                 ← One file per tab — independently testable
  │   │   │   ├── OverviewTab.tsx
  │   │   │   ├── PipelineTab.tsx
  │   │   │   ├── CodeReferenceTab.tsx
  │   │   │   ├── VendorRiskTab.tsx
  │   │   │   ├── OPAGeneratorTab.tsx
  │   │   │   ├── EvidenceTrackerTab.tsx
  │   │   │   └── IncidentPlaybookTab.tsx
  │   │   ├── GRCDashboard.tsx       ← Root client: header + tab router + layout
  │   │   └── LiveSidebar.tsx        ← Real-time automation event feed
  │   │
  │   ├── middleware.ts              ← SINGLE auth enforcement point for ALL routes
  │   │                                Every request checked here before rendering
  │   └── app/
  │       ├── layout.tsx             ← Root HTML layout + metadata
  │       ├── page.tsx               ← Dashboard entry (server component)
  │       ├── (auth)/               ← Route group — auth layout, no GRC chrome
  │       │   ├── layout.tsx
  │       │   └── login/page.tsx     ← Two-step login: credentials → MFA
  │       └── api/
  │           ├── ai/route.ts        ← Vercel AI SDK proxy (API keys server-only)
  │           └── auth/
  │               ├── [...nextauth]/route.ts  ← NextAuth v5 handler
  │               ├── mfa-verify/route.ts     ← Verifies TOTP or email OTP
  │               └── send-email-otp/route.ts ← Generates + emails 6-digit OTP
  │
  ├── .env.example                  ← All env vars documented with examples
  ├── .gitignore
  ├── next.config.ts
  ├── postcss.config.mjs
  ├── tsconfig.json                 ← Strict TypeScript
  └── package.json

Why this structure?

Authentication & Access Control

How Login Works — Two Steps

Session Security Properties

User Roles

MFA Setup

node -e "console.log(require('otplib').authenticator.generateSecret())"

node -e "
  const { authenticator } = require('otplib');
  const uri = authenticator.keyuri(
    'user@company.com',
    'GRC Command Center',
    'YOUR_SECRET_HERE'
  );
  console.log(uri);"

SMTP_HOST=smtp.gmail.com
  SMTP_PORT=587
  SMTP_SECURE=false
  SMTP_USER=noreply@yourcompany.com
  SMTP_PASS=your_16_char_app_password

SMTP_HOST=smtp.sendgrid.net
  SMTP_PORT=587
  SMTP_SECURE=false
  SMTP_USER=apikey
  SMTP_PASS=your_sendgrid_api_key

Quick Start — Local Development

git clone https://github.com/igefadele/grc-crest.git
  cd grc-crest

  # OR from the zip:
  unzip grc-command-center-v4-final.zip
  cd grc-command-center

npm install

cp .env.example .env.local

# Generate AUTH_SECRET with: openssl rand -base64 32
  AUTH_SECRET=replace_with_32_char_random_string
  NEXTAUTH_URL=http://localhost:3000

  # At least one user (see "Adding Users" section for bcrypt hash generation)
  AUTHORISED_USERS='[{"id":"usr_001","email":"you@company.com","name":"Your Name","role":"admin","hashedPassword":"$2a$12$...","totpSecret":null,"mfaMethod":"totp"}]'

  # AI provider
  AI_PROVIDER=claude
  AI_MODEL=claude-sonnet-4-20250514
  ANTHROPIC_API_KEY=sk-ant-your_key_here

  # SMTP for email OTP
  SMTP_HOST=smtp.gmail.com
  SMTP_PORT=587
  SMTP_SECURE=false
  SMTP_USER=you@gmail.com
  SMTP_PASS=your_app_password
  TOTP_ISSUER=GRC Command Center

  # Shown in dashboard header
  NEXT_PUBLIC_AI_PROVIDER=claude

npm run dev

Available Scripts

Adding Users (Administrator Guide)

There is no registration form. All accounts are provisioned by administrators. This mirrors enterprise IAM practice — access is granted, not claimed.

node -e "require('bcryptjs').hash('the_initial_password', 12).then(console.log)"

node -e "console.log(require('otplib').authenticator.generateSecret())"
  # Output: JBSWY3DPEHPK3PXP (Base32 string)

AUTHORISED_USERS='[
    {
      "id": "usr_001",
      "email": "analyst@yourcompany.com",
      "name": "Jane Smith",
      "role": "analyst",
      "hashedPassword": "$2a$12$your_generated_hash",
      "totpSecret": "JBSWY3DPEHPK3PXP",
      "mfaMethod": "totp"
    },
    {
      "id": "usr_002",
      "email": "viewer@yourcompany.com",
      "name": "Bob Jones",
      "role": "viewer",
      "hashedPassword": "$2a$12$another_generated_hash",
      "totpSecret": null,
      "mfaMethod": "email"
    }
  ]'

# Vercel: update env var in dashboard → trigger redeploy
  # Docker: restart container with new env
  docker compose up -d --force-recreate
  # Local dev: save .env.local — server hot-reloads env vars

AUTHORISED_USERS Field Reference

AI Integration — Vercel AI SDK

Why Vercel AI SDK Instead of Raw Fetch?

The previous approach used manual fetch() calls to each provider's API, requiring separate request parsers, response parsers, error handling, and an if/else chain per provider. The Vercel AI SDK replaces all of this with a single function:

const res = await fetch(
    'https://api.anthropic.com/v1/messages',
    {
      method: 'POST',
      headers: {
        'x-api-key': key,
        'anthropic-version': '2023-06-01',
      },
      body: JSON.stringify({
        model, max_tokens, system,
        messages: [...]
      }),
    }
  )
  const data = await res.json()
  const text = data.content
    ?.map(b => b.text).join('') ?? ''

const { text } = await generateText({
    model,   // from getModel() factory
    system:  systemPrompt,
    prompt:  userMessage,
    maxTokens: 1000,
    temperature: 0.2,
  })

Provider Switching

Change two environment variables in .env.local — no code changes needed anywhere in the application.

AI_PROVIDER=claude
  AI_MODEL=claude-sonnet-4-20250514
  ANTHROPIC_API_KEY=sk-ant-your_key

AI_PROVIDER=openai
  AI_MODEL=gpt-4o
  OPENAI_API_KEY=sk-your_key

AI_PROVIDER=openai
  AI_MODEL=gpt-4o-mini
  OPENAI_API_KEY=sk-your_key

AI_PROVIDER=custom
  AI_MODEL=your-model-name
  OPENAI_API_KEY=not-needed
  CUSTOM_LLM_ENDPOINT=https://your-endpoint/v1/chat/completions

Hosting Guide

Option A: Vercel (Recommended — Free)

Zero configuration — Vercel auto-detects Next.js and handles all server-side routes including /api/auth/* and /api/ai.

git init && git add . && git commit -m "Initial commit"
  git remote add origin https://github.com/your-username/grc-command-center.git
  git push -u origin main

npm install -g vercel
  vercel

AUTH_SECRET             ← openssl rand -base64 32
  NEXTAUTH_URL            ← https://your-project.vercel.app
  AUTHORISED_USERS        ← full JSON array (paste as single line)
  AI_PROVIDER             ← claude
  AI_MODEL                ← claude-sonnet-4-20250514
  ANTHROPIC_API_KEY       ← sk-ant-...
  TOTP_ISSUER             ← GRC Command Center
  SMTP_HOST / SMTP_USER / SMTP_PASS
  NEXT_PUBLIC_AI_PROVIDER ← claude

vercel --prod

Option B: Netlify

# Install Next.js plugin first
  npm install @netlify/plugin-nextjs

Create netlify.toml:

[[plugins]]
    package = "@netlify/plugin-nextjs"

npm install -g netlify-cli
  netlify deploy --prod

Add env vars: Site settings → Environment variables → add all from .env.local.

Option C: Docker / Self-Hosted

First add output: 'standalone' to next.config.ts.

Dockerfile:

FROM node:20-alpine AS deps
  WORKDIR /app
  COPY package*.json ./
  RUN npm ci --only=production

  FROM node:20-alpine AS builder
  WORKDIR /app
  COPY --from=deps /app/node_modules ./node_modules
  COPY . .
  RUN npm run build

  FROM node:20-alpine AS runner
  WORKDIR /app
  ENV NODE_ENV=production
  COPY --from=builder /app/.next/standalone ./
  COPY --from=builder /app/.next/static ./.next/static
  COPY --from=builder /app/public ./public
  EXPOSE 3000
  CMD ["node", "server.js"]

docker-compose.yml:

version: '3.8'
  services:
    grc:
      build: .
      ports:
        - "3000:3000"
      environment:
        - AUTH_SECRET=${AUTH_SECRET}
        - NEXTAUTH_URL=https://your-domain.com
        - AUTHORISED_USERS=${AUTHORISED_USERS}
        - AI_PROVIDER=claude
        - AI_MODEL=claude-sonnet-4-20250514
        - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY}
        - TOTP_ISSUER=GRC Command Center
        - SMTP_HOST=${SMTP_HOST}
        - SMTP_USER=${SMTP_USER}
        - SMTP_PASS=${SMTP_PASS}
        - NEXT_PUBLIC_AI_PROVIDER=claude
      restart: unless-stopped

docker compose up -d

Option D: AWS, GCP, Azure

Environment Variables Reference

All variables live in .env.local for local development. Set them in your hosting platform's secret manager for production.

Authentication

Email / SMTP (for Email OTP MFA)

AI Provider

Public (Browser-Visible — NO Secrets)

Contributing

Contributions are welcome. Please follow these steps and standards.

git checkout -b feature/your-feature-name

npm run type-check   # tsc --noEmit — must be zero errors
  npm run lint         # ESLint — must be zero errors

Coding Standards