AngularJS Examples
Angular Integration
Step 1: Add SDK in angular.json
Include the Authyo SDK globally:
// angular.json
"scripts": [
"https://app.authyo.io/js/v1/auth-2fasdk.js"
]
Step 2: Add the Container in Component
Use a simple div placeholder in your HTML:
<div id="authyo-2fasdk"></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-2fasdk.js";
script.setAttribute("data-appkey", "YOUR_APP_KEY");
script.setAttribute("data-emauilid", "abc@xyz.com");
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");
script.setAttribute("data-emauilid", "abc@xyz.com");
document.body.appendChild(script);
window.authyoResponse = (response: any) => {
if (response.success) {
console.log("User verified:", response.data);
} else {
console.error("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 |