How do i save the authentication with puppeteer?

Question

I need to talk to a telegram bot, with my web app. So i decided to do a web scrapping, i do not know if its the best strategy.

When i try to access the telegram web, i need to authenticate and then proceed to the chat, but if i run the server again, i need to authenticate manually again. I tried to save the cookies, the waitForTimeout is 200 seconds, so i can login manually, but the cookies came as an empty array.

const puppeteer = require("puppeteer");
const fs = require("fs").promises;

(async () => {
  const browser = await puppeteer.launch({ headless: false, executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome' });
  const page = await browser.newPage();

  await page.goto("https://web.telegram.org/k/");
  console.log('before waiting');
  await page.waitForTimeout(200000)
  console.log('after waiting');
  
const cookies = await page.cookies();
await fs.writeFile('./coockie.json', JSON.stringify(cookies, null, 2));
//   await browser.close();
})();

Answer 1

It is quite difficult to authenticate in Telegram using puppeteer.

Part 1 Collecting data

First of all we need to collect localStorage (maybe even only localStorage). If we also want to collect all cookies, we have to drope page.cookies(); and use page._client.send('Network.getAllCookies');instead.

Run this code to collect the necessary data

import puppeteer from 'puppeteer';
import { setTimeout as wait } from 'timers/promises';
import fs from 'fs';

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('https://web.telegram.org/z/'); 

    await wait(60000); //We need this in order to have time for qr-code authentication

    const localStorageData = await page.evaluate(() => {
      let json = {};
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        json[key] = localStorage.getItem(key);
      }
      return json;
    });

    await fs.writeFile('localStorageData.json', JSON.stringify(localStorageData, null, 2), function(error, data){
        if(error) throw error;
                     
        console.log(data); 
    });
    
    const cookies = await page._client.send('Network.getAllCookies');

    await fs.writeFile('cookies.json', JSON.stringify(cookies, null, 2), function(error, data){
        if(error) throw error;

        console.log(data);
    });

    await browser.close()
  })();

Part 2 Using collected data for auntification

Before we start, we need to open our file cookies.json. If it looks like this:

{
  "cookies": [
     { 
     //some data
     },
     {
     //some data
     }
   ]
}

then it must be manually corrected to this look

[
     { 
     //some data
     },
     {
     //some data
     }
]

ok, the file has been corrected, go ahead

Run this code to authenticate

import puppeteer from 'puppeteer';
import { setTimeout as wait } from 'timers/promises';
import fs from 'fs';

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    await page.goto('https://web.telegram.org');// here without /z/, with z for some reason it doesn't work
    await fs.readFile('./cookies.json', async (err, data) => {
         if (err){
           console.log(err);
         } else {
           let json = JSON.parse(data);
           await page.setCookie(...json);
           console.log(json);
         //your code using json object
         }
    });
    await fs.readFile('./localStorageData.json', async (err, data) => {
         if (err){
           console.log(err);
         } else {
           let json = JSON.parse(data);
         
           await page.evaluate(localStorageData => {
             localStorage.clear();
             for (let key in localStorageData) {
                 console.log(key);
               localStorage.setItem(key, localStorageData[key]);
             }
           }, json);
           console.log(json);
         }
    });

  await wait(50000);
  await browser.close()
  })();

That's all. I recommend you to use playwright instead of puppeteer. Much easier to use and more understandable