client.js

// note: this is a base code, this could be far improved
async function GenerateFP() {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    ctx.textBaseline = 'top';
    ctx.font = '14px Arial';
    ctx.fillText(navigator.userAgent, 2, 2);
    return btoa(canvas.toDataURL()).slice(-32);
}

async function Authenticate(userId) {
    const fingerprint = await GenerateFP();
    const res = await fetch('http://localhost:8080/auth', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            userId,
            fingerprint
        })
    });

    const data = await res.json();
    if (!data.ok) throw new Error('Auth failed');

    return {
        token: data.token,
        fingerprint
    };
}

async function ValidateToken(token, fingerprint) {
    const res = await fetch('http://localhost:8080/validate', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            token,
            fingerprint
        })
    });

    return (await res.json()).ok;
}

// example usage
(async () => {
    try {
        const {
            token,
            fingerprint
        } = await Authenticate('user123');
        console.log('token:', token);
        const isValid = await ValidateToken(token, fingerprint);
        if (isValid) {
            console.log('access granted');
            // do something here, like load ur code
        }
    } catch (err) {
        console.error(err);
    }
})();