Skip to main content

Lesson 3 of 5 · 3:58 · Beginner · Webflow

Passwordless login

Members sign up and log in with a one-time code instead of a password.

Where this fits

Social logins skip the password by using another account. Passwordless login skips it with a six-digit code sent to the member’s email.

By the end of this lesson you can

  • Copy the passwordless signup and login components into Webflow
  • Customize the email that sends the login code
  • Turn on passwordless for the pre-built modals and make it the default

Heads up: Passwordless forms are separate from your regular signup and login forms. To offer both, build each form and switch between them with Webflow interactions or separate pages.

Lesson notes

How it works

How passwordless login works

With passwordless login, a member enters their email and Memberstack emails them a six-digit code. They type the code into the same form and they're in. The code expires after 10 minutes. There's no password to forget, and members you add without a password through the dashboard, Make or Zapier can log in this way too.

Passwordless forms are their own forms. The standard signup and login components don't work with it, so use the passwordless components from the Components page in your dashboard. Filter by Passwordless and copy one for signup and one for login.

The attributes on a passwordless form

The components come with these attributes set. If you build your own, add them yourself. The login form has data-ms-form="passwordless-login" and the signup form has data-ms-form="passwordless-signup". The email input has data-ms-member="email" and the code input has data-ms-member="token". A div around the code input has data-ms-passwordless="step-2". Memberstack shows it once a valid email is entered, so set it to display none in Webflow. It has to be in the same form, not on another page. On the submit button, data-ms-passwordless-button="YOUR_TEXT" replaces the button text after the email step.

To offer password login too, build both kinds of form and switch between them with Webflow interactions or separate pages.

  1. Copy a passwordless signup component from Components and paste it on your signup page.
  2. Set the step-2 element to display none.
  3. Copy a passwordless login component and paste it on your login page.
  4. Publish and sign up with a new email to test the code.

Customizing the email and the pre-built modals

Edit the code email in Settings, Emails, under Passwordless Login / Signup Email. You can change the reply-to email, subject, header, content and footer. The logo and primary colour come from Settings, Design.

If you use Memberstack's pre-built modals, go to Settings, Auth Providers and click Configure on passwordless. Switch on Enable in Pre-built UI, choose whether passwordless should be the default and save. Any button with data-ms-modal="login" or data-ms-modal="signup" then offers the code option, and members can still choose a password.

Before you move on

0 of 5

Tick these off on your own site. Done with all of them? You’re ready for the next lesson.

Up next: Next you’ll go the other way and add a second step at login with two-factor authentication.

Common questions

How long does a Memberstack passwordless code last?

The six-digit code expires after 10 minutes.

Can I offer both password and passwordless login?

Yes. Build a passwordless form and a regular form and switch between them with Webflow interactions or separate pages. With the pre-built modals, members can choose either.

Can I use the regular Memberstack login form for passwordless?

No. Passwordless needs its own forms with data-ms-form="passwordless-login" or data-ms-form="passwordless-signup".

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    Hello in this video I’ll show you how to add passwordless login to your site in just a couple minutes so first thing a demo this is a Webflow site this is a fully customized passwordless login form I just sent myself a six digit code which is right here and paste it in confirm and log in okay so now let me show you how that all works and how you can set it up yourself so first thing you’ll want to do is in your Memberstack dashboard navigate

  2. 0:33

    over to the components page from here you can filter for passwordless and you’re going to see however many forms we have uploaded at this point so I’m going to start with sign up and login let’s go with here I’m going to copy this component go into my Webflow project and go to my sign up page and paste it into the page this element right here is step two this can be visible or hidden I’m gonna go ahead and hide it but now I know it’s there

  3. 1:03

    the next thing I’ll do is go to my login page let’s go back over here and copy the login component these are two individual forms and these are unique forms they are not the exact same as the uh regular signup and login forms you’ll see the form attribute is actually a little different that Ms form equals passwordless login so while this is publishing if you do want to have a site with both password lists or login with a password then you’ll want to create those forms

  4. 1:36

    separately and then you can link to them using uh Webflow interactions or put them on separate pages I think webflon interactions is probably the easiest thing to do let’s go ahead and publish our site open this up and go over to the sign up page perfect so we’ll pick a new email address let’s do team at okay now I’m gonna go get that code all right so we’ll go over here and then

  5. 2:08

    we’ll see I have this email which is customized with my branding and my logo I’ll paste in that confirm and sign up and I am logged in just like that the next thing I’ll show you is how to customize the email you’ll go to settings in your dashboard and then go to emails passwordless login sign up email from here you can update either reply to email the subject header all of that good stuff and then Memberstack will

  6. 2:39

    automatically pull in the color of your title here and your branding from the design page which is right here under settings and design next thing that’s important to know is that if you’re using Memberstack’s pre-built modals you’ll want to config your password list here on the auth providers page you’re going to click configure and then you’re going to enable this in your pre-built UI once that’s done it’ll automatically be added and

  7. 3:11

    you’ll have the option to set it as the default normally the default is to log in or sign up with your email and password but you can change that right here and let me go and show you what that looks like in a new tab okay so here in Webflow I have this little login button if I use the attribute data MS modal equals login and publish when I navigate to the site and click on the button we’ll see that passwordless

  8. 3:42

    login is Now the default super easy to configure and members still have the option to log in with a password if they want to do so so I think that’s everything if you have any questions please let us know we are happy to help and we can’t wait to see what you build with this

This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.