QR-Code-Authentifizierung: Das WhatsApp Web-Muster für TAMSIV

Um die Website mit der mobilen App zu verbinden, wollte ich etwas Instantanes. Das WhatsApp Web-Muster: Scannen Sie einen QR-Code und boom, verbunden.

Der Ablauf

Der Benutzer öffnet tamsiv.com → QR-Code wird angezeigt → scannt mit der App → die Website verbindet sich sofort. Aus technischer Sicht: ein Ballett von Tokens und Echtzeitkanälen.

Die Architektur

Der QR-Code kodiert eine Sitzungs-UUID. Die Website erstellt einen Supabase-Eintrag mit dem Status „pending“ und abonniert über Realtime. Die mobile App scannt, bestätigt mit ihrem vorhandenen JWT. Das Backend generiert ein Auth-Token für das Web.

Das Fallback-Polling

Wenn Realtime sich nicht innerhalb von 3 Sekunden verbindet, wird auf HTTP-Polling alle 2 Sekunden umgeschaltet. Funktioniert überall, auch hinter Unternehmensproxys.

Sicherheit

• QR-Code läuft nach 5 Minuten ab
• Einmalige Verwendung – eine Sitzung kann nur einmal bestätigt werden
• Authentifizierung auf mobiler Seite erforderlich
• Ephemeres Token zur Initiierung der Websitzung

Die UX

Automatische Neuerstellung des QR-Codes alle 4min30 mit visuellem Countdown. E-Mail/Passwort- und Magic Link-Optionen als Backup. ~300 Zeilen auf der Webseite, 150 auf der mobilen Seite. Die Art von Funktion, die einen sagen lässt: „Das ist gut durchdacht“.