Skip to main content

Feature Flags

This document describes how to use PostHog feature flags in the CivStart application.

Sign-In Button Feature Flag​

Overview​

The sign-in buttons on the landing page are controlled by a PostHog feature flag named show-sign-in-button. This allows you to toggle the visibility of all sign-in/sign-up buttons on the marketing landing page without deploying code.

Feature Flag Name​

show-sign-in-button

Current Configuration​

  • Default State: OFF (false)
  • Controlled Elements:
    • Header sign-in/sign-up buttons (line 312-335 in app/page.tsx)
    • Hero section CTAs (line 374-392 in app/page.tsx)
    • Pricing section CTAs (line 1030-1049 in app/page.tsx)
    • Final CTA section buttons (line 1114-1133 in app/page.tsx)

How to Configure in PostHog​

  1. Log into your PostHog dashboard
  2. Navigate to Feature Flags
  3. Create or find the feature flag named show-sign-in-button
  4. Set the rollout percentage:
    • 0% = Sign-in buttons hidden (production default)
    • 100% = Sign-in buttons visible
  5. You can also target specific users or user groups

Implementation Details​

The feature flag is implemented using:

  • Custom Hook: /hooks/useFeatureFlag.ts

    • Provides a React hook that subscribes to PostHog feature flag changes
    • Returns a boolean indicating if the flag is enabled

  • PostHog Provider: /components/PostHogProvider.tsx

    • Wraps the app with PostHog React context
    • Enables feature flag hooks throughout the application

Usage Example​

import { useFeatureFlag } from "@/hooks/useFeatureFlag";

export default function MyComponent() {
  const showSignIn = useFeatureFlag("show-sign-in-button");

  return (
    <>
      {showSignIn && (
        <SignInButton mode="modal">
          <Button>Sign In</Button>
        </SignInButton>
      )}
    </>
  );
}

Adding New Feature Flags​

To add a new feature flag:

  1. Use the useFeatureFlag hook in your component
  2. Pass the feature flag key as a parameter
  3. Wrap the feature-flagged content with conditional rendering
  4. Create the corresponding flag in PostHog dashboard
const myNewFeature = useFeatureFlag("my-new-feature-key");

return <>{myNewFeature && <MyNewFeature />}</>;

Testing​

To test feature flags locally:

  1. Ensure NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST are set in .env.local
  2. Start the development server: pnpm dev:frontend
  3. Configure the feature flag in your PostHog project
  4. The flag state will update in real-time in your local environment

Notes​

  • Feature flags are evaluated client-side
  • Flags are cached by PostHog for performance
  • Flag changes may take a few seconds to propagate to all clients
  • The hook automatically subscribes to flag updates via PostHog's onFeatureFlags callback