create-nextblock 0.2.78 → 0.8.0

package/templates/nextblock-template/app/cms/settings/security/actions.ts

@@ -0,0 +1,251 @@
+'use server';
+
+import { createClient } from '@nextblock-cms/db/server';
+import { revalidatePath } from 'next/cache';
+import { sendTwoFactorCodeEmail } from '../../../actions/twoFactorEmail';
+import {
+  getSecuritySettings as readSecuritySettings,
+  saveSecuritySettings,
+} from '../../../../lib/privacy/settings';
+import {
+  MAX_TRUSTED_DEVICE_DAYS,
+  MIN_TRUSTED_DEVICE_DAYS,
+  type SecuritySettings,
+} from '../../../../lib/privacy/types';
+import {
+  createEmailChallenge,
+  issueTwoFactorVerifiedCookie,
+  clearTwoFactorVerifiedCookie,
+  verifyEmailChallenge,
+} from '../../../../lib/auth/twoFactor';
+import {
+  listTrustedDevices,
+  revokeAllTrustedDevices,
+  revokeTrustedDevice,
+  type TrustedDeviceRow,
+} from '../../../../lib/auth/trustedDevices';
+
+export interface SecurityPanelData {
+  email: string;
+  mfaEnabled: boolean;
+  mfaType: 'totp' | 'email' | null;
+  hasVerifiedTotp: boolean;
+  isAdmin: boolean;
+  globalSettings: SecuritySettings;
+  trustedDevices: TrustedDeviceRow[];
+}
+
+async function requireUser() {
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) {
+    throw new Error('You must be signed in.');
+  }
+  return { supabase, user };
+}
+
+export async function getSecurityPanelData(): Promise<SecurityPanelData> {
+  const { supabase, user } = await requireUser();
+
+  const [{ data: settings }, { data: profile }, { data: factors }] = await Promise.all([
+    supabase
+      .from('user_security_settings')
+      .select('mfa_enabled, mfa_type')
+      .eq('user_id', user.id)
+      .maybeSingle(),
+    supabase.from('profiles').select('role').eq('id', user.id).single(),
+    supabase.auth.mfa.listFactors(),
+  ]);
+
+  // listFactors().totp only contains verified TOTP factors.
+  const hasVerifiedTotp = Boolean(factors?.totp && factors.totp.length > 0);
+
+  return {
+    email: user.email ?? '',
+    mfaEnabled: Boolean(settings?.mfa_enabled),
+    mfaType: (settings?.mfa_type as 'totp' | 'email' | null) ?? null,
+    hasVerifiedTotp,
+    isAdmin: profile?.role === 'ADMIN',
+    globalSettings: await readSecuritySettings(),
+    trustedDevices: await listTrustedDevices(user.id),
+  };
+}
+
+// --- Global policy (admin only) -------------------------------------------------
+
+export async function updateGlobalSecuritySettings(formData: FormData) {
+  const { supabase, user } = await requireUser();
+  const { data: profile } = await supabase
+    .from('profiles')
+    .select('role')
+    .eq('id', user.id)
+    .single();
+  if (profile?.role !== 'ADMIN') {
+    throw new Error('Only administrators can change the global security policy.');
+  }
+
+  const days = Number.parseInt(formData.get('trusted_device_days')?.toString() ?? '', 10);
+  const settings: SecuritySettings = {
+    trusted_device_days: Number.isFinite(days)
+      ? Math.min(MAX_TRUSTED_DEVICE_DAYS, Math.max(MIN_TRUSTED_DEVICE_DAYS, days))
+      : 30,
+    enforce_staff_2fa: formData.get('enforce_staff_2fa') === 'true',
+  };
+
+  await saveSecuritySettings(settings);
+  revalidatePath('/cms/settings/security');
+  return { success: true, message: 'Security policy saved.' };
+}
+
+// --- TOTP enrollment ------------------------------------------------------------
+
+export type EnrollTotpResult =
+  | { ok: true; factorId: string; qrCode: string; secret: string }
+  | { ok: false; error: string };
+
+export async function startTotpEnrollment(): Promise<EnrollTotpResult> {
+  const { supabase } = await requireUser();
+
+  // Clear any half-finished factors so re-enrolling never hits a name clash.
+  // `listFactors().totp` only returns verified factors, so check `all`.
+  const { data: existing } = await supabase.auth.mfa.listFactors();
+  for (const factor of existing?.all ?? []) {
+    if (factor.factor_type === 'totp' && factor.status === 'unverified') {
+      await supabase.auth.mfa.unenroll({ factorId: factor.id });
+    }
+  }
+
+  const { data, error } = await supabase.auth.mfa.enroll({
+    factorType: 'totp',
+    friendlyName: `nextblock-totp-${Date.now()}`,
+  });
+
+  if (error || !data) {
+    return {
+      ok: false,
+      error:
+        error?.message ??
+        'Could not start authenticator setup. Ensure TOTP MFA is enabled for this Supabase project.',
+    };
+  }
+
+  return {
+    ok: true,
+    factorId: data.id,
+    qrCode: data.totp.qr_code,
+    secret: data.totp.secret,
+  };
+}
+
+export async function verifyTotpEnrollment(formData: FormData) {
+  const { supabase, user } = await requireUser();
+  const factorId = formData.get('factorId')?.toString() ?? '';
+  const code = (formData.get('code')?.toString() ?? '').trim();
+
+  if (!factorId || !/^\d{6}$/.test(code)) {
+    throw new Error('Enter the 6-digit code from your authenticator app.');
+  }
+
+  const { data: challenge, error: challengeError } = await supabase.auth.mfa.challenge({
+    factorId,
+  });
+  if (challengeError || !challenge) {
+    throw new Error(challengeError?.message ?? 'Could not start verification.');
+  }
+
+  const { error: verifyError } = await supabase.auth.mfa.verify({
+    factorId,
+    challengeId: challenge.id,
+    code,
+  });
+  if (verifyError) {
+    throw new Error('That code was not valid. Please try again.');
+  }
+
+  const { error: upsertError } = await supabase.from('user_security_settings').upsert({
+    user_id: user.id,
+    mfa_enabled: true,
+    mfa_type: 'totp',
+    updated_at: new Date().toISOString(),
+  });
+  if (upsertError) {
+    throw new Error('Verified, but failed to save your preference. Please retry.');
+  }
+
+  revalidatePath('/cms/settings/security');
+  return { success: true, message: 'Authenticator app enabled.' };
+}
+
+// --- Email-code enrollment ------------------------------------------------------
+
+export async function sendEmailEnrollmentCode() {
+  const { user } = await requireUser();
+  if (!user.email) {
+    throw new Error('Your account has no email address on file.');
+  }
+  const code = await createEmailChallenge(user.id);
+  await sendTwoFactorCodeEmail(user.email, code, 'enable email two-factor authentication');
+  return { success: true, message: `We sent a 6-digit code to ${user.email}.` };
+}
+
+export async function verifyEmailEnrollment(formData: FormData) {
+  const { supabase, user } = await requireUser();
+  const code = (formData.get('code')?.toString() ?? '').trim();
+
+  const ok = await verifyEmailChallenge(user.id, code);
+  if (!ok) {
+    throw new Error('That code was incorrect or expired. Request a new one.');
+  }
+
+  const { error } = await supabase.from('user_security_settings').upsert({
+    user_id: user.id,
+    mfa_enabled: true,
+    mfa_type: 'email',
+    updated_at: new Date().toISOString(),
+  });
+  if (error) {
+    throw new Error('Verified, but failed to save your preference. Please retry.');
+  }
+
+  // The user just proved control of their inbox, so this session is satisfied.
+  await issueTwoFactorVerifiedCookie(user.id);
+  revalidatePath('/cms/settings/security');
+  return { success: true, message: 'Email verification enabled.' };
+}
+
+// --- Disable / device management ------------------------------------------------
+
+export async function disableMfa() {
+  const { supabase, user } = await requireUser();
+
+  const { data: factors } = await supabase.auth.mfa.listFactors();
+  for (const factor of factors?.all ?? []) {
+    await supabase.auth.mfa.unenroll({ factorId: factor.id });
+  }
+
+  await supabase.from('user_security_settings').upsert({
+    user_id: user.id,
+    mfa_enabled: false,
+    mfa_type: null,
+    updated_at: new Date().toISOString(),
+  });
+
+  await revokeAllTrustedDevices(user.id);
+  await clearTwoFactorVerifiedCookie();
+
+  revalidatePath('/cms/settings/security');
+  return { success: true, message: 'Two-factor authentication disabled.' };
+}
+
+export async function revokeTrustedDeviceAction(formData: FormData) {
+  const { user } = await requireUser();
+  const id = formData.get('id')?.toString() ?? '';
+  if (!id) {
+    throw new Error('Missing device id.');
+  }
+  await revokeTrustedDevice(user.id, id);
+  revalidatePath('/cms/settings/security');
+  return { success: true, message: 'Device revoked.' };
+}

package/templates/nextblock-template/app/cms/settings/security/components/SecurityPanel.tsx

@@ -0,0 +1,453 @@
+'use client';
+
+import { useRef, useState, useTransition } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Alert,
+  AlertDescription,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Input,
+  Label,
+  Separator,
+  Spinner,
+} from '@nextblock-cms/ui';
+import { Message } from '../../../../../components/form-message';
+import {
+  MAX_TRUSTED_DEVICE_DAYS,
+  MIN_TRUSTED_DEVICE_DAYS,
+} from '../../../../../lib/privacy/types';
+import {
+  disableMfa,
+  revokeTrustedDeviceAction,
+  sendEmailEnrollmentCode,
+  startTotpEnrollment,
+  updateGlobalSecuritySettings,
+  verifyEmailEnrollment,
+  verifyTotpEnrollment,
+  type SecurityPanelData,
+} from '../actions';
+
+type EnrollMode = 'idle' | 'totp' | 'email';
+
+function formatDate(value: string): string {
+  try {
+    return new Date(value).toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  } catch {
+    return value;
+  }
+}
+
+export default function SecurityPanel({ data }: { data: SecurityPanelData }) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [message, setMessage] = useState<Message | null>(null);
+
+  const [mode, setMode] = useState<EnrollMode>('idle');
+  const [totp, setTotp] = useState<{ factorId: string; qrCode: string; secret: string } | null>(
+    null,
+  );
+  const [emailSent, setEmailSent] = useState(false);
+  const [code, setCode] = useState('');
+
+  const run = (fn: () => Promise<unknown>, after?: () => void) => {
+    setMessage(null);
+    startTransition(async () => {
+      try {
+        const result = (await fn()) as { message?: string } | undefined;
+        if (result?.message) setMessage({ success: result.message });
+        after?.();
+        router.refresh();
+      } catch (error) {
+        setMessage({
+          error: error instanceof Error ? error.message : 'Something went wrong.',
+        });
+      }
+    });
+  };
+
+  const resetEnrollment = () => {
+    setMode('idle');
+    setTotp(null);
+    setEmailSent(false);
+    setCode('');
+  };
+
+  // --- Enrollment handlers ------------------------------------------------------
+
+  const beginTotp = () => {
+    setMessage(null);
+    setMode('totp');
+    setEmailSent(false);
+    startTransition(async () => {
+      const result = await startTotpEnrollment();
+      if (result.ok) {
+        setTotp({ factorId: result.factorId, qrCode: result.qrCode, secret: result.secret });
+      } else {
+        setMessage({ error: result.error });
+        setMode('idle');
+      }
+    });
+  };
+
+  const submitTotpCode = () => {
+    if (!totp) return;
+    const formData = new FormData();
+    formData.append('factorId', totp.factorId);
+    formData.append('code', code);
+    run(() => verifyTotpEnrollment(formData), resetEnrollment);
+  };
+
+  const beginEmail = () => {
+    setMode('email');
+    setTotp(null);
+    run(async () => {
+      const result = await sendEmailEnrollmentCode();
+      setEmailSent(true);
+      return result;
+    });
+  };
+
+  const submitEmailCode = () => {
+    const formData = new FormData();
+    formData.append('code', code);
+    run(() => verifyEmailEnrollment(formData), resetEnrollment);
+  };
+
+  const messageAlert = message && (
+    <Alert
+      variant={'success' in message ? 'success' : 'destructive'}
+      className="py-2 px-4"
+    >
+      <AlertDescription>
+        {'success' in message
+          ? message.success
+          : 'error' in message
+            ? message.error
+            : ''}
+      </AlertDescription>
+    </Alert>
+  );
+
+  return (
+    <>
+      {/* Status + per-user MFA */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            Two-Factor Authentication
+            {data.mfaEnabled ? (
+              <Badge variant="default">
+                Enabled · {data.mfaType === 'totp' ? 'Authenticator app' : 'Email code'}
+              </Badge>
+            ) : (
+              <Badge variant="secondary">Off</Badge>
+            )}
+          </CardTitle>
+          <CardDescription>
+            Add a second step when you sign in to the CMS. You can use an authenticator
+            app (TOTP) or a one-time code sent to <strong>{data.email}</strong>.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {messageAlert}
+
+          {data.mfaEnabled ? (
+            <div className="flex items-center justify-between rounded-lg border p-4">
+              <div className="text-sm">
+                <p className="font-medium">
+                  {data.mfaType === 'totp'
+                    ? 'Authenticator app is protecting your account.'
+                    : 'Email verification is protecting your account.'}
+                </p>
+                <p className="text-slate-500">
+                  Disabling 2FA also forgets all of your trusted devices.
+                </p>
+              </div>
+              <Button
+                variant="destructive"
+                disabled={isPending}
+                onClick={() => run(() => disableMfa(), resetEnrollment)}
+              >
+                {isPending ? <Spinner className="h-4 w-4 animate-spin" /> : 'Disable 2FA'}
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {/* Method chooser */}
+              <div className="grid gap-3 sm:grid-cols-2">
+                <button
+                  type="button"
+                  onClick={beginTotp}
+                  className={`rounded-lg border p-4 text-left transition hover:border-primary ${
+                    mode === 'totp' ? 'border-primary ring-1 ring-primary' : ''
+                  }`}
+                >
+                  <p className="font-medium text-sm">Authenticator App (TOTP)</p>
+                  <p className="text-xs text-slate-500">
+                    Scan a QR code with Google Authenticator, 1Password, Authy, etc.
+                  </p>
+                </button>
+                <button
+                  type="button"
+                  onClick={beginEmail}
+                  className={`rounded-lg border p-4 text-left transition hover:border-primary ${
+                    mode === 'email' ? 'border-primary ring-1 ring-primary' : ''
+                  }`}
+                >
+                  <p className="font-medium text-sm">Secure Email Code</p>
+                  <p className="text-xs text-slate-500">
+                    Receive a 6-digit code at your account email each time you sign in.
+                  </p>
+                </button>
+              </div>
+
+              {/* TOTP enrollment */}
+              {mode === 'totp' && (
+                <div className="rounded-lg border p-4 space-y-4">
+                  {totp ? (
+                    <>
+                      <div className="flex flex-col items-center gap-3 sm:flex-row sm:items-start">
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                          src={totp.qrCode}
+                          alt="Authenticator setup QR code"
+                          className="h-44 w-44 rounded bg-white p-2"
+                        />
+                        <div className="text-sm space-y-2">
+                          <p>1. Scan this QR code with your authenticator app.</p>
+                          <p>
+                            2. Or enter this key manually:
+                            <br />
+                            <code className="break-all text-xs bg-muted px-1 py-0.5 rounded">
+                              {totp.secret}
+                            </code>
+                          </p>
+                          <p>3. Enter the current 6-digit code below.</p>
+                        </div>
+                      </div>
+                      <div className="flex items-end gap-3">
+                        <div className="space-y-1">
+                          <Label htmlFor="totp_code">6-digit code</Label>
+                          <Input
+                            id="totp_code"
+                            inputMode="numeric"
+                            autoComplete="one-time-code"
+                            maxLength={6}
+                            value={code}
+                            onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
+                            className="w-32 tracking-widest"
+                            placeholder="000000"
+                          />
+                        </div>
+                        <Button onClick={submitTotpCode} disabled={isPending || code.length !== 6}>
+                          {isPending ? <Spinner className="h-4 w-4 animate-spin" /> : 'Verify & enable'}
+                        </Button>
+                        <Button variant="ghost" onClick={resetEnrollment} disabled={isPending}>
+                          Cancel
+                        </Button>
+                      </div>
+                    </>
+                  ) : (
+                    <div className="flex items-center gap-2 text-sm text-slate-500">
+                      <Spinner className="h-4 w-4 animate-spin" /> Generating your QR code…
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Email enrollment */}
+              {mode === 'email' && (
+                <div className="rounded-lg border p-4 space-y-4">
+                  <p className="text-sm">
+                    {emailSent
+                      ? `Enter the 6-digit code we sent to ${data.email}.`
+                      : 'Sending a verification code to your email…'}
+                  </p>
+                  <div className="flex items-end gap-3">
+                    <div className="space-y-1">
+                      <Label htmlFor="email_code">6-digit code</Label>
+                      <Input
+                        id="email_code"
+                        inputMode="numeric"
+                        autoComplete="one-time-code"
+                        maxLength={6}
+                        value={code}
+                        onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
+                        className="w-32 tracking-widest"
+                        placeholder="000000"
+                        disabled={!emailSent}
+                      />
+                    </div>
+                    <Button
+                      onClick={submitEmailCode}
+                      disabled={isPending || code.length !== 6 || !emailSent}
+                    >
+                      {isPending ? <Spinner className="h-4 w-4 animate-spin" /> : 'Verify & enable'}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      onClick={beginEmail}
+                      disabled={isPending}
+                      title="Send a new code"
+                    >
+                      Resend
+                    </Button>
+                    <Button variant="ghost" onClick={resetEnrollment} disabled={isPending}>
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Trusted devices */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Trusted Devices</CardTitle>
+          <CardDescription>
+            Devices where you chose &ldquo;Remember this device&rdquo; skip 2FA until the
+            trust expires. Revoke any you no longer recognize.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {data.trustedDevices.length === 0 ? (
+            <p className="text-sm text-slate-500">No trusted devices.</p>
+          ) : (
+            <ul className="divide-y rounded-lg border">
+              {data.trustedDevices.map((device) => (
+                <li
+                  key={device.id}
+                  className="flex items-center justify-between gap-4 p-3 text-sm"
+                >
+                  <div className="min-w-0">
+                    <p className="truncate font-medium">
+                      {device.browser_metadata || 'Unknown device'}
+                    </p>
+                    <p className="text-xs text-slate-500">
+                      Trusted {formatDate(device.created_at)} · expires{' '}
+                      {formatDate(device.expires_at)}
+                    </p>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={isPending}
+                    onClick={() => {
+                      const formData = new FormData();
+                      formData.append('id', device.id);
+                      run(() => revokeTrustedDeviceAction(formData));
+                    }}
+                  >
+                    Revoke
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Admin global policy */}
+      {data.isAdmin && (
+        <AdminPolicyCard
+          initial={data.globalSettings}
+          isPending={isPending}
+          onSave={(formData) => run(() => updateGlobalSecuritySettings(formData))}
+        />
+      )}
+    </>
+  );
+}
+
+function AdminPolicyCard({
+  initial,
+  isPending,
+  onSave,
+}: {
+  initial: SecurityPanelData['globalSettings'];
+  isPending: boolean;
+  onSave: (formData: FormData) => void;
+}) {
+  const [days, setDays] = useState(String(initial.trusted_device_days));
+  const [enforce, setEnforce] = useState(initial.enforce_staff_2fa);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Organization Policy (Admin)</CardTitle>
+        <CardDescription>
+          Applies to every staff member. Trusted-device trust is server-validated and
+          revocable at any time from this page.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form
+          ref={formRef}
+          onSubmit={(e) => {
+            e.preventDefault();
+            const formData = new FormData();
+            formData.append('trusted_device_days', days);
+            formData.append('enforce_staff_2fa', String(enforce));
+            onSave(formData);
+          }}
+          className="space-y-6"
+        >
+          <div className="space-y-2">
+            <Label htmlFor="trusted_device_days">Remember-device duration (days)</Label>
+            <Input
+              id="trusted_device_days"
+              type="number"
+              min={MIN_TRUSTED_DEVICE_DAYS}
+              max={MAX_TRUSTED_DEVICE_DAYS}
+              value={days}
+              onChange={(e) => setDays(e.target.value)}
+              className="w-40"
+            />
+            <p className="text-xs text-slate-500">
+              How long a &ldquo;Remember this device&rdquo; choice lasts before 2FA is
+              required again. Default 30 days, up to {MAX_TRUSTED_DEVICE_DAYS} (10 years).
+            </p>
+          </div>
+
+          <div className="flex items-start gap-3">
+            <Checkbox
+              id="enforce_staff_2fa"
+              checked={enforce}
+              onCheckedChange={(checked) => setEnforce(checked === true)}
+              className="mt-1"
+            />
+            <div className="space-y-1">
+              <Label htmlFor="enforce_staff_2fa">Encourage staff to enable 2FA</Label>
+              <p className="text-xs text-slate-500">
+                Surfaces a reminder for ADMIN/WRITER accounts that haven&rsquo;t set up a
+                second factor.
+              </p>
+            </div>
+          </div>
+
+          <Separator />
+
+          <Button type="submit" disabled={isPending}>
+            {isPending ? <Spinner className="mr-2 h-4 w-4 animate-spin" /> : null}
+            Save Policy
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}