Skip to main content

Starts at 0:03, after the intro.

Lesson 5 of 5 · 2:32 · Intermediate · Webflow

Slow down brute-force logins

Throttle repeated failed logins and add a security check.

Where this fits

2FA protects members who turn it on. This lesson protects every login form by limiting how many times someone can guess.

By the end of this lesson you can

  • Add MemberScript 167 to your login page
  • Show how many attempts are left after a failed login
  • Lock the form behind a 30-second security check after three failed tries

Heads up: This is a MemberScript you paste in, plus a few attributes on the form, error message and button. It counts attempts in the browser, so it slows casual guessing rather than stopping a determined attacker.

Lesson notes

How it works

What a login throttle does

A brute-force attack tries password after password until one works. MemberScript 167 slows that down on your login form. After a failed login, the form shows how many attempts are left. After three failures, it disables the login button and shows a 30-second security check with a countdown. When the timer ends, the button comes back and the member gets three fresh attempts.

How the script knows a login failed

When the form is submitted, the script waits about 1.5 seconds, then looks for Memberstack's error message or Webflow's form error state. If it finds one, that counts as a failed attempt. The count is kept in the browser's session storage under ms_login_attempts, so it survives a page refresh in the same tab. The limit and delay are set at the top of the script as MAX_ATTEMPTS = 3 and SECURITY_DELAY = 30, so you can change either.

Setting it up on your login page

Add MemberScript 167 to your login page only. Then add a few attributes so the script can find each part of the form.

  1. Wrap your login form in a div and give the div data-ms-code="login-throttle-form".
  2. Check the form itself has data-ms-form="login".
  3. Add an empty div inside the form with data-ms-code="throttle-error". This shows messages like "2 attempts remaining".
  4. Add data-ms-code="throttle-submit" to the login button.
  5. Publish, then fail three logins on purpose to see the 30-second check.

Where this fits in your security

The throttle lives in the visitor's browser. It stops casual guessing and gives honest users clear feedback, but anyone who clears their session storage or skips your form isn't stopped by it. Treat it as one layer next to strong passwords, 2FA and gated content.

Before you move on

0 of 4

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

Up next: Your logins are covered. Next you’ll start using what you know about each member, by showing or hiding things based on their data.

Common questions

How do I limit failed login attempts on a Memberstack form?

Add MemberScript 167 to your login page and tag the form wrapper, error message and button with its attributes. After three failed attempts it locks the form behind a 30-second security check.

Can I change the number of attempts or the lockout time?

Yes. Edit MAX_ATTEMPTS and SECURITY_DELAY (in seconds) at the top of the script.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    Hey, Mnim from Members Stack here and welcome to Members Script 167. In this video, I’m going to show you how to protect your login forms from brute force attacks by limiting how many times someone can log into their account. So, if I attempt to log into my account with a completely wrong email address and password, I will see a login failed and two attempts remaining. If I try to do that again, I’ll see one attempt remaining. And then after the third attempt, I will then see a security

  2. 0:31

    check that will come down for 30 seconds. After the 30 seconds are up, I will then be able to submit my login form again and that will lead to a successful login. If the attempt fails again, I will see the security check again for 30 seconds. So, if I just attempt to log into my account now that will go through. Okay, now let me

  3. 1:03

    show you how to set this up inside of Webflow. In Webflow, you are going to need to add members script 167 and it should look like this. If you’re watching this on YouTube, the link to that code should be in the description below. And if you’re watching this on the members stack site, then you should have already seen the code. All right, you are going to add this code to your login page. On the page itself, you are going to need to add the following attributes. So for your login form, make sure that your login form is wrapped inside a div. And then you’re going to

  4. 1:34

    add the attribute of data MS code login throttle um login throttle form. And then the form itself over here you just have to make sure that it has the member tag attribute of data ms form login. Inside the form you are going to need to add an empty div and that is where it’s going to display the login attempt error. So two attempts one attempt remaining that will have the attribute of data ms code throttle error. And then lastly on the button itself you are

  5. 2:05

    going to add the attribute of data mscode throttle submit. The script itself will handle the security check countdown. And once you’ve added all of these attributes to your page, you now have a way to protect your login forms from brute force attacks by limiting how many times someone can log in. All right. If you have any questions on this, feel free to reach out in the Slack 2.0 channel. 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.