> ## Documentation Index
> Fetch the complete documentation index at: https://docs.browserbase.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Info>
  This guide assumes you have a 1Password account and a Browserbase account. If you don't, create a [1Password account](https://start.1password.com/) and [Browserbase account](https://www.browserbase.com/sign-up).
</Info>

## 1. Create your 1Password vault

Create a specific vault structure for this integration.

### Create the vault

<Tabs>
  <Tab title="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**
  </Tab>

  <Tab title="1Password.com">
    1. Sign in to your account on [1Password.com](https://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**
  </Tab>
</Tabs>

### 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**

<Note type="info" emoji="🧪">
  Your vault structure should now be: `op://Browserbase Agent/Browserbase/username` and `op://Browserbase Agent/Browserbase/password`
</Note>

## 2. Create a service account

Create a Service Account to allow programmatic access to your vault.

<Note type="warning">
  You need admin access to your 1Password account to create a Service Account.
</Note>

1. Navigate to [1Password.com](https://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

<Note type="danger">
  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.
</Note>

## 3. Install dependencies

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @browserbasehq/stagehand @1password/sdk 
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add @browserbasehq/stagehand @1password/sdk 
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn add @browserbasehq/stagehand @1password/sdk 
    ```
  </Tab>
</Tabs>

## 4. Configure environment

Create a `.env` file in your project root:

```env .env theme={null}
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:

```typescript index.ts theme={null}
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:

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npx tsx index.ts
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm tsx index.ts
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn tsx index.ts
    ```
  </Tab>
</Tabs>

## Next steps

<Columns>
  <Card title="Contexts" icon="server" iconType="sharp-solid" href="/platform/browser/core-features/contexts">
    Learn more about using contexts to automate workflows across login-gated sites
  </Card>

  <Card title="Session recordings" icon="server" iconType="sharp-solid" href="/platform/browser/observability/session-recording">
    Learn more about using session recordings to debug and optimize your workflows
  </Card>
</Columns>