0
# Browser Support Detection
1

2
Functions to detect WebAuthn capabilities and browser support for various features. These utilities help you gracefully handle different browser environments and provide appropriate fallbacks.
3

4
## Capabilities
5

6
### Browser WebAuthn Support
7

8
Determines if the browser is capable of WebAuthn operations.
9

10
```typescript { .api }
11
/**
12
 * Determine if the browser is capable of Webauthn
13
 * @returns true if browser supports WebAuthn, false otherwise
14
 */
15
function browserSupportsWebAuthn(): boolean;
16
```
17

18
**Usage Examples:**
19

20
```typescript
21
import { browserSupportsWebAuthn } from "@simplewebauthn/browser";
22

23
if (!browserSupportsWebAuthn()) {
24
  console.log("WebAuthn not supported in this browser");
25
  // Show fallback authentication method
26
  showPasswordLogin();
27
  return;
28
}
29

30
// Proceed with WebAuthn registration/authentication
31
console.log("WebAuthn is supported!");
32
```
33

34
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.
35

36
### Platform Authenticator Availability
37

38
Determines whether the browser can communicate with a built-in authenticator like Touch ID, Android fingerprint scanner, or Windows Hello.
39

40
```typescript { .api }
41
/**
42
 * Determine whether the browser can communicate with a built-in authenticator, like
43
 * Touch ID, Android fingerprint scanner, or Windows Hello.
44
 * 
45
 * This method will _not_ be able to tell you the name of the platform authenticator.
46
 * @returns Promise resolving to true if platform authenticator is available
47
 */
48
function platformAuthenticatorIsAvailable(): Promise<boolean>;
49
```
50

51
**Usage Examples:**
52

53
```typescript
54
import { 
55
  platformAuthenticatorIsAvailable,
56
  browserSupportsWebAuthn 
57
} from "@simplewebauthn/browser";
58

59
// Check if platform authenticator is available
60
if (await platformAuthenticatorIsAvailable()) {
61
  console.log("Platform authenticator (Touch ID, Face ID, Windows Hello, etc.) is available");
62
  // Show platform authenticator option in UI
63
  showPlatformAuthOption();
64
} else {
65
  console.log("No platform authenticator detected");
66
  // Only show security key options
67
  showSecurityKeyOption();
68
}
69

70
// Always check basic WebAuthn support first
71
if (!browserSupportsWebAuthn()) {
72
  console.log("WebAuthn not supported - platformAuthenticatorIsAvailable will return false");
73
}
74
```
75

76
This function internally calls `PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()` and handles browsers that don't support WebAuthn by returning `false`.
77

78
### Browser WebAuthn Autofill Support
79

80
Determines if the browser supports conditional UI, allowing WebAuthn credentials to be shown in the browser's typical password autofill popup.
81

82
```typescript { .api }
83
/**
84
 * Determine if the browser supports conditional UI, so that WebAuthn credentials can
85
 * be shown to the user in the browser's typical password autofill popup.
86
 * @returns Promise resolving to true if browser supports WebAuthn autofill
87
 */
88
function browserSupportsWebAuthnAutofill(): Promise<boolean>;
89
```
90

91
**Usage Examples:**
92

93
```typescript
94
import { 
95
  browserSupportsWebAuthnAutofill,
96
  startAuthentication 
97
} from "@simplewebauthn/browser";
98

99
// Check if autofill is supported before offering the feature
100
if (await browserSupportsWebAuthnAutofill()) {
101
  console.log("Browser supports WebAuthn autofill");
102
  
103
  // Show autofill-enabled login form
104
  document.getElementById('username').setAttribute('autocomplete', 'username webauthn');
105
  
106
  // Use conditional authentication
107
  const response = await startAuthentication({
108
    optionsJSON: authOptions,
109
    useBrowserAutofill: true,
110
  });
111
} else {
112
  console.log("Browser does not support WebAuthn autofill");
113
  // Use traditional WebAuthn authentication
114
  const response = await startAuthentication({
115
    optionsJSON: authOptions,
116
  });
117
}
118
```
119

120
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`.
121

122
## Feature Detection Pattern
123

124
A recommended pattern for progressive enhancement:
125

126
```typescript
127
import {
128
  browserSupportsWebAuthn,
129
  platformAuthenticatorIsAvailable,
130
  browserSupportsWebAuthnAutofill,
131
  startRegistration,
132
  startAuthentication
133
} from "@simplewebauthn/browser";
134

135
async function setupWebAuthnUI() {
136
  // Basic WebAuthn support check
137
  if (!browserSupportsWebAuthn()) {
138
    console.log("WebAuthn not supported - hiding WebAuthn options");
139
    hideWebAuthnUI();
140
    return;
141
  }
142

143
  console.log("WebAuthn is supported");
144
  showWebAuthnUI();
145

146
  // Platform authenticator detection
147
  const hasPlatformAuth = await platformAuthenticatorIsAvailable();
148
  if (hasPlatformAuth) {
149
    console.log("Platform authenticator available");
150
    showPlatformAuthOption(); // Touch ID, Face ID, Windows Hello, etc.
151
  }
152

153
  // Autofill support detection
154
  const hasAutofill = await browserSupportsWebAuthnAutofill();
155
  if (hasAutofill) {
156
    console.log("WebAuthn autofill supported");
157
    enableAutofillLogin();
158
    document.getElementById('username').setAttribute('autocomplete', 'username webauthn');
159
  }
160
}
161

162
function hideWebAuthnUI() {
163
  document.querySelector('.webauthn-options').style.display = 'none';
164
}
165

166
function showWebAuthnUI() {
167
  document.querySelector('.webauthn-options').style.display = 'block';
168
}
169

170
function showPlatformAuthOption() {
171
  document.querySelector('.platform-auth-option').style.display = 'block';
172
}
173

174
function enableAutofillLogin() {
175
  document.querySelector('.autofill-info').style.display = 'block';
176
}
177

178
// Initialize on page load
179
setupWebAuthnUI();
180
```
181

182
## Browser Compatibility
183

184
These detection functions help handle varying browser support:
185

186
- **WebAuthn Support**: Chrome 67+, Firefox 60+, Safari 14+, Edge 18+
187
- **Platform Authenticators**: Varies by platform and browser version
188
- **Conditional UI/Autofill**: Chrome 108+, Safari 16+, limited Firefox support
189

190
Always perform feature detection rather than browser detection to ensure your application works across different environments and future browser updates.
191

192
## Internal Testing Support
193

194
The library includes internal stubbing mechanisms for testing purposes:
195

196
```typescript
197
// These are exported for testing but should not be used in production
198
export const _browserSupportsWebAuthnInternals = {
199
  stubThis: (value: boolean) => value,
200
};
201

202
export const _browserSupportsWebAuthnAutofillInternals = {
203
  stubThis: (value: Promise<boolean>) => value,
204
};
205
```
206

207
These internals allow test frameworks to stub the return values during testing scenarios.