Back
Question
Asked

What are some of the best practices for implementing magic links?

Magic links have become a popular authentication method. People enter their email address and receive a one-time link to sign in. No need for passwords anymore.

It's not without its problems though. So I'm curious what some of the best practices are. I'd especially like to hear from people who've been using them in production for a while.


Here's what I found so far myself:

Advanced users might still prefer the good old password-based login. As it lets them use a password manager and log in with just a few clicks. Without needing to switch to their email inbox and waiting for an email to arrive.

In some cases people might open the magic link in the wrong browser session. For example some email apps on iOS open links in their in-app browser. But that logs the user in, in that specific in-app browser. Not the regular browser. And if you use one-off magic links that immediately expire after use, then "open this page in the main browser" functionality won't do the user any good. I think this is typically solved by not immediately expiring the link.

A similar problem is with email scanning software. They might pre-fetch the link and thereby expiring it. The solution here is to have the link go to to a page which then uses Javascript or meta-refresh to redirect to the page that does the expiring.

From a security perspective you probably do want to expire the link at some point. You don't want it to sit around in an email inbox or browser history and still work a long time after.

I recommend using a temporary 6-digit code (15 minutes) rather than a login URL.

There is the historical side of the web, to enter a password (so as not to lose old users) and then log in with the feeling of entering a password.

As you say: "In some cases, (with a login URL) people might open the magic link in the wrong browser session."

With the code, people stay on the same page and the onboarding process is continuous (there is no opening of a new tab from the inbox).

You just have to put an email input (login/signup is the same, so no more error for people who don't know the difference between login and signup).

Then ask for the code in a second input. What I do is that I add the 3 links to the most popular inbox to accelerate access to the inbox for the user
→ "Open Gmail" "Open Outlook" "Open Yahoo" (screenshot)

Another trick to speed up the signup/login process is to put the code in the subject line of the email directly. So just with the notification (from his smartphone, or on his desktop) the user can signup/login without having to open the email.

Some great tips. Thanks for sharing! Will probably implement it this way in the future.