diff --git a/README.md b/README.md index b010b0ccc..3dc964ed4 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,14 @@ From [npm](https://npmjs.org) npm install auth0-lock ``` +Then you can import `Auth0Lock` or `Auth0LockPasswordless` like this: + +```js +import Auth0Lock from 'auth0-lock'; +import { Auth0Lock } from 'auth0-lock'; +import { Auth0LockPasswordless } from 'auth0-lock'; +``` + After installing the `auth0-lock` module, you'll need bundle it up along with all of its dependencies. See examples for [browserify](examples/bundling/browserify/) and [webpack](examples/bundling/webpack/). > It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users. @@ -41,7 +49,7 @@ Lock uses **Cross-Origin Authentication**, make sure you understand the consider ### new Auth0Lock(clientID, domain, options) -Initializes a new instance of `Auth0Lock` configured with your application `clientID` and your account's `domain` at [Auth0](https://manage.auth0.com/). You can find this information at your [application settings](https://manage.auth0.com/#/applications). +Initializes a new instance of `Auth0Lock` configured with your application `clientID` and your account's `domain` at [Auth0](https://manage.auth0.com/). You can find this information in your [application settings](https://manage.auth0.com/#/applications). - **clientId {String}**: Your application _clientId_ in Auth0. - **domain {String}**: Your Auth0 _domain_. Usually _your-account.auth0.com_. @@ -69,6 +77,36 @@ lock.on("authenticated", function(authResult) { }); ``` +### new Auth0LockPasswordless(clientID, domain, options) + +Initializes a new instance of `Auth0LockPasswordless` configured with your application `clientID` and your account's `domain` at [Auth0](https://manage.auth0.com/). You can find this information in your [application settings](https://manage.auth0.com/#/applications). + +- **clientId {String}**: Your application _clientId_ in Auth0. +- **domain {String}**: Your Auth0 _domain_. Usually _your-account.auth0.com_. +- **options {Object}**: Allows you to customize the dialog's appearance and behavior. See [below](#customization) for the details. + +#### Example + +```js +var clientId = "YOUR_AUTH0_APP_CLIENTID"; +var domain = "YOUR_DOMAIN_AT.auth0.com"; +var lock = new Auth0LockPasswordless(clientId, domain); + +lock.on("authenticated", function(authResult) { + lock.getUserInfo(authResult.accessToken, function(error, profile) { + if (error) { + // Handle error + return; + } + + localStorage.setItem("accessToken", authResult.accessToken); + localStorage.setItem("profile", JSON.stringify(profile)); + + // Update DOM + }); +}); +``` + ### getUserInfo(accessToken, callback) Once the user has logged in and you are in possesion of an access token, you can obtain the profile with `getUserInfo`. diff --git a/src/index.js b/src/index.js index 926604e77..adcda974c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,16 +1,6 @@ -import Core, { injectStyles, css } from './core'; -import classic from './engine/classic'; +import Lock from './lock'; +import Passwordless from './passwordless'; -export default class Auth0Lock extends Core { - constructor(clientID, domain, options) { - super(clientID, domain, options, classic); - injectStyles(); - } -} - -// telemetry -Auth0Lock.version = __VERSION__; - -// TODO: should we have different telemetry for classic/passwordless? -// TODO: should we set telemetry info before each request? -// TODO: should we inject styles here? +export const Auth0LockPasswordless = Passwordless; +export const Auth0Lock = Lock; +export default Lock; diff --git a/src/lock.js b/src/lock.js new file mode 100644 index 000000000..926604e77 --- /dev/null +++ b/src/lock.js @@ -0,0 +1,16 @@ +import Core, { injectStyles, css } from './core'; +import classic from './engine/classic'; + +export default class Auth0Lock extends Core { + constructor(clientID, domain, options) { + super(clientID, domain, options, classic); + injectStyles(); + } +} + +// telemetry +Auth0Lock.version = __VERSION__; + +// TODO: should we have different telemetry for classic/passwordless? +// TODO: should we set telemetry info before each request? +// TODO: should we inject styles here?