Skip to main content

Client Side

Create a QR code embeded with 3 core pieces of information

  • session_ID
  • secret
  • timestamp

How it Works

Client Diagram

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

1. Generate QR Code

Generate QR code using whichever client side language preferred. For our examples we are using QRious library to generate QR codes embedded with the data needed.

Import CDN using script tag

QRious cdn

<script src=""></script>

Import JavaScript module

  1. Install package
npm install --save qrious
yarn add qrious
  1. Import library
const QRious = require("qrious");

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


getQRCode(); //QR code generating string

setInterval(getQRCode, 30000); //QR update every 30 sec
var sid = "null"; //Initialize with no session
function getQRCode() {
"/api/getqrcode?sid=" + sid,
"<?= Yii::$app->request->csrfParam ?>":
"<?= Yii::$app->request->csrfToken ?>",
function (data) {
console.log(data.qr); //the QR code string
console.log(data.sid); //the current session
console.log(data.status); //in case the user is already
if (data.status == 1) {
//logged in, redirect.
location.href = "/site/dashboard?sid=" + sid;
sid = data.sid; //set session
$("#qrious").show(); //show QR code
var qr = new QRious({
//generate QR code image from string
element: document.getElementById("qrious"),
value: data.qr,
size: "188",

Ensure the QR Code gets refreshed periodically. setInterval(checkFast, 30000); Ensures the QR Code is refreshed every 30 seconds (the server side will handle refreshing the challenges ever so often. The session remains the same until the user reloads the login page.)

2. Displaying the QR Code

From the generated QR code you can now choose to display the QR code on whichever client side application selected. See the above HTML code for an example.



3. Poll For Status

Once the user is authenticated the client needs to be redirected to the authorized page. In order to solve this problem the client implements a polling function and send regular GET requests to the server to see if the current session's user was authenticated. When the user is authenticated on the server then the server will change the polling request's reponse status which will trigger a redirect attempt. The page we redirect to will look up the session status and grant the user full access.


Once the user is authenticated on the server the client must also get informed of this. To do so the client must ping the server with a polling function, every 5 seconds (or less).

In our example we are polling the server with the session id as a query parameter every 5 seconds using:

setInterval(checkFast, 5000);

Client Diagram


checkFast(); //Poll authentication status
setInterval(checkFast, 5000); //Poll every 5 sec

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

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