CODEWITHSUNDEEP
continuous-integrationautomated-testsauth0auth0-lockwebpagetest
jlin
jlin

Reputation: 51

How do I programmatically login through Auth0 Lock interface?

I'm trying to write a WebPageTest custom script that involves programmatically logging into my web app's Auth0 Lock interface as the first step but haven't been able to get it working.

I set up a private WebPageTest server to get a closer look at what was happening, and from the server logs it looks like the WebPageTest script is setting the value of the username/password fields and clicking submit using vanilla DOM manipulation (i.e. querySelector, click, etc.) but upon form submission, Auth0 Lock doesn't recognize that anything has been filled out in those fields. There's errors saying those fields can't be blank when submit is clicked.

I've used a local WebPageTest Node agent with my private server to successfully login through the Lock widget but don't know how to get performance logs using that approach (no results show after I get to the test results page). That login approach seems to work because the values going into the input fields get programmatically "typed in" through the WebDriver sendKeys function.

I came across this related post on Auth0 forums but don't know how I can incorporate what's being recommended there in the context of a WebPageTest script.

You can reproduce the problem I'm experiencing by going to the Auth0 Lock sample at the top of this page and running the following code in your devtools console:

document.querySelector('.auth0-lock-input[name=email]').value = '[email protected]';
document.querySelector('.auth0-lock-input[name=password]').value = 'testing';
setTimeout(() => document.querySelector('.auth0-lock-submit').click(), 1000)

I expect to be able to programmatically enter input field info and submit it through the Auth0 Lock widget but haven't been able to do so. Does anyone have a solution to this?

Upvotes: 2

Views: 867

Answers (2)

Rantiev
Rantiev

Reputation: 2232

For the first glance you are doing something Auth0 Lock widget is not designed for. It's purpose to show form which user fills and programmatically fill makes no sense.

But probably you still can do this, at least you need to create click event right way. Your .click() call makes no sense. As there no such method on DOM element.

Check How do I programmatically click on an element in JavaScript?

And right way to login programmatically is use Auth0 API directly and not it's Lock widget. As puurpose of the widget is user interaction.

Upvotes: 0

Mladen B.
Mladen B.

Reputation: 2996

The login page uses javascript/ajax to create the login form and its input elements. You're simply doing stuff too fast, not waiting for the elements to be created first, in order to populate and submit them. Just wait for the form and its input elements to become available/visible and then continue your login process.

Also, avoid using Sleep() / setTimeout() approach to tackle waitings. It's just wrong and it's a problem waiting to materialize itself, as soon as you change the environment in which your code is running. Use a proper waiting methods from your test framework and properly wait for those elements to become available.

Upvotes: 0

Related Questions