JavaScript Integration

Step 1: Add the Container

Place a container element in your HTML to hold the Authyo widget.

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

Step 2: Include the SDK Script

Include the hosted Authyo SDK and pass your App Key using data-appkey:

<script src="https://app.authyo.io/js/v1/auth-sdk.js" data-appkey="YOUR_APP_KEY"></script>

Step 3: Optional – Capture the Response

Handle success or failure using window.authyoResponse:

<script>
  window.authyoResponse = function(response) {
    if (response.success) {
      alert('Success: ' + response.message);
    } else {
      alert('Error: ' + response.message);
    }
  };
</script>

Example: Complete Integration

<div id="authyo-sdk"></div>
 <script src="https://app.authyo.io/js/v1/auth-sdk.js" data-appkey="123456-app-key-xyz"></script>  
<script>
      window.authyoResponse = function(response) {
        if (response.success) {
          console.log("User verified:", response.data);
        } else {
          console.log("Login failed:", response.message);
        }
      };
</script>

Customization (Auto-loaded from Dashboard)

Your App Key pulls styling options automatically:

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

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

Response Structure

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

Troubleshooting

Problem	Fix
Widget not loading	Ensure `#authyo-sdk` div exists before the script
Blank screen	Ensure valid `data-appkey` is used
No response callback	Implement `window.authyoResponse`
Styling off	Check App Key design settings in dashboard

IMPORTANT SECURITY INSTRUCTION: THE VERIFICATION TOKEN

WARNING: You MUST securely validate the Verification Token (JWT) on your own backend!

When a user successfully logs in via ANY method (OTP, Passkey, Google One Tap, Social Media), the Authyo SDK returns a token to the client browser.

Client-side confirmation (success: true) is NOT enough to log a user into your application securely, as client-side JavaScript can be manipulated by malicious users.

HOW TO USE IT SECURELY:

The Authyo SDK authenticates the user and returns the Token to the browser via window.authyoResponse.
The browser MUST send this Token to YOUR backend server (e.g., via a hidden form field or API request).
YOUR backend server MUST validate this Token (either by verifying the JWT signature locally using your Authyo App Secret, or by calling the Authyo VerifyToken endpoint).
Only AFTER your server confirms the token is valid and unexpired should you issue a session cookie or local authentication state to the user.

1. Google One Tap

Handles the credential response returned silently by the Google One Tap iframe/overlay.

Response (Contains Verification Token):

{
  "success": true,
  "status": "success",
  "message": "verified successfully",
  "data": {
    "tokenType": "Bearer",
    "token": "eyJhbGciOiJIUz...",    <-- THIS MUST BE VERIFIED BY YOUR BACKEND
    "expiresIn": 1799,
    "user": {
      "identity": "user@gmail.com",
      "userId": "AY-..."
    }
  }
}

2. Passkey (WebAuthn)

Performs cryptographic validation of the WebAuthn user assertion.

Request Body:

{
  "id": "credential_id_string",
  "rawId": "base64url_encoded_string",
  "type": "public-key",
  "extensions": {},
  "response": {
    "authenticatorData": "base64url_encoded_string",
    "clientDataJSON": "base64url_encoded_string",
    "signature": "base64url_encoded_string"
  },
  "userName": "user@example.com",
  "deviceId": "optional_device_identifier"
}

Response (Contains Verification Token):

{
  "Status": "ok",
  "ErrorMessage": "",
  "Message": "passkey authentication successful",
  "Data": {
    "tokenType": "Bearer",
    "token": "eyJhbGciOiJIUz...",    <-- THIS MUST BE VERIFIED BY YOUR BACKEND
    "expiresIn": 1799,
    "user": {
      "identity": "user@example.com",
      "userId": "AY-..."
    }
  }
}

(Google, Microsoft, GitHub, LinkedIn standard OAuth redirects)

Popup Authentication & postMessage Callback**
Once the user successfully authenticates in the popup, the Authyo /callback endpoint pushes a MessageEvent back to the parent window containing the complete JSON payload. The SDK (auth-sdk.js) intercepts this and feeds it to window.authyoResponse.

Callback Response (Contains Verification Token):

{
  "success": true,
  "message": "verified successfully",
  "token": "eyJhbGciOiJIUz...",      <-- THIS MUST BE VERIFIED BY YOUR BACKEND
  "email": "user@example.com",
  "data": {
    "tokenType": "Bearer",
    "token": "eyJhbGciOiJIUz...",
    "expiresIn": 1799,
    "identity": "user@example.com",
    "email": "user@example.com",
    "user": {
      "identity": "user@example.com",
      "userId": "AY-..."
    }
  }
}

(Note: As securely implemented, the payload positions the token and email redundantly to ensure clients extract the Verification Token cleanly.)

JavaScript