# All files / src/hooks useDeviceId.ts

0% Statements 0/72
0% Branches 0/29
0% Functions 0/8
0% Lines 0/61

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133

     import { useEffect, useState } from 'react';

    const DEVICE_ID_KEY = 'streamcore_device_id';
    const DEVICE_NAME_KEY = 'streamcore_device_name';

    /**
     * Generate a unique device ID based on browser fingerprint
     */
    function generateDeviceId(): string {
      const navigator = window.navigator;
      const screen = window.screen;

      // Collect browser fingerprint data
      const fingerprint = [
        navigator.userAgent,
        navigator.language,
        screen.colorDepth,
        screen.width + 'x' + screen.height,
        new Date().getTimezoneOffset(),
        !!window.sessionStorage,
        !!window.localStorage,
      ].join('|');

      // Simple hash function
      let hash = 0;
      for (let i = 0; i < fingerprint.length; i++) {
        const char = fingerprint.charCodeAt(i);
        hash = ((hash << 5) - hash) + char;
        hash = hash & hash; // Convert to 32bit integer
      }

      // Add random component for uniqueness
      const random = Math.random().toString(36).substring(2, 15);
      const timestamp = Date.now().toString(36);

      return `web_${Math.abs(hash).toString(36)}_${timestamp}_${random}`;
    }

    /**
     * Hook to manage device ID in localStorage
     * Returns the device ID and a function to check if device is registered
     */
    export function useDeviceId() {
      const [deviceId, setDeviceId] = useState<string>('');
      const [deviceName, setDeviceName] = useState<string>('');
      const [isRegistered, setIsRegistered] = useState<boolean>(false);

      useEffect(() => {
        // Try to get existing device ID from localStorage
        let storedDeviceId = localStorage.getItem(DEVICE_ID_KEY);
        let storedDeviceName = localStorage.getItem(DEVICE_NAME_KEY);

        // If no device ID exists, generate a new one
        if (!storedDeviceId) {
          storedDeviceId = generateDeviceId();
          localStorage.setItem(DEVICE_ID_KEY, storedDeviceId);
        }

        // If no device name exists, use browser info
        if (!storedDeviceName) {
          const browserName = getBrowserName();
          const osName = getOSName();
          storedDeviceName = `${browserName} on ${osName}`;
          localStorage.setItem(DEVICE_NAME_KEY, storedDeviceName);
        }

        setDeviceId(storedDeviceId);
        setDeviceName(storedDeviceName);

        // Check if this device ID is registered (we'll verify with backend)
        const registered = localStorage.getItem(`${DEVICE_ID_KEY}_registered`) === 'true';
        setIsRegistered(registered);
      }, []);

      const markAsRegistered = () => {
        localStorage.setItem(`${DEVICE_ID_KEY}_registered`, 'true');
        setIsRegistered(true);
      };

      const updateDeviceName = (newName: string) => {
        localStorage.setItem(DEVICE_NAME_KEY, newName);
        setDeviceName(newName);
      };

      const clearDeviceData = () => {
        localStorage.removeItem(DEVICE_ID_KEY);
        localStorage.removeItem(DEVICE_NAME_KEY);
        localStorage.removeItem(`${DEVICE_ID_KEY}_registered`);
        setDeviceId('');
        setDeviceName('');
        setIsRegistered(false);
      };

      return {
        deviceId,
        deviceName,
        isRegistered,
        markAsRegistered,
        updateDeviceName,
        clearDeviceData};
    }

    /**
     * Get browser name from user agent
     */
    function getBrowserName(): string {
      const userAgent = navigator.userAgent;

      if (userAgent.includes('Firefox')) return 'Firefox';
      if (userAgent.includes('Edg')) return 'Edge';
      if (userAgent.includes('Chrome')) return 'Chrome';
      if (userAgent.includes('Safari')) return 'Safari';
      if (userAgent.includes('Opera') || userAgent.includes('OPR')) return 'Opera';

      return 'Browser';
    }

    /**
     * Get OS name from user agent
     */
    function getOSName(): string {
      const userAgent = navigator.userAgent;

      if (userAgent.includes('Win')) return 'Windows';
      if (userAgent.includes('Mac')) return 'macOS';
      if (userAgent.includes('Linux')) return 'Linux';
      if (userAgent.includes('Android')) return 'Android';
      if (userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')) return 'iOS';

      return 'Unknown OS';
    }