Functions to detect WebAuthn capabilities and browser support for various features. These utilities help you gracefully handle different browser environments and provide appropriate fallbacks.
Determines if the browser is capable of WebAuthn operations.
/**
* Determine if the browser is capable of Webauthn
* @returns true if browser supports WebAuthn, false otherwise
*/
function browserSupportsWebAuthn(): boolean;Usage Examples:
import { browserSupportsWebAuthn } from "@simplewebauthn/browser";
if (!browserSupportsWebAuthn()) {
console.log("WebAuthn not supported in this browser");
// Show fallback authentication method
showPasswordLogin();
return;
}
// Proceed with WebAuthn registration/authentication
console.log("WebAuthn is supported!");This function checks for the presence of the PublicKeyCredential global and ensures it's a proper function. It's the primary gate-keeper for all WebAuthn operations.
Determines whether the browser can communicate with a built-in authenticator like Touch ID, Android fingerprint scanner, or Windows Hello.
/**
* Determine whether the browser can communicate with a built-in authenticator, like
* Touch ID, Android fingerprint scanner, or Windows Hello.
*
* This method will _not_ be able to tell you the name of the platform authenticator.
* @returns Promise resolving to true if platform authenticator is available
*/
function platformAuthenticatorIsAvailable(): Promise<boolean>;Usage Examples:
import {
platformAuthenticatorIsAvailable,
browserSupportsWebAuthn
} from "@simplewebauthn/browser";
// Check if platform authenticator is available
if (await platformAuthenticatorIsAvailable()) {
console.log("Platform authenticator (Touch ID, Face ID, Windows Hello, etc.) is available");
// Show platform authenticator option in UI
showPlatformAuthOption();
} else {
console.log("No platform authenticator detected");
// Only show security key options
showSecurityKeyOption();
}
// Always check basic WebAuthn support first
if (!browserSupportsWebAuthn()) {
console.log("WebAuthn not supported - platformAuthenticatorIsAvailable will return false");
}This function internally calls PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() and handles browsers that don't support WebAuthn by returning false.
Determines if the browser supports conditional UI, allowing WebAuthn credentials to be shown in the browser's typical password autofill popup.
/**
* Determine if the browser supports conditional UI, so that WebAuthn credentials can
* be shown to the user in the browser's typical password autofill popup.
* @returns Promise resolving to true if browser supports WebAuthn autofill
*/
function browserSupportsWebAuthnAutofill(): Promise<boolean>;Usage Examples:
import {
browserSupportsWebAuthnAutofill,
startAuthentication
} from "@simplewebauthn/browser";
// Check if autofill is supported before offering the feature
if (await browserSupportsWebAuthnAutofill()) {
console.log("Browser supports WebAuthn autofill");
// Show autofill-enabled login form
document.getElementById('username').setAttribute('autocomplete', 'username webauthn');
// Use conditional authentication
const response = await startAuthentication({
optionsJSON: authOptions,
useBrowserAutofill: true,
});
} else {
console.log("Browser does not support WebAuthn autofill");
// Use traditional WebAuthn authentication
const response = await startAuthentication({
optionsJSON: authOptions,
});
}This function checks for the isConditionalMediationAvailable method on PublicKeyCredential and calls it if available. For browsers without WebAuthn support or without conditional mediation support, it returns false.
A recommended pattern for progressive enhancement:
import {
browserSupportsWebAuthn,
platformAuthenticatorIsAvailable,
browserSupportsWebAuthnAutofill,
startRegistration,
startAuthentication
} from "@simplewebauthn/browser";
async function setupWebAuthnUI() {
// Basic WebAuthn support check
if (!browserSupportsWebAuthn()) {
console.log("WebAuthn not supported - hiding WebAuthn options");
hideWebAuthnUI();
return;
}
console.log("WebAuthn is supported");
showWebAuthnUI();
// Platform authenticator detection
const hasPlatformAuth = await platformAuthenticatorIsAvailable();
if (hasPlatformAuth) {
console.log("Platform authenticator available");
showPlatformAuthOption(); // Touch ID, Face ID, Windows Hello, etc.
}
// Autofill support detection
const hasAutofill = await browserSupportsWebAuthnAutofill();
if (hasAutofill) {
console.log("WebAuthn autofill supported");
enableAutofillLogin();
document.getElementById('username').setAttribute('autocomplete', 'username webauthn');
}
}
function hideWebAuthnUI() {
document.querySelector('.webauthn-options').style.display = 'none';
}
function showWebAuthnUI() {
document.querySelector('.webauthn-options').style.display = 'block';
}
function showPlatformAuthOption() {
document.querySelector('.platform-auth-option').style.display = 'block';
}
function enableAutofillLogin() {
document.querySelector('.autofill-info').style.display = 'block';
}
// Initialize on page load
setupWebAuthnUI();These detection functions help handle varying browser support:
Always perform feature detection rather than browser detection to ensure your application works across different environments and future browser updates.
The library includes internal stubbing mechanisms for testing purposes:
// These are exported for testing but should not be used in production
export const _browserSupportsWebAuthnInternals = {
stubThis: (value: boolean) => value,
};
export const _browserSupportsWebAuthnAutofillInternals = {
stubThis: (value: Promise<boolean>) => value,
};These internals allow test frameworks to stub the return values during testing scenarios.