Two-factor authentication is generally considered A Good Thing™️ when you’re logging in to some online service.

The word “factor” here basically means “kind” so you’re doing two kinds of authentication. Typical factors are:

  • Something you know (like a password),
  • Something you have (like a phone or a USB key),
  • Something you are (biometric Black Mirror shit).

Asking for a password and an email address isn’t two-factor authentication. They’re two pieces of identification, but they’re the same kind (something you know). Same goes for supplying your fingerprint and your face: two pieces of information, but of the same kind (something you are).

None of these kinds of authentication are foolproof. All of them can change. All of them can be spoofed. But when you combine factors, it gets a lot harder for an attacker to breach both kinds of authentication.

The most common kind of authentication on the web is password-based (something you know). When a second factor is added, it’s often connected to your phone (something you have).

Every security bod I’ve talked to recommends using an authenticator app for this if that option is available. Otherwise there’s SMS—short message service, or text message to most folks—but SMS has a weakness. Because it’s tied to a phone number, technically you’re only proving that you have access to a SIM (subscriber identity module), not a specific phone. In the US in particular, it’s all too easy for an attacker to use social engineering to get a number transferred to a different SIM card.

Still, authenticating with SMS is an option as a second factor of authentication. When you first sign up to a service, as well as providing the first-factor details (a password and a username or email address), you also verify your phone number. Then when you subsequently attempt to log in, you input your password and on the next screen you’re told to input a string that’s been sent by text message to your phone number (I say “string” but it’s usually a string of numbers).

There’s an inevitable friction for the user here. But then, there’s a fundamental tension between security and user experience.

In the world of security, vigilance is the watchword. Users need to be aware of their surroundings. Is this web page being served from the right domain? Is this email coming from the right address? Friction is an ally.

But in the world of user experience, the opposite is true. “Don’t make me think” is the rallying cry. Friction is an enemy.

With SMS authentication, the user has to manually copy the numbers from the text message (received in a messaging app) into a form on a website (in a different app—a web browser). But if the messaging app and the browser are on the same device, it’s possible to improve the user experience without sacrificing security.

If you’re building a form that accepts a passcode sent via SMS, you can use the autocomplete attribute with a value of “one-time-code”. For a six-digit passcode, your input element might look something like this:

<input type="text" maxlength="6" inputmode="numeric" autocomplete="one-time-code">

With one small addition to one HTML element, you’ve saved users some tedious drudgery.

There’s one more thing you can do to improve security, but it’s not something you add to the HTML. It’s something you add to the text message itself.

Let’s say your website is and the text message you send reads:

Your one-time passcode is 123456.

Add this to the end of the text message: #123456

So the full message reads:

Your one-time passcode is 123456. #123456

The first line is for humans. The second line is for machines. Using the @ symbol, you’re telling the device to only pre-fill the passcode for URLs on the domain Using the # symbol, you’re telling the device the value of the passcode. Combine this with autocomplete="one-time-code" in your form and the user shouldn’t have to lift a finger.

I’m fascinated by these kind of emergent conventions in text messages. Remember that the @ symbol and # symbol in Twitter messages weren’t ideas from Twitter—they were conventions that users started and the service then adopted.

It’s a bit different with the one-time code convention as there is a specification brewing from representatives of both Google and Apple.

Tess is leading from the Apple side and she’s got another iron in the fire to make security and user experience play nicely together using the convention of the /.well-known directory on web servers.

You can add a URL for /.well-known/change-password which redirects to the form a user would use to update their password. Browsers and password managers can then use this information if they need to prompt a user to update their password after a breach. I’ve added this to The Session.

Oh, and on that page where users can update their password, the autocomplete attribute is your friend again:

<input type="password" autocomplete="new-password">

If you want them to enter their current password first, use this:

<input type="password" autocomplete="current-password">

All of the things I’ve mentioned—the autocomplete attribute, origin-bound one-time codes in text messages, and a well-known URL for changing passwords—have good browser support. But even if they were only supported in one browser, they’d still be worth adding. These additions do absolutely no harm to browsers that don’t yet support them. That’s progressive enhancement.

Have you published a response to this? :


Ricky Mondello

I really love this post from @adactio about authentication on the web and some of the really easy-to-implement ways of enhancing users’ experiences with sign-in, as well as their security. Low-effort, high-impact markup and formats are super neat.


I do always wonder: is it still 2 Factor Authentication if you get the code on the same device? Still great tips though!

# Posted by Rogier on Friday, February 5th, 2021 at 7:28pm


# Liked by Lewis Cowles on Wednesday, February 3rd, 2021 at 12:00am

# Liked by Beko Pharm on Wednesday, February 3rd, 2021 at 3:17pm

# Liked by Marty McGuire on Wednesday, February 3rd, 2021 at 4:17pm

1 Bookmark

# Bookmarked by Mark Stanley Everitt on Wednesday, February 3rd, 2021 at 2:05pm

Previously on this day

1 year ago I wrote Three books

Some potential reading material for 2020.

7 years ago I wrote rel="source"

Brainstorming a markup pattern.

13 years ago I wrote Foo fighting

Kung-Foo fighting. It was a little bit frightening.

14 years ago I wrote Fun with type

Juvenile high-jinks in the Clearleft office.

16 years ago I wrote Breaking news

Last year, the New York Times ran a story about the iPod’s shuffle feature. "Is it really random?", they wondered.

17 years ago I wrote As the web turns

I’m back from Ireland where I had an enjoyable, if somewhat rushed, weekend of seafood, stout and song.

18 years ago I wrote Photoshop Funny

What really happened to the West Pier.

18 years ago I wrote Pattern Recognition

A new book by William Gibson is always a cause for celebration. I’ll grab myself a copy as soon as I’m done with Cryptonomicon.

18 years ago I wrote London kills me

Jessica is very kindly treating me to a day of music in London.

19 years ago I wrote The bleat, the pretzel and the president

One of my all-time favourite websites is, home to The Institute Of Official Cheer featuring The Gallery Of Regrettable Food, probably the funniest thing I have ever read on or off the web.

19 years ago I wrote On the Internet, Nobody Knows You're a Dog

Jessica has one of those calendars filled with cartoons from The New Yorker.