Passwordless Forms

Interested in deploying passwordless signup and login pages on your Webflow site?

That's easy to do. 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.

Adding a Signup Component

Selecting a component

The first step is to select a Signup component.

1. Log in to your Memberstack account.
2. Click Components on the side menu.
3. Select the Passwordless filter (or use the search tool).

• Tip  Keep the Passwordless page open. You'll need it in a few minutes.

Memberstack has a growing number of passwordless components. Hover the mouse on one signup option and then click the Copy & Paste button to preview the component.

• If you like the design, click the Copy Component button. If not, click the Back button and select a different option.

Pasting the component

Next, paste the component into your Webflow Signup page.

1. Log in to your Webflow account.
2. Open the Signup page.
3. Paste the Memberstack component into the page.

Hiding an element

Optionally, you can hide one of the component's elements.

1. Select the element that holds the six-digit code; it's called Passwordless Step 2.

Adding a Login Component

We're 50% finished with the required steps. Now add a passwordless Login component to your site. Simply follow the same workflow described above.

1. Go back to the Memberstack Passwordless Components page.
2. Select and preview a Login component.
3. Click the Copy Component button.
4. Go back to your Webflow site and paste the Login component into the Login page.

• 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.

Publishing and Testing

Next, review and test the components on live pages.

1. Go to the Webflow canvas and click the Publish button and then Publish to Selected Domains.

2. Once published, click the Page Open icon.

3. Open the Signup page and enter an email address into the field.
4. Click the Get Confirmation Code button.

• Open the test email and copy the six-digit code. Paste the code into the confirmation field. Repeat the steps for the passwordless Login page.

Updating Email Design

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

Customizing text

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.

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.

Optional Modal Configuration

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. On the next page, switch on the Enable in Pre-built UI toggle.
3. Click Save.

• Option  Switch on the default toggle if you want to make passwordless the default option.

Next, open the Webflow page that has the modals. Select the Login modal and update the custom attribute. It should read:

• Name: data-ms-modal
• Value: login

• 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.

Notes

1. Pick from over 200+ free components or start with an unstyled form. 

2. You can change the text and reply-to address of your email on the Email Settings page. You can update the logo and colors on the Design page. 

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".