auth0-lock 11.30.5 → 11.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.circleci/config.yml +11 -7
- package/.eslintrc.json +9 -2
- package/.prettierignore +1 -0
- package/.prettierrc.yaml +5 -0
- package/.shiprc +2 -1
- package/CHANGELOG.md +389 -210
- package/README.md +162 -140
- package/karma.conf.js +4 -10
- package/lib/__tests__/connection/database/login_pane.js +93 -0
- package/lib/__tests__/connection/database/reset_password.js +82 -4
- package/lib/__tests__/connection/enterprise/actions.js +25 -2
- package/lib/__tests__/engine/classic/login.js +0 -2
- package/lib/__tests__/engine/classic/sign_up_pane.js +67 -2
- package/lib/__tests__/testUtils.js +17 -1
- package/lib/__tests__/ui/box/chrome.js +18 -2
- package/lib/__tests__/ui/input/password_input.js +4 -1
- package/lib/browser.js +12 -10
- package/lib/connection/captcha.js +94 -0
- package/lib/connection/database/actions.js +11 -69
- package/lib/connection/database/login_pane.js +11 -2
- package/lib/connection/database/reset_password.js +15 -0
- package/lib/connection/enterprise/actions.js +10 -0
- package/lib/core/index.js +5 -1
- package/lib/core/web_api/helper.js +1 -1
- package/lib/core.js +1 -1
- package/lib/engine/classic/login.js +2 -2
- package/lib/engine/classic/sign_up_pane.js +8 -3
- package/lib/field/captcha/captcha_pane.js +0 -4
- package/lib/i18n.js +7 -5
- package/lib/lock.js +1 -1
- package/lib/passwordless.js +1 -1
- package/lib/ui/box/chrome.js +20 -5
- package/lib/ui/box/container.js +2 -2
- package/lib/ui/box/header.js +5 -0
- package/lib/ui/input/password_input.js +1 -0
- package/lib/utils/cdn_utils.js +1 -1
- package/package.json +20 -23
- package/local.log +0 -8
- package/yarn-error.log +0 -11514
package/README.md
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
[Auth0](https://auth0.com) is an authentication broker that supports both social and enterprise identity providers, including Active Directory, LDAP, Google Apps, and Salesforce.
|
|
11
11
|
|
|
12
12
|
## Table of Contents
|
|
13
|
+
|
|
13
14
|
1. [Install](#install)
|
|
14
15
|
2. [Cross Origin Authentication](#cross-origin-authentication)
|
|
15
16
|
3. [API](#api)
|
|
@@ -24,7 +25,7 @@ From CDN
|
|
|
24
25
|
|
|
25
26
|
```html
|
|
26
27
|
<!-- Latest patch release (recommended for production) -->
|
|
27
|
-
<script src="https://cdn.auth0.com/js/lock/11.
|
|
28
|
+
<script src="https://cdn.auth0.com/js/lock/11.32.0/lock.min.js"></script>
|
|
28
29
|
```
|
|
29
30
|
|
|
30
31
|
From [npm](https://npmjs.org)
|
|
@@ -50,8 +51,9 @@ After installing the `auth0-lock` module, you'll need to bundle it up along with
|
|
|
50
51
|
If you are targeting mobile audiences, we recommended that you add:
|
|
51
52
|
|
|
52
53
|
```html
|
|
53
|
-
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
54
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
54
55
|
```
|
|
56
|
+
|
|
55
57
|
## Cross-Origin Authentication
|
|
56
58
|
|
|
57
59
|
Lock uses **Cross-Origin Authentication**, make sure you understand the considerations you need to take into account by reading the [Cross-Origin Authentication documentation](https://auth0.com/docs/cross-origin-authentication).
|
|
@@ -69,14 +71,14 @@ Initializes a new instance of `Auth0Lock` configured with your application `clie
|
|
|
69
71
|
#### Example
|
|
70
72
|
|
|
71
73
|
```js
|
|
72
|
-
var clientId =
|
|
73
|
-
var domain =
|
|
74
|
+
var clientId = 'YOUR_AUTH0_APP_CLIENTID';
|
|
75
|
+
var domain = 'YOUR_DOMAIN_AT.auth0.com';
|
|
74
76
|
var lock = new Auth0Lock(clientId, domain);
|
|
75
77
|
var accessToken = null;
|
|
76
78
|
var profile = null;
|
|
77
79
|
|
|
78
|
-
lock.on(
|
|
79
|
-
lock.getUserInfo(authResult.accessToken, function(error, profileResult) {
|
|
80
|
+
lock.on('authenticated', function (authResult) {
|
|
81
|
+
lock.getUserInfo(authResult.accessToken, function (error, profileResult) {
|
|
80
82
|
if (error) {
|
|
81
83
|
// Handle error
|
|
82
84
|
return;
|
|
@@ -107,14 +109,14 @@ For more information, read our [passwordless docs](https://auth0.com/docs/connec
|
|
|
107
109
|
#### Example
|
|
108
110
|
|
|
109
111
|
```js
|
|
110
|
-
var clientId =
|
|
111
|
-
var domain =
|
|
112
|
+
var clientId = 'YOUR_AUTH0_APP_CLIENTID';
|
|
113
|
+
var domain = 'YOUR_DOMAIN_AT.auth0.com';
|
|
112
114
|
var lock = new Auth0LockPasswordless(clientId, domain);
|
|
113
115
|
var accessToken = null;
|
|
114
116
|
var profile = null;
|
|
115
117
|
|
|
116
|
-
lock.on(
|
|
117
|
-
lock.getUserInfo(authResult.accessToken, function(error, profileResult) {
|
|
118
|
+
lock.on('authenticated', function (authResult) {
|
|
119
|
+
lock.getUserInfo(authResult.accessToken, function (error, profileResult) {
|
|
118
120
|
if (error) {
|
|
119
121
|
// Handle error
|
|
120
122
|
return;
|
|
@@ -138,9 +140,9 @@ Once the user has logged in and you are in possession of an access token, you ca
|
|
|
138
140
|
#### Example
|
|
139
141
|
|
|
140
142
|
```js
|
|
141
|
-
lock.getUserInfo(accessToken, function(error, profile) {
|
|
143
|
+
lock.getUserInfo(accessToken, function (error, profile) {
|
|
142
144
|
if (!error) {
|
|
143
|
-
alert(
|
|
145
|
+
alert('hello ' + profile.name);
|
|
144
146
|
}
|
|
145
147
|
});
|
|
146
148
|
```
|
|
@@ -178,24 +180,25 @@ Displays the widget, allowing you to override some options.
|
|
|
178
180
|
lock.show();
|
|
179
181
|
|
|
180
182
|
// will override the allowedConnections option passed to the constructor, if any
|
|
181
|
-
lock.show({allowedConnections: [
|
|
183
|
+
lock.show({ allowedConnections: ['twitter', 'facebook'] });
|
|
182
184
|
|
|
183
185
|
// will override the entire auth.params object passed to the constructor, if any
|
|
184
|
-
lock.show({auth: {params: {state: 'auth_state'}}})
|
|
186
|
+
lock.show({ auth: { params: { state: 'auth_state' } } });
|
|
185
187
|
```
|
|
186
188
|
|
|
187
189
|
### resumeAuth(hash, callback)
|
|
188
190
|
|
|
189
191
|
If you set the [auth.autoParseHash](#authentication-options) option to `false`, you'll need to call this method to complete the authentication flow. This method is useful when you're using a client-side router that uses a `#` to handle URLs (angular2 with `useHash` or react-router with `hashHistory`).
|
|
192
|
+
|
|
190
193
|
- **hash {String}**: The hash fragment received from the redirect.
|
|
191
194
|
- **callback {Function}**: Will be invoked after the parse is done. Has an error (if any) as the first argument and the authentication result as the second one. If there is no hash available, both arguments will be `null`.
|
|
192
195
|
|
|
193
196
|
#### Example
|
|
194
197
|
|
|
195
198
|
```js
|
|
196
|
-
lock.resumeAuth(hash, function(error, authResult) {
|
|
199
|
+
lock.resumeAuth(hash, function (error, authResult) {
|
|
197
200
|
if (error) {
|
|
198
|
-
alert(
|
|
201
|
+
alert('Could not parse hash');
|
|
199
202
|
}
|
|
200
203
|
console.log(authResult.accessToken);
|
|
201
204
|
});
|
|
@@ -216,6 +219,7 @@ lock.logout({ returnTo: 'https://myapp.com/bye-bye' });
|
|
|
216
219
|
### checkSession(params, callback)
|
|
217
220
|
|
|
218
221
|
The checkSession method allows you to acquire a new token from Auth0 for a user who is already authenticated against the universal login page for your domain. The method accepts any valid OAuth2 parameters that would normally be sent to authorize. In order to use this method, you have to enable Web Origins for your application. For more information, see [Using checkSession to acquire new tokens](https://auth0.com/docs/libraries/auth0js#using-checksession-to-acquire-new-tokens).
|
|
222
|
+
|
|
219
223
|
- **params {Object}**: OAuth2 params object to send to Auth0's servers.
|
|
220
224
|
- **callback {Function}**: Will be invoked after the response from the server is returned. Has an error (if any) as the first argument and the authentication result as the second one.
|
|
221
225
|
|
|
@@ -261,14 +265,14 @@ The appearance of the widget and the mechanics of authentication can be customiz
|
|
|
261
265
|
- **popupOptions {Object}**: Allows you to customize the location of the popup in the screen. Any [position and size feature](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Position_and_size_features) allowed by `window.open` is accepted. Defaults to `{}`.
|
|
262
266
|
- **rememberLastLogin {Boolean}**: Determines whether or not to show a screen that allows you to quickly log in with the account you used the last time when the `initialScreen` option is set to `"login"` (the default). Defaults to `true`.
|
|
263
267
|
- **flashMessage {Object}**: Shows an `error` or `success` flash message when Lock is shown.
|
|
264
|
-
|
|
265
|
-
|
|
268
|
+
- **type {String}**: The message type, it should be `error` or `success`.
|
|
269
|
+
- **text {String}**: The text to show.
|
|
266
270
|
- **allowAutocomplete {Boolean}**: Determines whether or not the email or username inputs will allow autocomplete (`<input autocomplete />`). Defaults to `false`.
|
|
267
271
|
- **scrollGlobalMessagesIntoView {Boolean}**: Determines whether or not a globalMessage should be scrolled into the user's viewport. Defaults to `true`.
|
|
268
272
|
- **allowShowPassword {Boolean}**: Determines whether or not add a checkbox to show the password when typing it. Defaults to `false`.
|
|
269
273
|
- **allowPasswordAutocomplete {Boolean}**: Determines whether the password field will allow autocomplete; setting this to `true` is required for password manager support and to avoid many cases of adverse behavior. Defaults to `false`.
|
|
270
274
|
- **preferConnectionDisplayName {Boolean}**: If true, Lock will try to use the connection display name as configured in the manage dashboard, if available.
|
|
271
|
-
|
|
275
|
+
- **forceAutoHeight {Boolean}**: If true, Lock will use the `height: auto!important` style on the wrapping div, which may be useful in some circumstances where `height: 100vh` is undesirable (see [\#1963](https://github.com/auth0/lock/issues/1963)). Defaults to `false`.
|
|
272
276
|
|
|
273
277
|
#### Theming options
|
|
274
278
|
|
|
@@ -278,14 +282,14 @@ Theme options are grouped in the `theme` property of the `options` object.
|
|
|
278
282
|
var options = {
|
|
279
283
|
theme: {
|
|
280
284
|
labeledSubmitButton: false,
|
|
281
|
-
logo:
|
|
282
|
-
primaryColor:
|
|
285
|
+
logo: 'https://example.com/assets/logo.png',
|
|
286
|
+
primaryColor: 'green',
|
|
283
287
|
authButtons: {
|
|
284
288
|
connectionName: {
|
|
285
|
-
displayName:
|
|
286
|
-
primaryColor:
|
|
287
|
-
foregroundColor:
|
|
288
|
-
icon:
|
|
289
|
+
displayName: '...',
|
|
290
|
+
primaryColor: '...',
|
|
291
|
+
foregroundColor: '...',
|
|
292
|
+
icon: 'https://.../logo.png'
|
|
289
293
|
}
|
|
290
294
|
}
|
|
291
295
|
}
|
|
@@ -296,10 +300,10 @@ var options = {
|
|
|
296
300
|
- **logo {String}**: Url for an image that will be placed in the Lock's header. Defaults to Auth0's logo.
|
|
297
301
|
- **primaryColor {String}**: Defines the primary color of the Lock, all colors used in the widget will be calculated from it. This option is useful when providing a custom `logo` to ensure all colors go well together with the logo's color palette. Defaults to `"#ea5323"`.
|
|
298
302
|
- **authButtons {Object}**: Allows the customization of the custom oauth2 login buttons.
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
+
- **displayName {String}**: The name to show instead of the connection name.
|
|
304
|
+
- **primaryColor {String}**: The button's background color. Defaults to `"#eb5424"`.
|
|
305
|
+
- **foregroundColor {String}**: The button's text color. Defaults to `"#FFFFFF"`.
|
|
306
|
+
- **icon {String}**: The icon's url for the connection. For example:`"https://site.com/logo.png"`.
|
|
303
307
|
|
|
304
308
|
#### Authentication options
|
|
305
309
|
|
|
@@ -308,19 +312,19 @@ Authentication options are grouped in the `auth` property of the `options` objec
|
|
|
308
312
|
```js
|
|
309
313
|
var options = {
|
|
310
314
|
auth: {
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
315
|
+
params: {
|
|
316
|
+
param1: 'value1',
|
|
317
|
+
scope: 'openid profile email'
|
|
318
|
+
},
|
|
319
|
+
autoParseHash: true,
|
|
320
|
+
redirect: true,
|
|
321
|
+
redirectUrl: 'some url',
|
|
322
|
+
responseMode: 'form_post',
|
|
323
|
+
responseType: 'token',
|
|
324
|
+
sso: true,
|
|
325
|
+
connectionScopes: {
|
|
326
|
+
connectionName: ['scope1', 'scope2']
|
|
327
|
+
}
|
|
324
328
|
}
|
|
325
329
|
};
|
|
326
330
|
```
|
|
@@ -329,10 +333,10 @@ var options = {
|
|
|
329
333
|
- **autoParseHash {Boolean}**: When set to `true`, Lock will parse the `window.location.hash` string when instantiated. If set to `false`, you'll have to manually resume authentication using the [resumeAuth](#resumeauthhash-callback) method.
|
|
330
334
|
- **redirect {Boolean}**: When set to `true`, the default, _redirect mode_ will be used. Otherwise, _popup mode_ is chosen. See [below](#popup-mode) for more details.
|
|
331
335
|
- **redirectUrl {String}**: The URL Auth0 will redirect back to after authentication. Defaults to the empty string `""` (no redirect URL).
|
|
332
|
-
- **responseMode {String}**:
|
|
333
|
-
- **responseType {String}**:
|
|
334
|
-
- **sso {Boolean}**:
|
|
335
|
-
- **connectionScopes {Object}**:
|
|
336
|
+
- **responseMode {String}**: Should be set to `"form_post"` if you want the code or the token to be transmitted via an HTTP POST request to the `redirectUrl` instead of being included in its query or fragment parts. Otherwise, it should be omitted.
|
|
337
|
+
- **responseType {String}**: Should be set to `"token"` for Single Page Applications, and `"code"` otherwise. Also, `"id_token"` is supported for the first case. Defaults to `"code"` when `redirectUrl` is provided, and to `"token"` otherwise.
|
|
338
|
+
- **sso {Boolean}**: Determines whether Single Sign-On is enabled or not in **Lock**. The Auth0 SSO session will be created regardless of this option if SSO is enabled for your application or tenant.
|
|
339
|
+
- **connectionScopes {Object}**: Allows you to set scopes to be sent to the oauth2/social/enterprise connection for authentication.
|
|
336
340
|
|
|
337
341
|
#### Database options
|
|
338
342
|
|
|
@@ -341,7 +345,7 @@ var options = {
|
|
|
341
345
|
- **allowForgotPassword {Boolean}**: When set to `false` hides the _"Don't remember your password?"_ link in the _login screen_, making the _forgot password screen_ unreachable. Defaults to `true`. Keep in mind that if you are using a database connection with a _custom database_ which doesn't have a _change password script_ the forgot password screen won't be available.
|
|
342
346
|
- **allowSignUp {Boolean}**: When set to `false` hides the _login and sign up tabs_ in the _login screen_, making the _sign up screen_ unreachable. Defaults to `true`. Keep in mind that if the database connection has sign ups _disabled_ or you are using a _custom database_ which doesn't have a _create script_, then the sign up screen won't be available.
|
|
343
347
|
- **defaultDatabaseConnection {String}**: Specifies the database connection that will be used when there is more than one available.
|
|
344
|
-
- **initialScreen {String}**: Name of the screen that will be shown when the widget is opened. Valid values are `"login"`, `"signUp"`, and `"forgotPassword"`. If this option is left unspecified, the widget will pick the first screen that is available from the previous list.
|
|
348
|
+
- **initialScreen {String}**: Name of the screen that will be shown when the widget is opened. Valid values are `"login"`, `"signUp"`, and `"forgotPassword"`. If this option is left unspecified, the widget will pick the first screen that is available from the previous list. If you set `initialScreen` to `"forgotPassword"` we recommend that you set `allowLogin` to `"false"`, otherwise a back button will be shown in the forgot password screen and it might not be clear to the user where that back button will take them.
|
|
345
349
|
- **loginAfterSignUp {Boolean}**: Determines whether or not the user will be automatically signed in after a successful sign up. Defaults to `true`.
|
|
346
350
|
- **forgotPasswordLink {String}**: URL for a page that allows the user to reset her password. When set to a non-empty string, the user will be linked to the provided URL when clicking the _"Don't remember your password?"_ link in the _login screen_.
|
|
347
351
|
- **showTerms {Boolean}**: When set to `true` displays the `languageDictionary.signUpTerms` string. Defaults to `true`.
|
|
@@ -360,11 +364,12 @@ var options = {
|
|
|
360
364
|
|
|
361
365
|
```js
|
|
362
366
|
var options = {
|
|
363
|
-
container:
|
|
367
|
+
container: 'myContainer',
|
|
364
368
|
closable: false,
|
|
365
369
|
languageDictionary: {
|
|
366
|
-
signUpTerms:
|
|
367
|
-
|
|
370
|
+
signUpTerms:
|
|
371
|
+
"I agree to the <a href='/terms' target='_new'>terms of service</a> and <a href='/privacy' target='_new'>privacy policy</a>.",
|
|
372
|
+
title: 'My Company'
|
|
368
373
|
},
|
|
369
374
|
autofocus: false
|
|
370
375
|
};
|
|
@@ -390,18 +395,18 @@ Users logging in using this connection should then be associated with the correc
|
|
|
390
395
|
|
|
391
396
|
Lock supports hooks that can be used to integrate into various procedures within Lock.
|
|
392
397
|
|
|
393
|
-
| Name
|
|
394
|
-
|
|
395
|
-
| `loggingIn` | Called when the user presses the login button; after validating the login form, but before calling the login endpoint
|
|
398
|
+
| Name | Description |
|
|
399
|
+
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
400
|
+
| `loggingIn` | Called when the user presses the login button; after validating the login form, but before calling the login endpoint |
|
|
396
401
|
| `signingUp` | Called when the user presses the button on the sign-up page; after validating the signup form, but before calling the sign up endpoint |
|
|
397
402
|
|
|
398
403
|
**API**
|
|
399
404
|
Both hooks accept two arguments:
|
|
400
405
|
|
|
401
|
-
| Name
|
|
402
|
-
|
|
406
|
+
| Name | Description |
|
|
407
|
+
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
403
408
|
| `context` | this argument is currently always `null` but serves as a future-proofing mechanism to support providing additional data without us requiring breaking changes to the library |
|
|
404
|
-
| `cb`
|
|
409
|
+
| `cb` | a callback function to call when the hook is finished. Execution of the user journey is blocked until this function is called by the hook |
|
|
405
410
|
|
|
406
411
|
**API**
|
|
407
412
|
|
|
@@ -418,6 +423,7 @@ new Auth0Lock('client ID', 'domain', {
|
|
|
418
423
|
console.log('Hello from the sign-up hook!');
|
|
419
424
|
cb();
|
|
420
425
|
}
|
|
426
|
+
}
|
|
421
427
|
});
|
|
422
428
|
```
|
|
423
429
|
|
|
@@ -434,7 +440,8 @@ new Auth0Lock('client ID', 'domain', {
|
|
|
434
440
|
|
|
435
441
|
// Throw something generic to show a fallback error message
|
|
436
442
|
throw "Some error happened";
|
|
437
|
-
}
|
|
443
|
+
}
|
|
444
|
+
}
|
|
438
445
|
});
|
|
439
446
|
```
|
|
440
447
|
|
|
@@ -460,7 +467,7 @@ var options = {
|
|
|
460
467
|
cb(null);
|
|
461
468
|
}
|
|
462
469
|
}
|
|
463
|
-
}
|
|
470
|
+
};
|
|
464
471
|
```
|
|
465
472
|
|
|
466
473
|
#### Language Dictionary Specification
|
|
@@ -470,9 +477,9 @@ A language dictionary is an object that allows you to customize every piece of t
|
|
|
470
477
|
```js
|
|
471
478
|
var options = {
|
|
472
479
|
languageDictionary: {
|
|
473
|
-
emailInputPlaceholder:
|
|
474
|
-
title:
|
|
475
|
-
}
|
|
480
|
+
emailInputPlaceholder: 'Please enter your email',
|
|
481
|
+
title: 'My Company'
|
|
482
|
+
}
|
|
476
483
|
};
|
|
477
484
|
```
|
|
478
485
|
|
|
@@ -484,24 +491,26 @@ Additional sign up fields are rendered below the default fields in the order the
|
|
|
484
491
|
|
|
485
492
|
##### Text field
|
|
486
493
|
|
|
487
|
-
A `validator` function can also be provided.
|
|
494
|
+
A `validator` function can also be provided.
|
|
488
495
|
|
|
489
496
|
```js
|
|
490
497
|
var options = {
|
|
491
|
-
additionalSignUpFields: [
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
498
|
+
additionalSignUpFields: [
|
|
499
|
+
{
|
|
500
|
+
name: 'address',
|
|
501
|
+
placeholder: 'enter your address',
|
|
502
|
+
// The following properties are optional
|
|
503
|
+
ariaLabel: 'Address',
|
|
504
|
+
icon: 'https://example.com/assets/address_icon.png',
|
|
505
|
+
prefill: 'street 123',
|
|
506
|
+
validator: function (address) {
|
|
507
|
+
return {
|
|
508
|
+
valid: address.length >= 10,
|
|
509
|
+
hint: 'Must have 10 or more chars' // optional
|
|
510
|
+
};
|
|
511
|
+
}
|
|
503
512
|
}
|
|
504
|
-
|
|
513
|
+
]
|
|
505
514
|
};
|
|
506
515
|
```
|
|
507
516
|
|
|
@@ -509,11 +518,15 @@ If you don't provide a `validator` function a default validator is applied, whic
|
|
|
509
518
|
|
|
510
519
|
```js
|
|
511
520
|
var options = {
|
|
512
|
-
additionalSignUpFields: [
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
521
|
+
additionalSignUpFields: [
|
|
522
|
+
{
|
|
523
|
+
name: 'address',
|
|
524
|
+
placeholder: 'enter your address (optional)',
|
|
525
|
+
validator: function () {
|
|
526
|
+
return true;
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
]
|
|
517
530
|
};
|
|
518
531
|
```
|
|
519
532
|
|
|
@@ -521,10 +534,12 @@ If you want to save the value of the attribute in the root of your profile, use
|
|
|
521
534
|
|
|
522
535
|
```js
|
|
523
536
|
var options = {
|
|
524
|
-
additionalSignUpFields: [
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
537
|
+
additionalSignUpFields: [
|
|
538
|
+
{
|
|
539
|
+
name: 'name',
|
|
540
|
+
storage: 'root'
|
|
541
|
+
}
|
|
542
|
+
]
|
|
528
543
|
};
|
|
529
544
|
```
|
|
530
545
|
|
|
@@ -534,45 +549,49 @@ To specify a select field `type: "select"` needs to be provided along with the `
|
|
|
534
549
|
|
|
535
550
|
```js
|
|
536
551
|
var options = {
|
|
537
|
-
additionalSignUpFields: [
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
}
|
|
552
|
+
additionalSignUpFields: [
|
|
553
|
+
{
|
|
554
|
+
type: 'select',
|
|
555
|
+
name: 'location',
|
|
556
|
+
placeholder: 'choose your location',
|
|
557
|
+
options: [
|
|
558
|
+
{ value: 'us', label: 'United States' },
|
|
559
|
+
{ value: 'fr', label: 'France' },
|
|
560
|
+
{ value: 'ar', label: 'Argentina' }
|
|
561
|
+
],
|
|
562
|
+
// The following properties are optional
|
|
563
|
+
ariaLabel: 'Location',
|
|
564
|
+
icon: 'https://example.com/assets/location_icon.png',
|
|
565
|
+
prefill: 'us'
|
|
566
|
+
}
|
|
567
|
+
]
|
|
568
|
+
};
|
|
552
569
|
```
|
|
553
570
|
|
|
554
571
|
The `options` and the `prefill` value can be provided through a function.
|
|
555
572
|
|
|
556
573
|
```js
|
|
557
574
|
var options = {
|
|
558
|
-
additionalSignUpFields: [
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
575
|
+
additionalSignUpFields: [
|
|
576
|
+
{
|
|
577
|
+
type: 'select',
|
|
578
|
+
name: 'location',
|
|
579
|
+
placeholder: 'choose your location',
|
|
580
|
+
options: function (cb) {
|
|
581
|
+
// obtain options, in case of error you call cb with the error in the
|
|
582
|
+
// first arg instead of null
|
|
583
|
+
cb(null, options);
|
|
584
|
+
},
|
|
585
|
+
ariaLabel: 'Location',
|
|
586
|
+
icon: 'https://example.com/assets/location_icon.png',
|
|
587
|
+
prefill: function (cb) {
|
|
588
|
+
// obtain prefill, in case of error you call cb with the error in the
|
|
589
|
+
// first arg instead of null
|
|
590
|
+
cb(null, prefill);
|
|
591
|
+
}
|
|
573
592
|
}
|
|
574
|
-
|
|
575
|
-
}
|
|
593
|
+
]
|
|
594
|
+
};
|
|
576
595
|
```
|
|
577
596
|
|
|
578
597
|
##### Checkbox field
|
|
@@ -582,18 +601,21 @@ The `prefill` value can determine the default state of the checkbox and it is re
|
|
|
582
601
|
|
|
583
602
|
```js
|
|
584
603
|
var options = {
|
|
585
|
-
additionalSignUpFields: [
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
604
|
+
additionalSignUpFields: [
|
|
605
|
+
{
|
|
606
|
+
type: 'checkbox',
|
|
607
|
+
name: 'newsletter',
|
|
608
|
+
prefill: 'true',
|
|
609
|
+
placeholder: 'I hereby agree that I want to receive marketing emails from your company',
|
|
610
|
+
// placeholderHTML - is an optional field and overrides the value of placeholder
|
|
611
|
+
// do not use user inputted data for HTML fields as they are vulnerable to XSS
|
|
612
|
+
placeholderHTML:
|
|
613
|
+
'<b>I hereby agree that I want to receive marketing emails from your company</b>',
|
|
614
|
+
// ariaLabel - is an optional field
|
|
615
|
+
ariaLabel: 'Activate Newsletter'
|
|
616
|
+
}
|
|
617
|
+
]
|
|
618
|
+
};
|
|
597
619
|
```
|
|
598
620
|
|
|
599
621
|
##### Hidden field
|
|
@@ -602,12 +624,14 @@ To specify a hidden field use: `type: "hidden"`. Both the `value` and `name` pro
|
|
|
602
624
|
|
|
603
625
|
```js
|
|
604
626
|
var options = {
|
|
605
|
-
additionalSignUpFields: [
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
}
|
|
627
|
+
additionalSignUpFields: [
|
|
628
|
+
{
|
|
629
|
+
type: 'hidden',
|
|
630
|
+
name: 'signup_code',
|
|
631
|
+
value: 'foobar123'
|
|
632
|
+
}
|
|
633
|
+
]
|
|
634
|
+
};
|
|
611
635
|
```
|
|
612
636
|
|
|
613
637
|
#### Avatar provider
|
|
@@ -617,12 +641,12 @@ Lock can show avatars fetched from anywhere. A custom avatar provider can be spe
|
|
|
617
641
|
```js
|
|
618
642
|
var options = {
|
|
619
643
|
avatar: {
|
|
620
|
-
url: function(email, cb) {
|
|
644
|
+
url: function (email, cb) {
|
|
621
645
|
// obtain URL for email, in case of error you call cb with the error in
|
|
622
646
|
// the first arg instead of null
|
|
623
647
|
cb(null, url);
|
|
624
648
|
},
|
|
625
|
-
displayName: function(email, cb) {
|
|
649
|
+
displayName: function (email, cb) {
|
|
626
650
|
// obtain displayName for email, in case of error you call cb with the
|
|
627
651
|
// error in the first arg instead of null
|
|
628
652
|
cb(null, displayName);
|
|
@@ -638,8 +662,8 @@ A popup window can be displayed instead of redirecting the user to a social prov
|
|
|
638
662
|
If you decide to use popup mode you can activate it by passing the option `auth: {redirect: false}` when constructing `Auth0Lock`.
|
|
639
663
|
|
|
640
664
|
```js
|
|
641
|
-
var clientId =
|
|
642
|
-
var domain =
|
|
665
|
+
var clientId = 'YOUR_AUTH0_APP_CLIENTID';
|
|
666
|
+
var domain = 'YOUR_DOMAIN_AT.auth0.com';
|
|
643
667
|
var options = {
|
|
644
668
|
auth: {
|
|
645
669
|
redirect: false
|
|
@@ -668,7 +692,6 @@ If you have found a bug or if you have a feature request, please report them at
|
|
|
668
692
|
|
|
669
693
|
This project is licensed under the MIT license. See the [LICENSE](LICENSE) file for more info.
|
|
670
694
|
|
|
671
|
-
|
|
672
695
|
[circleci-image]: https://img.shields.io/circleci/project/github/auth0/lock.svg?style=flat-square
|
|
673
696
|
[circleci-url]: https://circleci.com/gh/auth0/lock/tree/master
|
|
674
697
|
[npm-image]: https://img.shields.io/npm/v/auth0-lock.svg?style=flat-square
|
|
@@ -680,5 +703,4 @@ This project is licensed under the MIT license. See the [LICENSE](LICENSE) file
|
|
|
680
703
|
[david-image]: https://david-dm.org/auth0/lock/status.svg?style=flat-square
|
|
681
704
|
[david-url]: https://david-dm.org/auth0/lock
|
|
682
705
|
|
|
683
|
-
|
|
684
706
|
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fauth0%2Flock?ref=badge_large)
|
package/karma.conf.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
module.exports = function(config) {
|
|
1
|
+
module.exports = function (config) {
|
|
2
2
|
process.env.CHROME_BIN = require('puppeteer').executablePath();
|
|
3
3
|
|
|
4
4
|
config.set({
|
|
@@ -52,9 +52,9 @@ module.exports = function(config) {
|
|
|
52
52
|
|
|
53
53
|
browserNoActivityTimeout: 60000,
|
|
54
54
|
|
|
55
|
-
browserDisconnectTimeout:
|
|
55
|
+
browserDisconnectTimeout: 30000,
|
|
56
56
|
|
|
57
|
-
browserDisconnectTolerance:
|
|
57
|
+
browserDisconnectTolerance: 10,
|
|
58
58
|
|
|
59
59
|
// level of logging
|
|
60
60
|
logLevel: config.LOG_INFO,
|
|
@@ -118,12 +118,6 @@ module.exports = function(config) {
|
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
120
|
|
|
121
|
-
browsers: [
|
|
122
|
-
'bs_chrome_windows',
|
|
123
|
-
'bs_firefox_windows',
|
|
124
|
-
'bs_safari',
|
|
125
|
-
'bs_ie11_windows',
|
|
126
|
-
'bs_edge_windows'
|
|
127
|
-
]
|
|
121
|
+
browsers: ['bs_chrome_windows']
|
|
128
122
|
});
|
|
129
123
|
};
|