QR code login for another device in mobile app

QR Code Authorization Implementation on Another Device

QR authorization — user already logged in mobile app, opens website or tablet, and instead of entering password, scans QR code with phone. Telegram Web, WhatsApp Web, Steam use this exact mechanics. Convenient and secure: credentials not entered on second device.

Authorization Protocol

Works via temporary challenge:

1. Second device (web/tablet) requests temporary session_token and qr_id from backend.
2. Displays QR code with content: yourapp://qr-auth?token={session_token}.
3. Web starts polling or subscribes to WebSocket event by qr_id.
4. User scans QR with phone — app decodes session_token.
5. Phone sends to backend: "User X authorizes session session_token".
6. Backend checks session_token exists and not expired, creates session for second device.
7. Second device gets access_token via WebSocket or next polling request.

session_token lives 2–5 minutes. After use — immediately invalidated. Reuse impossible.

Mobile Implementation

Phone scans QR and confirms authorization:

class QRAuthViewModel(
    private val qrAuthRepository: QRAuthRepository,
    private val cameraManager: CameraManager
) : ViewModel() {

    fun onQRScanned(qrContent: String) {
        val token = parseQRToken(qrContent) ?: run {
            _state.value = QRAuthState.InvalidQR
            return
        }
        // Show confirmation screen before sending request
        _state.value = QRAuthState.ConfirmationRequired(token)
    }

    fun confirmAuthorization(token: String, deviceInfo: DeviceInfo) {
        viewModelScope.launch {
            _state.value = QRAuthState.Loading
            qrAuthRepository.authorizeQRSession(
                sessionToken = token,
                deviceName = deviceInfo.name,
                deviceType = deviceInfo.type
            ).fold(
                onSuccess = { _state.value = QRAuthState.Authorized },
                onFailure = { e ->
                    _state.value = when (e) {
                        is TokenExpiredException -> QRAuthState.QRExpired
                        is AlreadyUsedException -> QRAuthState.QRAlreadyUsed
                        else -> QRAuthState.Error(e.message)
                    }
                }
            )
        }
    }
}

Confirmation screen — mandatory. User must explicitly tap "Log In" before session authorized. Without this — risk of accidental QR scan.

QR Generation and Display on Second Device

On web, QR updates on expiration — new request to backend for fresh session_token. Animated timer shows remaining time. Via WebSocket: { event: "qr_authorized", accessToken: "..." } — instant authorization without page reload.

On tablet (second mobile device) — same logic, only QR displayed via native library. On Android: zxing, on iOS: CIFilter.qrCodeGenerator.

Security

QR contains only temporary token — not credentials. Even if someone photographed QR — token expires within minutes or already used. HTTPS mandatory for all requests. Backend checks session_token created for same user_id that phone confirms.

QR authorization implementation (mobile scanner + backend protocol + web side): 2–3 weeks. Cost estimated individually.