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 firstSelect an app firstSelect an app firstSelect an app firstSelect an app firstSelect an app firstCountry detected from IP or input prefix (e.g. +27, 27).
Select an app firstRestrict country selection to specific codes.
Select an app firstSelect an app firstSelect an app firstSelect an app firstSelect an app firstThe 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