Auth0 Home Blog Docs

React Lock V11 Login Flow

lock
auth0
login
#1

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