Code Syntax Example

blog_post.mdx

+import { Fragment, useEffect, useState } from "react";
+import { supported } from "@github/webauthn-json";


export default function Register() {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
+  const [isAvailable, setIsAvailable] = useState<boolean | null>(null);


+  useEffect(() => {
+    const checkAvailability = async () => {
+      const available =
+        await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
+      setIsAvailable(available && supported());
+    };
+
+    checkAvailability();
+  }, []);


  return (
    <Fragment>
      <h1>Register Account</h1>
+      {isAvailable ? (
        <form method="POST" onSubmit={onSubmit}>
          // Form Here - snipping it for length
        </form>
+      ) : (
+        <p>Sorry, WebAuthn is not available.</p>
+      )}
    </Fragment>
  );