Why i can't login on Instagram using pure JS?

Question

For study purposes I'm trying to make an automated login on the web version of Instagram (https://www.instagram.com/accounts/login/).

I thought the task would be easily achieved by just filling out the username and password fields, and then submitting the form; however it's not working, the form is submited with

These are the elements involved:

<input class="_2hvTZ pexuQ zyHYP" aria-label="Phone number, username, or email" aria-required="true" autocapitalize="off" autocorrect="off" maxlength="75" name="username" type="text" value="">
<input class="_2hvTZ pexuQ zyHYP" aria-label="Password" aria-required="true" autocapitalize="off" autocorrect="off" name="password" type="password" value="">   
<button class="sqdOP L3NKy y3zKF" disabled="" type="submit"><div class="                  Igw0E IwRSH eGOV_ _4EzTm                                                                                                              ">Log In</div></button>

So here is the code I'm using to fill the elements and submit the form:

document.getElementsByName('username')[0].value = 'myusername';
document.getElementsByName('password')[0].value = 'mypassword';
document.getElementsByTagName('button')[0].removeAttribute("disabled");
document.getElementsByTagName('button')[0].click();

document.getElementsByName('username')[0].value = 'myusername';
document.getElementsByName('password')[0].value = 'mypassword';
document.getElementsByTagName('button')[0].click();

<input class="_2hvTZ pexuQ zyHYP" aria-label="Phone number, username, or email" aria-required="true" autocapitalize="off" autocorrect="off" maxlength="75" name="username" type="text" value="">
<input class="_2hvTZ pexuQ zyHYP" aria-label="Password" aria-required="true" autocapitalize="off" autocorrect="off" name="password" type="password" value="">
<button class="sqdOP L3NKy y3zKF" disabled="" type="submit"><div class="                  Igw0E IwRSH eGOV_ _4EzTm">Log In</div></button>

The first two lines would fill the fields and fourth line would submit the form; somehow this won't work. Actually even the lines that fill the fields don't seem to work properly, because when i submit the form, i can see no field was sent to the server.

It seems the problem is related to something about React, but why is my code not working? It should work as it's pure JavaScript; what am I missing here?

"it's not working" is not a sufficiently detailed description of what went wrong. Please include exact error messages, expected vs actual behaviour, etc. — Wyck, Oct 28 '19 at 13:17
Possible duplicate of [What is the best way to trigger onchange event in react js](https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js) — Aprillion, Oct 28 '19 at 13:46
Presumably, Instagram page is not submitting an HTML form, but updating React state and then calling their API... And React overrides the native value setter of input elements. The link above is about unit testing, but applies here as well. — Aprillion, Oct 28 '19 at 13:48
@Aprillion Could you please post a working code as solution in this question, so i can accept ? — delphirules, Oct 28 '19 at 16:30
I won't, but feel free to write and accept your own answer if my hint helped. — Aprillion, Oct 28 '19 at 17:00
@Aprillion Please help, my JS skills are limited and i'm trying to learn more :) — delphirules, Oct 28 '19 at 18:42
ah sorry, I assumed you created a solution yourself and just wanted to have some answer to accept.. I will post an answer how to apply that technique. — Aprillion, Oct 28 '19 at 18:58

Aprillion · Accepted Answer · 2019-10-30T15:05:06.607

4

If the page is using React 16 (or compatible version), the answer from "What is the best way to trigger onchange event in react js" can be modified for this use case like this:

const setValue = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  "value"
).set
const modifyInput = (name, value) => {
  const input = document.getElementsByName(name)[0]
  setValue.call(input, value)
  input.dispatchEvent(new Event('input', { bubbles: true}))
}
const submit = () => {
  const button = document.getElementsByTagName('button')[0]
  button.removeAttribute("disabled")
  button.click()
}

modifyInput('username', 'myusername')
modifyInput('password', 'mypassword')
submit()

edited Oct 30 '19 at 15:05

answered Oct 28 '19 at 19:09

Aprillion

21,510
5
55
89

Thank you, tried but got this error : VM115:8 Uncaught TypeError: input.distpatchEvent is not a function at modifyInput (:8:9) at :16:1 – delphirules Oct 29 '19 at 10:56
1

sorry, a typo. hope you found out by checking the original answer.. it's dispatchEvent – Aprillion Oct 30 '19 at 15:04
To make the same thing , but in a TEXTAREA instead of an INPUT, how it would be ? :D – delphirules Oct 30 '19 at 23:30
1

next time I will use a bigger computer than my phone will be the weekend, so I would recommend to open a new question and mention what have you tried already to solve the problem.. probably innerText instead of value, and some change or keypress event instead of input – Aprillion Oct 31 '19 at 06:26

score 2 · Answer 2 · answered Oct 28 '19 at 13:48

This is probably due to fact that Instagram is a Facebook product which means that it would be made with React and have controlled components, listening to the synthetic onChange event on the input fields. These are not updated by setting the value of the field itself.

The easiest way to do this in my opinion would be to use Puppeteer, a library made by the Google Chrome team primarily to test front end apps in action. You can cause it to fire synthetic human events such as typing in the username and password.

Here is an example of what coding this pathway with puppeteer might look like:

const puppeteer = require("puppeteer");

const login = async (user, pass) => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://www.instagram.com/accounts/login/');
  
  await page.waitForSelector('input[aria-label="Phone number, username, or email"]');
  await page.focus('input[aria-label="Phone number, username, or email"]');
  
  await page.keyboard.type(user);
  await page.keyboard.press("Tab");
  await page.keyboard.type(pass);
  await page.keyboard.press("Enter");

  // Await somthing to load on the home page
  // Do the rest of what you'd want to do from here
}


login(testUser, testPass);

I know this involves using a new library but its very simple to figure out and probably does what you would want it to in the simplest way.

Let me know if you need any more help!

Thanks, that's a clever solution... I'll try a pure JS option , if can't find, will try this one — delphirules, Oct 28 '19 at 13:52

score 0 · Answer 3 · answered Oct 27 '19 at 14:25

0

The submit button is disabled if you don't touch the input fields and type enough keys to activate the button. What you can do is to add a line to enable the submit button before clicking that. Try this-

document.getElementsByName('username')[0].value = 'myusername';
document.getElementsByName('password')[0].value = 'mypassword';
document.getElementsByTagName('button')[0].removeAttribute("disabled");
document.getElementsByTagName('button')[0].click();

answered Oct 27 '19 at 14:25

Ashique

345
1
8

1

This worked to submit the form, but the username and password weren't sent, it's like they were blank – delphirules Oct 27 '19 at 15:13

Why i can't login on Instagram using pure JS?

3 Answers3