How to importn Auth0 Lock in Angular CLI application?

Help
,
1

My app was working with Angular 2, but it stopped working now that I’ve changed to Angular 4.
What causes problem is that before I was using:

// Avoid name not found warnings
let Auth0Lock = require('auth0-lock').default;

But now that gives me this error:

ERROR in /blablabla…/services/auth.service.ts (6,17): Cannot find name 'require'.

So I’ve tried a lot of possible configurations, including the new guide in https://auth0.com/docs/quickstart/spa/angular2/01-login that suggest to use:

declare var Auth0Lock: any;

but I kept getting errors, in this case:

MainNavigationComponent.html:2 ERROR ReferenceError: Auth0Lock is not defined
Unhandled Promise rejection: Auth0Lock is not defined ; Zone: <root> ; Task: Promise.then ; Value: ReferenceError: Auth0Lock is not defined

My working solution was to go into node_modules/auth0-lock/lib/index.js and change

exports.default = Auth0Lock;

into

exports.Auth0Lock = Auth0Lock;

While using

import { Auth0Lock } from "auth0-lock";

To import it, which worked perfectly.

However editing stuff in node_modules is a bad idea, we all know that, but I cannot be blocked by this and I need to keep working while I find a better solution.

So how am I supposed to import Auth0Lock?

From my package.json:

		"angular2-jwt": "^0.2.0",
		"auth0-lock": "^10.14.0"
2

Here’s the steps I took after creating a new application ng new test-app with Angular CLI:

  1. npm i -S angular2-jwt.
  2. npm i -S auth0-lock.
  3. npm i -S @types/auth0-lock.
  4. Copy auth.config.ts.example and auth.service.ts from the quickstart you linked to.
  5. Rename auth.config.ts.example to auth.config.ts and update it with the correct configuration for my account.
  6. Update auth.service.ts by replacing declare var Auth0Lock: any; with import Auth0Lock from "auth0-lock";.
  7. Use the auth.service in the application component to prove it would work (just added a button to call the login method of the service.
  8. npm start

With these steps I accessed the local application, clicked the login button and Lock successfully displayed. Based on your information, the part that makes the difference is that since Lock uses a default export you need to use import Auth0Lock instead of import { Auth0Lock }.

Also have in mind that the quickstart uses declare var Auth0Lock: any; just to keep the compiler happy; this implies you would have to explicitly make sure that Lock would end-up being available in the web application. For example, by using a script tag to reference the CDN version in your index.html.

3

@jmangelo using import Auth0Lock from "auth0-lock"; solved my issue, but why would I want to add that as script, adding another request to slow down the site loading while I can package and bundle it in a single request?

4

@jmangelo using import Auth0Lock from "auth0-lock"; solved my issue, but why would I want to add that as script, adding another request to slow down the site loading while I can package and bundle it in a single request?

5

I may have phrased it wrong, I did not want to imply that including it as a script is better than using an import. I just wanted to add a note that with the default approach taken by the quickstart of using declare var Auth0Lock: any; you could indeed include it as a script in order to make it work. Depending on the exact situation there will be specific pros and cons for both approaches so the decision it’s always on a case by case basis; the quickstart implementation just had to choose one and went with the possibility of using a separate script.