Implementing Magic-Link

I wrote a post previously on why I will use Magic Link for the authentication flow. You can read it more here.

The flow is simple, user submit their email and the server will sent a link. User need to click on the link in order to login.

Some of the requirement needed is

1. The link need to be expired after a certain amount of time.
2. The link can only be used by the device that requested it. Meaning that if I submit my email on my laptop, I cannot open the link on my phone. It has to be from the same browser.
3. The link can only be used once.

For Logname, the link is just https://www.logname.dev/magic_link/login?token=#{token}

The token is in JWT format and the payload contain a unique id of the user as well as a device id.

%{
 unique_id: unique_id,
 device_id: uuid_string 
}

Beside sending the link to the email provided, the server will also response to it with device_id to be stored inside the browser cookie.

This way, when the user click on the link on the same browser, it will send the payload as well as the device_id cookie, the server will check whether the device_id is the same and if it is, login the user.

That's it.

If you would like to try it out. You can register here and login here.