QR Code Login Block for React

Everything: the code is a QR code of a typed link, and the two demo buttons play what the phone does, so nothing is scanned, sent or signed in. In a product, the screen asks your server for a short-lived pairing code and shows it as a QR code, then waits for it (by polling or a socket). The phone app scans it, the person confirms there, and the server tells the waiting screen to finish the sign-in with a session for that account.

The pairing is waiting for a scan, scanned and waiting for the phone's confirmation, or confirmed. Scanning dims the code and puts a tick over it; confirming swaps in the result. Refresh code moves on to the next of three typed links and says the old one no longer works, even when it had been scanned, which is the real rule: a code that is shown once works once. A new code returns the page to waiting.

The same pairing code is printed in words under the QR code, with the address to enter it at, so a person with no camera, or a screen too far away to scan, can type it on their phone instead. The QR code itself has a text name that includes the code. The password route stays one link away for anyone with no phone to hand.

Scanning alone would let anyone who photographs a code on a screen sign in as its owner. Making the person confirm on their own device, ideally with a screen lock or a biometric, and showing them which screen they are linking, keeps the approval deliberate. The demo shows the two moments as two presses for that reason.

A phone can't scan its own screen, but the code still tells the story and the code in words works from another phone. It sits under the steps so the button stays on the first screen, and the page keeps one height through every state.