Yesterday, I exclusively spent the day on finishing the registration process for Picard. Just to recap from the last blog post, I wanted to give users a choice of either a password login or a magic link. I think that gives users the flexibility.

I choose you password

Magic links are good, but if you want a password you can do that too. Personally I prefer magic links because I don’t need to know about the password at all, and as they are one time use - it’s more secure (so I believe… “A password you don’t know is the best password”). However I totally get it.

So, you can do that. Here is the password screen:

Nice and simple.

Note that I don’t enforce specific rules, they can be as long as you want… or as short as you want. However, here comes the great part. All passwords (or specifically part of the password hash) is sent to HaveIBeenPwned (https://haveibeenpwned.com/Passwords).

Note that no full password is ever sent to their API at all! It is only the first few parts of the password hash. This in turn returns results of passwords that have been used in the past during known breaches. The results bring back the last part of the password hashes that started with the first 5 character hash I sent through. This way I can check locally if any of them match your password. If so, Picard will reject your password and deems it unsafe. If you’re interested, 1Password uses the same practice to check against bad passwords.

I think that’s the best type of password enforcement rules I can think of. Perhaps I’ll go a step further and specify some basic rules. Although I always found it off putting when I went to a site that had several bullet points of bad advise. “Must contain 8 characters but not more than 30” blah blah blah.

I guess I could suggest a password that they can use… so that the user doesn’t have to take a wild stab at it. Although Safari is pretty good about suggesting passwords.

Anyway, I think having it hooked up with the above is a great combo.

Of course I also have a double check in place so that you confirm the password you typed beforehand is the same:

On top of that, it brings us nicely to the next point!

Two Factor Authentication is required

I made the decision that Two Factor Authentication is mandatory for both magic link logins and password logins. At the end of the day we are dealing with servers, and most likely customer data. So I’m making it mandatory that you set it up as you register. There is no way around it.

You’re going to be dealing with data in a database, which most likely includes customer data. To avoid, and fend off, any unauthorised access to your Picard account you’ll be required to authorise certain actions with your one-time passcode. That includes logging in, or other account options.

Here is an example screen running locally on my machine:

Each QR code is generated as your account is created. Once scanned, you will have to submit a valid token in order to proceed. That is rendered via SVG and is never saved locally as an image!

This was quite fun to do.

Initially I wanted this option only mandatory for password logins, but it dawned on me that everyone should benefit from this. In a way it gives me less logic to write later on if you did want to enable it for magic links.

I have a plan, in my head, about account recovery if you did ever loose access. Although it’s the 21st century, and you should hopefully be tech savvy about things like this (considering you’ll be running your own servers).

Anyway, I’m happy with the way it worked out and I prefer better security practices from the start. I worked with many clients, past and present, and it scares me how some of them secure their stuff. Just like flying aeroplanes… you never know who is going to be flying with you up front (trust me, I know). So, just a friendly hand from one developer to another to do the right thing from the start.

Pain point? Nope. Security is paramount!

Thank you page

After you have confirmed your token, you’ll go to the “Thanks” page:

I’m not sure if I will add this step closer to release… it’s there for now. It serves a few purposes.

One is to say “thank you”, the other to say “Hey, you have an AWESOME 30 day trial” (unlike everyone else out there) and to send a confirmation email out if your email hasn’t previously been verified (basically everyone that didn’t come from the “pre-register” phase).

Next steps

For the next step I need to work on the login phase of the project, which includes several things like magic link emails and forgotten password links etc.

Hoping I have that done by next week at some stage.

I’m always thinking about the “dashboard” design (called “Bridge” for now)… it’ll certainly be different than what you see at the moment during registration and login.

Another thing I want to work on is much better wording. I think it’s OK at the moment, however it can be improved. I think 40% of my commits to the project are word changes!

Anyway, thanks for reading. More very soon.

You can find Picard.sh here and sign up on the invite list.