Built with Framer
Gated File Upload Form | Framer + Supabase Integration
Ahmed Alsayed
The Challenge
An accounting firm needed a secure file upload system on their website, but had a problem: spammers were abusing the upload form, and there was no way to verify whether a user was actually a client before granting access.
The client had already attempted to solve this themselves. They built a Framer component with four variants (default, verified, not verified, and a verify-code fallback) and tried using ChatGPT to generate the code for email verification. When that didn't work, they pivoted to an email-based code verification flow. Neither approach could get the variant switching to function correctly.
The Solution
I built a custom Framer code component that gates the file upload behind a multi-step verification process:
Email Validation Against Supabase
When a user enters their email, the component queries Supabase in real-time to check whether that email belongs to an existing client. If the email is found, the form transitions to the verified state and the file upload becomes accessible. If not, the user is prompted to enter their details for verification.
US-Only Location Detection
Since the accounting firm exclusively serves US-based clients, I added a geolocation check as an additional gating layer. The component detects the user's location and restricts access to US-based visitors only, filtering out international spam before the email check even begins.
Variant Switching Logic
The core issue the client couldn't crack was getting Framer's component variants to switch programmatically based on async validation results. I built the state management from scratch in the custom code component, handling the transitions between all four states (default, verifying, verified, and not verified) with proper loading states and error handling.
The gated upload form live on the accounting firm's website
The Result
The client received a fully functional gated upload system that:
Verifies client identity against their existing database before granting upload access
Blocks non-US visitors automatically via location detection
Eliminates spam uploads entirely
Handles edge cases like network errors and invalid email formats gracefully
The implementation hit one snag during deployment, which I resolved quickly. The client noted that I "thoroughly understood the requirements and was very prompt in delivery," and expressed interest in future collaboration.
Client Testimonial
"Ahmed was extremely helpful in assisting me with creating a process to gate a form on a website. This form is designed to expedite the file upload process for an accounting firm. He thoroughly understood my requirements and was very prompt in his delivery. Although we encountered an issue when implementing the code, he resolved it quickly. I would definitely collaborate with Ahmed again in the future." — Randall Gross, Rocket Digital Marketing
Like this project
Posted Jun 17, 2026
Built a custom Framer code component that gates a file upload form behind email validation via Supabase and US-only geolocation detection
Likes
1
Views
0
Clients
Rocket Digital Marketing
