All widget configurations and examples
Add this script tag to your HTML page to load the WAuth widget:
<!-- Include WAuth Widget Script -->
<script src="https://uat.wauth.io/public/widget.js"></script>
<!-- Or use your own domain -->
<script src="https://yourdomain.com/public/widget.js"></script>
Place this script tag in your HTML <head> or before the closing </body> tag.
Select an app first
Select an app first
Select an app first
Select an app first
Select an app first
Select an app first
Country detected from IP or input prefix (e.g. +27, 27).
Select an app first
Restrict country selection to specific codes.
Select an app first
Select an app first
Select an app first
Select an app first
Select an app first
The widget provides callbacks for handling success and error events:
new WAuthWidget({
containerId: 'widget',
appId: 'YOUR_APP_ID',
type: 'mobile',
onSuccess: (verifiedValue) => {
console.log('Verified:', verifiedValue);
alert('Verification successful!');
}
});
new WAuthWidget({
containerId: 'widget',
appId: 'YOUR_APP_ID',
type: 'email',
onError: (error) => {
switch(error.code) {
case 'VALIDATION_ERROR':
alert('Invalid input');
break;
case 'OTP_GENERATION_FAILED':
alert('Failed to send code');
break;
default:
alert(error.reason);
}
}
});
const widget = new WAuthWidget({
containerId: 'widget',
appId: 'YOUR_APP_ID',
type: 'mobile',
onSuccess: (value) => {
document.getElementById('verified-phone').value = value;
document.getElementById('submit-btn').disabled = false;
}
});
const widget = new WAuthWidget({
containerId: 'widget',
appId: 'YOUR_APP_ID',
type: 'email',
onSuccess: async (email) => {
const response = await fetch('/api/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, verified: true })
});
if (response.ok) {
window.location.href = '/dashboard';
}
}
});
Invalid input format
Invalid email format
Invalid mobile format
Failed to send OTP
Invalid or expired code
OTP must be 6 digits
Network error sending
Network error verifying
const mobileWidget = new WAuthWidget({
containerId: 'mobile-widget',
appId: 'YOUR_APP_ID',
type: 'mobile',
onSuccess: (phone) => console.log('Mobile:', phone)
});
const emailWidget = new WAuthWidget({
containerId: 'email-widget',
appId: 'YOUR_APP_ID',
type: 'email',
onSuccess: (email) => console.log('Email:', email)
});
function createWidget(type) {
const container = document.getElementById('widget-container');
container.innerHTML = '';
return new WAuthWidget({
containerId: 'widget-container',
appId: 'YOUR_APP_ID',
type: type,
onSuccess: (value) => handleVerification(type, value)
});
}
let widgetState = { verified: false, value: null };
const widget = new WAuthWidget({
containerId: 'widget',
appId: 'YOUR_APP_ID',
type: 'mobile',
onSuccess: (value) => {
widgetState.verified = true;
widgetState.value = value;
updateUI();
}
});
const widget = new WAuthWidget({
containerId: 'widget',
appId: 'YOUR_APP_ID',
type: 'email',
onSuccess: (value) => {
if (typeof gtag !== 'undefined') {
gtag('event', 'verification_success', {
'method': 'email'
});
}
}
});
Try the widgets below and see events logged in real-time:
Configure options to generate code