React Lock V11 Login Flow

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(
    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

        //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, 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. :slight_smile:

Hey there!

Sorry for such huge delay in response! We’re doing our best in providing you with best developer support experience out there, but sometimes our bandwidth is not enough comparing to the number of incoming questions.

Wanted to reach out to know if you still require further assistance?