QR Type: Wi-Fi

Relevant source files

The following files were used as context for generating this wiki page:

• src/App.jsx
• src/utils/qr-helpers.js
• src/App.test.js
• README.md
• SECURITY_AUDIT_REPORT.md
• tests/qr-helpers.test.js

The Wi-Fi QR code feature allows users to generate a QR code that contains network credentials. When scanned by a compatible device, it allows the user to connect to a Wi-Fi network without manually entering the SSID, password, or encryption type. This functionality is a core feature of the QR-Tool application, providing a convenient way to share network access.

The implementation is handled entirely on the client-side within the main App component. It involves capturing user input for network details, formatting the data into a standardized Wi-Fi QR string, and then rendering it as a QR code. The application also includes a user-facing warning about the security implications of sharing Wi-Fi passwords.

Sources: README.md, src/App.jsx:1062-1067

Data Flow and Architecture

The generation of a Wi-Fi QR code follows a standard React unidirectional data flow. The user interacts with form elements, which updates the component's state. This state change triggers a re-computation of the QR code content string, which is then passed to a rendering component.

The following diagram illustrates the data flow from user input to the final rendered QR code.

This diagram shows the process starting from user inputs, updating the qrData state, generating the formatted string via generateQRContent, and finally rendering the visual QR code.

Sources: src/App.jsx:304-307, 332, 59-70, 521-546

UI Components and State

The user interface for the Wi-Fi QR type consists of four input fields. These fields collect all the necessary information to construct the Wi-Fi connection string.

Sources: src/App.jsx:1034-1067

Input Fields

Field	UI Component	State Property	Description
Tên Wi-Fi (SSID)	Input	qrData.ssid	The name of the Wi-Fi network.
Mật khẩu	Input (type="password")	qrData.password	The network password.
Loại mã hóa	Select	qrData.encryption	The encryption protocol (WPA/WPA2, WEP, or None). Defaults to WPA.
Wi-Fi ẩn	input (type="checkbox")	qrData.hidden	A boolean flag indicating if the network is hidden.

Sources: src/App.jsx:304-319, 1034-1067

State Management

The data for all QR types, including Wi-Fi, is managed within a single state object named qrData in the App.jsx component. The updateQrData function is used to update the properties of this object.

// src/App.jsx:304-319
const [qrData, setQrData] = React.useState({
    url: 'https://example.com',
    text: '',
    ssid: '',
    password: '',
    encryption: 'WPA',
    hidden: false,
    // ... other qr type fields
});

const updateQrData = (k, v) => setQrData((prev) => ({ ...prev, [k]: v }));

The encryption property is initialized with a default value of 'WPA'.

Sources: src/App.jsx:304-322

QR Content Generation

The core logic for creating the Wi-Fi QR code string resides in the generateQRContent function.

Wi-Fi QR String Format

The function constructs a string compliant with the standard Wi-Fi Network Config format. The general structure is WIFI:T:<encryption>;S:<ssid>;P:<password>;H:<hidden>;;.

The following diagram breaks down the string format:

This diagram shows the sequential construction of the Wi-Fi QR string.

Sources: src/App.jsx:59-70, src/App.test.js:93-100

Implementation Details

The WIFI case within the generateQRContent function handles this logic.

// src/App.jsx:59-70
case QR_TYPES.WIFI: {
    const T = data.encryption || 'WPA';
    const S = escWiFi(data.ssid || '');
    const parts = [`WIFI:T:${T};S:${S};`];
    if (T !== 'nopass' && data.password) parts.push(`P:${escWiFi(data.password)};`);
    if (data.hidden) parts.push('H:true;');
    parts.push(';');
    return parts.join('');
}

Key logic points:

• The encryption type (T) defaults to WPA if not provided.
• The password field (P) is only included if the encryption is not 'nopass' and a password exists.
• The hidden network flag (H) is only included if data.hidden is true.
• The SSID and password values are escaped using the escWiFi helper function to handle special characters.
• The string is always terminated with a double semicolon ;;.

Sources: src/App.jsx:59-70, src/App.test.js:93-149

Special Character Escaping

To prevent parsing errors, certain special characters in the SSID and password fields must be escaped with a backslash (\). The escWiFi function is responsible for this.

// src/App.jsx:52
const escWiFi = (s = '') => s.replace(/([;,:\\"])/g, '\\$1');

This function escapes the following characters: semicolon (;), comma (,), colon (:), backslash (\), and double quote (").

The importance of this escaping is validated in the unit tests.

// src/App.test.js:141-149
it('should handle SSID with special characters', () => {
    const data = {
        ssid: 'WiFi:Test',
        password: 'pass;123',
        encryption: 'WPA',
        hidden: false,
    };
    const result = generateQRContent(QR_TYPES.WIFI, data);
    expect(result).toContain('S:WiFi\\:Test');
    expect(result).toContain('P:pass\\;123');
});

Sources: src/App.jsx:52, src/App.test.js:141-149

Security Considerations

Sharing Wi-Fi credentials via a QR code has security implications. The application acknowledges this by displaying a warning message to the user when the Wi-Fi QR type is selected and an SSID is entered.

// src/App.jsx:1062-1067
{qrType === QR_TYPES.WIFI && qrData.ssid && (
    <div className="mb-4 rounded-xl px-4 py-3 text-xs bg-amber-50 border-2 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800">
        <p className="font-bold text-amber-800 dark:text-amber-300">
            📶 Lưu ý: Chỉ chia sẻ mật khẩu Wi-Fi với người tin cậy
        </p>
    </div>
)}

The message warns the user to only share the Wi-Fi password with trusted individuals. The project's security policy also advises against putting secrets like passwords directly into QR codes in plain text, recommending short-lived tokens or IDs instead, though this is a general guideline and not strictly enforced for the Wi-Fi feature.

Sources: src/App.jsx:1062-1067, SECURITY.md

Summary

The Wi-Fi QR code generation is a self-contained feature within the QR-Tool application. It uses a simple and effective client-side process to gather network details, format them into a standard WIFI: string with proper character escaping, and render the result for easy network sharing. The feature is robust, with clear UI components, default values for stability, and unit tests to verify correct string formatting, including the handling of special characters. A basic security warning is also presented to the user to promote responsible use.