Skip to content
This repository was archived by the owner on Aug 26, 2025. It is now read-only.

Commit e10f901

Browse files
committed
Provide an explicit example so that copying the first visible snippet is the "right" choice.
1 parent 683e165 commit e10f901

File tree

1 file changed

+54
-11
lines changed

1 file changed

+54
-11
lines changed

README.md

Lines changed: 54 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,81 @@
1-
# ⚠️ `@github/webauthn-json` is deprecated
1+
# ⚠️ `@github/webauthn-json` is deprecated ⚠️
22

33
As of March 2025, stable versions of all major browsers now support the following methods:
44

55
- [`PublicKeyCredential.parseCreationOptionsFromJSON(…)`](https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/parseCreationOptionsFromJSON_static)
66
- [`PublicKeyCredential.parseRequestOptionsFromJSON(…)`](https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/parseCreationOptionsFromJSON_static)
77

8-
By design, these are compatible with `@github/webauthn-json` encoding, so you can use them as a drop-in substitute. We strongly recommend doing so, since:
8+
These should be used instead of `@github/webauthn-json`.
9+
10+
## Example: using built-in browser methods instead
11+
12+
Here is an example for how to serialize and deserialize JSON for WebAuthn client code without using `@github/webauthn-json`:
13+
14+
```ts
15+
// Example in TypeScript
16+
17+
const jsonWebAuthnSupport = !!globalThis.PublicKeyCredential?.parseCreationOptionsFromJSON;
18+
19+
async function register() {
20+
const publicKey = PublicKeyCredential.parseCreationOptionsFromJSON({ /**/ });
21+
const credential = (await navigator.credentials.create({publicKey})) as PublicKeyCredential;
22+
return credential.toJSON();
23+
}
24+
25+
async function authenticate() {
26+
const publicKey = PublicKeyCredential.parseRequestOptionsFromJSON({ /**/ });
27+
const credential = (await navigator.credentials.get({publicKey})) as PublicKeyCredential;
28+
return credential.toJSON();
29+
}
30+
31+
if (jsonWebAuthnSupport) {
32+
/* Set up code to call `register()` and `authenticate()`. */
33+
}
34+
```
35+
36+
## Reasoning
37+
38+
`@github/webauthn-json` served as an ecosystem prototype of the functionality was [developed into the built-in browser methods](https://github.com/w3c/webauthn/wiki/Explainer:-JSON-Serialization-Methods). The built-in methods are compatible with `@github/webauthn-json` encoding, so you can use them as a drop-in substitute. We strongly recommend doing so, since:
939

1040
- The browser-native JSON parsing functions are increasingly receiving fields and features (such as user-agent hints and the `prf` extension) that `@github/webauthn-json` will never receive.
1141
- Removing `@github/webauthn-json` from your codebase will remove code from your authentication pages, reducing load times for your users and reducing the chance you will need to debug issues.
1242

43+
## Fallback (not recommended)
44+
1345
If you need to support older browsers in the short-term, consider loading this library only as a fallback:
1446

15-
```js
47+
```ts
48+
// Example in TypeScript
49+
1650
async function register() {
17-
const parseCreationOptionsFromJSON =
18-
PublicKeyCredential.parseCreationOptionsFromJSON ??
19-
/* @type PublicKeyCredential.parseCreationOptionsFromJSON */
20-
(await import("@github/webauthn-json/browser-ponyfill")).parseCreationOptionsFromJSON;
51+
const parseCreationOptionsFromJSON: typeof PublicKeyCredential.parseCreationOptionsFromJSON =
52+
PublicKeyCredential.parseCreationOptionsFromJSON ??
53+
(await import("@github/webauthn-json/browser-ponyfill")).parseCreationOptionsFromJSON;
2154

2255
const publicKey = parseCreationOptionsFromJSON({ /**/ });
23-
return navigator.credentials.create({publicKey});
56+
const credential = (await navigator.credentials.create({publicKey})) as PublicKeyCredential;
57+
return credential.toJSON();
2458
}
2559

2660
async function authenticate() {
27-
const parseRequestOptionsFromJSON =
61+
const parseRequestOptionsFromJSON: typeof PublicKeyCredential.parseRequestOptionsFromJSON =
2862
PublicKeyCredential.parseRequestOptionsFromJSON ??
29-
/* @type PublicKeyCredential.parseRequestOptionsFromJSON */
3063
(await import("@github/webauthn-json/browser-ponyfill")).parseRequestOptionsFromJSON;
3164

3265
const publicKey = parseRequestOptionsFromJSON({ /**/ });
33-
return navigator.credentials.get({publicKey});
66+
const credential = (await navigator.credentials.get({publicKey})) as PublicKeyCredential;
67+
return credential.toJSON();
3468
}
3569
```
3670

71+
If you think you need such a fallback, consider testing or instrumenting your code to test if this is really needed for the small percentage of affected users.
72+
73+
If you have any other authentication methods available, it is likely that your users will still be able to authenticate without this fallback in place. They will also receive the browser-native functionality the next time their browser updates.
74+
3775
<br>
76+
77+
--------
78+
3879
<br>
3980

4081
This project's old README contents are below:
@@ -43,6 +84,8 @@ This project's old README contents are below:
4384

4485
--------
4586

87+
<br>
88+
4689
# `@github/webauthn-json`
4790

4891
`@github/webauthn-json` is a client-side Javascript library that serves as convenience wrapper for the the [WebAuthn API](https://www.w3.org/TR/webauthn/) by encoding binary data using [base64url](https://w3c.github.io/webauthn/#sctn-dependencies) (also known as "websafe" or "urlsafe" base64).

0 commit comments

Comments
 (0)