mkdir infobip-2fa-app
cd infobip-2fa-app

# Create server directory and navigate into it
mkdir server
cd server

# Initialize Node.js project
npm init -y

# Install dependencies
npm install express dotenv cors axios

# Create main server file and .env file
touch server.js .env

# Create a simple .gitignore file
echo node_modules > .gitignore
echo .env >> .gitignore

infobip-2fa-app/
└── server/
    ├── node_modules/
    ├── .env
    ├── .gitignore
    ├── package.json
    ├── package-lock.json
    └── server.js

cd ..

# Create Vite/React project in a 'client' directory
npm create vite@latest client -- --template react

# Navigate into the client directory
cd client

# Install dependencies (including axios for API calls)
npm install axios

# Add a .gitignore if not already present (Vite usually adds one)
# Ensure node_modules/ and potentially dist/ are ignored

infobip-2fa-app/
├── client/
│   ├── node_modules/
│   ├── public/
│   ├── src/
│   ├── .gitignore
│   ├── index.html
│   ├── package.json
│   ├── package-lock.json
│   └── vite.config.js
└── server/
    └── ... (server files)

# server/.env

# Infobip Credentials & Configuration
INFOBIP_BASE_URL= # Example: your_instance.api.infobip.com (Find in Infobip Portal)
INFOBIP_API_KEY=  # Your Infobip API Key (Generate in Infobip Portal)
INFOBIP_APP_ID=   # Your Infobip 2FA Application ID (Create in Infobip Portal)
INFOBIP_MSG_ID=   # Your Infobip 2FA Message Template ID (Create in Infobip Portal)

# Server Configuration
PORT=3001 # Port for the backend server

// server/server.js
require('dotenv').config(); // Load environment variables from .env file
const express = require('express');
const cors = require('cors');
const axios = require('axios');

const app = express();
const port = process.env.PORT || 3001;

// --- Middleware ---
// Enable CORS for requests from your frontend
// IMPORTANT: In production, replace 'http://localhost:5173' with your specific frontend domain(s) for security!
app.use(cors({ origin: 'http://localhost:5173' }));
app.use(express.json()); // Parse JSON request bodies

// --- Infobip Configuration ---
const INFOBIP_BASE_URL = process.env.INFOBIP_BASE_URL;
const INFOBIP_API_KEY = process.env.INFOBIP_API_KEY;
const INFOBIP_APP_ID = process.env.INFOBIP_APP_ID;
const INFOBIP_MSG_ID = process.env.INFOBIP_MSG_ID;

// Basic validation function (enhance as needed)
const validatePhoneNumber = (phoneNumber) => {
    // Example: Simple check for E.164 format (digits only, optional +)
    // Infobip generally requires E.164 format (e.g., 447 NNNNNNNNN)
    const phoneRegex = /^\+?[1-9]\d{1,14}$/;
    return phoneRegex.test(phoneNumber);
};

// --- API Endpoints ---

/**
 * @route POST /api/otp/request
 * @desc Request an OTP code to be sent to a phone number via Infobip.
 * @access Public
 * @body { `` `phoneNumber` ``: `` `E.164_formatted_number` `` }
 */
app.post('/api/otp/request', async (req, res) => {
    const { phoneNumber } = req.body;

    // 1. Validation
    if (!phoneNumber || !validatePhoneNumber(phoneNumber)) {
        return res.status(400).json({ success: false, message: 'Invalid phone number format. Use E.164 format (e.g., 447123456789).' });
    }
    if (!INFOBIP_BASE_URL || !INFOBIP_API_KEY || !INFOBIP_APP_ID || !INFOBIP_MSG_ID) {
        console.error('Infobip configuration missing in environment variables.');
        return res.status(500).json({ success: false, message: 'Server configuration error.' });
    }

    // 2. Prepare Infobip API Request
    // NOTE: Ensure these endpoints match the current Infobip 2FA API documentation.
    const infobipUrl = `https://${INFOBIP_BASE_URL}/2fa/2/pin`;
    const requestData = {
        applicationId: INFOBIP_APP_ID,
        messageId: INFOBIP_MSG_ID,
        to: phoneNumber,
        // 'from' can be optionally set here if needed and configured in Infobip
    };
    const requestConfig = {
        headers: {
            'Authorization': `App ${INFOBIP_API_KEY}`,
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
    };

    // 3. Send Request to Infobip
    try {
        console.log(`Requesting OTP for ${phoneNumber} using App ID: ${INFOBIP_APP_ID}, Msg ID: ${INFOBIP_MSG_ID}`);
        const response = await axios.post(infobipUrl, requestData, requestConfig);

        console.log('Infobip Request OTP Response Status:', response.status);
        console.log('Infobip Request OTP Response Data:', response.data);

        // !!! CRITICAL SECURITY WARNING - DEMO ONLY !!!
        // In a real production application, NEVER return the pinId to the client.
        // The pinId is a temporary secret used to link the OTP request to the verification attempt.
        // It should be stored securely on the SERVER-SIDE (e.g., in the user's session,
        // a secure cache like Redis, or a temporary database record) associated with the
        // user who initiated the request. When the user submits the OTP for verification,
        // the backend should retrieve the correct pinId from its secure storage based on the
        // user's session/context to verify the OTP. Exposing the pinId to the client
        // creates significant security risks, potentially allowing attackers to bypass
        // OTP verification under certain conditions (e.g., if they can manipulate or guess pinIds).
        const pinId = response.data.pinId; // For demo purposes ONLY

        res.status(200).json({
            success: true,
            message: 'OTP requested successfully.',
            pinId: pinId // XXX DEMO ONLY - DO NOT SEND IN PRODUCTION XXX
        });

    } catch (error) {
        console.error('Error requesting OTP from Infobip:');
        if (error.response) {
            // Infobip responded with an error status
            console.error('Status:', error.response.status);
            console.error('Data:', error.response.data);
            const errorMsg = error.response.data?.requestError?.serviceException?.text || 'Failed to request OTP.';
            res.status(error.response.status).json({ success: false, message: errorMsg });
        } else if (error.request) {
            // Request was made but no response received
            console.error('Request Error:', error.request);
            res.status(500).json({ success: false, message: 'No response from Infobip.' });
        } else {
            // Something else happened
            console.error('Error:', error.message);
            res.status(500).json({ success: false, message: 'An unexpected error occurred.' });
        }
    }
});

/**
 * @route POST /api/otp/verify
 * @desc Verify an OTP code using the pinId obtained during the request phase.
 * @access Public
 * @body { `` `pinId` ``: `` `infobip_pin_id` ``, `` `otp` ``: `` `user_entered_code` `` }
 */
app.post('/api/otp/verify', async (req, res) => {
    // !!! SECURITY WARNING !!!
    // This endpoint receives the pinId from the client because the /request endpoint
    // insecurely returned it (for demo purposes). In production, the pinId should be
    // retrieved from the secure server-side storage associated with the user's session,
    // NOT passed directly from the client request body.
    const { pinId, otp } = req.body;

    // 1. Validation
    if (!pinId || !otp) {
        return res.status(400).json({ success: false, message: 'Missing pinId or OTP code.' });
    }
     if (!INFOBIP_BASE_URL || !INFOBIP_API_KEY ) {
        console.error('Infobip configuration missing in environment variables.');
        return res.status(500).json({ success: false, message: 'Server configuration error.' });
    }

    // 2. Prepare Infobip API Request
    // NOTE: Ensure this endpoint matches the current Infobip 2FA API documentation.
    const infobipUrl = `https://${INFOBIP_BASE_URL}/2fa/2/pin/${pinId}/verify`;
    const requestData = {
        pin: otp,
    };
    const requestConfig = {
        headers: {
            'Authorization': `App ${INFOBIP_API_KEY}`,
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
    };

    // 3. Send Request to Infobip
    try {
        console.log(`Verifying OTP for pinId: ${pinId}`);
        const response = await axios.post(infobipUrl, requestData, requestConfig);

        console.log('Infobip Verify OTP Response Status:', response.status);
        console.log('Infobip Verify OTP Response Data:', response.data);

        if (response.data.verified) {
            // OTP is correct!
            // In a real app: Clear the server-side pinId storage for this session.
            // Grant access, complete the action, issue session token, etc.
            res.status(200).json({ success: true, message: 'OTP verified successfully.' });
        } else {
            // This path might not always be hit if Infobip returns 4xx for invalid codes directly.
            res.status(400).json({ success: false, message: 'OTP verification failed. Code might be invalid or expired.' });
        }

    } catch (error) {
        console.error('Error verifying OTP with Infobip:');
         if (error.response) {
            console.error('Status:', error.response.status);
            console.error('Data:', error.response.data);
            let message = 'OTP verification failed.';
            // Check specific Infobip error codes for better user feedback
            if (error.response.status === 400 && error.response.data?.requestError?.serviceException?.messageId === 'PIN_NOT_FOUND') {
                message = 'Invalid or expired OTP session. Please request a new code.';
            } else if (error.response.status === 400 && error.response.data?.requestError?.serviceException?.messageId === 'WRONG_PIN') {
                 message = 'Incorrect OTP code. Please try again.';
            } else if (error.response.status === 400 && error.response.data?.requestError?.serviceException?.messageId === 'MAX_ATTEMPTS_EXCEEDED') {
                 message = 'Maximum verification attempts exceeded. Please request a new code.';
            } else {
                // Use generic text from Infobip if available, otherwise fallback
                message = error.response.data?.requestError?.serviceException?.text || message;
            }
            res.status(error.response.status).json({ success: false, message: message });
        } else if (error.request) {
            console.error('Request Error:', error.request);
            res.status(500).json({ success: false, message: 'No response from Infobip verification.' });
        } else {
            console.error('Error:', error.message);
            res.status(500).json({ success: false, message: 'An unexpected error occurred during verification.' });
        }
    }
});

// --- Start Server ---
app.listen(port, () => {
    console.log(`Server listening at http://localhost:${port}`);
    console.log(`Expecting frontend at http://localhost:5173`); // Log expected Vite port
});

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173, // Ensure this matches the CORS origin in server.js
    proxy: {
      // Proxy /api requests to our backend server
      '/api': {
        target: 'http://localhost:3001', // Your backend server address
        changeOrigin: true, // Needed for virtual hosted sites
        // secure: false, // Uncomment if your backend uses http (not recommended for prod)
        // rewrite: (path) => path.replace(/^\/api/, ''), // Uncomment if you want to remove /api prefix when forwarding
      }
    }
  }
})

// client/src/App.jsx
import React, { useState } from 'react';
import axios from 'axios';
import './App.css'; // You can add some basic styling

function App() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [otp, setOtp] = useState('');
  // Store pinId received from backend (DEMO ONLY - consequence of insecure backend practice, see backend notes)
  const [pinId, setPinId] = useState('');
  const [message, setMessage] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [showOtpInput, setShowOtpInput] = useState(false);
  const [isVerified, setIsVerified] = useState(false);

  const handleRequestOtp = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setMessage('');
    setIsVerified(false);
    setShowOtpInput(false); // Reset OTP field visibility
    setOtp(''); // Clear previous OTP input
    setPinId(''); // Clear previous pinId

    try {
      // Use relative path because of Vite proxy '/api'
      const response = await axios.post('/api/otp/request', { phoneNumber });

      if (response.data.success) {
        setMessage('OTP requested successfully. Check your phone.');
        // Store pinId (DEMO ONLY - In production, pinId should NOT be sent to/stored on the client)
        setPinId(response.data.pinId);
        setShowOtpInput(true); // Show OTP input field
      } else {
        setMessage(`Error: ${response.data.message}`);
      }
    } catch (error) {
      console.error('Request OTP error:', error);
      const errorMsg = error.response?.data?.message || 'Failed to request OTP. Check backend connection and phone number format (E.164).';
      setMessage(`Error: ${errorMsg}`);
    } finally {
      setIsLoading(false);
    }
  };

  const handleVerifyOtp = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setMessage('');
    setIsVerified(false);

    // In production, pinId would NOT come from state, but be handled server-side.
    if (!pinId) {
        setMessage('Error: Missing OTP session identifier (pinId). Please request OTP again.');
        setIsLoading(false);
        return;
    }

    try {
       // Use relative path because of Vite proxy '/api'
      const response = await axios.post('/api/otp/verify', { pinId, otp });

      if (response.data.success) {
        setMessage('OTP Verified Successfully!');
        setIsVerified(true);
        setShowOtpInput(false); // Hide OTP field after success
        setPinId(''); // Clear pinId after successful verification
        // --- Here you would typically grant access or perform the secured action ---
        console.log('Proceed with authenticated action...');

      } else {
        setMessage(`Error: ${response.data.message}`);
        setIsVerified(false);
        // Optionally clear OTP input on failure? Or let user retry? Depends on UX choice.
        // setOtp('');
      }
    } catch (error) {
      console.error('Verify OTP error:', error);
       const errorMsg = error.response?.data?.message || 'Failed to verify OTP. Check the code or request a new one.';
       setMessage(`Error: ${errorMsg}`);
       setIsVerified(false);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className=""App""&gt;
      <h1&gt;Infobip 2FA Demo (React + Node.js)</h1&gt;
      {isVerified ? (
        <div className=""success-message""&gt;
          <h2&gt;Access Granted!</h2&gt;
          <p&gt;{message}</p&gt;
           <button onClick={() =&gt; {
               setIsVerified(false);
               setMessage('');
               setPhoneNumber('');
               setOtp('');
               setPinId(''); // Clear pinId state
           }}&gt;Start Over</button&gt;
        </div&gt;
      ) : (
        <>
          {!showOtpInput ? (
            <form onSubmit={handleRequestOtp}&gt;
              <h2&gt;Step 1: Request OTP</h2&gt;
              <label htmlFor=""phoneNumber""&gt;Phone Number (E.164 format):</label&gt;
              <input
                type=""tel""
                id=""phoneNumber""
                value={phoneNumber}
                onChange={(e) =&gt; setPhoneNumber(e.target.value)}
                placeholder=""e.g., 447123456789""
                required
                disabled={isLoading}
              /&gt;
              <button type=""submit"" disabled={isLoading || !phoneNumber}&gt;
                {isLoading ? 'Sending...' : 'Request OTP'}
              </button&gt;
            </form&gt;
          ) : (
            <form onSubmit={handleVerifyOtp}&gt;
              <h2&gt;Step 2: Verify OTP</h2&gt;
               <p&gt;Enter the code sent to {phoneNumber}</p&gt;
              <label htmlFor=""otp""&gt;OTP Code:</label&gt;
              <input
                type=""text"" // Use ""text"" to allow easier input on some devices
                inputMode=""numeric"" // Hint for numeric keyboard
                pattern=""[0-9]*"" // Basic pattern validation
                autoComplete=""one-time-code"" // Helps browsers/password managers suggest the code
                id=""otp""
                value={otp}
                onChange={(e) =&gt; setOtp(e.target.value)}
                // IMPORTANT: Ensure this maxLength matches the ""PIN Length""
                // configured in your Infobip Message Template (Step 3.4).
                maxLength=""6""
                required
                disabled={isLoading}
              /&gt;
               <button type=""submit"" disabled={isLoading || !otp || otp.length &lt; 6}&gt;
                {isLoading ? 'Verifying...' : 'Verify OTP'}
              </button&gt;
               <button type=""button"" onClick={() =&gt; {
                   setShowOtpInput(false);
                   setMessage('');
                   setOtp('');
                   // Keep phone number for convenience? Or clear? User choice.
                   // setPhoneNumber('');
                }} disabled={isLoading} style={{marginLeft: '10px', background: '#ccc'}}&gt;
                   Change Number / Resend
               </button&gt;
            </form&gt;
          )}

          {message && <p className={`message ${isVerified ? 'success' : message.toLowerCase().includes('error') ? 'error' : 'info'}`}&gt;{message}</p&gt;}
        </&gt;
      )}
    </div&gt;
  );
}

export default App;

/* client/src/App.css */
.App {
  font-family: sans-serif;
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

label {
  font-weight: bold;
  text-align: left;
  margin-bottom: -10px; /* Adjust spacing */
}

input[type=""tel""],
input[type=""text""] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
}

button {
  padding: 12px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:disabled {
  background-color: #aaa;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background-color: #0056b3;
}

.message {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid transparent; /* Base border */
}

.info {
  color: #00529B;
  background-color: #BDE5F8;
  border-color: #00529B;
}

.error {
  color: #D8000C;
  background-color: #FFD2D2;
  border-color: #D8000C;
}

.success {
   color: #4F8A10;
   background-color: #DFF2BF;
   border-color: #4F8A10;
}

.success-message h2 {
    color: #4F8A10;
    margin-bottom: 10px;
}
.success-message p {
    margin-bottom: 15px;
}