levibostian / ExpressjsBlanky

Blank Express.js project to get up and running FAST.
MIT License
7 stars 0 forks source link

Make using passwordless login easy on desktop #42

Open levibostian opened 3 years ago

levibostian commented 3 years ago

I like to use this idea of passwordless login which is popular amongst sites like Slack and Medium where you login by pressing a button in your email.

I have this implemented in this project, but the problem is that if you open up your email on a desktop computer, we give them an array saying, "Sorry, open this on a mobile device". But in my head, this isn't a good UX. I am never a fan of, 'Oh, do this instead'.

Proposal

When a dynamic link is opened on the desktop, on that webpage show a banner that helps you open the webpage on your phone easily. Create a short URL dynamic link. Create a QR code. Text the link to yourself. Something to help you open the link on your phone, fast and easy.

I have solved this problem before but I do believe there is a better way.

  1. Create a small javascript script that you can put into the header of your site for all webpages on your dynamic links domain. Let's say your dynamic links look like this: https://XXX.page.link/?link=https://app.foo.com/... you would add this script to all webpages on app.foo.com. This script needs to be very small, have zero dependencies, and allow styling in any easy way if possible.

  2. This script checks the current address URL. If it contains mobile_link=true in the query params, you know it's a dynamic link. That means that it's meant to be opened on mobile, not on desktop. That means to activate the script. Else, just return.

  3. Show a UI on the screen saying that the link is meant to be opened on a mobile device to work. You can then show a loading UI if needed if we need to load some methods for you to open the link on your phone easily.

  4. I am thinking about creating a URL shortener module into my own app because then you can trust it. Instead of giving someone a bit.ly link that's not the same domain as yours which is sketchy, instead of creating a Firebase Dynamic link that doesn't expire, creating a short link that is in your own domain gives safety and trust.

I imagine the script sending up it's current URL to the API, the API adds into Redis some info about the long URL and generates a numbers only password (a 4 digit one or something), set a redis expire on the key for security. Then, in the UI the script says, "Open https://link.foo.com/ on your phone and enter passcode XXXX". The link. is your own domain name. It's trustworthy.

This takes you to a very small and simple webpage asking you to enter in the passcode given to you. You enter that in and it will send that passcode up to the API where it gets back the long URL. The webpage will then perform a redirect to take you to that new long URL.