QR Code Authentication

import { useEffect, useState } from 'react';
import Ably from 'ably/promises';

function QRLogin() {
  const [qrData, setQrData] = useState(null);
  const [status, setStatus] = useState('pending');
  const [authData, setAuthData] = useState(null);

  useEffect(() => {
    generateQRSession();
  }, []);

  const generateQRSession = async () => {
    const response = await fetch('/api/en/shop/auth/qr-login/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ device_name: 'Web Browser' })
    });
    
    const data = await response.json();
    if (data.success) {
      setQrData(data.data);
      subscribeToUpdates(data.data.session_id);
    }
  };

  const subscribeToUpdates = (sessionId) => {
    const ably = new Ably.Realtime('YOUR_ABLY_KEY');
    const channel = ably.channels.get(`qr-login:${sessionId}`);
    
    channel.subscribe('qr_login_status', (message) => {
      const { status, token, refresh_token, user } = message.data;
      setStatus(status);
      
      if (status === 'confirmed' && token) {
        setAuthData({ token, refresh_token, user });
        // Store tokens and redirect user
        localStorage.setItem('auth_token', token);
        localStorage.setItem('refresh_token', refresh_token);
        window.location.href = '/dashboard';
      }
    });
  };

  return (
    <div>
      {qrData && (
        <div>
          <QRCodeDisplay value={qrData.qr_code} />
          <p>Status: {status}</p>
          {status === 'pending' && <p>Scan QR code with your mobile app</p>}
          {status === 'scanned' && <p>Confirm login on your mobile device</p>}
        </div>
      )}
    </div>
  );
}