Search code examples
dartauth0

using js.dart to expose auth0 API

I'm writing an Dart Angular2 application but it's irrelevant to the problem at hand.

I'm trying to use Auth0Lock with dart by exposing it's API using 1https://pub.dartlang.org/packages/js.

I'm using Dartium to debug the application.

so I'm exposing the Auth0Lock API using the following auth0lock.dart file:

import 'package:js/js.dart';

@JS()
class Auth0Lock {
 external factory Auth0Lock(String token, String domain, Object options);
  external on(String event, Function func);
  external show();
}

I exposed only the basic stuff I need.

then I created an Angular2 service in a file named auth0_service.dart that has the following code:

import 'package:angular2/core.dart'; import 'auth0lock.dart'; import 'app.config.dart';

@Injectable()
class Auth {
Auth0Lock lock;

Auth() {
    this.lock = new Auth0Lock(configObj.auth0.apiKey, configObj.auth0.domain,{});
}
updateProfileName(data) {
  var profile = data['profile'] != null ? data['profile'] : data;
  print(profile['name']);
}

authenticated() {
  return false;
}

login() {
    this.lock.show().then(this.updateProfileName);
}


}

I'll also show my index.html where I load auth0:

<!DOCTYPE html>
<html>
<head>
    <title>Demo App</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="www/styles.css">
    <script src="https://cdn.auth0.com/js/lock/10.0.0/lock.min.js"></script>
    <script defer src="/web/main.dart" type="application/dart"></script>
    <script defer src="/packages/browser/dart.js"></script>
</head>
<body>
    <my-app></my-app>
</body>
</html>

when I run my application I get the ollowing error:

EXCEPTION: No static method 'Auth0Lock.' declared in class 'Auth0Lock'.

so Auth0Lock is not a static method, it's a constructor for the class. so I must used the JS api wrong somehow.

Solution

  • i need to prepend to the auth0lock.dart the following:

    @JS()
library test;

    actually I can rename test to anything I want... iI just need to add the js tag and library with a name. that solved it.