Magic
Add passwordless authentication and Web3 wallet capabilities to your Webflow membership sites.
How to integrate Magic with Webflow
Magic integrates with Webflow through custom code and Magic's JavaScript SDK. You can implement passwordless authentication, manage user sessions, and control content access without building backend infrastructure.
This integration works through Webflow's native Code Embed elements for adding authentication interfaces, or through API connections for automated user synchronization between Magic and the Webflow CMS.
Native code embeds and Magic JavaScript SDK
Webflow's Code Embed elements let you add Magic's JavaScript SDK directly to your site. You can implement Magic at three levels:
- Site-wide through Site settings > Custom Code for global authentication
- Page-specific through Page Settings for targeted login pages
- Element-level using drag-and-drop Code Embed components for reusable login forms
Here’s how to set up this integration.
Add the JavaScript SDK to your site's head section through Site settings > Custom Code. Then use Code Embed elements to add Magic's authentication forms to your pages.
Implement session handling in footer code to track login status across your site. Finally, connect authenticated users to Webflow CMS records for content access control.
This method works for most authentication needs without server configuration.
Webflow has no native login system, so you handle all session management, token storage, and user state yourself. Custom form actions bypass Webflow's native form processing, which means you need to implement submission handling manually.
Build with Webflow and Magic APIs
Webflow's Data API combined with Magic's Authentication API enables automated user provisioning, real-time content access updates, and webhook-driven workflows. Use this approach for projects that need server-side logic, automated CMS synchronization, or integration with other backend services.
Passwordless authentication with Magic Link
Magic Link authentication sends users a one-time login link via email. Call magic.auth.loginWithMagicLink() with a user's email address, which returns a DID (Decentralized Identifier) token valid for 15 minutes by default. This token verifies user identity for API calls to Webflow's CMS.
After set up, your authentication flow works like this:
- The user enters their email in your Webflow form
- Your server calls Magic's login endpoint
- Magic sends the authentication email
- The user clicks the link
- Your server receives the DID token
- You create or update the user's record in Webflow CMS using the Collection Items endpoint
For one-time password codes instead of magic links, use magic.auth.loginWithEmailOTP().
Webhook-driven user synchronization
Webhooks keep Webflow CMS records synchronized with Magic authentication events. Configure webhooks through the Webhooks API to listen for events like form_submission when users sign up, or collection_item_created when you add new members.
Webflow's webhook documentation confirms webhook requests include HMAC SHA-256 signatures in the x-webflow-signature header for security validation. Your server verifies these signatures, processes the webhook payload, and updates Magic user records.
Some common webhook patterns include triggering Magic account creation when the form_submission webhook fires, updating user permissions when CMS records change, and refreshing cached user access rules when the site_publish event occurs.
What you can build
Integrating Magic with Webflow supports passwordless authentication flows, Web3-enabled membership sites, and secure content access systems.
- Passwordless membership sites: Build a subscription blog where readers log in via email magic links, access premium articles stored in Webflow CMS, and manage their profiles without passwords.
- NFT-gated content platforms: Create an art portfolio site where collectors connect blockchain-based digital wallets through Magic's embedded wallet, verify NFT ownership, and view exclusive content based on their blockchain holdings.
- Secure client portals: Design a consulting firm's client portal with magic link authentication, personalized dashboard pages pulling data from Webflow CMS, and document downloads restricted to authenticated users.
- Token-based course platforms: Build an online learning site where students purchase course access via blockchain tokens, authenticate through Magic's embedded wallet, and progress through lesson pages managed in Webflow CMS.
Frequently asked questions
Add the Magic JavaScript SDK to your Webflow site through Site settings > Custom Code > Head section, then use Code Embed elements to add authentication interfaces.
Add the SDK script tag, create a Code Embed element for the login form, and add session management code in the footer.
Add the Magic JavaScript SDK to your Webflow site through Site settings > Custom Code > Head section, then use Code Embed elements to add authentication interfaces.
Add the SDK script tag, create a Code Embed element for the login form, and add session management code in the footer.
Webflow has no native login system, so you need to implement content restrictions through custom JavaScript that checks authentication state. After a user authenticates with Magic, store their authentication token in browser session storage, then use JavaScript to show or hide content based on token presence.
For server-side content protection, use Webflow's Data API to fetch protected content only after validating the user's Magic DID token on your backend.
Webflow has no native login system, so you need to implement content restrictions through custom JavaScript that checks authentication state. After a user authenticates with Magic, store their authentication token in browser session storage, then use JavaScript to show or hide content based on token presence.
For server-side content protection, use Webflow's Data API to fetch protected content only after validating the user's Magic DID token on your backend.
Use Webflow's Data API to create or update CMS records after Magic authentication completes. After Magic returns a DID token, call the Collection Items endpoint with the user's email and profile data. You need the
cms:writeOAuth scope for creating records andcms:readfor fetching existing user data.The Webflow Data API reference documents the complete collection item structure, including required fields and field types.
Use Webflow's Data API to create or update CMS records after Magic authentication completes. After Magic returns a DID token, call the Collection Items endpoint with the user's email and profile data. You need the
cms:writeOAuth scope for creating records andcms:readfor fetching existing user data.The Webflow Data API reference documents the complete collection item structure, including required fields and field types.
Yes, configure webhooks through Webflow's API. Subscribe to events like
form_submissionfor new user signups orcollection_item_createdwhen adding members through the CMS. Webflow sends webhook requests with HMAC SHA-256 signatures in thex-webflow-signatureandx-webflow-timestampheaders. Validate these signatures on your server before processing the payload. Your webhook handler can then call Magic's authentication API to create accounts or send magic links based on CMS changes.Yes, configure webhooks through Webflow's API. Subscribe to events like
form_submissionfor new user signups orcollection_item_createdwhen adding members through the CMS. Webflow sends webhook requests with HMAC SHA-256 signatures in thex-webflow-signatureandx-webflow-timestampheaders. Validate these signatures on your server before processing the payload. Your webhook handler can then call Magic's authentication API to create accounts or send magic links based on CMS changes.
Description
Magic Labs provides Web3 wallet infrastructure and passwordless authentication services. The platform enables developers to implement email-based magic link authentication, one-time password codes, and blockchain wallet connections without managing private keys or building custom authentication systems.
This integration page is provided for informational and convenience purposes only.
Salesforce Authenticator
Extra security made easy with Salesforce two-factor authentication (2FA).
Microsoft Authenticator
With Authenticator, your phone provides an extra layer of security on top of your PIN or fingerprint
LastPass Authenticator
LastPass Authenticator offers a unique one-tap password verification experience.
LinkedIn is the world's largest professional networking platform with over 1 billion members. It offers business tools for recruitment, B2B marketing, content publishing, and professional development. Beyond networking, LinkedIn provides APIs for authentication, company data, job postings, and lead generation.
Google Authenticator
Google Authenticator generates single-use 2SV codes on Android or Apple mobile devices
Authy
Go beyond the password and protect yourself from hackers and account takeovers.
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.
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.
