Step 1: Add the Container

Place the SDK container inside your component (e.g., AuthyoLogin.js):

<div id="authyo-2fasdk"></div>

Step 2: Load the SDK Script Dynamically

Use useEffect to inject the SDK into the DOM:

useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://app.authyo.io/js/v1/auth-2fasdk.js";
  script.setAttribute("data-appkey", "YOUR_APP_KEY");
  script.setAttribute("data-emailid", "YOUR_EMAIL");
  script.async = true;
  document.body.appendChild(script);
}, []);

Step 3: Handle Authyo Response

Bind the response handler using window.authyoResponse:

useEffect(() => {
  window.authyoResponse = (response) => {
    if (response.success) {
      console.log("✅ User Verified:", response.data);
    } else {
      console.error("❌ Login Failed:", response.message);
    }
  };
}, []);

Example: Complete React Component

import React, { useEffect } from "react";
const AuthyoLogin = () => {

useEffect(() => {

const script = document.createElement("script");

script.src = "https://app.authyo.io/js/v1/auth-2fasdk.js";

script.setAttribute("data-appkey", "123456-app-key-xyz");

script.setAttribute("data-emailid", "abc@xyz.com");

script.async = true;

document.body.appendChild(script);
window.authyoResponse = (response) => {

if (response.success) {

console.log("✅ Verified:", response.data);

} else {

console.log("❌ Failed:", response.message);

}

};

}, []);
return <div id="authyo-2fasdk"></div>;

};
export default AuthyoLogin;

Two Factor Authenticate – Requests & Responses

Troubleshooting