Two-Factor Authentication

Application Configuration

User Configuration

Example Implementation

// get all required elements
const loginForm     = document.getElementById('login-form');
const emailInput    = document.getElementById('email');
const passwordInput = document.getElementById('password');
const loginButton   = document.getElementById('login-button');
   
loginForm.addEventListener('submit', async (event) => {

   event.preventDefault();

   loginButton.disabled = true;
   
   // get from values
   const email    = emailInput.value;
   const password = passwordInput.value;
   
   // login
   const response = await fetch('/structr/rest/login', {
      method: 'POST',
      body: JSON.stringify({
         eMail: email,
         password: password
      })
   });

   if (response.status === 202) {

      let redirectUrl      = response.headers.get('twoFactorLoginPage')
            + '?token=' + response.headers.get('token')
            + '&qrdata=' + (response.headers.get('qrdata') ?? '');

      window.location.href = redirectUrl;

   } else {
      
      if (response.ok) {
         
         loginButton.textContent = 'Login successful';
         window.location.href    = '/';

      } else {
         
         loginButton.disabled    = false;
         loginButton.textContent = 'Wrong username or password.';

         window.setTimeout(function() {
            loginButton.value    = 'Login';
            loginButton.disabled = false;
         }, 2000);
      }
   }
});

<div id="qrimage-wrapper">
   <img id="qrimage" style="margin-left: calc(50% - 100px);">
   <div>To use two factor authentication, scan this QR code with an authenticator app on your smartphone.</div>

   <div class="text-sm mt-6">
      <div>
         <b>Android: </b>
         <a class="cursor-pointer hover:text-blue-400 text-blue-700" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en&gl=US">Google Authenticator</a> on Google Playstore
      </div>
      <div>
         <b>Apple iOS: </b>
         <a class="cursor-pointer hover:text-blue-400 text-blue-700" href="https://apps.apple.com/us/app/google-authenticator/id388497605">Google Authenticator</a> on App Store
      </div>
   </div>
</div>

<form action="#" id="twoFactorForm">
   <input id="twoFactorToken" type="hidden" value="${request.token}">
   <div class="my-6">
      <label class="block text-sm font-medium leading-5 text-gray-700">Two Factor Code</label>
      <input id="twoFactorCode" class="appearance-none block w-full px-3 py-2 bg-blue-100 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5">
   </div>
   <button type="submit" id="login-button" class="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-indigo active:bg-blue-700 transition duration-150 ease-in-out">Login</button>
</form>

<script>
   document.addEventListener('DOMContentLoaded', () => {

      // get all required elements
      const qrimageWrapper = document.getElementById('qrimage-wrapper');
      const token          = document.getElementById('twoFactorToken').value;
      const codeInput      = document.getElementById('twoFactorCode').value;
      const loginButton    = document.getElementById('login-button');

      let qrdata = (new URLSearchParams(location.search)).get('qrdata');

      if (!qrdata) {
         // remove qr code placeholder if user is not shown qr code
         qrimageWrapper.remove();
      } else {
         // transform url-safe qr code to regular base64 to display as image
         qrimageWrapper.querySelector('#qrimage').src = 'data:image/png;base64, ' + qrdata.replaceAll('_', '/').replaceAll('-', '+');
      }

      document.getElementById('twoFactorForm').addEventListener('submit', async (event) => {

         event.preventDefault();

         loginButton.disabled = true;

         const response = await fetch('/structr/rest/login', {
            method: 'POST',
            body: JSON.stringify({
               twoFactorToken: token,
               twoFactorCode: codeInput
            })
         });
         
         if (response.ok) {
            
            loginButton.textContent = 'Login successful';
            window.location.href    = '/';

         } else {

            let buttonText = 'Login failed - is device time correct?';
            
            let reason = response.headers.get('reason');
            
            if (reason === 'wrongTwoFactorCode') {
               buttonText = 'Two Factor Code is not correct';
            }

            loginButton.disabled    = false;
            loginButton.textContent = buttonText;

            window.setTimeout(function() {
               loginButton.textContent = 'Login';
               loginButton.disabled    = false;
            }, 2000);
         }
      });
   });
</script>