3

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..

1
  • 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, 2016 at 10:56

2 Answers 2

1

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();
  });
1
  • 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 7, 2016 at 18:02
0

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",
    }),
  ]
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.