diff --git a/apps/docs/content/guides/auth/auth-mfa/webauthn.mdx b/apps/docs/content/guides/auth/auth-mfa/webauthn.mdx
index 4aba63a60f6..7aa30217387 100644
--- a/apps/docs/content/guides/auth/auth-mfa/webauthn.mdx
+++ b/apps/docs/content/guides/auth/auth-mfa/webauthn.mdx
@@ -83,7 +83,7 @@ As far as possible, maintain a generic flow that you can reuse in both cases wit
You can enroll a WebAuthn factor with a single step:
-```
+```ts
import { browserSupportsWebAuthn } from '@supabase/supabase-js'
if (supabase.auth.browserSupportsWebAuthn()) {
const { data, error } = await supabase.auth.mfa.enroll({ factorType: 'webauthn'})
@@ -95,7 +95,7 @@ if (supabase.auth.browserSupportsWebAuthn()) {
Or in multiple-steps by setting the `useMultiStepEnroll` parameter to true.
-```
+```ts
const { data: { factorId }, error } = await supabase.auth.mfa.enroll({ factorType: 'webauthn', useMultiStep: true })
const { data: {options}, error } = await supabase.auth.mfa.challenge({ factorId })
@@ -144,13 +144,13 @@ Visit the MDN Documentation for a full description of each field [here](https://
Once a user has registered a factor, they can proceed to log in. In single-step mode this is accomplished with:
-```jsx
+```ts
const { data, error } = await supabase.auth.mfa.verify({ factorType: 'webauthn' })
```
As with enrollment, developers have the option of performing verification over multiple steps.
-```
+```ts
const { data: factors, error } = await supabase.auth.mfa.listFactors()
const { data, error } = await supabase.auth.mfa.challenge({
factorId: factors.find((type) => type === 'webauthn'), // use first verified factor
@@ -165,31 +165,24 @@ Note that you do not have to specify a `factorId` parameter. Unlike MFA (Phone)
## Factor Management
-## Mapping AAGUIDs
-- TODO: Provide an example and send [community sourced mapping](https://github.com/passkeydeveloper/passkey-authenticator-aaguids)
+Use the WebAuthn AAGUID to identify the type of authenticator used (e.g. Chrome Profile on Mac, Yubikey). There is a [community sourced JSON](https://github.com/passkeydeveloper/passkey-authenticator-aaguids) which maps an AAGUID to the name of the passkey
-## Best Practices
+```ts
+import aaguids from './aaguids.json' with { type: 'json' };
-You can use the following directives to help control availability of a credential in an iframe. Add these directives so that WebAuthn pop-ups for authentication can be shown in the iframe.
+const { data, error } = await supabase.auth.mfa.listFactors()
-- [`publickey-credentials-create`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy/publickey-credentials-create): Controls the availability of [`navigator.credentials.create()`](https://developer.mozilla.org/en-US/docs/Web/API/CredentialsContainer/create) with the `publicKey` option.
-- [`publickey-credentials-get`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy/publickey-credentials-get): Controls the availability of [`navigator.credentials.get()`](https://developer.mozilla.org/en-US/docs/Web/API/CredentialsContainer/get) with the `publicKey` option.
-
-Both directives have a default allowlist value of `"self"`, meaning that by default these methods can be used in top-level document contexts.
-
-```jsx
-
+const provider_name = aaguids[data.webauthn.webauthn_aaguid]?.name || 'Unknown';
```
-```html
-
-```
+You can confirm that the mapping is accurate by using the helper site [on this page](https://passkeydeveloper.github.io/passkey-authenticator-aaguids/explorer/?combined)
## Frequently Asked Questions
-- Passkeys -> Coming in 2025
+### Are Passkeys Supported?
+
+We do not the use of WebAuthn devices as a Sign In or Sign Up method. Please check back in the future.
+
+
- Attestation Service -> Not currently enabled
+- `getClaims` method