Use 1Password to Login with Browserbase

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

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

Add Your Browserbase Credentials

In your new Browserbase Agent vault, click New Item
Select Login as the item type
Fill in the details:
- Title: Browserbase
- Username: Your Browserbase email address
- Password: Your Browserbase password
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.

Navigate to 1Password.com and sign in
Go to the Developer tab in the sidebar
Under Service Accounts, click New Service Account
Name your Service Account: Browserbase Agent Account
Select the vault you created in Step 1: Browserbase Agent
Click Create Account
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 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:

npx tsx index.ts

Introduction

Fundamentals

Features

Use Cases

Guides

Integrations

1. Create Your 1Password Vault

Create the Vault

Add Your Browserbase Credentials

2. Create a Service Account

3. Install Dependencies

4. Configure Environment

5. Implement Authentication

6. Run Your Script

Next Steps

Contexts

Session Replay

Introduction

Fundamentals

Features

Use Cases

Guides

Integrations

​1. Create Your 1Password Vault

​Create the Vault

​Add Your Browserbase Credentials

​2. Create a Service Account

​3. Install Dependencies

​4. Configure Environment

​5. Implement Authentication

​6. Run Your Script

​Next Steps

Contexts

Session Replay

1. Create Your 1Password Vault

Create the Vault

Add Your Browserbase Credentials

2. Create a Service Account

3. Install Dependencies

4. Configure Environment

5. Implement Authentication

6. Run Your Script

Next Steps