How to avoid/fix "Auth0Lock is not defined" exception

Question

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.

Querida

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

Alright, thanks, let me do that. – Querida

Answer 1

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

Querida

require isn't working for me - I get "auth.service.ts (8,17): Cannot find name 'require'. webpack: Failed to compile." – Edging

Answer 2

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';

Snaggletooth

Answer 3

If you are using Aut0 in HTML file and all your code are wrapped in .html file, then you should go for this answer:

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

It will definitely help you.

Tirzah

Answer 4

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

Crispate