WAuthJS: Web Socket Authentication using Vanilla JS and PASETO

Use this js for Two-Factor Authentication (2FA) WhatsApp Application Login. We choose PASETO over JWT because its security and simplicity. This library uses englishextra/qrjs2 to generate QR.

How to use

1. Copy wauth.js to your asset public static folder. For example: assets/js folder.

2. Add this div and p tag into your login section page in your login HTML page. For example: inside the login div/section before the form

   <div id="whatsauthqr"><div></div></div>
   <p id="whatsauthcounter">hi</p>

3. Check your login form HTML tag. Please add id in form, input, and button tag. For Example, we have form login :

   <form action="#" method="post" id="loginform">
    <input type="text" name="id_siap" id="user_name">
    <input type="password" name="password" id="user_pass">
    <button type="submit" id="login">Sign In</button>
   </form>

   Edit the const declaration in wauthjs.js according to the id in the login form.

    const using_click = true;        // true = id_button.click()    |   false = id_form.submit()
    const id_user = 'user_name';     //id of username input text. For example : <input type="text" name="id_siap" id="user_name">
    const id_pass = 'user_pass';     //id of password input. For Example : <input type="password" name="password" id="user_pass">
    const id_form = 'loginform';     //id of form tag. For Example : <form action="#" method="post" id="loginform">
    const id_button = 'login';       //id of login button. For Example : <button type="submit" class="btn btn-primary btn-block" id="login">Sign In</button>
   
    const auth_ws = 'd3NzOi8vYXV0aC51bGJpLmFjLmlkL3dzL3doYXRzYXV0aC9xcg==';    //wss URL using btoa(). In this example : btoa("wss://auth.ulbi.ac.id/ws/whatsauth/qr");
    const keyword = 'aHR0cHM6Ly93YS5tZS82MjgxMTIwMDAyNzk/dGV4dD13aDR0NWF1dGgw';  //whatsapp API with prefix keyword using btoa(). In this example : btoa("https://wa.me/628112000279?text=wh4t5auth0");
   
    const interval = 30;     // qrcode change interval in second
    const maxqrwait = 90;    // maximum qrcode display/ time out in second, usually = 3 x interval.

   Add wauth.js script at the end of your body login HTML page, for example: before tag.

   <script src="assets/js/wauth.js"></script>

4. Build your user database, consisting of users with WhatsApp phone numbers (with the international format, eg:6281112233).

5. Build your whatsauth server or use an existing one, and add your app domain to your CORS Config.

How it Works

This section explains how wauth.js works:

1. QR shows by Loop for interval(variable) until maxqrwait(variable).
2. UUID generated by random string combined with UUID, use dot(.) for separator and several information about the device.
   • prefix : d for desktop, m for mobile, and v4 if paseto.
   • suffix: URL information of current access as Agent URL.
3. WebSocket open by whatsauth.js in client browser. Starting to send UUID messages and listening for authentication JSON.

   {
     "user_name" : "user name",
     "user_pass" : "user new random password",
     "login"     : "PASETO token",
     "uuid"      : "additional user information"
   }

4. In mobile version, you might click QR(no need to scan) to login to generate magic link
5. Magic Link uses a PASETO token passing into the agent URL as uuid parameter. For example of magic link: https://Agent/URL/?uuid=PASETOKEN
6. You might use the magic link to call authentication JSON from the web socket for auto login.
7. There are Cookies in PASETO format with Login as the name. Use it to authenticate with the backend