TypeScript Examples
TypeScript Integration
Step 1: Add the Container
Place this inside your component template (e.g., app.component.html):
<div id="authyo-2fasdk"></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-2fasdk.js';
script.setAttribute('data-appkey', 'YOUR_APP_KEY');
script.setAttribute('data-emailid', 'abc@xyz.com');
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-2fasdk"></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-2fasdk.js';
script.setAttribute('data-appkey', '123456-app-key-xyz');
script.setAttribute('data-emailid', 'abc@xyz.com');
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);
}
};
}
}
Two Factor Authenticate – Requests & Responses
{
"success": true,
"IsTOtpVerified": false,
"message": "ok"
}
{
"success": true,
"message": "qrcode generated successfully",
"QRCoder": "data:image/png;base64,....",
"maskId": "optional"
}
{ "success": true, "message": "verified" }
{ "success": true, "message": "2FA disabled" }
Troubleshooting
| Problem | Fix |
|---|---|
| Widget not loading | Ensure #authyo-2fasdk div exists before the script |
| Blank screen | Ensure valid data-appkey and data-emailid is used |
| No response callback | Implement window.authyoResponse |
| Styling off | Check App Key design settings in dashboard |