Determines if the browser supports autofill. If it does, we recommend using conditional_mediation when authenticating.
Browser supports Autofill
import React, { useEffect, useState } from 'react';
import { useStytch } from '@stytch/react';
export const WebAuthnAutofillSupport = () => {
const stytch = useStytch();
const [supportsAutofill, setSupportsAutofill] = useState();
useEffect(() => {
const checkAutofillSupport = async () => {
try {
setSupportsAutofill(await stytch.webauthn.browserSupportsAutofill());
} catch (error) {
console.error('Error checking WebAuthn autofill support:', error);
setSupportsAutofill(false);
}
};
checkAutofillSupport();
}, [stytch]);
return (
<>
{supportsAutofill === undefined ? (
<p>Checking browser support...</p>
) : supportsAutofill ? (
<p>Your browser supports WebAuthn autofill!</p>
) : (
<p>Your browser does not support WebAuthn autofill.</p>
)}
</>
);
};