Invoking Lock in static page in React app

I have a React app and want to use Lock to handle user/authentication mgmt.

My react app, has multiple static HTML landing pages which are open to public and I want to implement Lock in these static HTML pages and once authenticated, I want to send the user to my React app which requires authentication.

I was able to get Lock working in static HTML page, then do a redirect to Callback component in React app but I need some help in getting the next steps working. I implemented the Auth.js with login(), logout(), handleAuthentcation() methods – from React sample but it appears Lock does not seem to be returning the standard tokens – see image:

I tried creating an instance of Lock in my Callback component but looks like the user is never authenticating because I never get authResults in the code below:

componentDidMount() {

        var lock = new Auth0Lock(
            'MY_CLIENT_ID',
            'mydomain.auth0.com'
        );
        
        lock.on("authenticated", function (authResult) {
            debugger;
            lock.getUserInfo(authResult.accessToken, function (error, profile) {

                
                if (error) {
                    // Handle error
                    return;
                }

                sessionStorage.setItem("accessToken", authResult.accessToken);
                sessionStorage.setItem("profile", JSON.stringify(profile));

                // Update DOM
            });
        });
    }

What’s the right way for me to get get authentication results in the scenario I’ve described here?

Hey there!

Sorry for such delay in response! We’re doing our best in providing the best developer support experience out there, but sometimes the number of incoming questions is just too big for our bandwidth. Sorry for such inconvenience!

Do you still require further assistance from us?