Use 1Password to log in 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

Create a specific vault structure for this integration.

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

1Password.com

1. Sign in to your account on 1Password.com
2. Click New Vault on your Home page
3. Name your vault: Browserbase Agent
4. Optionally add a description like “Credentials for Browserbase automation”
5. Click Create Vault

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

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 

pnpm

pnpm add @browserbasehq/stagehand @1password/sdk 

yarn

yarn add @browserbasehq/stagehand @1password/sdk 

4. Configure environment

Create a .env file in your project root:

.env

BROWSERBASE_API_KEY=your_browserbase_api_key
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.context.pages()[0];
  await page.goto("https://www.browserbase.com/sign-in", { waitUntil: "domcontentloaded" });
  console.log('Navigated to Browserbase sign-in page')

  // Login process
  await stagehand.act(`Type in the username: ${username}`);
  console.log('Typed in the username')

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

  await stagehand.act(`Type in the password: ${password}`);
  console.log('Typed in the password')

  await stagehand.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 stagehand.extract(
    "Extract the project ID of the Browserbase account",
    z.object({
      projectId: z.string(),
    }),
  );

  const { totalSessions } = await stagehand.extract(
    "Extract the total sessions for the period for the project",
    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

pnpm

pnpm tsx index.ts

yarn

yarn tsx index.ts

Next steps

Contexts

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

Session recordings

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