Passwordless Signup & Login

Article author
Duncan Hamra

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.

Passwordless Code Expiration:

The passwordless code expires after 10 minutes.

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.

a-4.png

  • If you like the design, click the Copy Component button.

a-5.png

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.

a-6.png

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. 

b-1.png

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

e-1.png

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.

d-1.png

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.

d-4.png

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.

d-5.png

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

d-6.png

 

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 

d-7.png

  • Publish the page and click the live modal. The modal gives users the option to log in with or without a password. 

d-8.png

 

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

Was this article helpful?

Comments

9 comments

  • Comment author
    Marc Hudson

    Is there any update on the optional password on signup fix? This feature would unlock exciting possibilities if the user can also set a password at any stage, without needing to do a password reset (as it's confusing and poor UX for new users).

    Thanks!

    2
  • Comment author
    Matthew Delatorre

    it is possible to disable the password option on the default login modal. it would be great to be able to easily modify this default modal with the login option you desire

    1
  • Comment author
    Duncan Hamra

    Marc Hudson Can you explain the optional password feature for me? If I understand, it should be possible now. But you'll need to include both a passwordless and a regular password form in your project. That way you users can choose between logging in with a regular password or via passwordless. 

    Matthew Delatorre It is not possible, but I will pass the request along to the team. Why is important for you/your customers to not have the password option?

    0
  • Comment author
    Marc Hudson

    Hey Duncan, sorry for the long post but here goes...

    It might seem a bit obscure but I believe it would add a lot of flexibility to the API for more complex journeys and logic. In my case, I’m hoping to provide “reverse signup” journeys, commonly found on car insurance quote forms, where the user completes an application form with all the fields they’re expecting to see, including email (and file upload, so Custom Fields isn’t possible), before finally being asked to choose a password in a final step. This has its benefits, including a reduced drop-off rate since users see the form they were expecting to see and not a register/login form effectively blocking them. The major improvement however would be from the ability to Ajax submit the first form, including their email address, which can be used to create a Member Object, before doing more complex tasks in Make and returning a response to proceed to the final form step - a separate choose password form. This form could also use a webhook to update the Member with a hashed(?) password in Make. Or, if the user is logged in, a non-ajax form submit could set their password, much like the password update form. The main benefit here is the page hasn’t reloaded and the user appears to have only completed 1 form.

    I can’t achieve this currently because although I can create a Member in Make and do complex tasks, the user needs to choose a password (because passwordless isn’t viable and also breaks up the journey and increases drop-offs). This means that, because the signup form can’t use AJAX, I need to temporarily store data until the New Member Signup trigger in Make is fired by the signup form submission, and I then update lots of tasks from the Member’s temporary data. Lastly, because the signup form doesn’t use AJAX, there’s no way to know when the Make tasks have been completed, to notify the user. The user lands on the login redirect page too soon, before the scenario finishes and gets no feedback on what’s happened or what’s next. Basically, the tasks are completely disconnected by the creation of a Member.

    My case may seem fairly complex and edge but without the ability to set a password on a member with AJAX, simpler journeys aren’t possible without a register form and page reload, blocking the user’s journey.

    1
  • Comment author
    Duncan Hamra

    Marc Hudson Thanks so much for taking time to explain 🙏 We don't have any immediate plans for this, but it's definitely on my radar now. 

    0
  • Comment author
    Jugraj Vadera

    I want the funtionality in custom form, that after submitting the password-less signup form, user must be able to complete checkout ( through Modal) there, just like generic signup form data-ms-form=signup. I am using this - <form method="POST" data-ms-form="passwordless-signup" data-ms-plan="pln_yearly-xxxxx">
    2. Second thing, I want that user must able to set password there (on password-less signup form) also, so that they can login via password too. 

    0
  • Comment author
    Duncan Hamra

    Jugraj Vadera 👋 Thanks for the feature requests.

    1. Checkout through modal - we only enable checkout via Stripe's hosted checkout page. It's more secure and more configurable than anything we could build ourselves. 

    2. Could you use our regular signup forms instead to collect the password on signup? If not, you can create an onboarding step which collects the password via a profile form.

    0
  • Comment author
    Jugraj Vadera

    I meant to say, when a user signup through custom password-less signup, let user to checkout modal (yes, stripe checkout modal or stripe checkout page). Also, if user can set up password there, he will be able to login through password or one time password both.

    0
  • Comment author
    Duncan Hamra

    Ahh great points. 

    You can launch the Stripe checkout after sign up in two ways. 1) By having the user click on a data-ms-price:add attribute prior to signup OR 2) you can add the attribute directly to passwordless form.

    As for collecting the password, I recommend adding an onboarding step which collects the password via a profile form.

     
    0

Please sign in to leave a comment.