|
1 | | -⚠️ ⚠️ ⚠️ |
| 1 | +# ⚠️ `@github/webauthn-json` is deprecated ⚠️ |
2 | 2 |
|
3 | | -WebAuthn-json has been sunset. Now that [all major browsers support WebAuthn](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API#browser_compatibility) we recommend invoking the native APIs |
| 3 | +As of March 2025, stable versions of all major browsers now support the following methods: |
4 | 4 |
|
5 | | -⚠️ ⚠️ ⚠️ |
| 5 | +- [`PublicKeyCredential.parseCreationOptionsFromJSON(…)`](https://developer.mozilla.org/docs/Web/API/PublicKeyCredential/parseCreationOptionsFromJSON_static) |
| 6 | +- [`PublicKeyCredential.parseRequestOptionsFromJSON(…)`](https://developer.mozilla.org/docs/Web/API/PublicKeyCredential/parseCreationOptionsFromJSON_static) |
| 7 | +- [`PublicKeyCredential` → `.toJSON()`](https://developer.mozilla.org/docs/Web/API/PublicKeyCredential) |
| 8 | + |
| 9 | +These should be used instead of `@github/webauthn-json`. |
| 10 | + |
| 11 | +## 👉 Use built-in browser methods instead 👈 |
| 12 | + |
| 13 | +Here is an example for how to serialize and deserialize JSON for WebAuthn client code without using `@github/webauthn-json`: |
| 14 | + |
| 15 | +```ts |
| 16 | +// Example in TypeScript |
| 17 | + |
| 18 | +const jsonWebAuthnSupport = !!globalThis.PublicKeyCredential?.parseCreationOptionsFromJSON; |
| 19 | + |
| 20 | +async function register() { |
| 21 | + const publicKey = PublicKeyCredential.parseCreationOptionsFromJSON({ /* … */ }); |
| 22 | + const credential = (await navigator.credentials.create({publicKey})) as PublicKeyCredential; |
| 23 | + return credential.toJSON(); |
| 24 | +} |
| 25 | + |
| 26 | +async function authenticate() { |
| 27 | + const publicKey = PublicKeyCredential.parseRequestOptionsFromJSON({ /* … */ }); |
| 28 | + const credential = (await navigator.credentials.get({publicKey})) as PublicKeyCredential; |
| 29 | + return credential.toJSON(); |
| 30 | +} |
| 31 | + |
| 32 | +if (jsonWebAuthnSupport) { |
| 33 | + /* Set up code to call `register()` and `authenticate()`. */ |
| 34 | +} |
| 35 | +``` |
| 36 | + |
| 37 | +## Reasoning |
| 38 | + |
| 39 | +`@github/webauthn-json` served as an ecosystem prototype of the functionality that 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: |
| 40 | + |
| 41 | +- The browser-native JSON parsing functions are already available for the vast majority of users. |
| 42 | +- They are increasingly receiving fields and features (such as user-agent hints and the `prf` extension) that `@github/webauthn-json` will never receive. |
| 43 | +- 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. |
| 44 | + |
| 45 | +## Fallback (not recommended) |
| 46 | + |
| 47 | +If you need to support older browsers in the short-term, consider loading this library only as a fallback: |
| 48 | + |
| 49 | +```ts |
| 50 | +// Example in TypeScript |
| 51 | + |
| 52 | +async function register() { |
| 53 | + const parseCreationOptionsFromJSON: typeof PublicKeyCredential.parseCreationOptionsFromJSON = |
| 54 | + PublicKeyCredential.parseCreationOptionsFromJSON ?? |
| 55 | + (await import("@github/webauthn-json/browser-ponyfill")).parseCreationOptionsFromJSON; |
| 56 | + |
| 57 | + const publicKey = parseCreationOptionsFromJSON({ /* … */ }); |
| 58 | + const credential = (await navigator.credentials.create({publicKey})) as PublicKeyCredential; |
| 59 | + return credential.toJSON(); |
| 60 | +} |
| 61 | + |
| 62 | +async function authenticate() { |
| 63 | + const parseRequestOptionsFromJSON: typeof PublicKeyCredential.parseRequestOptionsFromJSON = |
| 64 | + PublicKeyCredential.parseRequestOptionsFromJSON ?? |
| 65 | + (await import("@github/webauthn-json/browser-ponyfill")).parseRequestOptionsFromJSON; |
| 66 | + |
| 67 | + const publicKey = parseRequestOptionsFromJSON({ /* … */ }); |
| 68 | + const credential = (await navigator.credentials.get({publicKey})) as PublicKeyCredential; |
| 69 | + return credential.toJSON(); |
| 70 | +} |
| 71 | +``` |
| 72 | + |
| 73 | +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. |
| 74 | + |
| 75 | +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. |
| 76 | + |
| 77 | +<br> |
| 78 | + |
| 79 | +-------- |
| 80 | + |
| 81 | +<br> |
| 82 | + |
| 83 | +This project's old README contents are below: |
| 84 | + |
| 85 | +<br> |
| 86 | + |
| 87 | +-------- |
| 88 | + |
| 89 | +<br> |
6 | 90 |
|
7 | 91 | # `@github/webauthn-json` |
8 | 92 |
|
|
0 commit comments