One of the common tasks in web automation is handling logins, which ensures access to user-specific content and functionalities, such as personalized settings, user-specific data, and protected resources. Effective login management allows you to perform tasks like data scraping from user accounts, automating repetitive actions within a logged-in session, and testing web applications in authenticated states.

In this article, we’ll guide you through various examples of logging in with Puppeteer, including logging into popular websites like Wikipedia, Facebook, Twitter, and Gmail using Google single sign-on. We will also dive deeper into managing session cookies that are essential for maintaining login states across sessions.

Examples on how to login with Puppeteer

Let’s explore practical examples of how to login to various websites using Puppeteer. Whether you need to login to Wikipedia, Facebook, Twitter/X, or Gmail with Google single sign-on, these examples will cover the essential techniques to achieve successful logins using Puppeteer.

Puppeteer Login to Wikipedia 

In this example, we will demonstrate how to automate the login process for Wikipedia using Puppeteer. Wikipedia requires a username and password for login, making it an excellent simple case study for understanding Puppeteer’s login capabilities.

Step 1: Setting up Puppeteer

Before we begin, make sure you have Puppeteer installed in your project. If not, you can install it via npm:

npm install puppeteer

Now, let’s create a new Javascript file wikipedia_login.js and require Puppeteer:

const puppeteer = require('puppeteer');

Step 2: Writing the login script

Next, we’ll write the script to automate the login process. This script will open Wikipedia’s login page, fill in the username and password fields, and submit the form.

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // Navigate to Wikipedia's login page
  await page.goto('https://en.wikipedia.org/wiki/Special:UserLogin');

  // Fill in the login form
  await page.type('#wpName1', 'your_username'); // Replace 'your_username' with your actual username
  await page.type('#wpPassword1', 'your_password'); // Replace 'your_password' with your actual password
  await page.click('#wpLoginAttempt');

  // Wait for the login to complete
  await page.waitForNavigation();

  // Capture a screenshot for verification
  await page.screenshot({ path: 'wikipedia_logged_in.png' });

  // Close the browser
  await browser.close();
})();

Step 3: Running the script

Save the script and run it using Node.js:

node wikipedia_login.js

In the above code:

• We launch Puppeteer and create a new page.
• Next, we navigate to Wikipedia’s login page using page.goto().
• We then locate the username and password fields using their respective IDs #wpName1 and #wpPassword1 and fill them in using page.type().
• After filling in the credentials, we click the login button #wpLoginAttempt using page.click().
• We wait for the navigation to complete using page.waitForNavigation() to ensure the login process is finished.
• Finally, we capture the screenshot of the logged-in page for verification using page.screenshot() and close the browser.

Puppeteer Login to Facebook

Facebook’s login page requires both a username (email or phone number) and a password, making it an ideal scenario to showcase Puppeteer’s capabilities for handling complex login forms. Assuming that Puppeteer is installed, here’s the script to automate the login process for Facebook:

const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
   
    // Navigate to Facebook's login page
    await page.goto('https://www.facebook.com/login');
 
    // Fill in the login form
    await page.type('#email', 'your_email_or_phone'); // Replace 'your_email_or_phone' with your actual email or phone number
    await page.type('#pass', 'your_password'); // Replace 'your_password' with your actual password
    await page.click('button[type="submit"]');
 
    // Wait for the login to complete
    await page.waitForNavigation();
 
    // Capture a screenshot for verification
    await page.screenshot({ path: 'facebook_logged_in.png' });
 
    // Close the browser
    await browser.close();
  })();

In this code:

• We initialize Puppeteer and create a new page.
• Then, we navigate to Facebook’s login page using page.goto().
• Next, we identify the username (email or phone) and password fields by their respective IDs #email and #pass and input the credentials using page.type().
• After filling in the credentials, we click the login button using page.click('button[type="submit"]'.
• We wait for the navigation to complete with page.waitForNavigation() to ensure the login process is finished.
• Finally, we capture a screenshot of the logged-in page for verification using page.screenshot() and close the browser.

Puppeteer Login to Twitter (X)

Twitter’s login process includes handling a username (or email) and password, along with potential additional steps like handling two-factor authentication (2FA). Below is the script to automate logging into Twitter. This script will open Twitter’s login page, enter the username and password, and submit the form.

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({ headless: false }); // Use headless: false for debugging
  const page = await browser.newPage();
  
  // Navigate to Twitter's login page
  await page.goto('https://twitter.com/login');

  // Fill in the username (email or phone number)
  await page.waitForSelector('input[name="session[username_or_email]"]');
  await page.type('input[name="session[username_or_email]"]', 'your_username'); // Replace 'your_username' with your actual username

  // Fill in the password
  await page.waitForSelector('input[name="session[password]"]');
  await page.type('input[name="session[password]"]', 'your_password'); // Replace 'your_password' with your actual password

  // Submit the form
  await page.click('div[data-testid="LoginForm_Login_Button"]');

  // Wait for the navigation to complete
  await page.waitForNavigation();

  // Capture a screenshot for verification
  await page.screenshot({ path: 'twitter_logged_in.png' });

  // Close the browser
  await browser.close();
})();

We wait for the username input field to be available using await page.waitForSelector('input[name

="session[username_or_email]"]') and fill it using page.type(). Similarly, we wait for the password input field and fill it. The login form is submitted by clicking the login button identified by the data-testid="LoginForm_Login_Button" attribute. Finally, we wait for the navigation to complete with page.waitForNavigation() to ensure the login process is finished.

Handling additional security (2FA)

If your Twitter account has two-factor authentication (2FA) enabled, you’ll need to handle the additional input for the verification code. This typically involves waiting for the 2FA input field to appear and then entering the code manually or programmatically if you have access to it. Here’s an extended version of the script to handle 2FA:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  // Navigate to Twitter's login page
  await page.goto('https://twitter.com/login');

  // Fill in the username (email or phone number)
  await page.waitForSelector('input[name="session[username_or_email]"]');
  await page.type('input[name="session[username_or_email]"]', 'your_username'); // Replace 'your_username' with your actual username

  // Fill in the password
  await page.waitForSelector('input[name="session[password]"]');
  await page.type('input[name="session[password]"]', 'your_password'); // Replace 'your_password' with your actual password

  // Submit the form
  await page.click('div[data-testid="LoginForm_Login_Button"]');

  // Wait for the 2FA input if it appears
  try {
    await page.waitForSelector('input[name="challenge_response"]', { timeout: 5000 });
    await page.type('input[name="challenge_response"]', 'your_2fa_code'); // Replace 'your_2fa_code' with your actual 2FA code
    await page.click('div[data-testid="LoginForm_Login_Button"]');
    await page.waitForNavigation();
  } catch (e) {
    console.log('No 2FA required');
  }

  // Capture a screenshot for verification
  await page.screenshot({ path: 'twitter_logged_in.png' });

  // Close the browser
  await browser.close();
})();

This script waits for the 2FA input field and enters the 2FA code if required. This ensures the login process is complete, even with additional security steps.

Puppeteer Login to Gmail with Google Single Sign-On

Google Single Sign-On (SSO) involves multiple steps, including email input, password input, and potentially additional verification steps like 2-factor authentication. Below is the script to automate logging into Gmail. This script will open Google’s login page, enter the email and password, and handle any additional verification steps if necessary.

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({ headless: false }); // Use headless: false for debugging
  const page = await browser.newPage();

  // Navigate to Google's login page
  await page.goto('https://accounts.google.com/signin');

  // Enter the email address
  await page.waitForSelector('input[type="email"]');
  await page.type('input[type="email"]', 'your_email@gmail.com'); // Replace 'your_email@gmail.com' with your actual email
  await page.click('#identifierNext');

  // Wait for the password input to appear
  await page.waitForSelector('input[type="password"]', { visible: true });
  await page.type('input[type="password"]', 'your_password'); // Replace 'your_password' with your actual password
  await page.click('#passwordNext');

  // Wait for potential 2FA input
  try {
    await page.waitForSelector('input[type="tel"], input[type="text"]', { timeout: 5000 });
    // Handle 2FA input if necessary
    await page.type('input[type="tel"], input[type="text"]', 'your_2fa_code'); // Replace 'your_2fa_code' with your actual 2FA code
    await page.click('#idvPreregisteredPhoneNext, #totpNext');
    await page.waitForNavigation();
  } catch (e) {
    console.log('No 2FA required or already handled');
  }

  // Wait for navigation to Gmail
  await page.waitForNavigation({ waitUntil: 'networkidle0' });

  // Capture a screenshot for verification
  await page.screenshot({ path: 'gmail_logged_in.png' });

  // Close the browser
  await browser.close();
})();

We wait for the email input field to become available and then fill it using page.type(). After entering the email, we click the "Next" button #identifierNext. Similarly, we wait for the password input field, fill it, and click the "Next" button #passwordNext. If two-factor authentication is enabled, we wait for the 2FA input field, enter the code, and handle different types of 2FA inputs (phone or text) by clicking the appropriate button #idvPreregisteredPhoneNext, #totpNext. Finally, we wait for the navigation to complete to ensure that we are logged into Gmail.

Puppeteer Login with stored cookies from previous session

Logging in with stored cookies from a previous session can be a convenient way to maintain user sessions and avoid repetitive login steps and reduce the amount of ReCAPTCHA and 2FA triggers. In this section, we’ll explore how to store and manage cookies using Puppeteer, and then demonstrate how to reuse these cookies to log in and continue the same session seamlessly.

How to store and manage cookies

Puppeteer provides methods to interact with cookies, allowing you to store, retrieve, and manipulate them as needed. To store cookies for later use, you can extract them from the browser’s current session and save them to a file or database. Here’s a general approach to store cookies:

• Extract Cookies: Use page.cookies() to retrieve cookies from the current page session.
• Serialize Cookies: Serialize the cookies into a JSON format for storage.
• Store Cookies: Save the serialized cookies to a file or database for later retrieval.

Let’s illustrate this with a code example:

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Navigate to the login page and perform login steps...

  // Extract cookies
  const cookies = await page.cookies();

  // Serialize cookies
  const serializedCookies = JSON.stringify(cookies);

  // Store cookies to a file
  fs.writeFileSync('cookies.json', serializedCookies);

  // Close the browser
  await browser.close();
})();

This script navigates to a login page, performs login steps, extracts cookies using page.cookies(), serializes the cookies into JSON format, and stores them to a file named cookies.json.

Re-using previous cookies to login and continue the same session

Once cookies are stored, you can reuse them in subsequent sessions to maintain user sessions without the need for re-login. Here’s how to reuse stored cookies to continue the same session:

• Load Cookies: Read the stored cookies from the file or database.
• Deserialize Cookies: Deserialize the JSON-formatted cookies.
• Set Cookies: Use page.setCookie() to set the cookies for the current page session.

Let’s see this in action:

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Load cookies from file
  const storedCookies = fs.readFileSync('cookies.json');
  const cookies = JSON.parse(storedCookies);

  // Set cookies for the page session
  await page.setCookie(...cookies);

  // Navigate to a page where login is required
  await page.goto('https://example.com/dashboard');

  // Continue interacting with the page as a logged-in user...

  // Close the browser
  await browser.close();
})();

In this code, we load the stored cookies from the cookies.json file, deserialize them, and then set them for the current page session using page.setCookie(). This allows us to navigate to a page requiring login and continue interacting with it as a logged-in user, without the need for re-authentication.

Conclusion

In this article, we’ve explored various examples of how to log in with Puppeteer, from Wikipedia to Facebook to Twitter and even Gmail with Google single sign-on. We’ve seen how Puppeteer’s built-in methods, such as page.type(), page.click(), and page.waitForNavigation(), can be used to automate the login process and save time and effort.

But that’s not all! We’ve also delved into session cookies and learnt how to store and manage them for future use. By re-using previous cookies, we can continue the same session and avoid the need to log in repeatedly. This can be particularly useful when testing web applications or automating repetitive tasks.