Skip to content
ByteAuth

Client Side

Client Side Implementation

Section titled “Client Side Implementation”

Create a QR code embedded with 3 core pieces of information:

  • session_ID - Unique session identifier
  • secret - Challenge phrase for verification
  • timestamp - When the QR code was generated

How it Works

Section titled “How it Works”

Client Diagram

The client’s main role is to request a QR string from its server and refresh it every 30 seconds.

1. Generate QR Code

Section titled “1. Generate QR Code”

Generate QR code using whichever client-side language you prefer. For our examples, we use QRious library.

Import via CDN

Section titled “Import via CDN”
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

Import as JavaScript Module

Section titled “Import as JavaScript Module”
Terminal window
npm install --save qrious
# or
yarn add qrious
const QRious = require("qrious");

Now call the server side getQRCode() function to generate the string for our QR code containing the webhook URL.

GenerateQR.js
getQRCode(); // QR code generating string
setInterval(getQRCode, 30000); // QR update every 30 sec


var sid = "null"; // Initialize with no session


function getQRCode() {
  $.get(
    "/api/getqrcode?sid=" + sid,
    {
      csrf_param: csrf_token,
    },
    function (data) {
      console.log(data.qr);     // the QR code string
      console.log(data.sid);    // the current session
      console.log(data.status); // in case user is already logged in


      if (data.status == 1) {
        // logged in, redirect
        location.href = "/site/dashboard?sid=" + sid;
      }


      sid = data.sid; // set session
      $("#loginQrcodeImgDiv").hide();
      $("#qrious").show(); // show QR code


      var qr = new QRious({
        element: document.getElementById("qrious"),
        value: data.qr,
        size: 188,
      });
    }
  );
}

2. Displaying the QR Code

Section titled “2. Displaying the QR Code”

From the generated QR code, you can now display it on whichever client-side application you prefer. See the HTML code above for an example.

Example

Section titled “Example”

QR Code Example

3. Poll For Status

Section titled “3. Poll For Status”

Once the user is authenticated, the client needs to be redirected to the authorized page. The client implements a polling function that sends regular GET requests to check if the current session’s user was authenticated.

When the user is authenticated on the server, the polling request’s response status changes, triggering a redirect attempt.

Implementation

Section titled “Implementation”

Poll the server with the session ID as a query parameter every 5 seconds:

setInterval(checkFast, 5000);

Client Poll Diagram

Example

Section titled “Example”
checkFast(); // Poll authentication status
setInterval(checkFast, 5000); // Poll every 5 sec


function checkFast() {
  $.get("/api/checkfast?sid=" + sid, function (data) {
    if (data.status == 1) {
      // Attempt redirect if status changes to authenticated
      location.href = "/site/dashboard?sid=" + sid;
    }
    sid = data.sid;
  });
}

If location.href = "/site/dashboard?sid=" + sid succeeds, the user will see a rendered dashboard or account page (which was formerly restricted).