AuthCard

Description

A fully functional authentication card for Framer that handles real user sign-in and registration out of the box. Connect your backend in the property panel and you're live.

Three auth methods, one component: Magic Link, Google OAuth, and Password — all switchable from the Framer properties panel. Show all three or just the ones you need.

Supports four backends:

• Supabase — magic links, password auth, and Google OAuth via your project URL + anon key

• Firebase — email sign-in links and password auth via your Web API key

• Custom Webhook — POST to any endpoint with structured action payloads

• UI Only — demo and prototype mode, no backend required

Everything you'd expect, already built:

• Email format validation

• Password strength check (min 8 characters)

• Per-field and form-level error messages

• Loading spinner states

• Success confirmation states

• Password show/hide toggle

• Enter key form submission

• Google OAuth redirect flow

• Post-login redirect URL support

• Terms & Privacy footer links

Fully customizable from the property panel: Accent color, background, border radius, heading font, body font, button labels, placeholder text, success messages — everything is a property. No code editing required.

Good for: Waitlists, SaaS apps, membership sites, client projects, Framer templates, any site that needs real authentication.