If you’re a user of … websites … you likely know TOTP (Google Authenticator & co.) by now. You’re given a QR code to scan from your phone, and sometimes you can click something to reveal the secret to manually add it to your preferred application (useful on the desktop).

And if you’re a developer, you likely know that you gotta verify the code before storing and enabling the TOTP so the user doesn’t get locked out.

All of what I said now seems pretty standard and nothing special and “the industry” go this figured out.

So, what is one step to make it even better?

Well, today I signed up to https://www.discogs.com (stay tuned for a blog post on that!) and of course, I wanted to set up TOTP as one of the first things.

They did all of the standard I already mentioned, but they did one step further! I was on my macOS desktop, and the secret was… a clickable link!

If you’re a web developer you probably already know about the otpauth:// URL which you put into a QR code… as it turns out, you can also put it into a normal link like e.g.

<a href="otpauth://totp/website:username?secret=FABLJ5UD7PH2ZQZJRGSUF4LT&issuer=website">FABLJ5UD7PH2ZQZJRGSUF4LT</a>

And on macOS in Safari, this will open Apple’s new Passwords app and allow you to add it easily!

Now, admittedly I’d do it slightly differently… I’d show the secret in a code block, and create a separate link with the text “Click here to add it to your local TOTP manager” or similar, because otherwise if the otpauth URL isn’t supported, one might have a harder time to copy the secret *as text*.

So there you have it! Next time you’re developing a TOTP setup process, make sure there’s also a clickable link!

PS: Even though I’m (among other things) a web developer, I didn’t actually know about this and it seems almost nobody else does, considering the standard is QR and plaintext secret!

I run this blog in my free time, if I helped you out consider donating a cup of coffee. :3