Lovable and Duo Security integration: Step-by-Step Guide 2025

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

How to integrate Lovable with Duo Security?

Adding the Duo Dependency via Code

Since Lovable doesn’t have a terminal, you must include any external libraries directly in your code. In this example we will use Axios to call Duo’s API. Open your main HTML file (e.g., index.html) and add the following script tag inside the <head> section to load Axios from a CDN:


<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Creating the Duo Configuration File

Create a new TypeScript file named duoConfig.ts in your project’s configuration folder (or in the root if no folder exists). This file will hold your Duo Security credentials and API details. Replace the placeholder values with the actual details from your Duo admin panel:


export const duoConfig = {
  ikey: 'YOURDUOINTEGRATION_KEY',
  skey: 'YOURDUOSECRET_KEY',
  host: 'YOURDUOAPI_HOST'  // Example: "api-xxxxxxxx.duosecurity.com"
};

Creating the Duo Integration Module

Next, create a new TypeScript file named duoIntegration.ts. This file contains helper functions to interact with Duo’s API. In this example, we are adding a function to trigger a Duo enrollment check for a given user. Insert the following code into duoIntegration.ts:


import { duoConfig } from './duoConfig';

// Note: Axios is available via the CDN,
// so you can use it from the global scope as "axios" 
export async function duoEnroll(userId: string): Promise {
  // Build the Duo API URL for the specified user.
  const url = https://${duoConfig.host}/admin/v1/users/${userId};
  
  // Duo API authentication uses iKey as username and sKey as password.
  const auth = {
    username: duoConfig.ikey,
    password: duoConfig.skey
  };

  try {
    // Make a GET request to the Duo API
    const response = await axios.get(url, { auth });
    return response.data;
  } catch (error) {
    throw new Error('Duo enrollment failed: ' + error);
  }
}

Integrating Duo into Your Authentication Flow

Identify the part of your Lovable project that handles user login or two‐factor authentication. This might be a file such as auth.ts or a section within your existing login handling code. In that file, import your Duo integration module and call the duoEnroll function after your user’s primary credentials have been validated. For example:


import { duoEnroll } from './duoIntegration';

// This function simulates a user login handler.
export async function handleUserLogin(userId: string, password: string): Promise {
  // 1. Validate the user's primary credentials (this code is part of your existing login process)
  const userIsValid = await validateUserCredentials(userId, password);
  if (!userIsValid) {
    throw new Error('Invalid username or password.');
  }

  // 2. Trigger the Duo enrollment/check for additional security
  try {
    const duoResult = await duoEnroll(userId);
    console.log('Duo response:', duoResult);
    // Here you can process duoResult to ensure that the user passes Duo’s two-factor requirements.
    // For instance, you might check if the user is enrolled or if a challenge was issued.
  } catch (error) {
    console.error(error);
    throw new Error('Two-factor authentication failed.');
  }

  // 3. Finalize the login process if everything is successful
  console.log('User login complete with Duo two-factor authentication.');
}

// Dummy function: replace with your actual credential validation logic.
async function validateUserCredentials(userId: string, password: string): Promise {
  // Your existing user validation code goes here.
  return true;
}

Final Integration Check

Make sure that your main code invokes the login handler. Wherever your application triggers a login (for example, in your main application file or authentication controller), import and call handleUserLogin with the appropriate user details. This integrates Duo’s two-factor check into your existing workflow.


import { handleUserLogin } from './auth';

// Example usage: this would be triggered upon a login form submission.
const userId = 'exampleUserId';
const password = 'examplePassword';

handleUserLogin(userId, password)
  .then(() => {
    console.log('Login successful with Duo security.');
  })
  .catch((error) => {
    console.error('Login failed:', error.message);
  });

By following these steps and inserting the code snippets in the correct files, your Lovable project will be integrated with Duo Security for two-factor authentication.

Rapid Dev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with. They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.

CPO, Praction - Arkady Sokolov

May 2, 2023

Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost. He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!

Co-Founder, Arc - Donald Muir

Dec 27, 2022

Rapid Dev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space. They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.

Co-CEO, Grantify - Mat Westergreen-Thorne

Oct 15, 2022

Rapid Dev is an excellent developer for no-code and low-code solutions.
We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.

Co-Founder, Church Real Estate Marketplace - Emmanuel Brown

May 1, 2024

Matt’s dedication to executing our vision and his commitment to the project deadline were impressive.
This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!

Production Manager, Media Production Company - Samantha Fekete

Sep 23, 2022