Sloth Auth

Session Secured Screen
Error Screen
Vault Screen
Activity Screen
Agent Screen
Creating an Agent Screen

From 3D Dreams to Reality: My SlothAuth Journey A Story of Perseverance, Failure, and Last-Minute Survival The Beginning: When Ambition Met Reality The idea started simply: to build a browser extension combining Auth0 authentication and AI proxies, all wrapped in a cute sloth character that users would enjoy interacting with. What I didn't anticipate was the sheer number of technical challenges I would face and how many times I would fall before reaching the top.

I named it SlothAuth: "Your cute AI assistant, the sloth, for secure Auth0 authentication." The vision was clear. The execution? That was a whole other story.

The 3D Disaster: When Big Dreams Shattered My initial approach was ambitious, perhaps too ambitious. I decided to include a 3D model of the sloth using Three.js and React Three Fiber. I spent days researching, configuring, and importing a .glb model file. The concept was perfect: a cute, animated 3D sloth that waved to and interacted with users. But reality was different. The 3D model added 89 MB to the add-on package. 89 MB for a browser pop-up is unacceptable, not to mention its negative impact on users' browser performance. When I tried wrapping it for Firefox, the file size was so large that the distribution systems rejected it outright.

I tried optimizing it, compressing it, and experimenting with different formats, but to no avail. The 3D sloth remained a beautiful but impossible dream.

A practical solution: Finding a working alternative After abandoning the 3D model idea, I turned to a more practical solution: a particle-based animation system. Instead of a full 3D model, I created a drawing board-based particle system that renders the sloth's faces—cheerful little animated dots that float and interact without the burden of heavy 3D processing.

This was the solution:

Lightweight: The package size was reduced from 89 MB to less than 500 KB High performance: Smooth animations at 60 frames per second on any modern browser Characteristic: The molecular sloth faces retained the fun I wanted Sometimes the best solution isn't the most impressive, it's the one that actually works.

Firefox Challenge: The Nightmare of Deployment With the code working perfectly locally, I thought deployment would be easy. I was wrong.

My first attempt to submit to Firefox add-ons failed due to mysterious errors related to the manifest file properties. Then came the ID requirement—the Firefox 3 manifest file requires a specific add-on ID format. Every fix led to another error. It was like a game of "hit the mole" with validation rules.

The specific errors I encountered:

"Unsupported manifest property '/background/service_worker' was used without the property '/background/scripts'" "Plug ID required in manifest version 3 and above" After several attempts to rebuild the file and correct the manifest, I failed the verification. But this experience taught me a valuable lesson: developing browser extensions isn't just about writing good code; it's also about understanding the requirements of each individual platform.

The Father's Influence: When Life Derailed My Programming Path Perhaps the biggest challenge wasn't technical at all, but personal.

My father had clear expectations: focus on my studies and don't get involved in side projects. But SlothAuth completely consumed me. I was working late into the night, sacrificing study time, trying to see what this extension could become.

The day before the hackathon ended, my father discovered what I was doing. His response was swift and decisive: he took the router away. No Wi-Fi, no research, and not even a last-minute coding attempt.

I had only a few hours left before the application deadline, and I was cut off from the world.

Negotiation: Convincing a Skeptical Parent What followed was perhaps the most important pitch of my life—not to investors or judges, but to my dad.

I explained what I had created: a real product that helps people securely manage their authentication tokens. I showed him the code, the functionality, and the user interface. I described the problem it solves and how it can be useful to others.

Most importantly, I made a promise: this is the last time I'll put a project before my studies, but I just need a few hours to finish what I started.

Somehow—not through technical arguments or teenage rebellion, but through genuine communication—my dad agreed. He returned the router.

I had from 10 p.m. to 3 a.m. to get everything done.

Finish Line: Lessons Learned At 2:30 a.m., with tired eyes, I sent out SlothAuthV2. The Firefox compressed file was ready, the GitHub repository was ready, and the extension was complete enough to be displayed.

What I learned:

Realism is more important than perfection: Canvas's solution wasn't as impressive as a 3D solution, but it was effective.

Platforms have their own rules: Chrome and Firefox aren't just "browsers"; they're different development environments with their own requirements.

Communication is important: Whether with code or with people, clear explanations are essential.