1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!-- omit in toc -->
# @simplewebauthn/browser
[](https://www.npmjs.com/package/@simplewebauthn/browser)
- [@simplewebauthn/browser](#simplewebauthnbrowser)
- [Installation](#installation)
- [UMD](#umd)
- [ES5](#es5)
- [ES2018](#es2018)
- [Usage](#usage)
- [Building for Production](#building-for-production)
- [ES5](#es5-1)
- [ES2018](#es2018-1)
- [Webpack support](#webpack-support)
- [Rollup support](#rollup-support)
## Installation
This package is available on **npm**:
```sh
npm install @simplewebauthn/browser
```
### UMD
This package can also be installed via **unpkg** by including the following script in your page's `<head>` element. The library's methods will be available on the global **`SimpleWebAuthnBrowser`** object.
> NOTE: The only difference between the two packages below is that the ES5 bundle includes TypeScript's `tslib` runtime code. This adds some bundle size overhead, but _does_ enable use of `supportsWebAuthn()` in older browsers to show appropriate UI when WebAuthn is unavailable.
#### ES5
If you need to support WebAuthn feature detection in deprecated browsers like IE11 and Edge Legacy, include the `ES5` version:
```html
<script src="https://unpkg.com/@simplewebauthn/browser/dist/es5/index.umd.min.js"></script>
```
#### ES2018
If you only need to support modern browsers, include the `ES2018` version:
```html
<script src="https://unpkg.com/@simplewebauthn/browser/dist/es2018/index.umd.min.js"></script>
```
## Usage
You can find in-depth documentation on this package here: https://simplewebauthn.dev/docs/packages/browser
## Building for Production
Two unbundled versions of this library are offered for your convenience, one targeting `ES5` and a second targeting `ES2018`.
### ES5
The `ES5` version is suitable for use when **deprecated browsers** like IE10+ or Edge Legacy need to be supported. This version is also the **default** version that gets pulled in as the `"main"` entry in **package.json**.
TypeScript and JavaScript codebases alike can import and use this library without any special build configuration considerations.
However, you will need to ensure that the `tslib` dependency gets pulled into your build artifact:
- If you are authoring your application in TypeScript then this package will be **automatically** included so long as your **tsconfig.json** sets `"target": "ES5"`.
- If your application is written in Javascript then you will need to install this package **manually** by adding it to `dependencies` in your project's **package. json**:
```sh
$> npm install tslib
```
### ES2018
The `ES2018` version is suitable for use when only **modern browsers** need to be supported. TypeScript and JavaScript codebases alike can import and use this library. However, you will need to ensure that your bundler pulls in the ES2018 version of the library when building your application!
See bundler instructions below.
#### Webpack support
No matter the `"target"` of your build you'll need to indicate additional files for webpack to resolve via the [`"resolve.mainFields"`](https://webpack.js.org/configuration/resolve/#resolvemainfields) property in your config. Resolve the `"main:es2018"` field defined in **package.json**:
```js
module.exports = {
//...
resolve: {
mainFields: [ 'main:es2018', 'module', 'main' ],
},
};
```
`'main:es2018'` must come first in the list to ensure that the `ES2018` version of this library is bundled. Additional values can be added afterwards as needed.
#### Rollup support
Add the [`@rollup/plugin-node-resolve`](https://github.com/rollup/rollup-plugin-node-resolve#usage) plugin to your Rollup config to read in the `"main:es2018"` field from **package.json**:
```js
// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
export default {
// input: ...
// output: ...
plugins: [
//...
resolve({ mainFields: [ 'main:es2018', 'module', 'main' ] }),
]
}
```
`'main:es2018'` must come first in the list to ensure that the `ES2018` version of this library is bundled. Additional values can be added afterwards as needed.
|
