TypeScript Integration

Step 1: Add the Container

Place this inside your component template (e.g., app.component.html):

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

Step 2: Include the SDK Dynamically

Load the Authyo script dynamically in your ngOnInit method:

// app.component.ts
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);
}

Step 3: Handle the Response with Typing

Declare window.authyoResponse globally and type the expected structure:

// typings.d.ts or inside component
interface AuthyoResponse {
  success: boolean;
  message: string;
  status?: string;
  data?: any;
}
declare global {

interface Window {

authyoResponse: (response: AuthyoResponse) => void;

}

}
// Inside ngOnInit

window.authyoResponse = (response: AuthyoResponse): void => {

if (response.success) {

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

} else {

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

}

};

Example: Full Integration (TypeScript)

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

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

success: boolean;

message: string;

data?: any;

}
@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: AuthyoResponse): void => {

if (response.success) {

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

} else {

console.log('❌ Login failed:', response.message);

}

};

}

}

Customization (Auto-loaded from Dashboard)

Your App Key controls these:

✅ Logo, header, body text
✅ Button shape, color, text
✅ Input styles and colors
✅ Show/hide social logins and branding
✅ Positioning of OAuth buttons
✅ Terms & Privacy links

✅ 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

Problem	Solution
Widget not loading	Ensure `#authyo-sdk` is in the DOM before loading script
No callback triggered	Declare `window.authyoResponse` globally
Blank screen	Make sure `data-appkey` is correct and active
Styling off	Customize in your Authyo dashboard

TypeScript Examples