ember-simple-auth-auth0

5.0.0-beta.0 verified Sat Apr 25 auth: no javascript

Ember addon integrating Auth0 authentication (Lock.js and Universal Login) with Ember Simple Auth. Version 5.0.0-beta.0 provides ESM-only support for Ember 3.x+. Key differentiators include dead-simple setup with automatic dependency management, support for embedded Lock widget and Universal Login, passwordless authentication, impersonation, silent auth, and a migration guide from v4.x to v5.x. Auth0 community-maintained.

Common errors

error Could not find module `ember-simple-auth-auth0` imported from `my-app/app/authenticators/lock` ↓

cause Mistakenly trying to import default export from package root.

fix

Change import to import Auth0LockAuthenticator from 'ember-simple-auth-auth0/authenticators/lock'

error Uncaught TypeError: Cannot read properties of undefined (reading 'setup') ↓

cause Missing `beforeModel` call to `this.session.setup()` in application route.

fix

Add this.session.setup() in the beforeModel hook of your application route.

error auth0-js: Invalid clientID or domain ↓

cause Client ID or domain missing or incorrect in config.

fix

Check config/environment.js that ENV['ember-simple-auth-auth0'].clientID and ENV['ember-simple-auth-auth0'].domain are set correctly.

Warnings

breaking Deprecated import from 'ember-simple-auth-auth0' (default export) removed in v5. Must use specific module paths. ↓

fix Import authenticators from 'ember-simple-auth-auth0/authenticators/lock' or 'ember-simple-auth-auth0/authenticators/auth0' instead.

breaking JWT authorizer and DataAdapterMixin removed in v5. Replace with Ember Simple Auth's built-in authorizer. ↓

fix Use 'ember-simple-auth/authorizers/data-adapter' or implement custom authorizer.

gotcha Lock widget must be included manually in app if not using auto-import. Addon does not inject Lock script automatically. ↓

fix Install and import 'auth0-lock' in your ember-cli-build.js or use a content delivery network.

deprecated Passwordless authentication API changed in v4. Old 'magicLink' option replaced with 'passwordless' method. ↓

fix Use 'Auth0PasswordlessAuthenticator' and configure via config.

gotcha Environment variable configuration uses 'ember-simple-auth-auth0' key. Typo in key will silently fail. ↓

fix Ensure exactly 'ember-simple-auth-auth0' (double hyphen) in ENV.

Install

npm install ember-simple-auth-auth0

yarn add ember-simple-auth-auth0

pnpm add ember-simple-auth-auth0

Imports

Auth0LockAuthenticator

wrong

import Auth0LockAuthenticator from 'ember-simple-auth-auth0'

correct

import Auth0LockAuthenticator from 'ember-simple-auth-auth0/authenticators/lock'

Only available since v5. Must import from the specific path. Default export not available from package root.

Auth0PasswordlessAuthenticator
```
import Auth0PasswordlessAuthenticator from 'ember-simple-auth-auth0/authenticators/passwordless'
```
Separate authenticator for passwordless auth. Not included in default export.
Auth0Authenticator
```
import Auth0Authenticator from 'ember-simple-auth-auth0/authenticators/auth0'
```
Base authenticator for universal login. Used when not using Lock widget.

Quickstart

Shows basic configuration and login/logout flow with Lock authenticator.

// config/environment.js
ENV['ember-simple-auth-auth0'] = {
  clientID: process.env.AUTH0_CLIENT_ID ?? 'your-client-id',
  domain: process.env.AUTH0_DOMAIN ?? 'your-domain.auth0.com',
  logoutReturnToURL: 'http://localhost:4200'
};

// app/routes/application.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute extends Route {
  @service session;

  beforeModel() {
    return this.session.setup();
  }

  @action
  login() {
    this.session.authenticate('authenticator:lock');
  }

  @action
  logout() {
    this.session.invalidate();
  }
}

// app/controllers/application.js (partial)
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default class ApplicationController extends Controller {
  @service session;
}

// Handlebars template
{{#if this.session.isAuthenticated}}
  <p>Welcome, {{this.session.data.authenticated.profile.name}}!</p>
  <button {{on 'click' this.logout}}>Logout</button>
{{else}}
  <button {{on 'click' this.login}}>Login</button>
{{/if}}