How to verify OTP from MSG91 url with reactjs

Question

I am working on small project of receive OTP and verify OTP, both come from MSG91 I am able to receive OTP from MSG91 but for verify OTP still I am facing error 'Failed to verify OTP : Invalid Auth key' but I am using correct Auth key , templated id, and all things. I am using setupProxy.js and App.js.

const { createProxyMiddleware } = require('http-proxy-middleware');

const templateId = 'xxxxxxxxxxxxxxxxx';
const authKey = 'xxxxxxxxxxxxxxxxxx'; 

module.exports = function(app) {
app.use(
    '/api/verifyOTP',
    createProxyMiddleware({
      target: `https://control.msg91.com/api/v5/otp/verify?authkey=${authKey}`,
      changeOrigin: true,
      pathRewrite: function (path, req) {
        const mobile = req.body ? req.body.mobile : '';
        const otp = req.body ? req.body.otp : '';
        return `&mobile=91${mobile}&otp=${otp}`;
      }
    })
  );
}
<button onClick={verifyOTP}>Verify OTP</button>
const verifyOTP = async () => {
      const mobileNumber = mobile;
  
    try {
      const response = await fetch(`/api/verifyOTP?otp=${otp}&mobile=91${mobileNumber}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      });
  
      if (response.ok) {
        const responseData = await response.json();
  
        if (responseData.type === 'success' && responseData.message === 'OTP verified successfully') {
          console.log('OTP Verified Successfully');
        } else {
          console.error('Failed to verify OTP:', responseData.message);
        }
      } else {
        console.error('Error verifying OTP. Status code:', response.status);
      }
    } catch (error) {
      console.error('Error verifying OTP:', error);
    }
  };

Answer 1

The issue here is that MSG91 verify OTP API expects the auth key to be sent via headers and not query parameters.

Also from what I can tell you are trying to access otp and mobile on the request body, but when you fetch data from the verifyOTP endpoint you again pass it in query parameters and not request body. So adjust the value.

app.use(
    '/api/verifyOTP',
    createProxyMiddleware({
      target: `https://control.msg91.com/api/v5/otp/verify`,
      changeOrigin: true,
      pathRewrite: function (path, req) {
        const mobile = req.query.mobile ?? '';
        const otp = req.query.otp ?? '';
        return `&mobile=91${mobile}&otp=${otp}`;
      },
      headers: {authkey: 'Enter your MSG91 authkey'}
    })
  );
}

Reference

curl --request GET \
     --url 'https://control.msg91.com/api/v5/otp/verify?mobile=919999999999' \
     --header 'accept: application/json' \
     --header 'authkey: Enter your MSG91 authkey'