Register/Login with Email and Password

[nelsonic]

There will always be people who prefer to use an Email address and Password for Authentication for whatever reason. We need to give them a seamless experience.

Todo

• Create a Simple form that has a single input field: :email
• The input should be semantic such that the browser will autocomplete the data:

<input type="email" id="email" size="30" required autofocus placeholder="yourname@email.com">

FYI: this is an interesting article on placeholders: https://www.smashingmagazine.com/2018/06/placeholder-attribute (I'm still using them!)

• Store referer and auth_client_id as hidden form field state so we can redirect on success.
• Submit button copy: "Login / Register"
• Check if there is a person with the given email address.
  • If the person exists and has verified their email address, display the password prompt. (Login)
  • If the person exists but has not verified send them an email reminding them to verify.
    • Display message in UI saying "we have sent you an email to verify your address". Send "Verify your email address" Email #62
    • When the person clicks the link in the verification email, display the password prompt.
• If the person does not exist, create them and then render the "Please verify" UI

  "please check your email and click the link to verify".

  • Create a Password Form
• If password is correct redirect to the original referer using the auth_client_secret to sign the JWT

[nelsonic]

iPhone 6/7/8/SE aspect ratio (the most popular iOS device aspect ratio):

Need to tidy up the spacing. 📏

[nelsonic]

Removed padding from container and the spacing fixed itself:

Very happy for anyone else to tidy up styling, copy etc. (Post MVP).

[nelsonic]

browser validation:

[nelsonic]

When I click the link this is what I see:

And in the database we can see that this record has been updated to status=1 (verified)

Verification of email address by link sent to email is working. ✅

[nelsonic]

Derp! Didn't mean to close the issue. Still have to finish the password setup stage. 🧑‍💻

[nelsonic]

Register with Email+Password works:

Now to work on Login. ⏳

[nelsonic]

In case anyone is wondering why I have split the register/login into two steps

1. input your email address
2. input your password

It's because several prominent UX-focussed apps/sites have reached the same conclusion:
It reduces friction and increases security. Counterintuitively perhaps because we are not allowing people to simply tab to the next field and submit both email and password in a single HTTP Request. But this helps mitigate phishing attacks and automated login attempts.

Google:

Notice how they have the "eye" icon in the password field allowing people to view the password/passphrase they have entered: #65

Don't worry, this is not my real password. (duh!)

Read:

• https://www.quora.com/Why-does-Gmail-use-two-separate-pages-for-logging-in-Why-not-let-users-enter-both-username-and-password-on-the-same-page
• https://security.stackexchange.com/questions/85160/is-having-the-username-and-password-fields-on-different-pages-more-secure

AWS: https://signin.aws.amazon.com

Ebay:

Yahoo and Shopify:

[nelsonic]

Password hashing is performed transparently by Fields.Password using Argon2.
Specifically: github.com/dwyl/fields/lib/helpers.ex#L10-L12
The verification function is: Argon2.verify_pass(password_plaintext, password_hash)
which returns boolean true if the password matches or false if not.

[nelsonic]

This feature is finally included in #43 assigned to @SimonLab for review.

[nelsonic]

Shipped. 🚀
There are always enhancements https://github.com/dwyl/auth/issues we can add later. #HelpWanted