Passwordless Signup & Login

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

The first step is to pick from over 200+ free components or start with an unstyled form. 

1. Log in to your Memberstack account.
2. Click Components on the side menu.
3. Select the Passwordless filter (or use the search tool).
4. 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.

1. In your project, create or open the signup page.
2. Paste the Memberstack component into the page.

6-digit code 

1. Select the element that holds the six-digit code; it's probably called Passwordless Step 2.
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

From Address

We can manually change the "from" email for you. Please fill out this form to kick off the email verification process.

Customizing text

You can customize the email message that Memberstack automatically sends out with the signup or login code.

1. Go to the Memberstack dashboard.
2. Click Settings > Emails.
3. Click Passwordless Login / Signup Email.

On the next page, edit the text in any of the fields and then click Save. The fields are:

• Reply-To-Email
• Subject
• Header
• Content
• Footer

Customizing design

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 

1. Click Settings > Design. 
2. Optionally, upload a new image and change the primary color.
3. Click Save in the top right corner of the page.

Pre-built Modals

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.

1. Go to the Memberstack dashboard and click Settings > Auth Providers > Configure.

2. Decide if you want passwordless to be the default option when launching the signup/login modal.
3. Switch on the Enable in Pre-built UI toggle.
4. Click Save.

Modal buttons

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. 

That's it.

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 data-ms-form="passwordless-signup".