Uncaught Error: [$injector:unpr] Unknown provider: auth0Provider <- auth0

[David Downey]

I am trying to integrated Auth0 into an Angularjs Breeze SPA created from using hottowel "template."  

I've been attempting to follow the instructions here https://docs.auth0.com/quickstart/spa/angular/aspnetweb-api

From what I can tell I am doing everything the instructions say to do, but I keep getting the error about an unknown provider for auth0Provider.  I am stumped.  Any ideas?

This is my app.js:

(function () {

    'use strict';

    var app = angular.module('app', [

        // Angular modules

        'ngAnimate', // animations

        'ngRoute', // routing

        'ngSanitize', // sanitizes html bindings (ex: sidebar.js)

        // Custom modules

        'common', // common functions, logger, spinner

        'common.bootstrap', // bootstrap dialog wrapper functions

        // 3rd Party Modules

        'breeze.angular', // configures breeze for an angular app

        'breeze.directives', // contains the breeze validation directive (zValidate)

        'ui.bootstrap', // ui-bootstrap (ex: carousel, pagination, dialog)

        //auth0

        'auth0', // main auth0 

        'angular-storage', // for local storage of tokens

        'angular-jwt' // Json web tokens

    ]);

    // Handle routing errors and success events

    app.run(['$route', 'auth0', 'datacontext', function ($route, auth, datacontext) {

        // This hooks all auth events to check everything as soon as the app starts

        auth.hookEvents();

        // Include $route to kick start the router.

        datacontext.prime();

        }]);

})();

part of my index.html:

...
<!-- common.bootstrap Modules -->

        <script src="app/common/bootstrap/bootstrap.dialog.js"></script>

        

        <!--Auth0-->

        <!--Todo: download these scripts instead of relying on their web version-->

        <!-- Auth0 Lock script and AngularJS module -->

        <script src="//cdn.auth0.com/js/lock-6.js"></script>

        <!-- angular-jwt and angular-storage -->

        <script type="text/javascript" src="//rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>

        <script type="text/javascript" src="//rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>

        <script src="//cdn.auth0.com/w2/auth0-angular-3.js"> </script>

        <!-- Setting the right viewport -->

        <!--    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />-->

        <!-- app -->

        <script src="app/admin/admin.js"></script>

        <script src="app/dashboard/dashboard.js"></script>
...

my config.js:

(function () {

    'use strict';

    var app = angular.module('app');

    // Configure Toastr

    toastr.options.timeOut = 4000;

    toastr.options.positionClass = 'toast-bottom-right';

    var keyCodes = {

        backspace: 8,

        tab: 9,

        enter: 13,

        esc: 27,

        space: 32,

        pageup: 33,

        pagedown: 34,

        end: 35,

        home: 36,

        left: 37,

        up: 38,

        right: 39,

        down: 40,

        insert: 45,

        del: 36

    };

    // For use with the HotTowel-Angular-Breeze add-on that uses Breeze

    var remoteServiceName = 'breeze/Breeze'; //original value

    //    var remoteServiceName = 'http://localhost:4545/breeze/Breeze';

    //    var remoteServiceName = 'http://10.2.23.102:8082/breeze/Breeze';

    var events = {

        controllerActivateSuccess: 'controller.activateSuccess',

        hasChangesChanged: 'datacontext.hasChangesChanged',

        spinnerToggle: 'spinner.toggle'

    };

    var config = {

        appErrorPrefix: '[BD-Portal Error] ', //Configure the exceptionHandler decorator

        docTitle: 'DataAcquisition: ',

        events: events,

        keyCodes: keyCodes,

        remoteServiceName: remoteServiceName,

        version: '2.1.0'

    };

    app.value('config', config);

    app.config(['$logProvider', function ($logProvider) {

        // turn debugging off/on (no info or warn)

        if ($logProvider.debugEnabled) {

            $logProvider.debugEnabled(true);

        }

    }]);

    //#region Configure the common services via commonConfig

    app.config(['commonConfigProvider', function (cfg) {

        cfg.config.controllerActivateSuccessEvent = config.events.controllerActivateSuccess;

        cfg.config.spinnerToggleEvent = config.events.spinnerToggle;

    }]);

    //#endregion

    //#region Configure Auth0

    app.config(function(authProvider) {

        authProvider.init({

            domain: 'blabla.auth0.com',

            clientID: 'blablabla'

        });

    });

    //#endregion

})();

[Gonto]

Hey there,

Let me see if I can help you:

1) First, if you're going to minify this JS code and not pass it through ngAnnotate, I'd change the `authProvider` configuration so that it's annotated as follows:

````js

app.config(['authProvider', function(authProvider) {

        authProvider.init({

            domain: 'blabla.auth0.com',

            clientID: 'blablabla'

        });

    }]);

````

2) In the `app.run`, when you're annotating the service, you're annotating it as `auth0`. However, the angular service is called `auth`. This is what's triggering the error you're getting since AngularJS can't find the service `auth0` nor its provider `auth0provider`. So the code should look like:

````js

app.run(['$route', 'auth', 'datacontext', function ($route, auth, datacontext) {

````

Let me know if this helps !

Cheers!

[David Downey]

Yes that did help.  Thank you very much!  I am still learning angular and didn't even grok the fact that I was prepping for minification.  I still have a lot to learn... on to the next issue :)

[Gonto]

Glad to help :)