Skip to main content

Starts at 0:03, after the intro.

Lesson 4 of 5 · 10:07 · Intermediate

Two-factor authentication

Let members turn on 2FA with an authenticator app.

Where this fits

Passwordless made logging in easier. Two-factor authentication makes it safer, with a code from an authenticator app.

By the end of this lesson you can

  • Set up the login, verification, settings and dashboard pages MemberScript 154 needs
  • Let members turn 2FA on and scan a QR code with Google Authenticator
  • Build the six-digit code form with the right attributes
  • Send members who skip verification back to the 2FA page

Heads up: This is a MemberScript in four parts, one per page. It runs in the browser and keeps its secret in member JSON, which members can edit, so treat it as an extra step at login, not strong protection. If your pages use different slugs, update them in the scripts too.

Lesson notes

How it works

How two-factor authentication works with MemberScript 154

MemberScript 154 adds a second step after login. A member turns 2FA on in their settings and scans a QR code with an authenticator app like Google Authenticator. From then on, after they log in with their password, they're sent to a verification page and must enter the six-digit code from the app before they reach the dashboard.

Behind the scenes, when the member ticks the 2FA box, the script creates a secret in the browser, saves it in the member's JSON as 2fa_secret with 2fa_enabled set to true, and builds a QR code from it. On the verification page, the script checks the code against that secret. If it matches, it marks the session in that browser tab as verified, so the member isn't asked again until that tab is closed.

The pages and scripts you need

You need a login page, a signup page, a verification page, a settings page and a dashboard or success page. The script comes in four parts, each pasted before the closing body tag of its page. The login script sends members with 2FA on to /2fa-verify and everyone else to /success. Add data-ms-redirect="current-url" to the login form so Memberstack keeps the member on the page long enough for the script to route them.

On the settings page, the checkbox needs data-ms-code="enable-2fa" and data-ms-member="2fa-enabled". Add a container with data-ms-code="2fa-qr-container" holding an image with data-ms-code="2fa-qr-image", some instructions and a close button. In the settings script, change Memberscript #154 to your site name. That's the label members see in their authenticator app.

On the verification page, the form has data-ms-form="2fa-verification", the code input has data-ms-code="2fa-code", and an error div has data-ms-error="2fa-code". The dashboard script is meant to send anyone with 2FA on who hasn't verified back to /2fa-verify, so nobody skips the step by typing the URL. The current version reads the 2FA flag from the top of the getMemberJSON() response instead of its data, so test this before you rely on it.

  1. Add the login script and data-ms-redirect="current-url" to your login page.
  2. Build the settings form and QR container, add the settings script and set your app name.
  3. Build the verification form and add the verification script.
  4. Add the dashboard script to your dashboard or success page.
  5. If your slugs aren't 2fa-verify and success, change them in every script.

What this protects and what it doesn't

All of these checks run in the browser, and member JSON can be read and written from the browser. That makes this a useful extra step for members, not a hard lock. Keep your gated content rules on anything that matters.

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: Last in this journey, you’ll protect the login form itself from repeated guessing.

Chapters

Common questions

Does Memberstack have built-in 2FA for members?

Not for member logins. Memberstack's built-in 2FA is for your dashboard team accounts. MemberScript 154 adds 2FA for member logins on Webflow with four small scripts. Members turn it on in their settings and use an authenticator app like Google Authenticator.

Where does MemberScript 154 store the 2FA secret?

In the member's JSON, under 2fa_secret, with 2fa_enabled marking that 2FA is on. Turning 2FA off removes the secret.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    Hey, Maf from Memberstack here and welcome to members script 154. In this video, I’m going to show you how to add factor authentication to your Memberstack login forms. All right, let me show you how that would work. When a member logs in and goes to the account settings, if they have two factor authentication enabled, um on login again, they’ll be redirected to a special verification page where they can then be asked to enter a six-digit code from the authenticator. Okay. So on the settings page, they’ll

  2. 0:32

    have the option to either en enable profit authentication to turn it on or off and then they’ll be asked to scan a code like this. Once they scan it, that will be added to their device on their Google authenticator map. So, if I just log back into my account, I should be redirected to the two factor authentication page in order to verify um yeah to verify and then I’ll be redirected back to my dashboard. Just to log back into my account now

  3. 1:03

    that I’ve notification, I’ll be redirected to the two vectorification page where I can now enter the six-digit code that was provided in Google. On successful confirmation, I’ll be redirected to my success page or my dashboard page depending on you want to send your users. All right. Now, let me show you how to set this up inside of the game.

  4. 1:34

    Okay. So, the first thing you’re going to want to do is to have the following pages. your login page, sign up, a two-factor authentication page, um the success page, and a account settings page for your users. And then you’re going to grab members script 154 and add it to the following pages. So this members script is split into four scripts that need to be added on each individual page. So on the login page, you’ll add members script 154, script one, and it should look like this.

  5. 2:06

    You’ll also need to add members script 154, script two on the two factor authentication page. And that should look like this, as well as script three on the settings page, and then script four on the success page or the dashboard page. If you’re watching this on YouTube, the link to these codes should be in the description um below. And if you’re watching this from the members site, then you should have already seen the code. Okay. So, we’re first going to start off with the login

  6. 2:38

    page. On the login page itself, just to go down to the script here, you’re first going to add a script that’ll check if a member is logged in and um if they have two factor authentication turned on. If they do and they haven’t verified, then they’ll be redirected to the two factor authentication um page if they’re not verified. Otherwise, then it will send them straight to their dashboard or success page like normal. You’ll paste the

  7. 3:09

    script right um before the body uh right before the closing body tag on your login page. And then next we’re going to head over to the settings page where users will then have to turn on or turn off their um two factor authentication. But first on the login page as well on the login form you’re going to add um datams over here data ms redirect current URL just to make sure that this does not um redirect um to your dashboard page

  8. 3:41

    without actually checking if a member is first verified. Okay. So next up is the settings page over here. This is where members can turn on or turn off um the two factor authentication. So just to look at the script again the script generates a unique secret um yeah generates a unique secret and it creates a QR code based on that secret. The QR code then shows up. Yes, the QR

  9. 4:15

    code then shows up um on the page so that they can scan it with their phone. That secret is saved in their member JSON data making it super secure. So once they uncheck the box again then it disappears and that data will be white. So you’ll also need to make sure that you have this following elements on the page. So just to have a look at the form over here. So on the checkbox itself, you’re going to need the following attributes. So data MS code enabled to FA and then um

  10. 4:49

    data MS member to FA enabled. Okay. So then you’re also going to need to create this container or yeah this QR container. You can style it is uh you can style it however you want to style it, but just to make sure that you have this within your form. And that’s going to need an attribute of data MS code to FAQ container. And then within that you’ll have an image element for the QR code which will be data MS code with this attribute. So 2FA QR image

  11. 5:24

    and then the text element over here that you can set up to say anything you’d like it to say. and then a close button that will close the container once they’ve scanned the QR code and set it up in Google authenticator. So just to go back to the script on this page, you will need to change the name of your app over here. So the name of your site, this is titled members script 154 and once a user scan the QR code, it will be saved as members script 154. So

  12. 5:56

    depending on what your site is named, please come change this to how you want it to show up in a users’s um Google authenticator app. Besides that, we will then move on to the next pages. On to your two factor authentication page. Okay, this is where members will enter a six-digit code from their app. On this page, you will add a short um form which includes an input field. this input field with the attribute of data MS code. Uh yeah, data MS code to FA code

  13. 6:32

    and then a submit button over here with data MS code to FA submit. Okay, within this form you can also add another div which will show the error message um when a verification code is been correct that will have the attribute of data m error and then two fa um code. You can then add this script on this page. So it will be members script 154 and that is script two to this page.

  14. 7:08

    So this script will handle the form submission and it grabs the code and compares it to the one inside of members. If it matches, then it will flag a session in the storage so that they do not have to reenter the code again until they are logged out. Then it just redirects them to their dashboard once they have um verified. Okay. So, one thing you’re going to want to change here is this um location that you’re going to be sending users. Obviously,

  15. 7:38

    your dashboard name is going to be named something else. Currently, mine is named success. So, you just change this to your um slug for your dashboard page. You’d also have to do the same on the login page. So, you can leave these as this one as two factor verification verify unless you rename it here. Then you’d also have to rename it in the login script. And as well as renaming this um redirect for the success page, if your dashboard is in something else,

  16. 8:11

    please um rename it here as well. So if you change your two factor authentication slug, just close this. Can see my slug is to FA verify and for my dashboard it’s named um success. So on the login form you need to make sure that those two things to fa verify and then success are actually named the or are the correct slug names for your pages.

  17. 8:43

    Lastly, we will go to the dashboard page or the success page where there will be a small script over here which is members script 154 part 4 which um checks if they have two factor authentication turned on and if a member has not verified in that session they’ll be then sent back to the two-actor verification page. So again, if you’re changing that slug for the two factor authentication page, please rename it over here as well to make sure that

  18. 9:14

    those two um correspond. So the script here will make sure that no one skips that verification step by just guessing the URL. And that’s it. Once all of these scripts are in place, your member st site should have full two factor authentication support and your members get more security and you stay in control of who has access to protected content. If you are tweaking or styling the copy, you can do that all inside of Webflow.

  19. 9:46

    And again, if you’re changing out the slu or renaming it to whatever you want your pages to be called, make sure you also confirm it inside of the script. Don’t forget to check the description for the link to the code. And if you have any questions, feel free to reach out to me in the Slack 2.0 channel. All right, bye.

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.