Step 1: Add the Container

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

<div id="authyo-sdk"></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-sdk.js";
  script.setAttribute("data-appkey", "YOUR_APP_KEY");
  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-sdk.js";

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

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-sdk"></div>;

};
export default AuthyoLogin;

Customization (Auto-loaded from Dashboard)

Your App Key controls these settings:

• ✅ Logo, Header, Body Text
• ✅ Button Shape, Color, Radius
• ✅ Input Styling
• ✅ Social Media Button Layout
• ✅ Hide/Show Branding
• ✅ Terms & Privacy Links

Supported Login Methods

• ✅ Email OTP
• ✅ SMS / WhatsApp / Voicecall
• ✅ QR Code Login
• ✅ Google / Microsoft / LinkedIn / GitHub

Response Structure

{
  "success": true,
  "message": "OTP verified successfully", 
  "data": {
    "email": "abc@xyz.com"
  }
}

Troubleshooting