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.
- 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.
6-digit code
- 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
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.
- 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:
- 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
- Click Settings > Design.
- Optionally, upload a new image and change the primary color.
- 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.
- 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.
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".
Comments
19 comments
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!
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
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?
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.
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.
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.
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.
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.
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.
Hi Duncan,
Is there any way that you don’t have to request/submit a 6 digit code during signup? I would like the signup process to be as simple as possible, boosting conversion, and the 6 digit code to only be requested during login. Thanks!
Hmmm... would you be willing to ask your members to choose a password?
And if not, what do you think about randomly generating a super long and random password which gets passed into a hidden password field?
I have no problem asking users to choose a password as long as they do it in a later stage and not at signup.
Also have no problem with the random password idea, as long as the user only has to enter the email when signing up.
Ideally, once the user is logged it, he could change the password, or have the password sent via the 6 digit code on login. Both versions would work.
Hi Duncan,
Do you have any idea how to achieve in Memberstack any of the two solutions above?
Thanks!
Yes let's see...
I can't find any demo projects right now, so I may need to create one. How soon do you need a solution here?
Hi Duncan, thanks for sending these over!
Point 1 and 2 sound pretty good. I've been trying my hand with Rey and coding my way through the problem but I haven't gotten anywhere. It would be really helpful if you could create a demo project. Do you have time in the next couple of weeks?
Thanks a lot for your availability and all the help!
I do! I will add this to my list for sometime this week. 🤞
Managed to do it with the random password! Thanks Duncan for all the help:)
Octavian Rachita hurrah! So glad you found a solution.
For future readers, here is a cloneable project, script, and tutorial if you want to accomplish the same thing. https://www.memberstack.com/scripts/generate-a-random-password
Thanks for the full tutorial!
I'll use your code as it has more functionality:)
Thanks again!
Please sign in to leave a comment.