Introducing “magic-link” login and registration

At Questfeed, we are big fans of creating beautiful, streamlined UX.
Most users don’t want to bother with creating passwords, let alone remembering them. That’s why we’ve been only supporting “social” authentication since day one.

But that doesn’t always work for everyone and every situation: some people don’t have an account on any of the social networks we support; other times they do, but they don’t remember the password (this especially happens on mobile devices, where people are less likely to have stored logins / passwords).

That’s why we decided to create an even more user-friendly way for signing up to Questfeed (and do subsequent logins), without requiring neither social accounts nor passwords.

The user experience in short

Fill in your email address:

We send you an email with a link:

Click the button, you’re in!

In case you never logged in with that email address before, you’ll be prompted to enter you full name and confirm you actually intend creating a new account (this is especially helpful to prevent mistakenly creating a new account if you have multiple email addresses and don’t remember which one you used initially).

We will also attempt to grab a profile picture for you from Gravatar, so you don’t have to upload one.

Behind the scenes

This section explains briefly how that magic works behind the scenes. It is mostly targeted to other engineers wanting to implement something similar.

All begins when the user enters their email address (say, someaddress@example.com) in the “Login with email” field.

An API call is made to ask the backend to send a “magic” link to the specified address.

Generating the magic link

This is simply a link in the form https://www.questfeed.io/auth?token=..., where token is a signed JWT, saying something along the lines of: “This is the owner of someaddress@example.com, requesting to log in”.

The token expiration time is set to a short interval for security reasons, in case the link is leaked at some point in the future.

Logging in the user

Once the user clicks on the link, they’re directed to a page that will make an API call to get information about the token.

The token signature is verified, then:

• If a user is already registered with that email address, the API returns immediately an “authentication” token. The user is now logged in.
• Otherwise, a “registration” token is returned, to be used to sign up a new user account.

Note that, while we could immediately create a new user and return an authentication token for them immediately, we added the extra “registration” step so that:

• The user has a chance to enter their full name, to be used when creating their new account
• The user has the option to stop signing up, eg. if they realize they originally signed up using a different address
• We can track the “verified” status of email addresses, and prevent unauthorized / unintended registration of accounts with email addresses one doesn’t own

Signing up

The registration token, along with user-defined full name, are sent to the API.

A new user account will be created, and an authentication token is returned to the client.