Use 1Password to Login with Browserbase

Securely retrieve credentials from your 1Password vault and use them to log into websites.

This guide walks you through using the 1Password SDK with Stagehand and Playwright to securely authenticate on websites without hardcoding credentials.

This guide assumes you have a 1Password account and a Browserbase account. If you don’t, create a 1Password account and Browserbase account.

1. Create Your 1Password Vault

You’ll need to create a specific vault structure for this integration to work properly.

Create the Vault

1Password App

1. Open the 1Password app and sign in to your account
2. Click the plus + button in the sidebar
3. Name your vault: Browserbase Agent
4. Optionally add a description like “Credentials for Browserbase automation”
5. Click Create

Add Your Browserbase Credentials

1. In your new Browserbase Agent vault, click New Item
2. Select Login as the item type
3. Fill in the details:
   • Title: Browserbase
   • Username: Your Browserbase email address
   • Password: Your Browserbase password
4. Click Save

Your vault structure should now be: op://Browserbase Agent/Browserbase/username and op://Browserbase Agent/Browserbase/password

2. Create a Service Account

You’ll need to create a Service Account to allow programmatic access to your vault.

You need admin access to your 1Password account to create a Service Account.

1. Navigate to 1Password.com and sign in
2. Go to the Developer tab in the sidebar
3. Under Service Accounts, click New Service Account
4. Name your Service Account: Browserbase Agent Account
5. Select the vault you created in Step 1: Browserbase Agent
6. Click Create Account
7. IMPORTANT: Copy the Service Account token that appears

This Service Account token is sensitive and will only be shown once. Store it securely - you’ll need it for the OP_SERVICE_ACCOUNT_TOKEN environment variable.

3. Install Dependencies

npm

npm install @browserbasehq/stagehand @1password/sdk 

4. Configure Environment

Create a .env file in your project root:

.env

BROWSERBASE_API_KEY=your_browserbase_api_key
BROWSERBASE_PROJECT_ID=your_browserbase_project_id
OPENAI_API_KEY=your_openai_api_key
OP_SERVICE_ACCOUNT_TOKEN=your_1password_service_account_token

5. Implement Authentication

Create an index.ts file with the following code:

index.ts

import { z } from "zod";
import { createClient } from "@1password/sdk";
import { Stagehand } from "@browserbasehq/stagehand";

async function main() {
  // Initialize 1Password SDK client for secure credential retrieval
  const client = await createClient({
    auth: process.env.OP_SERVICE_ACCOUNT_TOKEN!,
    integrationName: "My Browserbase and 1Password Integration",
    integrationVersion: "v1.0.0",
  });

  // Initialize Stagehand with Browserbase environment
  const stagehand = new Stagehand({
    env: "BROWSERBASE",
  });
  await stagehand.init();

  // Retrieve credentials from 1Password vault
  const username = await client.secrets.resolve("op://Browserbase Agent/Browserbase/username");
  const password = await client.secrets.resolve("op://Browserbase Agent/Browserbase/password");

  // Navigate to Browserbase sign-in page
  const page = stagehand.page;
  await page.goto("https://www.browserbase.com/sign-in", { waitUntil: "domcontentloaded" });
  console.log('Navigated to Browserbase sign-in page')

  // Login process
  await page.act({
    action: "Type in the username: %username%",
    variables: {
      username: username,
    },
  });
  console.log('Typed in the username')

  await page.act('Click continue')
  console.log('Clicked continue')

  await page.act({
    action: "Type in the password: %password%",
    variables: {
      password: password,
    },
  });
  console.log('Typed in the password')

  await page.act('Click the sign in button')
  console.log('Clicked the sign in button')

  // Wait for the page to load
  await page.waitForLoadState('domcontentloaded')
  console.log('Page loaded')

  // Extract project information from the dashboard
  const { projectId } = await page.extract({
    instruction: "Extract the project ID of the Browserbase account",
    schema: z.object({
      projectId: z.string(),
    }),
  });

  const { totalSessions } = await page.extract({
    instruction: "Extract the total sessions for the period for the project",
    schema: z.object({
      totalSessions: z.number(),
    }),
  });

  console.log('For Project ID: ', projectId, ' the total sessions for the last 30 days is: ', totalSessions)

  // Close the stagehand session
  await stagehand.close();
}

main();

6. Run Your Script

Execute your script to see the 1Password integration in action:

npm

npx tsx index.ts

Next Steps

Contexts

Learn more about using contexts to automate workflows across login-gated sites

Session Replay

Learn more about using session replay to debug and optimize your workflows