Simple-Lock
Auth0 with Ember Simple Auth.
An ember-cli addon for usingAuth0's lock widget, is a nice way to get a fully functional signup and login workflow into your app.
What does it do?
- it wires up Auth0's Lock.js to work with ember simple auth.
- it lets you work with ember simple auth just like you normally do!
Installation and Setup
Auth0
If you don't already have an account, go signup at for free: Auth0
- Create a new app through your dashboard.
- Done!
Install ember and simple-lock using ember-cli
Simple Lock requires at least Ember CLI 0.2.7 or higher
ember new hello-safe-worldcd hello-safe-worldember install simple-lock
If you want to get up and running right away, you can scaffold all the neccesary routes with to play with:
ember generate scaffold-lock
Configuration
There are two configuration options.
- (REQUIRED) - clientID - Grab from your Auth0 Dashboard
- (REQUIRED) - domain - Grab from your Auth0 Dashboard
The below simple-auth config object works out the box with the scaffold
// config/environment.jsENV'simple-auth' = authenticationRoute: 'index' routeAfterAuthentication: 'protected' routeIfAlreadyAuthenticated: 'protected' ENV'simple-lock' = clientID: "auth0_client_id" domain: "auth0_domain"
At this point if you ran scaffold-lock, you can fire up ember server:
ember server
The below steps will outline the steps to get up and running with the scaffolding:
Suggested security config
// config/environment.js ENV'contentSecurityPolicy' = 'font-src': "'self' data: https://*.auth0.com" 'style-src': "'self' 'unsafe-inline'" 'script-src': "'self' 'unsafe-eval' https://*.auth0.com" 'img-src': '*.gravatar.com *.wp.com data:' 'connect-src': "'self' http://localhost:* https://your-app-domain.auth0.com" ;
Caveats
- Because ember simple auth listens for local storage changes, updates in one tab will trigger token refreshes in all open tabs of the same domain. This is not critical for long lived JWTs but will be noticable if there are several tabs of the app running on the same browser with very short lived JWTs. I'm open to suggestions on getting around this.
Manual Setup
Simple Lock is just a regular authorizer that conforms to the Ember Simple Auth interface. Please follow the docs to get everything working as usual, and just add the call to the simple-auth-authenticator:lock authorizer in your authenticate
call.
Actions
Once the standard Ember Simple Auth application_route_mixin
is added to your app route, you will be able to use all the usual actions: Docs
Here is an example application route:
// app/routes/application.js ;; Route;
Then from your template you could trigger the usual actions:
// app/templates/application.hbs {{#if session.isAuthenticated}} Logout{{else}} Login{{/if}}
Custom Authorizers
You can easily extend the Simple Lock base authorizer to play hooky with some cool hooks.
Here's how:
ember generate authenticator my-dope-authenticator
This will create the following stub authenticator:
// app/authorizers/my-dope-authenticator.js ; ;
Once you've made your custom authenticator. Just do the following in your app route:
;; Route;
Enjoy!