Auth0 Home Blog Docs

Invoking Lock in static page in React app


#1

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?