7

I am trying to use the Auth0 for social login but I keep getting an exception of an undefined reference.

This is the authentication service

import { Injectable }      from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';

// Avoid name not found warnings
declare var Auth0Lock: any;

@Injectable()
export class AuthService {
// Configure Auth0

lock = new Auth0Lock('I have set the ID correctly here', 'and the domain as well', {});

constructor() {
// Add callback for lock `authenticated` event
  this.lock.on("authenticated", (authResult) => {
  localStorage.setItem('id_token', authResult.idToken);
  });
}

public login() {
// Call the show method to display the widget.
  this.lock.show();
};

public authenticated() {
  // Check if there's an unexpired JWT
  // This searches for an item in localStorage with key == 'id_token'
  return tokenNotExpired();
};

public logout() {
   // Remove token from localStorage
    localStorage.removeItem('id_token');
  };
}

I injected the services and configured providers. Everything is wired correctly, but it just won't find Auth0Lock even though defined. Each time it reaches lock = new Auth0Lock('ID', 'DOMAIN', {}); it bombs out.

Siya Mzam
  • 4,655
  • 1
  • 26
  • 44
  • It's normal for the person that asks the question to end up solving it, so it's totally fine for you to add your own solution as an answer and accepting it. This improves visibility of the solution to people searching for similar issues and also clearly indicates that the question is answered. – João Angelo Dec 05 '16 at 09:54
  • Alright, thanks, let me do that. – Siya Mzam Dec 06 '16 at 10:27

3 Answers3

6

I replaced declare var Auth0Lock: any; with const Auth0Lock = require('auth0-lock').default; and that fixed the problem.

Siya Mzam
  • 4,655
  • 1
  • 26
  • 44
  • require isn't working for me - I get "auth.service.ts (8,17): Cannot find name 'require'. webpack: Failed to compile." – stack user Mar 29 '17 at 13:50
3

The accepted answer is good. I did get a Cannot find name 'require' error. Rather than using 'declare const require', I imported like so:

import Auth0Lock from 'auth0-lock';

Stephen Paul
  • 37,253
  • 15
  • 92
  • 74
-2

I needed to add to index.html:

<script src="https://cdn.auth0.com/js/lock/10.8/lock.min.js"></script>

via https://github.com/auth0/lock/issues/588

Geoffrey
  • 231
  • 3
  • 10