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

# Selfie Check

> A low-assurance biometric credential using the device camera for liveness and facial similarity.

export const CredentialHero = ({title, description, image, bgColor = "#1a1a2e", issuerName, issuerHref, issuerVerified, status, id, sybilResistance, sybilResistanceDescription, validityPeriod, sourceCodeHref}) => {
  return <div className="not-prose rounded-3xl bg-zinc-100 dark:bg-zinc-900">
      {}
      <div className="relative overflow-hidden rounded-t-3xl px-6 py-8 md:px-8 md:py-10" style={{
    backgroundColor: bgColor
  }}>
        <div className="flex items-center justify-between gap-6">
          <div className="min-w-0">
            <h2 className="m-0 text-2xl font-semibold text-white sm:text-3xl">
              {title}
            </h2>
            {description && <p className="m-0 mt-2 max-w-[420px] text-[15px] leading-relaxed text-white/75">
                {description}
              </p>}
          </div>
          {image && <img src={image} alt={title} className="hidden h-28 w-auto rounded-xl object-contain shadow-lg shadow-black/30 sm:block" />}
        </div>
      </div>

      {}
      <div>
        {issuerName && <div className="flex items-center gap-3 border-b border-zinc-200 px-6 py-3.5 text-[14px] md:px-8 dark:border-zinc-800">
            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-zinc-200/70 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
              <Icon icon="building" size={16} />
            </span>
            <span className="w-36 shrink-0 font-medium text-zinc-500 dark:text-zinc-400">
              Issued by
            </span>
            <span className="inline-flex items-center gap-1">
              {issuerVerified && <Tooltip tip="Verified issuer">
                  <span className="inline-flex items-center cursor-help" style={{
    height: "20px"
  }}>
                    <Icon icon="circle-check" iconType="solid" size={14} color="#3b82f6" />
                  </span>
                </Tooltip>}
              {issuerHref ? <a href={issuerHref} target="_blank" rel="noopener noreferrer" className="font-medium text-zinc-900 underline decoration-zinc-300 underline-offset-2 hover:decoration-zinc-500 dark:text-zinc-100 dark:decoration-zinc-600 dark:hover:decoration-zinc-400">
                  {issuerName}
                </a> : <span className="font-medium text-zinc-900 dark:text-zinc-100">
                  {issuerName}
                </span>}
            </span>
          </div>}
        {status && <div className="flex items-center gap-3 border-b border-zinc-200 px-6 py-3.5 text-[14px] md:px-8 dark:border-zinc-800">
            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-zinc-200/70 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
              <Icon icon="signal" size={16} />
            </span>
            <span className="w-36 shrink-0 font-medium text-zinc-500 dark:text-zinc-400">
              Status
            </span>
            {status === "active" && <span className="inline-flex items-center rounded-md bg-green-50 px-2 py-0.5 text-xs font-semibold text-green-700 ring-1 ring-green-600/20 ring-inset dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20">
                Active
              </span>}
            {status === "beta" && <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-0.5 text-xs font-semibold text-blue-700 ring-1 ring-blue-600/20 ring-inset dark:bg-blue-500/10 dark:text-blue-400 dark:ring-blue-500/20">
                Beta
              </span>}
            {status === "deprecated" && <span className="inline-flex items-center rounded-md bg-amber-50 px-2 py-0.5 text-xs font-semibold text-amber-700 ring-1 ring-amber-600/20 ring-inset dark:bg-amber-500/10 dark:text-amber-400 dark:ring-amber-500/20">
                Deprecated
              </span>}
          </div>}
        {id != null && <div className="flex items-center gap-3 border-b border-zinc-200 px-6 py-3.5 text-[14px] md:px-8 dark:border-zinc-800">
            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-zinc-200/70 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
              <Icon icon="hashtag" size={16} />
            </span>
            <span className="w-36 shrink-0 font-medium text-zinc-500 dark:text-zinc-400">
              ID
            </span>
            <span className="font-mono font-medium text-zinc-900 dark:text-zinc-100">
              {id}
            </span>
          </div>}
        {sybilResistance != null && <div className="flex items-center gap-3 border-b border-zinc-200 px-6 py-3.5 text-[14px] md:px-8 dark:border-zinc-800">
            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-zinc-200/70 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
              <Icon icon="shield-check" size={16} />
            </span>
            <span className="w-36 shrink-0 font-medium text-zinc-500 dark:text-zinc-400">
              Sybil resistance
            </span>
            {sybilResistance === "some" ? <span className="inline-flex items-center gap-1.5">
                <span className="inline-flex items-center rounded-md bg-amber-50 px-2 py-0.5 text-xs font-semibold text-amber-700 ring-1 ring-amber-600/20 ring-inset dark:bg-amber-500/10 dark:text-amber-400 dark:ring-amber-500/20">
                  Some
                </span>
                {sybilResistanceDescription && <Tooltip tip={sybilResistanceDescription}>
                    <span className="cursor-help text-zinc-400 dark:text-zinc-500">
                      <Icon icon="circle-info" size={14} />
                    </span>
                  </Tooltip>}
              </span> : sybilResistance ? <span className="inline-flex items-center gap-1.5">
                <span className="inline-flex items-center rounded-md bg-green-50 px-2 py-0.5 text-xs font-semibold text-green-700 ring-1 ring-green-600/20 ring-inset dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20">
                  Yes
                </span>
                {sybilResistanceDescription && <Tooltip tip={sybilResistanceDescription}>
                    <span className="cursor-help text-zinc-400 dark:text-zinc-500">
                      <Icon icon="circle-info" size={14} />
                    </span>
                  </Tooltip>}
              </span> : <span className="inline-flex items-center rounded-md bg-zinc-100 px-2 py-0.5 text-xs font-semibold text-zinc-500 ring-1 ring-zinc-500/20 ring-inset dark:bg-zinc-800 dark:text-zinc-400 dark:ring-zinc-500/20">
                No
              </span>}
          </div>}
        {validityPeriod && <div className="flex items-center gap-3 border-b border-zinc-200 px-6 py-3.5 text-[14px] md:px-8 dark:border-zinc-800">
            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-zinc-200/70 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
              <Icon icon="clock" size={16} />
            </span>
            <span className="w-36 shrink-0 font-medium text-zinc-500 dark:text-zinc-400">
              <span className="inline-flex items-center gap-1">
                Validity period
                <Tooltip tip="The default duration period of the credential. Generally the maximum recommended sybil resistance window.">
                  <span className="cursor-help text-zinc-400 dark:text-zinc-500">
                    <Icon icon="circle-info" size={12} />
                  </span>
                </Tooltip>
              </span>
            </span>
            <span className="font-medium text-zinc-900 dark:text-zinc-100">
              {validityPeriod}
            </span>
          </div>}
        {sourceCodeHref && <div className="flex items-center gap-3 px-6 py-3.5 text-[14px] md:px-8">
            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-zinc-200/70 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
              <Icon icon="code" size={16} />
            </span>
            <span className="w-36 shrink-0 font-medium text-zinc-500 dark:text-zinc-400">
              SDK Reference
            </span>
            {sourceCodeHref === "coming-soon" ? <span className="inline-flex items-center gap-1.5 rounded-md bg-blue-50 px-2 py-0.5 text-xs font-semibold text-blue-700 ring-1 ring-blue-600/20 ring-inset dark:bg-blue-500/10 dark:text-blue-400 dark:ring-blue-500/20">
                <Icon icon="lock" size={11} />
                Coming soon
              </span> : <a href={sourceCodeHref} target="_blank" rel="noopener noreferrer" className="font-medium text-zinc-900 underline decoration-zinc-300 underline-offset-2 hover:decoration-zinc-500 dark:text-zinc-100 dark:decoration-zinc-600 dark:hover:decoration-zinc-400">
                {sourceCodeHref.split("/").pop()}
              </a>}
          </div>}
      </div>

      {}
      <div className="h-2" />
    </div>;
};

<CredentialHero title="Selfie Check" description="A low-assurance biometric credential using the device camera for liveness and facial similarity." image="https://mintcdn.com/tfh/QHpGFAkngLwmGXwY/images/docs/id/issuers/11/thumbnail.png?fit=max&auto=format&n=QHpGFAkngLwmGXwY&q=85&s=90a8480ca13114d1bf773066e77b0813" bgColor="#1a3a4a" issuerName="Tools for Humanity" issuerHref="https://www.toolsforhumanity.com" issuerVerified={true} status="beta" id={11} sybilResistance="some" sybilResistanceDescription="Facial similarity checks provide some sybil resistance, but not as strong as Orb or NFC verification." validityPeriod="90 days" sourceCodeHref="coming-soon" width="690" height="440" data-path="images/docs/id/issuers/11/thumbnail.png" />

## Introduction

Selfie Check (Beta) utilizes the user’s mobile device camera to establish humanness (liveness) and provides a "Sybil score", a signal of similarity to ensure the user has not created an abnormal number of accounts on your platform.

Unlike the high-assurance Orb verification (Iris), Selfie Check focuses on frictionless, privacy-preserving onboarding.

Selfie Check (Beta) is useful for:

* **Liveness detection:** Confirming the user is a real person and not a spoof/injection attack.
* **Sybil resistance:** Preventing mass account creation via facial similarity checks.
* **Continuity:** Confirming the user returning to your app is the same person who originally enrolled.

## How it works

You will need to use IDKit to integrate Selfie Check (Beta) into your application.

* **On Mobile (iOS/Android):** You will use IDKit to generate a Deep Link and attach it to a "Verify" CTA in your app. When the user clicks on this CTA, they are automatically redirected to the World App to complete the Selfie Check (Beta) flow.
* **On Desktop:** You will use IDKit to generate a **QR Code** and display it to the user to complete verification. When the user scans the QR Code with their mobile device camera, World App will launch and guide them through completing the Selfie Check (Beta) flow.

## User Experience Flow

1. **Challenge:** The user initiates the flow on your app (Relying Party).
2. **Hand-off:** User is redirected to the World App. If the user doesn’t have the World App installed, they will be dropped into a seamless flow to download the World App and directly go into the Selfie Check (Beta) experience.
3. **Enrollment/Auth:**
   * **New User:** Prompts to "Take a selfie". The system performs a liveness check and a uniqueness check against other faces.
   * **Returning User:** Performs a quick Face Auth to verify continuity.
4. **Success:** User is returned to your application with a verified credential.

## Next steps

See [Web Integration Guide](/world-id/credentials#legacy-presets).