Interested in deploying passwordless signup and login pages on your Webflow site?
This article shows you how to integrate your custom Webflow passwordless signup and login forms with Memberstack.
To enable this nifty feature on your site, you'll need to use special components (see below). The standard login and signup components aren't compatible with the passwordless tool.
Custom Signup Form
Selecting a component
- Log in to your Memberstack account.
- Click Components on the side menu.
- Select the Passwordless filter (or use the search tool).
- Select a form that best fits your project.
- If you like the design, click the Copy Component button.
Pasting the component
Next, paste the component into your Webflow Signup page.
- In your project, create or open the signup page.
- Paste the Memberstack component into the page.
- Select the element that holds the six-digit code; it's probably called Passwordless Step 2.
- Set it to display none. Memberstack will automatically display the element when it's needed.
Custom Login Form
We're 50% finished with the required steps. Now add a passwordless Login component to your site. Simply follow the same workflow described above.
BTW - It's possible to offer both password and passwordless login options on a site. You could, for instance, have a separate page for each login type and then link to them using Webflow interactions.
Updating the Email
We can manually change the "from" email for you. Please fill out this form to kick off the email verification process.
You can customize the email message that Memberstack automatically sends out with the signup or login code.
- Go to the Memberstack dashboard.
- Click Settings > Emails.
- Click Passwordless Login / Signup Email.
On the next page, edit the text in any of the fields and then click Save. The fields are:
You can change the color scheme and logo that appears on Memberstack messages.
2. You can change the text and reply-to address of your email on the page. You can update the logo and colors on the
- Click Settings > Design.
- Optionally, upload a new image and change the primary color.
- Click Save in the top right corner of the page.
If you're using any of Memberstack's pre-built modals, you can quickly configure them to offer a passwordless signup and login option. Here's how.
- Go to the Memberstack dashboard and click Settings > Auth Providers > Configure.
- Decide if you want passwordless to be the default option when launching the signup/login modal.
- Switch on the Enable in Pre-built UI toggle.
- Click Save.
Next, open up your project, select any buttons that should open a modal, and update the custom attribute. It should read:
- Name: data-ms-modal
- Value: login or signup
- Publish the page and click the live modal. The modal gives users the option to log in with or without a password.
Now you know how to enable passwordless signup and login pages on your Webflow site.
Creating Members (Make, Zapier, Dashboard)
Passwords are required when creating a member outside of a passwordless signup form.
Meaning, we do not recommend using Make, Zapier, or the Dashboard to create members at this time.
That said, it is possible to randomly select/generate a password when creating a new member's account. Please note that this will prevent member's from easily setting their own password in the future and they will need to use a "forgot password" form to set a password.
If your site offers both password and passwordless forms, we even more strongly recommend NOT using Make, Zapier, or the Dashboard to create members.
We are working on a fix to make the password field optional in the dashboard and in the APIs (please leave a comment below if this feature is important to you).
Passwordless Login Attributes
data-ms-form="passwordless-login" on the form element.
data-ms-member="email" on the email input.
data-ms-member="token" on the 6-digit verification code input.
data-ms-passwordless="step-2" on a div around the 6-digit verification code input. This will only display if a valid email as been entered.
data-ms-passwordless-button="YOUR_TEXT" on the form submit button. The second half of the attribute (inside the "") will replace the button text once a valid email has been entered.
Passwordless Signup Attributes
The same as above with one exception. The form attribute is