<h2>The Problem</h2>
<p>Most authentication systems focus on keeping unauthorized users out. But they do nothing to stop someone from creating multiple fake accounts with different emails. By the time you detect fraud, the damage is done.</p>
<p>I wanted to flip the approach: prevent fraudulent accounts at registration, not after. If you could verify that each account belongs to a unique real person, the whole problem changes.</p>
<h2>What I Built</h2>
<p><a href="https://www.face-guardian.com/">Face Guardian</a> uses facial recognition combined with device fingerprinting to verify identity at registration. The system stores face descriptors (not images) for privacy, detects spoofing attempts like photo replays, and integrates via OAuth so other apps can use it easily.</p>
<p>I also published it as an <a href="https://www.npmjs.com/package/face-guardian">npm package</a> so developers can integrate facial authentication into their own projects.</p>
<p><img src="/assets/project/facial-authentication/system.jpeg" alt="Face Guardian System"></p>
<h2>The Journey</h2>
<p>The facial recognition uses the Histogram of Oriented Gradients algorithm through the <a href="http://dlib.net/">dlib</a> library, wrapped by <a href="https://github.com/justadudewhohacks/face-api.js">face-api.js</a> for browser compatibility. The tricky part was making it work reliably in browsers with varying webcam quality and lighting conditions.</p>
<h3>Tech Stack</h3>
<table>
<thead>
<tr>
<th>Layer</th>
<th>Technology</th>
<th>Why I Chose It</th>
</tr>
</thead>
<tbody>
<tr>
<td>Frontend</td>
<td><a href="https://nextjs.org/">Next.js</a></td>
<td>React with SSR</td>
</tr>
<tr>
<td>Face Detection</td>
<td><a href="https://github.com/justadudewhohacks/face-api.js">face-api.js</a></td>
<td>TensorFlow.js based, runs in browser</td>
</tr>
<tr>
<td>Auth Protocol</td>
<td><a href="https://oauth.net/2/">OAuth 2.0</a></td>
<td>Standard protocol for integration</td>
</tr>
<tr>
<td>Fingerprinting</td>
<td><a href="https://fingerprint.com/">FingerprintJS</a></td>
<td>Device identification</td>
</tr>
<tr>
<td>Hosting</td>
<td><a href="https://vercel.com/">Vercel</a></td>
<td>Easy deploys with edge functions</td>
</tr>
</tbody>
</table>
<pre><code>flowchart LR
    subgraph Registration["Registration Flow"]
        R1[User] -->|"captures face"| R2[Webcam]
        R2 -->|"image"| R3[face-api.js]
        R3 -->|"128-dim vector"| R4[(Store Descriptor)]
    end

    subgraph Authentication["Authentication Flow"]
        A1[User] -->|"captures face"| A2[Webcam]
        A2 -->|"image"| A3[face-api.js]
        A3 -->|"descriptor"| A4{Compare}
        A4 -->|"distance &#x3C; 0.6"| A5[OAuth Token]
        A4 -->|"distance >= 0.6"| A6[Reject]
    end
</code></pre>
<h2>What Building This Taught Me</h2>
<h3>1. Privacy by design changes everything</h3>
<p>Storing face descriptors instead of actual images was a deliberate choice. Users are more comfortable when they understand their photos aren't saved anywhere. This also reduced storage costs and simplified GDPR compliance.</p>
<pre><code>// What gets stored (128-dimensional vector)
const faceDescriptor = Float32Array(128)
// NOT the actual image

// Comparison uses Euclidean distance
const distance = faceapi.euclideanDistance(descriptor1, descriptor2)
const isMatch = distance &#x3C; 0.6 // threshold
</code></pre>
<p>Resources on face embeddings:</p>
<ul>
<li><a href="https://arxiv.org/abs/1503.03832">FaceNet Paper</a> explaining face descriptors</li>
<li><a href="https://github.com/justadudewhohacks/face-api.js">face-api.js Documentation</a></li>
</ul>
<h3>2. Anti spoofing is harder than recognition</h3>
<p>Getting the AI to recognize a face is straightforward. Detecting whether that face is a real person or a photo held up to the camera? Much harder.</p>
<p>I implemented smile detection as a liveness check. The user has to smile during capture, which is difficult to fake with a static photo.</p>
<pre><code>// Liveness check: detect smile
const expressions = detection.expressions
const isSmiling = expressions.happy > 0.7

if (!isSmiling) {
  throw new Error('Please smile to verify liveness')
}
</code></pre>
<p>Resources on anti spoofing:</p>
<ul>
<li><a href="https://arxiv.org/abs/2004.12100">Liveness Detection Techniques</a></li>
<li><a href="https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html">OWASP Biometric Guidelines</a></li>
</ul>
<h3>3. Lighting kills accuracy</h3>
<p>The system works great in good lighting. In dim rooms or with backlighting, accuracy drops significantly. I spent a lot of time on preprocessing to normalize images, but there's only so much you can do when the input is bad.</p>
<h3>4. OAuth is worth the complexity</h3>
<p>Building proper <a href="https://oauth.net/2/">OAuth 2.0</a> support took extra time upfront, but it made integration so much easier for other developers. The npm package wouldn't be useful without standardized auth flows.</p>
<pre><code>// Simple integration with the npm package
import { FaceGuardian } from 'face-guardian'

const guardian = new FaceGuardian({
  clientId: 'your-client-id',
  redirectUri: 'https://yourapp.com/callback',
})

// Start authentication
await guardian.authenticate()
</code></pre>
<h2>Testing Results</h2>
<p>The system blocked 100% of image replay attacks in security testing. Usability testing showed high satisfaction with the registration flow, though error messages needed work. Users got confused when facial recognition failed and didn't know why.</p>
<h2>The Bigger Realization</h2>
<p>Building Face Guardian taught me that security and user experience are often in tension, but they don't have to be enemies. The best security is invisible security. Users shouldn't have to think about it.</p>
<h2>What I'd Do Differently</h2>
<p>Add better user guidance during capture. Real time feedback like "move closer" or "find better lighting" would prevent most failed attempts and reduce frustration.</p>
<h2>References</h2>
<ul>
<li><a href="https://github.com/justadudewhohacks/face-api.js">face-api.js GitHub</a></li>
<li><a href="https://oauth.net/2/">OAuth 2.0 Specification</a></li>
<li><a href="https://www.tensorflow.org/js">TensorFlow.js</a></li>
<li><a href="https://arxiv.org/abs/1503.03832">FaceNet Paper</a></li>
<li><a href="https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html">OWASP Authentication Cheat Sheet</a></li>
</ul>
<h2>Links</h2>
<ul>
<li><strong>Website:</strong> <a href="https://www.face-guardian.com/">face-guardian.com</a></li>
<li><strong>npm:</strong> <a href="https://www.npmjs.com/package/face-guardian">face-guardian</a></li>
<li><strong>GitHub:</strong> <a href="https://github.com/Cyvid7-Darus10/face-guardian">face-guardian</a></li>
</ul>


Projects.

Face Guardian: Facial Recognition Authentication System