> ## Documentation Index
> Fetch the complete documentation index at: https://stytch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Reference guides

> Developer reference guides for using Device Fingerprinting.

export const GatedFeatureFlagPrompt = ({header, description, ctaHref, ctaLabel, icon, featureFlag}) => {
  console.log(user);
  if (user?.featureFlags?.includes(featureFlag)) {
    return null;
  }
  return <div className="border border-gray-200 rounded-md p-4 flex flex-col justify-center items-center">
      <Icon icon={icon ?? "lock"} size={32} />
      <h3 className="text-lg font-bold mt-2 mb-0">{header ?? "You don't have access to this feature."}</h3>
      {description && <p className="text-sm text-gray-500">{description}</p>}
      <a href={ctaHref ?? "https://stytch.com/contact"}>{ctaLabel ?? "Contact us"}</a>
    </div>;
};

export const GatedLoginPrompt = ({header, description, redirectTo}) => {
  return <div className="border border-gray-200 rounded-md p-4 flex flex-col justify-center items-center">
      <Icon icon="lock" size={32} />
      <h3 className="text-lg font-bold mt-2 mb-0">{header ?? "Please log in to access this page."}</h3>
      <p className="text-sm text-gray-500 text-center">{description ?? "For security, this page is restricted to logged in users."}</p>
      <a href={`https://stytch.com/docs/login?redirect=${redirectTo}`}>Log in to Stytch</a>
    </div>;
};

export const ButtonLink = ({href, label}) => {
  return <a href={href} className="not-prose block w-fit px-4 py-1.5 mt-4 items-center text-sm font-medium inset-0 bg-primary-dark rounded-xl hover:opacity-[0.9]">
      <span className="z-10 text-white">{label}</span>
    </a>;
};

{!user.isLoggedIn && (
<>
<GatedLoginPrompt
  header="Log in to access the developer reference guides."
  description="For security, this content is restricted to current Device Fingerprinting customers."
  redirectTo="/fraud-risk/development/overview"
/>

<h2>Preview</h2>

<Columns cols={2}>
  <Card title="Custom domains configuration" icon="lock">
    Configure custom domains to reduce ad-blocker or privacy interference.
  </Card>
  
  <Card title="Testing your integration" icon="lock">
    How to handle edge cases and error behavior.
  </Card>

  <Card title="Warning flags (verdict reasons)" icon="lock">
    Verdict reasons, their default action, and an explanation of what each one means.
  </Card>

  <Card title="Raw signals" icon="lock">
    Reference of raw device attributes recorded by Device Fingerprinting.
  </Card>
</Columns>
</>
)}

{user.isLoggedIn && !user.featureFlags?.includes("device-fingerprinting-enabled") && (
<>
<GatedFeatureFlagPrompt
  header="Interested in Device Fingerprinting?"
  description="Add fraud protection to your auth stack with advanced device fingerprinting that goes beyond CAPTCHA and WAF."
  ctaHref="https://offers.stytch.com/dfp-30-day-trial?utm_source=stytch_docs&utm_medium=direct&utm_content=dfp_30_day_trial"
  ctaLabel="Get started"
  featureFlag="device-fingerprinting-enabled"
  icon="fingerprint"
/>

<h2>Preview</h2>
<p>For security, this content is restricted to current Device Fingerprinting customers.</p>

<Columns cols={2}>
  <Card title="Custom domains configuration" icon="lock">
    Configure custom domains to reduce ad-blocker or privacy interference.
  </Card>
  
  <Card title="Testing your integration" icon="lock">
    How to handle edge cases and error behavior.
  </Card>

  <Card title="Warning flags (verdict reasons)" icon="lock">
    Verdict reasons, their default action, and an explanation of what each one means.
  </Card>

  <Card title="Raw signals" icon="lock">
    Reference of raw device attributes recorded by Device Fingerprinting.
  </Card>
</Columns>
</>
)}

{user.featureFlags?.includes("device-fingerprinting-enabled") && (
<Columns cols={2}>
  <Card title="Custom domains configuration" href="/fraud-risk/development/custom-domains" icon="arrow-up-right">
    Configure custom domains to reduce ad-blocker or privacy interference.
  </Card>
  
  <Card title="Testing your integration" href="/fraud-risk/development/test-integration" icon="arrow-up-right">
    How to handle edge cases and error behavior.
  </Card>

  <Card title="Warning flags (verdict reasons)" href="/fraud-risk/development/warning-flags" icon="arrow-up-right">
    Verdict reasons, their default action, and an explanation of what each one means.
  </Card>

  <Card title="Raw signals" href="/fraud-risk/development/raw-signals" icon="arrow-up-right">
    Reference of raw device attributes recorded by Device Fingerprinting.
  </Card>
</Columns>
)}