Auth0-js with Angular 2 (RC5), Webpack and CLI

Question

I'm trying to implement auth0 into my Angular 2 project, and I don't want to use the lock widget but instead customize my own login form and buttons for social login. So I want to use the auth0-library on it's own. And I want it to be bundled, so not import it in index.html.

I've used the CLI to scaffold my project (1.0.0-beta.11-webpack.2) and installed auth0-js with NPM. I can find the 'auth0-js'-folder in my node_modules, now I just have to connect it to my app somehow.

// login.component

import { Component } from '@angular/core';
import * as Auth0 from "auth0-js";

@Component({
  selector: 'app-login',
  templateUrl: 'login.component.html',
  styleUrls: ['login.component.css']
})
export class LoginComponent implements OnInit {

  auth0: any;

  constructor() {
    this.auth0 = new Auth0({
      domain: 'myDomain',
      clientID: 'myClientId',
      callbackURL: '{http://localhost:4000/}', // in dev-mode
      callbackOnLocationHash: true
    });
  }

  loginWithGoogle(connection) {
    this.auth0.login({
      connection: 'google-oauth2'
    });
  }
}

But I get this console message from Webpack:

ERROR in [default] ......... /node_modules/@types/auth0-js/index.d.ts' is not a module.

It seems the app is working, although the typings doesn't work. I've installed with npm i @types/auth0-js --save and it installs the typings to my node modules as expected.

Seems it's something wrong with the typings, but what? And is it something I can fix myself or do I have to wait until someone updates the typings to be modular?

Thanks!!

Kris Hollenbeck Kris Hollenbeck · Accepted Answer · 2016-08-18T21:56:11

I have not used Auth0. But I think this should work.

main.ts

import 'auth0-js/standalone'; 

// Add this to test it.
var auth0 = new Auth0({
  domain:       'mine.auth0.com',
  clientID:     'dsa7d77dsa7d7',
  callbackURL:  'http://my-app.com/callback',
  responseType: 'token'
});

Quick typings work around src/typings.d.ts

declare var Auth0: any;

A better way to do typings:

Install the auth0 typings https://www.npmjs.com/package/@types/auth0
Update your tsconfig "types": ["auth0"]

Auth0-js with Angular 2 (RC5), Webpack and CLI

1 Answers