How to avoid / fix the "Auth0Lock undefined" exception

Question

I try to use Auth0 for social login, but I keep getting an undefined directory exception.

This is an 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 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 have introduced services and configured providers. Everything is correctly connected, but it just will not find Auth0Lock , although it is defined. Each time it reaches lock = new Auth0Lock('ID', 'DOMAIN', {}); he explodes.

Answer 1

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

Answer 2

The accepted answer is good. I received the message I can not find the name 'required' . Instead of using 'declare const require', I imported like this:

import Auth0Lock from 'auth0-lock';

Answer 3

I need 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