auth0 is not defined with requirejs

[Ecarbone70]

I had the same issue as as others here. I couldn't use auth0 in my angularjs+requirejs application. After some test i found this simply workaround, i will show, waiting for a better solution. I write a simple preauth0.js file in scripts directory (when i put libraries):

define(function (require) {
    auth0 = require('auth0-js'); 
});

then in require.config:

....
  "auth0-js": "scripts/auth0.min",
         "preauth0":"scripts/preauth0",
         "auth0.auth0": "scripts/angular-auth0.min",
 ...
  "auth0-js": {
        "exports": "Auth0"
    },
    "auth0.auth0": {
        "deps": ["angular", "auth0-js","preauth0"]
    },
....

So i could simply call auth0auth0 in app.js

define(['angularAMD', 'angular',  'auth0.auth0', 'angular-route', ...], function (angularAMD) {
    var app = angular.module('Testapp', [.., 'auth0.auth0']);

and go on with provider as the tutorial explains. I haven't found any other solution for this, so i hope that this, maybe not perfect, would help someone else, waiting for better.

[ganeshkaspate]

Hey, I used this one. But now it is giving me an error which is like

Uncaught Error: Auth0 must be loaded. at Object.module.exports (angular-auth0.js:84) at webpack_require (angular-auth0.js:20) at Object.defineProperty.value (angular-auth0.js:63) at angular-auth0.js:66

[MalteHerberg]

@Ecarbone70 could you post your full config-file? I am having the same issue, but i am not sure how you build your config file. Thanks in advance!

[Ecarbone70]

> "use strict";
> require.config({
>     baseUrl: "",
>     urlArgs: "v=2.2.7",
>     waitSeconds: 0,
>     paths: {
>         "application-configuration": "scripts/application-configuration",       
>         "angular": "scripts/angular.min",
>         "angular-route": "scripts/angular-route.min",
>         "angularAMD": "scripts/angularAMD.min",
>         "auth0-js": "scripts/auth0.min",
>         "preauth0":"scripts/preauth0",
>         "auth0.auth0": "scripts/angular-auth0.min",
>         "angular-jwt": "scripts/angular-jwt.min",
>         "bootstrap": "scripts/bootstrap.min",
>         "translate": "scripts/angular-translate.min",
>         "angular-sanitize": "scripts/angular-sanitize.min",
>         "angular-local-storage": "scripts/angular-local-storage.min",
>         "angular-google-analytics": "scripts/angular-google-analytics.min",
>         "json": "scripts/json3.min",
>         "jquery": "scripts/jquery.min"
>        },
>     shim: {
>         "json": {
>             "exports": "JSON"
>         },
>         "angularAMD": ["jquery", "bootstrap", "angular"],
>         "angular":{
>             "deps": ["jquery"],
>             "exports": "angular"
>         },
>         "angular-local-storage": ["angular"],
>         "angular-route": ["angular"],
>         "angular-sanitize": ["angular"],
>         "angular-cookies": ["angular"],
>         "bootstrap": {
>             "deps": ["jquery"]
>         },
>         "translate": {
>             "deps": ["angular-sanitize"]
>         },
>     "auth0-js": {
>         "exports": "Auth0"
>     },
>     "auth0.auth0": {
>         "deps": ["angular", "auth0-js","preauth0"]
>     },
>     "angular-jwt": {
>         "deps": ["angular"]
>     }
>     },
>     // kick start application
>     deps: ["application-configuration"]
> });

Here it's but i don't think it could help so much. I just wrote what i added to use auth0

[MalteHerberg]

@Ecarbone70 that already helped me. I don't get the "auth0 is not defined"-failure anymore. But when I now try to use the angularAuth0Provider it says

Failed to instantiate module timemanagement due to: TypeError: Cannot read property 'init' of undefined

define(['angular', 'angular-route','angular-uiroute', 'angular-resource', 
'angular-datepicker','auth0.auth0'],function () {
    var app = angular.module("timemanagement", ['ngRoute','ui.router', 'ngResource', 
    '720kb.datepicker','auth0.auth0']);

    app.config(['$routeProvider','$urlRouterProvider', '$controllerProvider', '$provide', 
    '$stateProvider', 'angularAuth0Provider', function ( $routeProvider, $urlRouterProvider, $controllerProvider, $provide, $stateProvider, $resource, angularAuth0Provider) {

        app.register = {
            controller: $controllerProvider.register,
            factory: $provide.factory
        };

        angularAuth0Provider.init({
            clientID: AUTH0_CLIENT_ID,
            domain: AUTH0_DOMAIN,
            responseType: 'token id_token',
            audience: 'https://' + AUTH0_DOMAIN + '/userinfo',
            redirectUri: AUTH0_CALLBACK_URL,
            scope: 'openid'
          });

Developer tools of chrome shows me, that auth0.js was loaded. Do I have to set the name "angularAuth0Provider" somewhere?

[Ecarbone70]

I can't see anything wrong, sorry. I check and i did exactly as you. Maybe some more skilled could help better than me.

[MalteHerberg]

I deleted $resource from my dependency array, then it worked! I didn't use it in the function or the array, that was the problem.

[MalteHerberg]

@Ecarbone70 could you show me how you implemented the authentication(service) itself? I can not really make sense out of the auth0 tutorial, as it is not using requirejs.

[joshcanhelp]

This issue has been closed as stale because it has not had recent activity. If you have not received a response for our team (apologies for the delay), please reply with any additional information or a ping. Thank you for your contribution!