How to screenshot authenticated pages with session cookies

You need to screenshot a page. Problem: it requires login.

Your user dashboard, admin panel, SaaS feature page — pages behind authentication. You can't just call take_screenshot('https://myapp.com/dashboard') because the API sees the login page, not the dashboard.

Solution: Pass session cookies to the screenshot API.

The problem: authenticated pages need authentication

// This captures the LOGIN PAGE, not the dashboard
const response = await fetch('https://pagebolt.dev/api/v1/screenshot', {
  method: 'POST',
  headers: { 'x-api-key': process.env.PAGEBOLT_API_KEY },
  body: JSON.stringify({
    url: 'https://myapp.com/dashboard' // ← Gets redirected to /login
  })
});

// Result: screenshot of login page, not dashboard

The API is a fresh HTTP client with no session. It gets redirected to login.

Solution: Pass cookies (session auth)

const response = await fetch('https://pagebolt.dev/api/v1/screenshot', {
  method: 'POST',
  headers: {
    'x-api-key': process.env.PAGEBOLT_API_KEY,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    url: 'https://myapp.com/dashboard',
    cookies: [
      {
        name: 'session_id',
        value: 'abc123xyz789', // ← Your session token
        domain: 'myapp.com'
      }
    ]
  })
});

const screenshot = await response.arrayBuffer();

Now the API makes the request WITH your session cookie. Server recognizes you're logged in. Returns dashboard, not login page.

Practical patterns: How to get session cookies

Pattern 1: Browser DevTools (manual, one-off)

1. Log into your app in browser
2. Open DevTools → Application → Cookies
3. Find your session cookie (usually named session, session_id, auth_token)
4. Copy the value
5. Pass to PageBolt API

Pattern 2: Puppeteer (automated login)

const puppeteer = require('puppeteer');

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

  await page.goto('https://myapp.com/login');
  await page.type('input[name=email]', 'your-email@example.com');
  await page.type('input[name=password]', 'your-password');
  await page.click('button[type=submit]');
  await page.waitForNavigation();

  const cookies = await page.cookies();
  const sessionCookie = cookies.find(c => c.name === 'session_id');

  await browser.close();
  return sessionCookie.value;
}

const sessionToken = await getSessionCookie();

Pattern 3: Bearer token auth

const response = await fetch('https://pagebolt.dev/api/v1/screenshot', {
  method: 'POST',
  headers: {
    'x-api-key': process.env.PAGEBOLT_API_KEY,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    url: 'https://myapp.com/dashboard',
    headers: {
      'Authorization': 'Bearer your-jwt-token-here'
    }
  })
});

Real example: Capture SaaS dashboard

const fetch = require('node-fetch');

async function captureAuthenticatedDashboard() {
  const sessionToken = 'abc123xyz789'; // or await getSessionCookie()

  const response = await fetch('https://pagebolt.dev/api/v1/screenshot', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.PAGEBOLT_API_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      url: 'https://myapp.com/dashboard',
      format: 'png',
      cookies: [
        {
          name: 'session_id',
          value: sessionToken,
          domain: 'myapp.com',
          path: '/'
        }
      ]
    })
  });

  if (!response.ok) {
    throw new Error(`API error: ${response.status}`);
  }

  const screenshot = await response.arrayBuffer();

  const fs = require('fs');
  fs.writeFileSync('dashboard.png', Buffer.from(screenshot));
  console.log('Dashboard screenshot saved to dashboard.png');
}

captureAuthenticatedDashboard().catch(console.error);

Common auth patterns

Session-based (cookie)

cookies: [
  {
    name: 'PHPSESSID', // PHP
    value: 'abc123...',
    domain: 'example.com'
  }
]

Token-based (Bearer)

headers: {
  'Authorization': 'Bearer your-jwt-token-here'
}

API key auth

headers: {
  'X-API-Key': 'your-api-key-here'
}

Automation example: Daily dashboard snapshots

async function dailyDashboardSnapshot() {
  const sessionToken = process.env.SESSION_TOKEN;

  const response = await fetch('https://pagebolt.dev/api/v1/screenshot', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.PAGEBOLT_API_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      url: 'https://myapp.com/dashboard',
      format: 'png',
      cookies: [{ name: 'session_id', value: sessionToken, domain: 'myapp.com' }]
    })
  });

  const screenshot = await response.arrayBuffer();

  // Upload to S3 for archival
  const s3 = new AWS.S3();
  await s3.putObject({
    Bucket: 'dashboard-snapshots',
    Key: `dashboard-${new Date().toISOString()}.png`,
    Body: screenshot
  }).promise();

  console.log('Daily dashboard snapshot captured');
}

dailyDashboardSnapshot();

Run daily via GitHub Actions, cron, or CloudScheduler.

Security notes

⚠️ Never commit session tokens to git — Store in environment variables, use .env files (gitignore'd), or secrets management (GitHub Secrets, AWS Secrets Manager).

⚠️ Session tokens expire — Refresh tokens periodically. Handle 401 responses gracefully.

⚠️ HTTPS only — Always use HTTPS for authenticated requests.

Getting started

1. Log into your app and copy your session cookie
2. Make a test request to PageBolt API with the cookie
3. Automate: Use Puppeteer to log in programmatically
4. Scale: Run daily snapshots, monitor for changes