Ok, assuming this device can only show a fixed URL in a browser, here is how you can authenticate this device without any keyboard interaction.
The key here is the magic link. Otherwise, none of these would work (*actually it would, see the footnote)
First the demo. In this demo, the browser on the left is this device with no keyboard interaction. And the browser on the right is your phone or your laptop that you can use to login. Technically, you can scan the code on the device to open the browser as well automatically.
What’s happening is this:
- The device browser open the unauthenticated URL. The page shows a QR code.
- The user scans the QR code in his mobile phone.
- The user logs in (or signs up) and approves the code.
- The device browser automatically refreshes the page and authenticates the user by using the magic link.
Here are some technical details.
I have a login code data type with just a code (text) and login link (text).
When the main page is displayed, it creates a login code automatically. Code is just random and login link is empty. And set the state of the page with this newly created code.
The main page is just displaying the QR code and the info related to this code. But it is simply the login URL with the code in your app.
Then, when someone scans the code or enters that page manually. Approve button creates a magic link for the user and attach it to this code as Login Link:
Then the main page just refreshes itself and use the login link in the code it displays and authenticate the user:
The page displayed after authentication is set in the magic link action:
And here is the editor if you want to see it in more details. I keep these forum tests around as long as Bubble lets me.
*Without magic link: You would have to put your name and password to code’s related fields instead of the magic link. Which is totally unsafe