fingerprint
Biometric Authentication
Fingerprint and face recognition security
Overview
Secure your app with biometrics
Add fingerprint or face recognition authentication to protect sensitive areas of your app. Works on devices with biometric hardware.
Check Availability
Verify device supports biometrics
shift2appjs.isBiometricAvailable()
Checks if biometric authentication is available on the device.
Returns
Boolean - true if device has biometric capability
// Check before showing biometric option
if (shift2appjs.isBiometricAvailable()) {
document.getElementById("biometricLogin").style.display = "block";
} else {
document.getElementById("biometricLogin").style.display = "none";
}Authenticate
Trigger biometric prompt
shift2appjs.authenticate(callbackName)
Shows the biometric authentication dialog. User can use fingerprint, face, or PIN depending on device.
Parameters
callbackName
String - Global function to receive authentication result
Returns
void
// Define callback
function onAuthResult(success, message) {
if (success) {
console.log("Authentication successful!");
showSecureContent();
} else {
console.log("Authentication failed:", message);
alert("Please authenticate to continue");
}
}
// Trigger authentication
function requestAuth() {
if (shift2appjs.isBiometricAvailable()) {
shift2appjs.authenticate("onAuthResult");
} else {
// Fallback to password
showPasswordDialog();
}
}Use Cases
Common implementations
Protect Sensitive Pages
// Require auth for sensitive pages
const protectedPaths = ["/wallet", "/settings", "/profile/edit"];
if (protectedPaths.some(p => location.pathname.startsWith(p))) {
if (typeof shift2appjs !== "undefined" && shift2appjs.isBiometricAvailable()) {
document.body.style.visibility = "hidden";
shift2appjs.authenticate("onPageAuth");
}
}
function onPageAuth(success) {
if (success) {
document.body.style.visibility = "visible";
} else {
window.location.href = "/";
}
}Confirm Transactions
// Require auth before payment
function confirmPayment(amount) {
window.pendingPayment = amount;
if (shift2appjs.isBiometricAvailable()) {
shift2appjs.authenticate("onPaymentAuth");
} else {
processPayment(amount);
}
}
function onPaymentAuth(success) {
if (success) {
processPayment(window.pendingPayment);
} else {
alert("Authentication required for payment");
}
}Biometric Login
// Offer biometric login on login page
document.addEventListener("DOMContentLoaded", () => {
const savedUser = localStorage.getItem("savedUser");
if (savedUser && typeof shift2appjs !== "undefined" && shift2appjs.isBiometricAvailable()) {
// Show "Login with fingerprint" button
document.getElementById("biometricBtn").style.display = "block";
document.getElementById("biometricBtn").onclick = () => {
shift2appjs.authenticate("onBiometricLogin");
};
}
});
function onBiometricLogin(success) {
if (success) {
const user = localStorage.getItem("savedUser");
// Auto-login the saved user
loginUser(user);
}
}