Hello, I have been working on implemented the embedded lock into my single page web application that is built on React.
So far I have followed the auth0 tutorial found here. And my implementation is looking like this.
var Auth = (function() {
var wm = new WeakMap();
var privateStore = {};
var lock;
function Auth() {
this.lock = new Auth0Lock(
'<YOUR_CLIENT_ID>',
'<YOUR_DOMAIN>'
);
wm.set(privateStore, {
appName: "example"
});
}
Auth.prototype.getProfile = function() {
return wm.get(privateStore).profile;
};
Auth.prototype.authn = function() {
// Listening for the authenticated event
this.lock.on("authenticated", function(authResult) {
// Use the token in authResult to getUserInfo() and save it if necessary
this.getUserInfo(authResult.accessToken, function(error, profile) {
if (error) {
// Handle error
return;
}
//we recommend not storing access tokens unless absolutely necessary
wm.set(privateStore, {
accessToken: authResult.accessToken
});
wm.set(privateStore, {
profile: profile
});
});
});
};
return Auth;
}());
When initializing an instance of Auth auth = new Auth() I am able to show the login modal by calling auth.lock.show(), but… After the user has succesfully entered their credentials and been authenticated the this.lock.on() call back is never triggered. I believe Auth.prototype.authn is never called at all. If anyone has advice on how to trigger a call back to update the weak map in this class to store accessTokens, and userInfo etc… That would be much appreciated.
Also, the example provided github works, but it suggests storing accessTokens in localStorage which is not an ideal solution for me.
Thanks in advance for any help. 