[pull] main from liveblocks:main

.github/workflows/tests.yml

@@ -124,6 +124,47 @@ jobs:
           path: e2e/next-sandbox/playwright-report
           retention-days: 14
 
+  e2e-ai-tests:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [22.4.1]
+
+    timeout-minutes: 60
+
+    env:
+      NEXT_PUBLIC_GITHUB_SHA: ${{ github.sha }}
+      NEXT_PUBLIC_LIVEBLOCKS_BASE_URL: ${{ vars.E2E_TEST_LIVEBLOCKS_BASE_URL }}
+      LIVEBLOCKS_SECRET_KEY: ${{ secrets.E2E_TEST_LIVEBLOCKS_SECRET_KEY }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: npm
+          cache-dependency-path: "**/package-lock.json"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Install Playwright
+        run: npx playwright install chromium
+
+      - name: Run AI Playwright tests
+        run: npm run test -- --filter @liveblocks/next-ai-kitchen-sink
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: ai-playwright-report
+          path: e2e/next-ai-kitchen-sink/playwright-report
+          retention-days: 14
+
   e2e-client-specs-tests:
     runs-on: ubuntu-latest
 

CLAUDE.md

@@ -18,7 +18,8 @@ _private_ package. Customers should not use it directly.
 
 # Bash commands
 
-- To run scripts, use `npx turbo`, not `npm`
+When running scripts, use `npx turbo`, not `npm`.
+
 - npx turbo run build: Build the project
 - npx turbo run build && tsc: Run typechecks
 - npx turbo run test:types: Run the type-level tests
@@ -32,5 +33,15 @@ _private_ package. Customers should not use it directly.
 
 # Workflow
 
-- Be sure to typecheck when you’re done making a series of code changes
+- Be sure to typecheck when you're done making a series of code changes
 - Prefer running single tests, and not the whole test suite, for performance
+
+# Testing
+
+- End-to-end applications are located in e2e/
+- For Storage, Presence, Inbox Notifications, Comments & Threads the app is
+  located in e2e/next-sandbox
+- For AI the app is in e2e/next-ai-kitchen-sink
+
+Run e2e tests headlessly using Playwright:  
+npx turbo build && env HEADLESS=1 playwright test --retries=5 --

docs/pages/platform/account-management.mdx

@@ -10,3 +10,5 @@ accounts and teams.
 
 - [Create an account](/docs/platform/account-management/create-an-account)
 - [Manage team members](/docs/platform/account-management/manage-team-members)
+- [Configure SSO](/docs/platform/account-management/saml)
+- [Configure Directory sync](/docs/platform/account-management/directory-sync)

docs/pages/platform/account-management/directory-sync.mdx

@@ -0,0 +1,66 @@
+---
+meta:
+  title: "Directory sync"
+  parentTitle: "Platform"
+  description: "Learn how to set up directory sync on your Liveblocks account."
+---
+
+<Banner>
+  This feature is available as an add-on to Enterprise customers. Reach out to
+  [sales@liveblocks.io](mailto:sales@liveblocks.io) to enable it on your
+  account.
+</Banner>
+
+_Directory sync_ helps teams manage their organization membership from a
+third-party identity provider like Google Directory or Okta. To use directory
+sync, [SSO must be configured first](/docs/platform/account-management/saml) as
+it requires an active SSO connection.
+
+## How it works
+
+When directory sync is configured, changes to your directory provider will
+automatically be synced with your team members. The previously existing
+permissions/roles will be overwritten by directory sync, including current user
+performing the sync.
+
+<Banner type="warning">
+
+Make sure you’re a member of the groups from the directory provider that you’re
+syncing with Liveblocks. Otherwise, you may lock yourself out.
+
+</Banner>
+
+You can configure a mapping between your directory provider’s groups and a
+Liveblocks team role. For example, your _engineers_ group on Okta can be
+configured with the _member_ role on Liveblocks, and your _admin_ group can use
+the _owner_ role.
+
+<Figure>
+  <Image
+    src="/assets/account-management/team-security-settings.png"
+    alt="Liveblocks team security settings"
+    width={768}
+    height={406}
+  />
+</Figure>
+
+### Configuring directory sync
+
+1. To configure directory sync for your team, you must be an owner of the team
+   (see
+   [how to manage team members](/docs/platform/account-management/manage-team-members)).
+2. From your dashboard, ensure your team is selected in the scope selector.
+3. Navigate to the “Settings” tab and select “Security & Privacy”.
+4. Navigate to the “Directory sync” section.
+5. Click “Configure” and follow the walkthrough to configure directory sync for
+   your team with your directory provider of choice.
+6. Map your directory groups to appropriate Liveblocks team roles.
+
+<Figure>
+  <Image
+    src="/assets/account-management/dsync-setup.png"
+    alt="Liveblocks team security settings"
+    width={768}
+    height={406}
+  />
+</Figure>

docs/pages/platform/account-management/saml.mdx

@@ -0,0 +1,111 @@
+---
+meta:
+  title: "SAML Single Sign-on"
+  parentTitle: "Platform"
+  description: "Learn how to set up SSO on your Liveblocks account."
+---
+
+<Banner>
+  This feature is available as an add-on to Enterprise customers. Reach out to
+  [sales@liveblocks.io](mailto:sales@liveblocks.io) to enable it on your
+  account.
+</Banner>
+
+SSO enables teams to enforce authentication via identity providers like Okta,
+Azure AD, Google Workspace, or OneLogin using SAML. This simplifies account
+management, and helps organizations meet internal security requirements. Paired
+with Directory Sync, teams can manage organization membership directly from
+their identity provider, reducing manual overhead and aligning with standard
+enterprise access control practices.
+
+Once enabled, all team members will be able to log in to the dashboard using
+your selected identity provider. You’ll still need to invite users to your team
+for them to have access. If you would like all users signing up with SSO to be
+automatically added to your team, please contact us.
+
+You can also use
+[Directory Sync](/docs/platform/account-management/directory-sync) to
+automatically assign users to your team with a specific role.
+
+<Figure>
+  <Image
+    src="/assets/account-management/team-security-settings.png"
+    alt="Liveblocks team security settings"
+    width={768}
+    height={406}
+  />
+</Figure>
+
+### Configuring SSO
+
+1. To configure SSO for your team, you must be an owner of the team (see
+   [how to manage team members](/docs/platform/account-management/manage-team-members)).
+2. From your dashboard, ensure your team is selected in the scope selector.
+3. Navigate to the “Settings” tab and select “Security & Privacy”.
+4. Navigate to the “SSO” section.
+5. Click “Configure” and follow the walkthrough to configure SSO for your team
+   with the identity provider of your choice.
+
+<Figure>
+  <Image
+    src="/assets/account-management/sso-setup.png"
+    alt="Liveblocks team security settings"
+    width={768}
+    height={406}
+  />
+</Figure>
+
+### Enforcing SSO
+
+For additional security, SSO can be enforced for a team so that all team members
+cannot access any team information unless their current session is authenticated
+with SSO. If you want to activate this setting, please contact us at
+[support@liveblocks.io](mailto:support@liveblocks.io).
+
+### Automatic provisioning
+
+By default, you still need to manually invite users to your team for them to
+have access to it. If you would like all users signing up with SSO to be
+automatically added to your team, please contact us at
+[support@liveblocks.io](mailto:support@liveblocks.io).
+
+### Authenticating with SSO
+
+Once you have configured SSO, your team members can use it to log in or sign up
+to Liveblocks. They only have to enter their email, and they will be redirected
+to the third-party authentication provider that you configured.
+
+### Supported providers
+
+Liveblocks supports the following third-party identity providers:
+
+- Okta
+- Entra ID (Azure AD)
+- Google SAML
+- ADP OpenID Connect
+- Auth0 SAML
+- CAS SAML
+- ClassLink SAML
+- Cloudflare SAML
+- CyberArk SAML
+- Duo SAML
+- Entra ID OpenID Connect
+- Google OpenID Connect
+- JumpCloud SAML
+- Keycloak SAML
+- LastPass SAML
+- Microsoft AD FS
+- NetIQ SAML
+- Okta OpenID Connect
+- OneLogin
+- Oracle
+- PingFederate
+- PingOne
+- Rippling
+- Salesforce
+- SimpleSAMLphp SAML
+- VMware Workspace One
+
+If your identity provider is not listed or if you'd like to use an OIDC (OpenID
+Connect) SSO provider, please reach out to us at
+[support@liveblocks.io](mailto:support@liveblocks.io).

docs/routes.json

@@ -654,6 +654,14 @@
           {
             "title": "Manage team members",
             "path": "/platform/account-management/manage-team-members"
+          },
+          {
+            "title": "SAML Single Sign-on",
+            "path": "/platform/account-management/saml"
+          },
+          {
+            "title": "Directory sync",
+            "path": "/platform/account-management/directory-sync"
           }
         ]
       },

e2e/next-ai-kitchen-sink/.gitignore

@@ -39,3 +39,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# playwright
+test-results/
+playwright-report/

e2e/next-ai-kitchen-sink/package.json

@@ -3,10 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --port 3008",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "start": "next start --port 3008",
+    "lint": "next lint",
+    "format": "(eslint --fix app/ test/ || true) && prettier --write app/ test/",
+    "test": "playwright test --max-failures=1",
+    "test:ui": "playwright test --ui --workers=1 --max-failures=1"
   },
   "dependencies": {
     "@liveblocks/client": "*",
@@ -20,6 +23,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@playwright/test": "^1.49.1",
     "@tailwindcss/postcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.3.1",

e2e/next-ai-kitchen-sink/playwright.config.ts

@@ -0,0 +1,71 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./test",
+  /* Maximum time one test can run for. */
+  timeout: 60 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 10000,
+  },
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 4 : 6,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    headless: process.env.CI || process.env.HEADLESS ? true : false,
+    viewport: { width: 640, height: 800 },
+    permissions: ["clipboard-write", "clipboard-read"],
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "retain-on-failure",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    // {
+    //   name: "firefox",
+    //   use: { ...devices["Desktop Firefox"] },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: process.env.CI
+      ? "npm run start" // Test production builds on CI
+      : "npm run dev", // Test dev builds on CI (with React StrictMode enabled)
+    port: 3008, // AI kitchen sink port
+    reuseExistingServer: !process.env.CI,
+  },
+};
+
+export default config;