Unable to use Auth0 to get delegation token - authentication

Question

In my Angular2 app, I want to use Auth0 to get a delegation token so I could use it to custom sign into firebase. I followed the sample here to setup my Auth0 service and got it working.
The problem I'm having now is getting my delegation token and sign into Firebase with it. The example here shows how it's done, but I'm getting an EXCEPTION: Cannot read property 'auth0' of undefined when I try to declare my auth0 instance and use it to get my delegation token. What did I do wrong?
In my index.html I included the following scripts:
<script src="http://cdn.auth0.com/js/lock/10.7/lock.min.js"></script>
<script src="https://cdn.auth0.com/w2/auth0-7.4.min.js"></script>
I also tried in my terminal to install auth0:
npm install auth0
npm install auth0-js
My auth service currently looks like this:
// app/auth.service.ts
import { Injectable } from '#angular/core';
import { tokenNotExpired } from 'angular2-jwt';
import { AngularFire } from 'angularfire2';
// Avoid name not found warnings
declare var Auth0Lock: any;
declare var Auth0: any;
#Injectable()
export class Auth {
// Configure Auth0
lock = new Auth0Lock('AUTH0_CLIENT_ID', 'AUTH0_DOMAIN', {});
constructor(private af: AngularFire) {
// Add callback for lock `authenticated` event
this.lock.on("authenticated", (authResult) => {
this.lock.getProfile(authResult.idToken, function(error:any, profile:any){
if(error){
throw new Error(error);
}
localStorage.setItem('id_token', authResult.idToken);
localStorage.setItem('profile', JSON.stringify(profile));
//options to be used with auth0 instance to get delegation token
var options = {
id_token : authResult.idToken,
api : 'firebase',
scope : 'openid name email displayName',
target: 'AUTH0_CLIENT_ID'
};
//----->ERROR HERE, can't read auth0 property
this.auth0.getDelegationToken(options, function(err, result){
console.log(result);
if(!err){
this.af.auth().signInWithCustomToken(result.id_token).catch(function(error) {
console.log(error);
});
}
});
});
});
}
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');
}
}

Answer 1

You also need to create auth0 instance as shown here
var auth0 = new Auth0({ domain : AUTH0_DOMAIN, clientID: AUTH0_CLIENT_ID });

Answer 2

I found a workaround for this issue. I was stuck on this exact same problem and I think it has got to do with typscript importing of the auth0 module. Instead of using the auth0 module I simply made an HTTP POST request to my Auth0 account's delegation endpoint:
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
this.http.post('https://<Your domain>/delegation',
{
"client_id": "<Your client ID>",
"grant_type": "urn:ietf:params:oauth:grant-type:jwt-bearer",
"id_token": <Your auth0 Id Token>,
"target": "Your client ID",
"scope": "openid",
"api_type": "<Your delegation choice (mine was "aws")>",
}, options)
.map((res:Response) => res.json())
.subscribe(
data => localStorage.setItem('awsToken', JSON.stringify(data.Credentials)),
err => console.log(err),
() => console.log('Authentication Complete')
);
This will store the acquired credentials in your browser's local storage. Note: there may be some additional parameters required by Firebase that I am unaware of as I am using AWS. Also you will need the following imports for this HTTP request:
import { Http, Response, Headers,RequestOptions } from "#angular/http";
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';