Importieren von Auth0 Lock in eine React Komponente in Meteor 1.3

Question

Ich richte ein neues Meteor 1.3 Projekt ein und habe Probleme bei der Integration von Auth0. Ich folge dem Tutorial here, aber um die Dinge komplizierter zu machen, verwende ich ES2015-Module sowie React, also übersetze ich, wie ich gehe.

Nach dem Ausführen meteor add auth0:lock das Tutorial sagt, ich sollte die folgenden JS laufen auf dem Client machen:

Template.Auth0Login.events({ 
    'click button.login'(event, instance) { 
    lock.show(); 
    }, 
} 

Also meine app/imports/ui/components/Navbar.jsx Datei sieht wie folgt aus:

1| import React, {Component} from 'react'; 
2| 
3| export default class Navbar extends Component { 
4| render() { 
5|  return (
6|  <button class='signin' onClick={lock.show()}>Sign In</button> 
7|  ) 
8| } 
9| } 

Die gerenderte Seite ist leer, mit der folgende Konsolenfehler:

Uncaught TypeError: Cannot read property 'show' of undefined 

Wenn ich Entfernen Sie onClick={lock.show()}, die Schaltfläche wird angezeigt. Und das macht Sinn - wie könnte es wissen, was "Sperre" ist, ohne es zu importieren? So fand ich einen Import Linie auf dem Auth0 React tutorial und ließ ihn in:

1| import React, {Component} from 'react'; 
2| import Auth0Lock from 'auth0-lock'; 
3| 
4| export default class Navbar extends Component { 
5| ... 

den Fehler folgende Konsole Verursachung:

Uncaught Error: Cannot find module 'auth0-lock' 

Ich habe versucht, das importierte Modul auth0:lock en anstelle des Meteor-Paket umbenennen, umsonst.

Kann jemand Lock in eine bestimmte React-Komponente importieren, damit diese Funktionen verwendet werden können? Oder gibt es einen anderen Weg?

Vielen Dank!

Answer 1

Haben Sie sich das einmal angesehen: https://auth0.com/docs/libraries/lock?

// Initialize Auth0Lock with your `clientID` and `domain` 
    var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com');