CODEWITHSUNDEEP
javascriptauthenticationaureliaauth0
vascobento
vascobento

Reputation: 193

Cannot read property 'WebAuth' of undefined (Auth0 Error)

Currently when trying to apply Auth0 to my Aurelia project, when running the project I face this error:

Unhandled rejection Error: Error invoking AuthService. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: Cannot read property 'WebAuth' of undefined
Inner Error Stack:
TypeError: Cannot read property 'WebAuth' of undefined
    at new AuthService (http://localhost:9000/scripts/app-bundle.js:65:37)
    at Object.invoke (http://localhost:9000/scripts/vendor-bundle.js:24910:14)
    at InvocationHandler.invoke (http://localhost:9000/scripts/vendor-bundle.js:24874:168)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:25145:25)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:24591:37)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:25072:41)
    at Object.invoke (http://localhost:9000/scripts/vendor-bundle.js:24910:33)
    at InvocationHandler.invoke (http://localhost:9000/scripts/vendor-bundle.js:24874:168)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:25145:25)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:24591:37)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:25084:23)
    at http://localhost:9000/scripts/vendor-bundle.js:36220:73
    at tryCatcher (http://localhost:9000/scripts/vendor-bundle.js:3414:23)
    at Promise._settlePromiseFromHandler (http://localhost:9000/scripts/vendor-bundle.js:2630:31)
    at Promise._settlePromise (http://localhost:9000/scripts/vendor-bundle.js:2687:18)
    at Promise._settlePromise0 (http://localhost:9000/scripts/vendor-bundle.js:2732:10)
End Inner Error Stack
------------------------------------------------

    at new AuthService (http://localhost:9000/scripts/app-bundle.js:65:37)
    at Object.invoke (http://localhost:9000/scripts/vendor-bundle.js:24910:14)
    at InvocationHandler.invoke (http://localhost:9000/scripts/vendor-bundle.js:24874:168)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:25145:25)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:24591:37)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:25072:41)
    at Object.invoke (http://localhost:9000/scripts/vendor-bundle.js:24910:33)
    at InvocationHandler.invoke (http://localhost:9000/scripts/vendor-bundle.js:24874:168)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:25145:25)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:24591:37)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:25084:23)
    at http://localhost:9000/scripts/vendor-bundle.js:36220:73
    at new AggregateError (http://localhost:9000/scripts/vendor-bundle.js:27935:13)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:25147:15)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:24591:37)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:25072:41)
    at Object.invoke (http://localhost:9000/scripts/vendor-bundle.js:24910:33)
    at InvocationHandler.invoke (http://localhost:9000/scripts/vendor-bundle.js:24874:168)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:25145:25)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:24591:37)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:25084:23)
    at http://localhost:9000/scripts/vendor-bundle.js:36220:73
From previous event:
    at CompositionEngine.ensureViewModel (http://localhost:9000/scripts/vendor-bundle.js:36213:75)
    at CompositionEngine.createController (http://localhost:9000/scripts/vendor-bundle.js:36189:19)
    at CompositionEngine._createControllerAndSwap (http://localhost:9000/scripts/vendor-bundle.js:36164:19)
    at CompositionEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:36250:21)
    at TemplatingEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:36513:38)
    at Aurelia.setRoot (http://localhost:9000/scripts/vendor-bundle.js:26015:21)
    at http://localhost:9000/scripts/app-bundle.js:217:20
From previous event:
    at Object.configure (http://localhost:9000/scripts/app-bundle.js:216:19)
    at http://localhost:9000/scripts/vendor-bundle.js:25337:22
From previous event:
    at config (http://localhost:9000/scripts/vendor-bundle.js:25332:48)
    at handleApp (http://localhost:9000/scripts/vendor-bundle.js:25323:12)
    at http://localhost:9000/scripts/vendor-bundle.js:25356:13
From previous event:
    at http://localhost:9000/scripts/vendor-bundle.js:25354:40
From previous event:
    at http://localhost:9000/scripts/vendor-bundle.js:25353:29
From previous event:
    at run (http://localhost:9000/scripts/vendor-bundle.js:25349:26)
    at Object.<anonymous> (http://localhost:9000/scripts/vendor-bundle.js:25376:3)
    at Object.execCb (http://localhost:9000/scripts/vendor-bundle.js:3829:299)
    at da.check (http://localhost:9000/scripts/vendor-bundle.js:3818:50)
    at da.enable (http://localhost:9000/scripts/vendor-bundle.js:3823:58)
    at Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3827:433)
    at da.<anonymous> (http://localhost:9000/scripts/vendor-bundle.js:3822:436)
    at http://localhost:9000/scripts/vendor-bundle.js:3807:140
    at y (http://localhost:9000/scripts/vendor-bundle.js:3806:207)
    at da.enable (http://localhost:9000/scripts/vendor-bundle.js:3821:469)
    at da.init (http://localhost:9000/scripts/vendor-bundle.js:3816:154)
    at http://localhost:9000/scripts/vendor-bundle.js:3826:308

The error occurs in this piece of code, in the "new auth0.WebAuth" part.

import auth0 from 'auth0';
import { inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';
//import { AUTH_CONFIG } from './auth0-variables';

@inject(Router)
export class AuthService {
  auth0 = new auth0.WebAuth({
    domain: 'contactmanager.eu.auth0.com',
    clientID: '-wNifn3x_VLZYLxvNmz8XBGxVwCeh703',
    redirectUri: 'http://localhost:3000/callback',
    audience: 'https://contactmanager.eu.auth0.com/userinfo',
    responseType: 'token id_token',
    scope: 'openid'
  });

  constructor(Router) {
    this.router = Router;
  }

  login() {
    this.auth0.authorize();
  }

  handleAuthentication() {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession(authResult);
        this.router.navigate('home');
        this.authNotifier.emit('authChange', { authenticated: true });
      } else if (err) {
        console.log(err);
        alert(`Error: ${err.error}. Check the console for further details.`);
      }
    });
  }

  setSession(authResult) {
    // Set the time that the access token will expire at
    let expiresAt = JSON.stringify(
      authResult.expiresIn * 1000 + new Date().getTime()
    );
    localStorage.setItem('access_token', authResult.accessToken);
    localStorage.setItem('id_token', authResult.idToken);
    localStorage.setItem('expires_at', expiresAt);
  }

  logout() {
    // Clear access token and ID token from local storage
    localStorage.removeItem('access_token');
    localStorage.removeItem('id_token');
    localStorage.removeItem('expires_at');
    this.router.navigate('home');
    this.authNotifier.emit('authChange', false);
  }

  isAuthenticated() {
    // Check whether the current time is past the
    // access token's expiry time
    let expiresAt = JSON.parse(localStorage.getItem('expires_at'));
    return new Date().getTime() < expiresAt;
  }
}

I've searched StackOverflow and the internet in general for similar problems but I haven't found a solution to this one in particular, if anyone would be kind enough to give some sort of answer or hint to what might be causing the error I'd appreciate it.

Thanks in advance!

Upvotes: 2

Views: 1654

Answers (1)

robs
robs

Reputation: 940

Your auth0 object is null - it has not been imported. So likely it is either (as mentioned in comments) your Auth0 package is not installed correctly or you have not imported the package because the import statement is incorrect.

I have Auth0 working very well with Aurelia, so hopefully these snippets from one of my projects will help.

from my aurelia.json file in the dependencies section 

  {
    "name": "auth0-js",
    "path": "../node_modules/auth0-js/build",
    "main": "auth0"
  }

Then just as you have done I have an AuthService class that handles all authorisations. In that class I import like this :

import * as auth0 from 'auth0-js';

and new up my auth0 object:

    this.auth0 = new auth0.WebAuth({
    domain: AUTH_CONFIG.domain,
    clientID: AUTH_CONFIG.clientId,
    redirectUri: AUTH_CONFIG.callbackUrl,
    audience: AUTH_CONFIG.audience,
    responseType: 'token id_token',
    scope: 'openid profile user_metadata'
});

I recommend you take your Auth0 config settings to a separate class in a separate file and import it :

import { AUTH_CONFIG } from './AuthServiceConfig';

Also, as a point of personal preference, I like to use the Aurelia Event Aggregator to notify Auth0 sign-in and logout events. I just find it a better fit in the context of an Aurelia project.

Upvotes: 3

Related Questions