Cotter (Stytch)
Connect Cotter with Webflow to add passwordless authentication using magic links, OTPs, and biometric login without backend code.
How to integrate Cotter with Webflow
Cotter connects to Webflow through custom code embeds and API integration. This approach gives you direct control over authentication flows and user experience without relying on third-party middleware or automation tools.
The code embed method works well for rapid deployment of login forms, password reset flows, and member-only content. Marketing teams can launch authenticated experiences using Cotter's dashboard configuration and Webflow's custom code features. For more complex requirements like role-based access control or custom user attribute management, the API integration path provides programmatic control over authentication events and token validation.
Both platforms maintain detailed documentation: Cotter's official documentation covers SDK implementation and API endpoints, while Webflow's custom code guide explains where and how to add authentication scripts to your site.
Native features, direct embeds and widgets
Webflow's custom code feature accepts Cotter's JavaScript SDK directly through code embed elements or site-wide script injection. This method requires no external servers or backend infrastructure.
The setup process involves adding a section element to your Webflow page, assigning it the ID cotter-form-container, then pasting Cotter's SDK initialization code into your page settings. The login form renders automatically inside your designated container.
What this method enables:
- Magic link authentication via the Cotter HTML quickstart sends one-time login links to user email addresses
- SMS one-time passcodes deliver verification codes to phone numbers without password storage
- Social authentication through Google and Facebook OAuth flows managed by Cotter's infrastructure
- Form customization through Cotter's dashboard where you modify colors, text, and branding without touching code
- Session management using localStorage tokens that persist across page visits
Implementation considerations: According to Webflow's custom code documentation, importing conflicting JavaScript libraries can cause compatibility issues. Test your authentication flow thoroughly in Webflow's preview mode before publishing.
The custom code feature is available in all paid Webflow plans. You can add code through three locations: code embed elements for page-specific implementation, site-wide <head> tags for global SDK initialization, or before </body> tags for deferred script loading. Webflow's custom code limits allow up to 50,000 characters across all custom code areas combined.
Rate limit constraints: Cotter enforces strict rate limits of 10 requests per IP address within 5-minute windows. High-traffic sites may hit these limits during login surges, requiring careful error handling in your implementation.
Build with Webflow and Cotter APIs
API integration provides programmatic control over authentication flows, token validation, and user data synchronization. This path suits developers building custom authentication logic or connecting Cotter to external databases and services.
Cotter's REST APIs use OAuth 2.0 standards and issue JWT tokens for authorization. According to Cotter's authentication documentation, access tokens expire after 1 hour while refresh tokens last 30 days. Your implementation must handle token refresh automatically to maintain user sessions.
The API integration pattern works alongside Webflow's custom code feature. You initialize Cotter's SDK in the browser, capture authentication events through JavaScript callbacks, then verify tokens server-side through API calls. This approach separates client-side authentication UI from server-side verification logic.
Core API capabilities:
- Token verification through the OAuth Tokens API validates JWT tokens from serverless functions
- Event webhooks deliver authentication events to your endpoint using the Event Object structure
- User identification returns user IDs, email addresses, phone numbers, and authentication timestamps
- Session tracking provides login method, IP address, location data, and approval status
Verifying authentication tokens
Your server-side code validates Cotter tokens before granting access to protected resources. This pattern prevents token forgery and ensures only authenticated users access restricted content.
The OAuth Tokens API accepts POST requests with JWT tokens from client browsers. The API returns user information if the token is valid, or error codes if expired or tampered. Implement this verification in serverless functions or external backend services that communicate with Webflow.
According Cotter's SDK reference, the JavaScript SDK provides onSuccess callbacks that fire when users complete authentication. Capture the access token from this callback, send it to your verification endpoint, then redirect users based on verification results.
Token verification flow:
- User completes authentication in Cotter's form
- JavaScript callback receives access token and ID token
- Client sends token to your serverless function or backend
- Verification API confirms token validity and returns user data
- Your code grants or denies access based on verification response
Implementation note: Webflow's developer documentation enforces 30-second CPU time limits on serverless functions. Token verification calls must complete within this window to avoid timeout errors.
Processing authentication webhooks
Cotter sends authentication events to your webhook endpoint whenever users log in. This enables real-time synchronization between Cotter and external databases or user management systems.
The Event Object documentation specifies webhook payload structure including user IDs, timestamps, authentication methods, and approval status. Configure webhook URLs through Cotter's dashboard to receive these events.
Webhook payload fields:
- user_id: Cotter's internal user identifier
- client_user_id: Your application's user reference for cross-system matching
- event: Event type (LOGIN_WITH_DEVICE for authentication)
- timestamp: When authentication occurred
- approved: Boolean indicating successful authentication
- new: Boolean identifying first-time user registrations
- ip and location: User context data
Use case example: When a user logs in for the first time ("new": true), your webhook handler creates a corresponding record in your CRM or analytics platform. Subsequent logins ("new": false) update last login timestamps and track user activity patterns.
Technical constraints: Webflow enforces CORS policies that block client-side API calls to external domains. Route webhook processing through server-side proxies or external services rather than calling APIs directly from browser JavaScript.
What you can build
Integrating Cotter with Webflow lets you create authenticated web experiences without backend development infrastructure.
- Members-only content platforms: Build a blog or resource library where users authenticate via magic links to access premium articles, video courses, or downloadable templates gated behind login forms
- Event registration systems: Create RSVP pages that verify attendee identity through email or SMS authentication, then display personalized event details, tickets, or access instructions
- Client portals: Design secure customer dashboards where clients log in to view project status, download deliverables, or access private documentation specific to their account
- Beta program landing pages: Launch product waitlists where interested users authenticate to join early access programs, receive updates, and access exclusive content as you release new features
Frequently asked questions
No, Cotter does not offer a native marketplace app in Webflow's app directory. Integration happens through custom code embeds that load Cotter's JavaScript SDK directly in your Webflow pages.
According to Webflow's official integrations page, Cotter is listed as a supported integration partner, but implementation requires using Webflow's custom code features rather than installing a pre-built app. You add code embed elements to your pages or insert Cotter's SDK initialization scripts in site-wide custom code sections.
This approach provides more control over authentication UI and behavior compared to marketplace apps, but requires basic understanding of HTML element IDs and JavaScript placement. Cotter's official documentation provides complete setup instructions.
Webflow CMS imposes significant constraints on user data storage that limit its use for authentication records. According to Webflow's form submissions documentation, sites have a 100 GB storage cap that cannot be increased, with a 10,000 item limit across all CMS collections.
Additional restrictions from Webflow's developer limits include 60 MB maximum per Rich Text field and strict character limits on text fields. These constraints make Webflow CMS unsuitable for storing user authentication metadata, session history, or detailed profile information.
Store user records in external databases instead. Use Cotter's webhook events to sync authentication data to services like Airtable, PostgreSQL, or dedicated user management platforms. Reference user IDs from these external systems in your Webflow pages through API calls or embedded content.
Mobile implementations require HTTPS for proper functionality. Cotter's troubleshooting guide identifies that missing TLS certificates cause mobile Safari to block localStorage and IndexedDB access, breaking session persistence.
Ensure your custom domain uses SSL certificates before testing authentication flows on mobile devices. Webflow provides automatic SSL for all published sites, but preview links may encounter certificate issues depending on your setup.
iOS devices present additional challenges with passive event listeners. Cotter's
onSuccesscallbacks may fail to execute on some iOS versions according to the same troubleshooting documentation. Test authentication completion handlers across multiple iOS versions and implement fallback detection mechanisms that poll for token presence rather than relying solely on callback execution.Both Cotter and Webflow maintain PCI DSS SAQ A compliance through third-party payment processor delegation. According to Webflow's Security Whitepaper, Webflow defers payment processing to Stripe and is not itself PCI-scoped.
This architecture means authentication through Cotter operates separately from payment collection. If you're building e-commerce experiences, connect payment processors like Stripe directly rather than routing payment data through Cotter or Webflow infrastructure. User authentication verifies identity, but payment card data must flow through PCI-compliant payment gateways.
Cotter was acquired by Stytch and now operates as part of their authentication infrastructure. Existing Cotter implementations continue functioning through their original API endpoints and SDK references. Current integration guides and code examples remain valid, but check Stytch's migration documentation for long-term support plans. The acquisition brings enterprise-grade infrastructure backing but may introduce future API changes or feature consolidation as platforms merge.
Description
Cotter is a passwordless authentication service that provides magic links, one-time passcodes, and WebAuthn biometric authentication through developer SDKs.
This integration page is provided for informational and convenience purposes only.
Firebase Authentication
Connect Firebase Authentication with Webflow to add secure user login, including email/password, Google, and Facebook sign-in, without managing backend infrastructure.
Descope
Connect Descope, a drag-and-drop auth platform, with Webflow to add secure authentication, enabling passwordless login, social sign-in, multi-factor authentication, and role-based access control without writing backend code.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
