Anchor allows you to save an existing browser state as “profiles” for use in future browser sessions. This feature enables users to:

  • Store authenticated sessions and identities, allowing to stay logged in to websites
  • Improve overall speed and performance

The following guide explains how to create and use Identity Profiles in Anchor Browser.

​
Quick start - Create and use a profile

1

Start a playground session with a proflie

Through the Anchor playground, create a profile on the configuration area. Then, click to start a session.

2

Authenticate Once

Start a new session in Anchor playground, and authenticate to the target service to create a browser context with the required cookies and session data.

3

Save Profile

Save the profile using the ‘Save Profile’ button in the Anchor Browser Playground.

This operation will end the current playground browser session

4

Use the profile in other sessions

Now, when using the create session API, pass the profile parameter with the name of the profile you created to load the saved browser context.

For additional capabilities and advanced use cases, refer to the API documentation for profiles.

​
Alternative approaches

​
Method 1 - Mounting a Browser Context

In this method, Anchor Browser uses a pre-authenticated browser context to access protected resources. This approach is recommended because it maintains a secure, isolated environment for authentication without exposing sensitive data.

1

Authenticate Once

Start by logging into the target service in a dedicated browser session. This creates a browser context with the required cookies and session data.

2

Export Browser Context

Once authenticated, export the browser context (including cookies and session data) and save it securely.

You can also export the browser context manually from your local browser by saving cookies and session data, using tools like browser devtools or extensions. - How to manually collect the context object
3

Mount in Anchor Browser

Use the saved browser context within Anchor Browser to access authenticated services seamlessly.

import { chromium } from 'playwright-core';
import fs from 'fs';

(async () => {
    const storageState = JSON.parse(fs.readFileSync('browser_context.json', 'utf-8'));
    const browser = await chromium.connectOverCDP(`wss://connect.anchorbrowser.io?apiKey=${ANCHOR_API_KEY}`);
    // Mount the browser context in Anchor Browser
    const context = await browser.newContext({ storageState });
    const page = await context.newPage();
    // Use the authenticated session
    await page.goto('https://example.com/protected');
    await browser.close();
})();

For cases where browser context mounting isn’t feasible, Playwright allows direct injection of cookies into a browser session, enabling access to authenticated resources.

1

Obtain Authentication Cookies

Authenticate manually or programmatically to capture the required cookies.

2

Inject Cookies into Playwright Session

Use Playwright’s API to inject cookies into the browser session before navigating to the authenticated page.

3

Access Resources

With the cookies injected, the AI agent can interact with the protected service as if logged in.

​
Code example

import { chromium } from 'playwright-core';
import fs from 'fs';

// Load cookies securely from a file
const cookies = JSON.parse(fs.readFileSync('cookies.json', 'utf-8'));

(async () => {
  const browser = await chromium.connectOverCDP(`wss://connect.anchorbrowser.io?apiKey=${ANCHOR_API_KEY}`);
  const context = await browser.newContext();
  // Inject cookies for authenticated access:
  await context.addCookies(cookies);
  const page = await context.newPage();
  // Use the authenticated session:
  await page.goto('https://example.com/protected'); 
  await browser.close();
})();

​
Secure Storage of Secrets

To maintain the security of your credentials, API keys, and sensitive data, do not store secrets directly in plaintext within your code. Instead, consider these best practices:

  1. Environment Variables: Store secrets in environment variables. You can use libraries such as dotenv for Node.js to load variables from a .env file.
  2. Secrets Management Services: Use secure storage solutions like AWS Secrets Manager, Azure Key Vault, or HashiCorp Vault to manage sensitive data securely.