Bolt.new AI and Duo Security integration: Step-by-Step Guide 2025

 

Configuring Duo Security Credentials

 

Create a file named config.ts in your project’s root (or configuration folder) and add your Duo Security settings. Replace the placeholder values with your actual Duo keys and host information.

export const DUO_CONFIG = {
  integrationKey: 'YOURDUOINTEGRATION_KEY',
  secretKey: 'YOURDUOSECRET_KEY',
  apiHost: 'api-XXXXXXXX.duosecurity.com',
  applicationKey: 'ARANDOMAPPLICATION_KEY' // Used for signing requests; generate a strong secret value
};

 

Adding the Duo Security Helper Functions

 

Since Bolt.new AI does not support terminal installations, manually create a file named duo_web.ts in your project to handle Duo signature creation and verification. This simplified example mimics Duo’s signing process. In production, replace these functions with proper cryptographic implementations.

import { DUO_CONFIG } from './config';

export function signRequest(username: string): string {
    // Constructs a dummy signed request string based on Duo guidelines.
    const requestData = ${DUO_CONFIG.integrationKey}:${username};
    // Create signature using secretKey; here using btoa for demonstration.
    // Replace with a proper HMAC signing mechanism in production.
    return btoa(requestData + ':' + DUO_CONFIG.secretKey);
}
export function verifyResponse(sigResponse: string): string | null {
    // Verifies the Duo response.
    try {
        const decoded = atob(sigResponse);
        const parts = decoded.split(':');
        if (parts && parts.length >= 2) {
            // Return the username if signature format is correct.
            return parts[1];
        }
    } catch(e) {
        console.error('Duo signature verification failed', e);
    }
    return null;
}

 

Integrating Duo Authentication in Your Login Flow

 

Create or modify an authentication file (for example, auth.ts) to include Duo integration. Import the helper functions from duo_web.ts and use them in your login flow to initiate Duo authentication and verify user responses.

import { signRequest, verifyResponse } from './duo_web';

// Function to initiate the Duo authentication process
export function initiateDuoAuth(username: string): string {
  // Generate the signed Duo authentication request signature.
  const duoSigRequest = signRequest(username);
  // This signature should be embedded in your Duo iframe on the frontend.
  return duoSigRequest;
}
// Function to handle and verify the Duo response from the frontend.
export function handleDuoResponse(duoSigResponse: string): string {
  const username = verifyResponse(duoSigResponse);
  if (username) {
    // If successful, continue with your normal login logic.
    return User ${username} authenticated successfully.;
  } else {
    // Handle failed authentication.
    return 'Duo Authentication failed.';
  }
}

 

Modifying Your Frontend to Include the Duo Prompt

 

In your login page file (for example, login.tsx), embed the Duo iframe using the signature generated from your backend. This will display Duo’s authentication widget to the user.

// Ensure you have a container element (e.g., a div with id="duo-container")
// where the Duo iframe will be inserted.

const duoSigRequest = 'REPLACEWITHFETCHEDDUOSIGREQUESTFROM_BACKEND'; // Fetch this using initiateDuoAuth
const duoFrameHTML =   <iframe id="duo_iframe"     style="width:100%; height:500px;"     frameborder="0"     src="https://${DUOCONFIG.apiHost}/frame/web/v1/auth?duosig_request=${encodeURIComponent(duoSigRequest)}">   </iframe>;
// Render the Duo iframe inside a container element on your page.
document.getElementById('duo-container')!.innerHTML = duoFrameHTML;

 

Handling Duo Response on the Frontend

 

After the user interacts with Duo’s widget, capture the response value and post it back to your backend verification endpoint. Add the following snippet to your login page code (for example, in login.tsx).

// Assume there is an input field with id="duo-response" that receives the Duo response,
// and a button with id="duo-submit" to submit the authentication response.

document.getElementById('duo-submit')!.addEventListener('click', function() {
  const duoResponse = (document.getElementById('duo-response') as HTMLInputElement).value;
  // In a real application, post this response to your backend endpoint.
  // Here, we simulate the process by directly calling handleDuoResponse.
  // Import handleDuoResponse in the frontend code if using a shared module or via an API call.
  const result = handleDuoResponse(duoResponse);
  alert(result);
});

 

Finalizing the Integration in Your Bolt.new AI Project

 

Ensure your project structure includes the newly created files:

// File structure example:
// /config.ts        - Contains Duo Security configurations
// /duo_web.ts       - Contains Duo helper functions for signing and verifying requests
// /auth.ts          - Contains backend functions for initiating Duo authentication and handling responses
// /login.tsx        - Frontend login page that integrates the Duo iframe and response handling

No terminal commands are needed as all dependencies and integrations are managed via code files.