Search code examples
authenticationlanguage-agnosticpassword-less

Password-less website authentification / login


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:


Solution

  • 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:

    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