@thetypefounders/continue-with-google 1.0.0

package/.github/workflows/build.yml

@@ -0,0 +1,35 @@
+name: Build
+
+on:
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  check:
+    name: Run the checks
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+      - run: npm clean-install
+      - run: npm run check
+
+  test:
+    name: Run the tests
+    runs-on: ubuntu-latest
+    environment: staging
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+      - run: npm install
+      - run: npm run test

package/.prettierignore

@@ -0,0 +1 @@
+.github

package/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": ["<THIRD_PARTY_MODULES>", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

package/README.md

@@ -0,0 +1,28 @@
+# Continue with Google
+
+The package provides a two-factor authentication with Google via Puppeteer.
+
+## Installation
+
+```shell
+npm install @thetypefounders/continue-with-google --save
+```
+
+## Usage
+
+```javascript
+import authenticate from '@thetypefounders/continue-with-google';
+
+const browser = await Puppeteer.launch();
+const page = await browser.newPage();
+
+// Go to a page that supports Google.
+await page.goto('...');
+await page.waitForSelector('...');
+
+// Click on the continue-with-Google button.
+await page.click('...');
+
+// Finalize the authorization flow and wait for a selector after redirection.
+const element = await authenticate(page, email, password, secret, selector);
+```

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { ElementHandle, Page } from 'puppeteer';
+export interface Logger {
+    info(message: string): void;
+}
+export declare function authenticate(page: Page, email: string, password: string, secret: string, target: string, logger?: Logger, attemptCount?: number, attemptSeconds?: number): Promise<ElementHandle | null>;

package/dist/index.js

@@ -0,0 +1,62 @@
+import { generateToken } from 'authenticator';
+import { setTimeout } from 'node:timers/promises';
+export async function authenticate(page, email, password, secret, target, logger = console, attemptCount = 3, attemptSeconds = 30) {
+    logger.info('Waiting to enter the email...');
+    await page.waitForSelector('input[type=email]', { visible: true });
+    logger.info('Entering the email...');
+    await page.type('input[type=email]', email);
+    await page.keyboard.press('Enter');
+    logger.info('Waiting to enter the password...');
+    await page.waitForSelector('input[type=password]', { visible: true });
+    logger.info('Entering the password...');
+    await page.type('input[type=password]', password);
+    await page.keyboard.press('Enter');
+    for (let attempt = 0, found = false; attempt < attemptCount && !found; attempt++) {
+        if (attempt > 0) {
+            logger.info(`Challenged on attempt ${attempt}. Entering the code...`);
+            if (attempt > 1) {
+                await setTimeout(1000 * attemptSeconds);
+            }
+            const code = generateToken(secret);
+            await page.evaluate(() => {
+                const field = document.querySelector('input[type=tel]');
+                field?.setAttribute('value', '');
+            });
+            await page.type('input[type=tel]', code);
+            await page.keyboard.press('Enter');
+            await waitForPeace(page, logger);
+        }
+        found = await Promise.any([
+            page.waitForSelector(target).then(() => true),
+            page
+                .waitForSelector('input[type=tel]', { visible: true })
+                .then(() => false),
+        ]);
+    }
+    return await page.$(target);
+}
+async function waitForPeace(page, logger, attemptCount = 10, attemptSeconds = 2) {
+    for (let attempt = -1, previous = undefined, current = undefined; attempt < attemptCount && (current === undefined || previous !== current); attempt++) {
+        if (attempt > 0) {
+            logger.info(`Changed on attempt ${attempt}. Taking a screenshot...`);
+        }
+        if (attempt > -1) {
+            await setTimeout(1000 * attemptSeconds);
+        }
+        const future = await screenshot(page);
+        if (future) {
+            previous = current;
+            current = future;
+        }
+    }
+}
+async function screenshot(page) {
+    try {
+        const content = '* { caret-color: transparent !important; }';
+        await page.addStyleTag({ content });
+        return await page.screenshot({ encoding: 'base64' });
+    }
+    catch {
+        return undefined;
+    }
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@thetypefounders/continue-with-google",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "author": "Ivan Ukhov <ivan.ukhov@gmail.com>",
+  "description": "Two-factor authentication with Google via Puppeteer",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/the-type-founders/continue-with-google.git"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "authenticator": "^1.1.5",
+    "puppeteer": "^24.1.1"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^5.2.1",
+    "@types/authenticator": "^1.1.4",
+    "prettier": "^3.4.2",
+    "typescript": "^5.7.3"
+  },
+  "scripts": {
+    "build": "tsc",
+    "check": "prettier . --check",
+    "format": "prettier . --check --write",
+    "prepublish": "tsc",
+    "test": "echo"
+  }
+}

package/src/index.ts

@@ -0,0 +1,94 @@
+import { generateToken } from 'authenticator';
+import { setTimeout } from 'node:timers/promises';
+import { ElementHandle, Page } from 'puppeteer';
+
+export interface Logger {
+  info(message: string): void;
+}
+
+export async function authenticate(
+  page: Page,
+  email: string,
+  password: string,
+  secret: string,
+  target: string,
+  logger: Logger = console,
+  attemptCount: number = 3,
+  attemptSeconds: number = 30
+): Promise<ElementHandle | null> {
+  logger.info('Waiting to enter the email...');
+  await page.waitForSelector('input[type=email]', { visible: true });
+  logger.info('Entering the email...');
+  await page.type('input[type=email]', email);
+  await page.keyboard.press('Enter');
+
+  logger.info('Waiting to enter the password...');
+  await page.waitForSelector('input[type=password]', { visible: true });
+  logger.info('Entering the password...');
+  await page.type('input[type=password]', password);
+  await page.keyboard.press('Enter');
+
+  for (
+    let attempt = 0, found = false;
+    attempt < attemptCount && !found;
+    attempt++
+  ) {
+    if (attempt > 0) {
+      logger.info(`Challenged on attempt ${attempt}. Entering the code...`);
+      if (attempt > 1) {
+        await setTimeout(1000 * attemptSeconds);
+      }
+      const code = generateToken(secret);
+      await page.evaluate(() => {
+        const field = document.querySelector('input[type=tel]');
+        (field as HTMLInputElement)?.setAttribute('value', '');
+      });
+      await page.type('input[type=tel]', code);
+      await page.keyboard.press('Enter');
+      await waitForPeace(page, logger);
+    }
+    found = await Promise.any([
+      page.waitForSelector(target).then(() => true),
+      page
+        .waitForSelector('input[type=tel]', { visible: true })
+        .then(() => false),
+    ]);
+  }
+
+  return await page.$(target);
+}
+
+async function waitForPeace(
+  page: Page,
+  logger: Logger,
+  attemptCount: number = 10,
+  attemptSeconds: number = 2
+): Promise<void> {
+  for (
+    let attempt = -1, previous = undefined, current = undefined;
+    attempt < attemptCount && (current === undefined || previous !== current);
+    attempt++
+  ) {
+    if (attempt > 0) {
+      logger.info(`Changed on attempt ${attempt}. Taking a screenshot...`);
+    }
+    if (attempt > -1) {
+      await setTimeout(1000 * attemptSeconds);
+    }
+    const future = await screenshot(page);
+    if (future) {
+      previous = current;
+      current = future;
+    }
+  }
+}
+
+async function screenshot(page: Page): Promise<string | undefined> {
+  try {
+    const content = '* { caret-color: transparent !important; }';
+    await page.addStyleTag({ content });
+    return await page.screenshot({ encoding: 'base64' });
+  } catch {
+    return undefined;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "declaration": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}