Auth0 and Angular error - Cannot initialize Auth0Angular. Auth0Lock or Auth0 must be available

Question

I am attempting to use Auth0 for my user authentication, but I am having trouble adding it to my Angular project. I'm using Angular1 with Webpack, and it appears that I am not loading Auth0 correctly. This is the contents of my app.js file;

import 'jquery';
import 'bootstrap/dist/css/bootstrap.min.css';
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import auth0 from 'auth0-angular';
import lock from 'auth0-lock';
import cookies from 'angular-cookies';
import storage from 'angular-storage';
import jwt from 'angular-jwt';
import AppComponent from './app.component.js';
import Common from './common/common';
import Components from './components/components';
import './styles.scss';

angular.module('myApp', [
  'auth0',
  'ui.router',
  'angular-storage',
  'angular-jwt',
  'app.common',
  'app.components',
])
  .directive('app', AppComponent)
  .constant('API', 'http://localhost:8000')
  .config(['$urlRouterProvider', 'authProvider', function ($urlRouterProvider, authProvider) {

authProvider.init({
  domain: '.eu.auth0.com',
  clientID: '',
  loginState: 'login'
});

authProvider.on('loginSuccess', function ($location, profilePromise, idToken, store) {
  profilePromise.then(function (profile) {
    store.set('profile', profile);
    store.set('token', idToken);
  });
  $location.path('/');
});

authProvider.on('loginFailure', function () {
  $location.path('/login');
});

$urlRouterProvider.otherwise('/login');



}]).run(['$rootScope', 'auth', 'store', 'jwtHelper', '$urlRouterProvider', function ($rootScope, auth, store, jwtHelper, $urlRouterProvider) {
    auth.hookEvents();
  }]);

I believe I am importing and loading auth0, so I don't understand why this is happening. I assume it's a minor syntax error..

Did the answer below fix your issue? Or do you have another fix? I am having the exact same issue, but the answer doesn't fix it for me. — Fabian, Jul 20 '16 at 10:56

Fabian · Answer 1 · 2016-07-22T07:35:02.850

I was running in the same issue. I use require instead of import, though.

Anyway, the auth0-angular module searches for auth0 or auth0lock on the global window object. By including auth0-lock using require (and I guess also using import in your case), the auth0lock module doesn't bind to the global window object.

The solution is to pass auth0-lock to auth0-angular as argument. That way, auth0-angular uses that, and it won't look at the window object.

See how I pass auth0lock to the authProvider.init() function as second argument.

var auth0lock = require('auth0-lock');

var angular = require('angular');

require('angular-cookies');
require('angular-route');
require('auth0-angular');
require('angular-storage');
require('angular-jwt');

angular.module('myapp', ['auth0', 'angular-storage', 'angular-jwt', 'ngRoute'])
  .config(function(authProvider) {
    authProvider.init({
      domain: 'myauth0domain',
      clientID: 'myclientid'
    }, auth0lock);
  })
  .run(function(auth) {
    auth.hookEvents();
  });

It's work with import the thing is to use the second argument of the init method to pass the Auth0 object instead of relying on the global window object. — Chuck Mah, Sep 07 '16 at 18:02

score 0 · Answer 2 · edited May 23 '17 at 12:16

I ran into this problem as well. I was using webpack, but the core issue here is that you need the Auth0 javascript files to be available before the Angular Auth0 modules.

It's similar to this issue: Managing jQuery plugin dependency in webpack.

Here's the webpack plugin that I added to fix it.

module.exports = {
  ...
  plugins: [
    new webpack.ProvidePlugin({
        "window.Auth0Lock": "auth0-lock",
    }),
  ]
}

Auth0 and Angular error - Cannot initialize Auth0Angular. Auth0Lock or Auth0 must be available

2 Answers2