Password-less website authentification / login

Question

Many websites have a password-less authentification system, i.e. you can signup / login / logout only with an email, and no password is ever required.

How would one implement such a system? (framework and language-agnostic)

Note: I've already read:

• The definitive guide to form-based website authentication,

• Password-less authentication in web apps - How safe it is? and a few other security.SE posts

• and searched for SO posts about how to actually implement a [password-less] login system, but without much success ; I haven't found a canonical question on SO about implementation of a password-less auth

• Manually logging in a user without password is linked but not the same thing: there the idea is login immediately after a successful account creation, but not necessarily a 100% password-less authentification system.

Answer 1

As I searched for a long time for this, here is a summary that I post with SO's "Answer your own question - Q&A-style" feature. I'll update it as often as I can to improve it.

Password-less authentification method #1: "Click on the link in the email we just sent you to login"

Sign-up:

• client fills signup form
• client AJAX POST http://example.com/_signup {email: 'test@test.com', data: 'data'}
• server checks if user already exists
• client message: "Success: an email has been sent" or "Fail: already exists"
• server creates DB record for user
• server generates a random session ID + sends email with link: http://example.com/?sessid=f65a5bc45

Log-in:

• client fills login form
• client AJAX POST http://example.com/_login {email: 'test@test.com'}
• client message: "An email has been sent if the account exists"
• server checks if the email is in the database
• server generates a random session ID + sends email with link: http://example.com/?sessid=f65a5bc45

Open link:

• client opens the link http://example.com/?sessid=f65a5bc45
• client: document.cookie = "sessid=f65a5bc45; expires=Fri, 31 Dec 9999 23:59:59 GMT" (or do this server side, e.g. with PHP)
• client: ?sessid query string removed, navigate to /

Open /:

• client: AJAX POST example.com/_load {sessid: getCookieValue('sessid')}
• server checks if valid sessid. if so, sends user data to client
• client xhr.onreadystatechange: fills page with user data

---

Password-less authentification method #2: "Enter the code in the email we just sent you to login, e.g. 123 456"

Sign-up:

• client fills signup form
• client AJAX POST http://example.com/_signup {email: 'test@test.com', data: 'data'}
• client message "An email has been sent, please enter your code here:" or "Fail: already exists"
• server creates DB record for user
• idem next paragraph starting at (*)

Log-in:

• client fills login form
• client AJAX POST http://example.com/_login {email: 'test@test.com'}
• client message "An email has been sent if the account exists, please enter your code here:"
• server checks if email in database
• (*) server generates random number + sends email: "Here is your code: 123 456"
• client fills code form
• client AJAX POST http://example.com/_login {email: 'test@test.com', code: '123456'}
• server checks if valid code. if so, server generates a random session ID, and sends to client
• client: document.cookie = "sessid=f65a5bc45; expires=Fri, 31 Dec 9999 23:59:59 GMT" (or do this server side with PHP)
• client: navigate to /

Open /:

• client AJAX POST http://example.com/_load {sessid: getCookieValue('sessid')}
• server checks if valid sessid. if so, sends user data to client
• client xhr.onreadystatechange: fills page with user data