Step 1: Add SDK in angular.json

Include the Authyo SDK globally:

// angular.json
"scripts": [
  "https://app.authyo.io/js/v1/auth-sdk.js"
]

Step 2: Add the Container in Component

Use a simple div placeholder in your HTML:

<div id="authyo-sdk"></div>

Step 3: Initialize Authyo in Component

Use lifecycle hook to initialize with your app key:

   
declare global {
  interface Window { authyoResponse: any; }
}
export class AppComponent implements OnInit {

ngOnInit(): void {

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

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

script.setAttribute("data-appkey", "YOUR_APP_KEY");

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

if (response.success) {

console.log("✅ Success", response.data);

} else {

console.error("❌ Error", response.message);

}

};

}
}

Example: Full Angular HTML + Component

// app.component.html
<div id="authyo-sdk"></div>

// app.component.ts

import { Component, OnInit } from '@angular/core';
@Component({

selector: 'app-root',

templateUrl: './app.component.html'

})

export class AppComponent implements OnInit {

ngOnInit(): void {

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

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

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

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

if (response.success) {

console.log("User verified:", response.data);

} else {

console.error("Login failed:", response.message);

}

};

}

}

Customization (Auto-loaded)

Custom settings are fetched via App Key from dashboard:

• Logo, text, and titles
• Button shape, color, and font
• Input styles and behavior
• Social button layout (top/bottom)
• Show/hide branding
• Terms & Privacy URLs

Supported Login Methods

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

Response Structure

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

Troubleshooting