How to implement authentication with Puppeteer

Puppeteer is a Node.js library that helps to automate and control the Google Chrome/Chromium browser workflow. It has many applications including web scraping, automating form submission, and generating screenshots of web pages.

When scraping web pages, it is often necessary to automate authentication, as almost all modern web applications require users to sign in with their username/email and password. Puppeteer’s high-level browser APIApplication Programming Interface enables seamless authentication with any web application, which helps avoid the risk of being identified as a bot and being subsequently banned.

import puppeteer from 'puppeteer';
const authenticate = async () => {
    // Launch the browser and open a new blank page
    const browser = await puppeteer.launch({
         headless: 'new',
        args: [
            "--no-sandbox",
            "--disable-gpu",
            '--disable-setuid-sandbox'
        ]
    });
    const page = await browser.newPage();
    const username = "USERNAME"
    const password = "PASSWORD"
    // Navigate the page to a URL
    await page.goto('https://github.com/login');
    await page.type("#login_field", username)
    await page.type("#password", password)
    await page.click("[type=submit]") // Click on submit button
    await page.screenshot({ path: "output/screenshot.png" }); // Take screenshot of the page
    
    await page.close();
    await browser.close();
};
authenticate()

Code explanation

Line 5: We launch the browser using the launch method and provide it with some important arguments.
- The headless:"new" argument instructs Puppeteer to use the new headlesswithout graphical user interface mode for the Chrome browser.
- The options provided to the args argument launch Puppeteer in a Docker container.
Line 13: The newPage method launches a new tab in the browser.
Lines 14–15: We provide the username and password, which are login credentials for GitHub.
Line 18: We provide the GitHub URL to the goto method to navigate to GitHubUniform Resource Locator.
Lines 19–20: The type method fills in information inside the form input fields. It accepts two arguments. The first argument is a CSS selector string to target the input fields, while the second is the value to be filled in the field. We use this method to enter the username and password on the GitHub login page.
Line 22: The click method accepts the CSS selector string of an HTML element as an argument and clicks on the element. We use this method to click the “Sign In” button on the GitHub login page.
Line 23: Afterwards, we use the screenshot method to save a screenshot of the browser once the login is complete.
Lines 25–26: Finally, we close the tab and the browser using the close methods.

Free AI Mock Interviews

Coding Interview

Coding PatternsFree Interview

Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.

System Design

YouTubeFree Interview

Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

How to implement authentication with Puppeteer

Code example

Code explanation