Consumer Authentication

/

Frontend SDKs

/

Headless

/

Passkeys & WebAuthn

/

Browser supports autofill

Browser supports Autofill

Determines if the browser supports autofill. If it does, we recommend using conditional_mediation when authenticating.

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>
      )}
    </>
  );
};