Feature Flags

1// prisma/schema.prisma
2model FeatureFlag {
3  id          String   @id @default(cuid())
4  key         String   @unique // "new-dashboard", "beta-api"
5  name        String   // Human-readable name
6  description String?
7
8  enabled     Boolean  @default(false)
9
10  // Percentage rollout (0-100)
11  percentage  Int      @default(100)
12
13  // User targeting
14  userIds     String[] // Specific user IDs
15
16  // Plan targeting
17  plans       String[] // ["pro", "enterprise"]
18
19  // Environment
20  environment String   @default("production")
21
22  createdAt   DateTime @default(now())
23  updatedAt   DateTime @updatedAt
24
25  @@index([key, environment])
26}

1// src/lib/feature-flags.ts
2import { prisma } from "@/lib/db";
3import crypto from "crypto";
4
5interface FlagContext {
6  userId?: string;
7  plan?: string;
8  environment?: string;
9}
10
11export async function isFeatureEnabled(
12  key: string,
13  context: FlagContext = {}
14): Promise<boolean> {
15  const environment = context.environment || process.env.NODE_ENV;
16
17  const flag = await prisma.featureFlag.findFirst({
18    where: { key, environment },
19  });
20
21  if (!flag) {
22    return false; // Default to disabled for unknown flags
23  }
24
25  if (!flag.enabled) {
26    return false;
27  }
28
29  // Check user targeting
30  if (flag.userIds.length > 0 && context.userId) {
31    if (flag.userIds.includes(context.userId)) {
32      return true;
33    }
34  }
35
36  // Check plan targeting
37  if (flag.plans.length > 0 && context.plan) {
38    if (!flag.plans.includes(context.plan)) {
39      return false;
40    }
41  }
42
43  // Check percentage rollout
44  if (flag.percentage < 100 && context.userId) {
45    const hash = crypto
46      .createHash("md5")
47      .update(`${key}:${context.userId}`)
48      .digest("hex");
49    const value = parseInt(hash.slice(0, 8), 16) % 100;
50
51    if (value >= flag.percentage) {
52      return false;
53    }
54  }
55
56  return true;
57}
58
59// Get all flags for a user (useful for client-side)
60export async function getFeatureFlags(context: FlagContext = {}) {
61  const environment = context.environment || process.env.NODE_ENV;
62
63  const flags = await prisma.featureFlag.findMany({
64    where: { environment },
65  });
66
67  const result: Record<string, boolean> = {};
68
69  for (const flag of flags) {
70    result[flag.key] = await isFeatureEnabled(flag.key, context);
71  }
72
73  return result;
74}

1// In API routes
2import { auth } from "@/lib/auth";
3import { isFeatureEnabled } from "@/lib/feature-flags";
4
5export async function GET(req: Request) {
6  const session = await auth();
7
8  const hasNewDashboard = await isFeatureEnabled("new-dashboard", {
9    userId: session?.user?.id,
10    plan: session?.user?.plan,
11  });
12
13  if (!hasNewDashboard) {
14    return Response.json(
15      { error: "Feature not available" },
16      { status: 403 }
17    );
18  }
19
20  // Return new dashboard data...
21}
22
23// In Server Components
24import { isFeatureEnabled } from "@/lib/feature-flags";
25import { auth } from "@/lib/auth";
26
27export default async function DashboardPage() {
28  const session = await auth();
29
30  const showBetaFeatures = await isFeatureEnabled("beta-features", {
31    userId: session?.user?.id,
32    plan: session?.user?.plan,
33  });
34
35  return (
36    <div>
37      <h1>Dashboard</h1>
38      {showBetaFeatures && (
39        <div className="bg-primary/10 p-4 border border-border">
40          <h2>Beta Features</h2>
41          {/* Beta content */}
42        </div>
43      )}
44    </div>
45  );
46}

1// src/hooks/use-feature-flags.ts
2"use client";
3
4import { createContext, useContext, useEffect, useState } from "react";
5
6interface FeatureFlagsContextType {
7  flags: Record<string, boolean>;
8  isEnabled: (key: string) => boolean;
9  loading: boolean;
10}
11
12const FeatureFlagsContext = createContext<FeatureFlagsContextType>({
13  flags: {},
14  isEnabled: () => false,
15  loading: true,
16});
17
18export function FeatureFlagsProvider({
19  children,
20}: {
21  children: React.ReactNode;
22}) {
23  const [flags, setFlags] = useState<Record<string, boolean>>({});
24  const [loading, setLoading] = useState(true);
25
26  useEffect(() => {
27    fetch("/api/v1/feature-flags")
28      .then((res) => res.json())
29      .then((data) => {
30        setFlags(data.flags);
31        setLoading(false);
32      });
33  }, []);
34
35  const isEnabled = (key: string) => flags[key] ?? false;
36
37  return (
38    <FeatureFlagsContext.Provider value={{ flags, isEnabled, loading }}>
39      {children}
40    </FeatureFlagsContext.Provider>
41  );
42}
43
44export function useFeatureFlags() {
45  return useContext(FeatureFlagsContext);
46}
47
48export function useFeatureFlag(key: string) {
49  const { isEnabled, loading } = useFeatureFlags();
50  return { enabled: isEnabled(key), loading };
51}
52
53// Usage in components
54"use client";
55
56import { useFeatureFlag } from "@/hooks/use-feature-flags";
57
58export function NewFeature() {
59  const { enabled, loading } = useFeatureFlag("new-feature");
60
61  if (loading) return null;
62  if (!enabled) return null;
63
64  return (
65    <div className="bg-success/10 p-4 border border-border">
66      <h3>New Feature Available!</h3>
67      {/* Feature content */}
68    </div>
69  );
70}

1// POST /api/admin/feature-flags
2export async function POST(req: Request) {
3  const session = await auth();
4  if (session?.user?.role !== "admin") {
5    return Response.json({ error: "Forbidden" }, { status: 403 });
6  }
7
8  const { key, name, description, enabled, percentage, userIds, plans } = await req.json();
9
10  const flag = await prisma.featureFlag.create({
11    data: {
12      key,
13      name,
14      description,
15      enabled: enabled ?? false,
16      percentage: percentage ?? 100,
17      userIds: userIds ?? [],
18      plans: plans ?? [],
19    },
20  });
21
22  return Response.json({ flag });
23}
24
25// PATCH /api/admin/feature-flags/:id
26export async function PATCH(
27  req: Request,
28  { params }: { params: { id: string } }
29) {
30  const session = await auth();
31  if (session?.user?.role !== "admin") {
32    return Response.json({ error: "Forbidden" }, { status: 403 });
33  }
34
35  const updates = await req.json();
36
37  const flag = await prisma.featureFlag.update({
38    where: { id: params.id },
39    data: updates,
40  });
41
42  return Response.json({ flag });
43}
44
45// Quick toggle endpoint
46// POST /api/admin/feature-flags/:key/toggle
47export async function POST(
48  req: Request,
49  { params }: { params: { key: string } }
50) {
51  const flag = await prisma.featureFlag.findUnique({
52    where: { key: params.key },
53  });
54
55  if (!flag) {
56    return Response.json({ error: "Flag not found" }, { status: 404 });
57  }
58
59  const updated = await prisma.featureFlag.update({
60    where: { key: params.key },
61    data: { enabled: !flag.enabled },
62  });
63
64  return Response.json({ flag: updated });
65}