wip: cleanup

`git clean -dfX; rm ./pnpm-lock.yaml; rm ./homepage/pnpm-lock.yaml; pnpm install; cd homepage && pnpm install; cd ../; pnpm install; pnpm format-and-lint:fix; pnpm build`

.changeset/config.json

@@ -2,22 +2,38 @@
   "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
-  "linked": [],
-  "fixed": [
+  "fixed": [],
+  "linked": [
     [
       "cojson",
+      "cojson-storage",
       "cojson-storage-indexeddb",
       "cojson-storage-sqlite",
       "cojson-transport-ws",
-      "jazz-auth-betterauth",
-      "jazz-betterauth-client-plugin",
-      "jazz-betterauth-server-plugin",
-      "jazz-react-auth-betterauth",
+      "jazz-browser",
+      "jazz-auth-clerk",
+      "jazz-browser-media-images",
+      "jazz-expo",
+      "jazz-inspector",
+      "jazz-inspector-element",
+      "jazz-nodejs",
+      "jazz-react",
+      "jazz-react-core",
+      "jazz-react-auth-clerk",
+      "jazz-react-native-core",
+      "jazz-react-native",
+      "jazz-react-native-media-images",
       "jazz-run",
-      "jazz-tools"
+      "jazz-svelte",
+      "jazz-tools",
+      "jazz-vue"
     ]
   ],
   "access": "public",
   "baseBranch": "main",
-  "updateInternalDependencies": "minor"
+  "updateInternalDependencies": "patch",
+  "ignore": [],
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "onlyUpdatePeerDependentsWhenOutOfRange": true
+  }
 }

.github/ISSUE_TEMPLATE/docs-request.md

@@ -1,10 +0,0 @@
----
-name: Docs request
-about: Allow people to quickly report issues & improvements for the docs
-title: 'Docs: '
-labels: docs, requested
-assignees: bensleveritt
-
----
-
-

.github/pull_request_template.md

@@ -1,23 +0,0 @@
-# Description
-<!-- Please include a summary of the change and which issue is fixed -->
-<!-- Please also include relevant motivation and context -->
-<!-- Include any links to documentation like RFC’s if necessary -->
-<!-- Add a link to to relevant preview environments or anything that would simplify visual review process -->
-<!-- Supplemental screenshots and video are encouraged, but the primary description should be in text -->
-
-## Manual testing instructions
-
-<!-- Add any actions required to manually test the changes -->
-
-## Tests
-
-- [ ] Tests have been added and/or updated
-- [ ] Tests have not been updated, because: <!-- Insert reason for not updating tests here -->
-- [ ] I need help with writing tests
-
-
-## Checklist
-
-- [ ] I've updated the part of the docs that are affected the PR changes
-- [ ] I've generated a changeset, if a version bump is required
-- [ ] I've updated the jsDoc comments to the public APIs I've modified, or added them when missing

.github/workflows/build-examples.yaml

@@ -0,0 +1,37 @@
+name: Build Examples
+
+on:
+  push:
+    branches: [ "main" ]
+
+jobs:
+  build-examples:
+    runs-on: blacksmith-4vcpu-ubuntu-2204
+    strategy:
+      matrix:
+        example: [
+          "chat",
+          "clerk",
+          "passkey",
+          "inspector",
+          "music-player",
+          "password-manager",
+          "pets",
+          "reactions",
+          "todo",
+        ]
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+      with:
+        submodules: true
+
+    - name: Setup Source Code
+      uses: ./.github/actions/source-code/
+
+    - name: Pnpm Build
+      run: |
+        pnpm install
+        pnpm turbo build;
+      working-directory: ./examples/${{ matrix.example }}

.github/workflows/build-starters.yaml

@@ -0,0 +1,26 @@
+name: Build Starters
+
+on:
+  push:
+    branches: ["main"]
+
+jobs:
+  build-starters:
+    runs-on: blacksmith-4vcpu-ubuntu-2204
+    strategy:
+      matrix:
+        starter: ["react-passkey-auth"]
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+
+      - name: Setup Source Code
+        uses: ./.github/actions/source-code/
+
+      - name: Pnpm Build
+        run: |
+          pnpm install
+          pnpm turbo build;
+        working-directory: ./starters/${{ matrix.starter }}

.github/workflows/code-quality.yml

@@ -1,28 +1,19 @@
 name: Code quality
 
-concurrency:
-  # For pushes, this lets concurrent runs happen, so each push gets a result.
-  # But for other events (e.g. PRs), we can cancel the previous runs.
-  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.ref }}
-  cancel-in-progress: true
-
 on:
   push:
-    branches: 
-      - "main"
   pull_request:
 
-
 jobs:
   quality:
-    runs-on: blacksmith-2vcpu-ubuntu-2404-arm
+    runs-on: blacksmith-4vcpu-ubuntu-2204
     steps:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Setup Biome
         uses: biomejs/setup-biome@v2
         with:
-          version: 1.9.4
+          version: latest
       - name: Run Biome
         run: biome ci .
 

.github/workflows/e2e-rn-test.yml

@@ -1,11 +1,5 @@
 name: End-to-End Tests for React Native
 
-concurrency:
-  # For pushes, this lets concurrent runs happen, so each push gets a result.
-  # But for other events (e.g. PRs), we can cancel the previous runs.
-  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.ref }}
-  cancel-in-progress: true
-
 on:
   pull_request:
     types: [opened, synchronize, reopened]
@@ -44,6 +38,7 @@ jobs:
       - name: chat-rn-expo App Pre Build
         working-directory: ./examples/chat-rn-expo
         run: |
+          pnpm build
           pnpm expo prebuild --clean
 
       - name: Install Maestro
@@ -66,8 +61,7 @@ jobs:
           emulator-options: -no-snapshot-save -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none -no-metrics
           disable-animations: true
           working-directory: ./examples/chat-rn-expo/
-          # killall due to this issue: https://github.com/ReactiveCircus/android-emulator-runner/issues/385
-          script: ./test/e2e/run.sh && ( killall -INT crashpad_handler || true )
+          script: ./test/e2e/run.sh
 
       - name: Copy Maestro Output
         if: steps.e2e_test.outcome != 'success'

.github/workflows/jazz-run.yml

@@ -1,11 +1,5 @@
 name: Jazz Run Tests
 
-concurrency:
-  # For pushes, this lets concurrent runs happen, so each push gets a result.
-  # But for other events (e.g. PRs), we can cancel the previous runs.
-  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.ref }}
-  cancel-in-progress: true
-
 on:
   push:
     branches: ["main"]
@@ -14,7 +8,7 @@ on:
 
 jobs:
   test:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: blacksmith-4vcpu-ubuntu-2204
     timeout-minutes: 5
 
     steps:

.github/workflows/playwright.yml

@@ -1,11 +1,5 @@
 name: Playwright Tests
 
-concurrency:
-  # For pushes, this lets concurrent runs happen, so each push gets a result.
-  # But for other events (e.g. PRs), we can cancel the previous runs.
-  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.ref }}
-  cancel-in-progress: true
-
 on:
   push:
     branches: ["main"]
@@ -15,11 +9,11 @@ on:
 jobs:
   test:
     timeout-minutes: 60
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: blacksmith-4vcpu-ubuntu-2204
     continue-on-error: true
     strategy:
       matrix:
-        shard: ["1/2", "2/2"]
+        project: ["tests/e2e", "examples/chat",  "examples/clerk", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "starters/react-passkey-auth"]
 
     steps:
       - uses: actions/checkout@v4
@@ -29,129 +23,21 @@ jobs:
       - name: Setup Source Code
         uses: ./.github/actions/source-code/
 
+      - name: Pnpm Build
+        run: pnpm turbo build
+        working-directory: ./${{ matrix.project }}
+
       - name: Install Playwright Browsers
         run: pnpm exec playwright install
+        working-directory: ./${{ matrix.project }}
 
-      - name: Run Playwright tests for shard ${{ matrix.shard }}
-        run: |
-          # Parse shard information (e.g., "1/2" -> shard_num=1, total_shards=2)
-          IFS='/' read -r shard_num total_shards <<< "${{ matrix.shard }}"
-          shard_index=$((shard_num - 1))  # Convert to 0-based index
-          
-          # Debug: Print parsed values
-          echo "Parsed shard_num: $shard_num"
-          echo "Parsed total_shards: $total_shards"
-          echo "Calculated shard_index: $shard_index"
-          
-          # Define all projects to test
-          all_projects=(
-            "tests/e2e"
-            "examples/chat"
-            "examples/chat-svelte"
-            "examples/clerk"
-            "examples/betterauth"
-            "examples/file-share-svelte"
-            "examples/form"
-            "examples/inspector"
-            "examples/music-player"
-            "examples/organization"
-            "starters/react-passkey-auth"
-            "starters/svelte-passkey-auth"
-            "tests/jazz-svelte"
-          )
-          
-          # Calculate which projects this shard should run
-          shard_projects=()
-          for i in "${!all_projects[@]}"; do
-            if [ $((i % total_shards)) -eq $shard_index ]; then
-              shard_projects+=("${all_projects[i]}")
-            fi
-          done
-          
-          # Track project results
-          overall_exit_code=0
-          failed_projects=()
-          passed_projects=()
-          
-          echo "=== Running tests for shard ${{ matrix.shard }} ==="
-          echo "Projects in this shard:"
-          printf '%s\n' "${shard_projects[@]}"
-          echo
-          
-          # Run tests for each project
-          for project in "${shard_projects[@]}"; do
-            echo "=== Testing project: $project ==="
-            
-            # Check if project directory exists
-            if [ ! -d "$project" ]; then
-              echo "❌ FAILED: Project directory $project does not exist"
-              failed_projects+=("$project (directory not found)")
-              overall_exit_code=1
-              continue
-            fi
-            
-            # Check if project has package.json
-            if [ ! -f "$project/package.json" ]; then
-              echo "❌ FAILED: No package.json found in $project"
-              failed_projects+=("$project (no package.json)")
-              overall_exit_code=1
-              continue
-            fi
-            
-            # Build the project
-            echo "🔨 Building $project..."
-            cd "$project"
-            
-            if [ -f .env.test ]; then
-              cp .env.test .env
-            fi
-            
-            if ! pnpm turbo build; then
-              echo "❌ BUILD FAILED: $project"
-              failed_projects+=("$project (build failed)")
-              overall_exit_code=1
-              cd - > /dev/null
-              continue
-            fi
-            
-            # Run Playwright tests
-            echo "🧪 Running Playwright tests for $project..."
-            if ! pnpm exec playwright test; then
-              echo "❌ TESTS FAILED: $project"
-              failed_projects+=("$project (tests failed)")
-              overall_exit_code=1
-            else
-              echo "✅ TESTS PASSED: $project"
-              passed_projects+=("$project")
-            fi
-            
-            cd - > /dev/null
-            echo "=== Finished testing $project ==="
-            echo
-          done
-          
-          # Print summary report
-          echo "=========================================="
-          echo "📊 TEST SUMMARY FOR SHARD ${{ matrix.shard }}"
-          echo "=========================================="
-          
-          if [ ${#passed_projects[@]} -gt 0 ]; then
-            echo "✅ PASSED (${#passed_projects[@]}):"
-            printf '  - %s\n' "${passed_projects[@]}"
-            echo
-          fi
-          
-          if [ ${#failed_projects[@]} -gt 0 ]; then
-            echo "❌ FAILED (${#failed_projects[@]}):"
-            printf '  - %s\n' "${failed_projects[@]}"
-            echo
-          fi
-  
-          
-          echo "Total projects in shard: ${#shard_projects[@]}"
-          echo "Passed: ${#passed_projects[@]}"
-          echo "Failed: ${#failed_projects[@]}"
-          echo "=========================================="
-          
-          # Exit with overall status
-          exit $overall_exit_code
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+        working-directory: ./${{ matrix.project }}
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: ${{ hashFiles(format('{0}/package.json', matrix.project)) }}-playwright-report
+          path: ./${{ matrix.project }}/playwright-report/
+          retention-days: 30

.github/workflows/pre-release.yml

@@ -1,11 +1,4 @@
 name: Pre-Publish tagged Pull Requests
-
-concurrency:
-  # For pushes, this lets concurrent runs happen, so each push gets a result.
-  # But for other events (e.g. PRs), we can cancel the previous runs.
-  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.ref }}
-  cancel-in-progress: true
-
 on:
   pull_request:
     types: [opened, synchronize, reopened, labeled]

.github/workflows/release.yml

@@ -17,7 +17,7 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 jobs:
   release:
     name: Release
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: blacksmith-4vcpu-ubuntu-2204
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v4

.github/workflows/unit-test.yml

@@ -1,11 +1,5 @@
 name: Unit Tests
 
-concurrency:
-  # For pushes, this lets concurrent runs happen, so each push gets a result.
-  # But for other events (e.g. PRs), we can cancel the previous runs.
-  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.ref }}
-  cancel-in-progress: true
-
 on:
   pull_request:
     types: [opened, synchronize, reopened]
@@ -15,7 +9,7 @@ on:
 
 jobs:
   unit-tests:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: blacksmith-4vcpu-ubuntu-2204
 
     steps:
       - name: Checkout

.gitignore

@@ -20,9 +20,6 @@ __screenshots__
 # Playwright
 test-results
 
-# Java
-.java-version
-
 .husky
 
 .vscode/*
@@ -32,5 +29,3 @@ test-results
 
 .cursorrules
 .windsurfrules
-
-playwright-report

CONTRIBUTING.md

@@ -63,7 +63,7 @@ You'll need Node.js 22.x installed (we're working on support for 23.x), and pnpm
 4. **Build the packages**:
 
    ```bash
-   pnpm build:packages
+   pnpm build
    ```
 
 5. **Run tests** to verify everything is working:

biome.json

@@ -11,10 +11,9 @@
       "jazz-tools.json",
       "**/ios/**",
       "**/android/**",
-      "tests/jazz-svelte/src/**",
+      "packages/jazz-svelte/**",
       "examples/*svelte*/**",
-      "starters/*svelte*/**",
-      "examples/server-worker-inbox/src/routeTree.gen.ts",
+      "examples/jazz-paper-scissors/src/routeTree.gen.ts",
       "homepage/homepage/**",
       "**/package.json"
     ]
@@ -56,7 +55,7 @@
       }
     },
     {
-      "include": ["packages/cojson/src/storage/*/**", "cojson-transport-ws/**"],
+      "include": ["packages/cojson-storage*/**", "cojson-transport-ws/**"],
       "linter": {
         "enabled": true,
         "rules": {
@@ -65,7 +64,7 @@
       }
     },
     {
-      "include": ["**/tests/**"],
+      "include": ["packages/**/src/tests/**"],
       "linter": {
         "rules": {
           "correctness": {

examples/betterauth/.env

@@ -0,0 +1 @@
+BETTER_AUTH_SECRET="TEST_SECRET"

examples/betterauth/.env.example

@@ -1 +0,0 @@
-BETTER_AUTH_SECRET="TEST_SECRET"

examples/betterauth/.gitignore

@@ -36,10 +36,8 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env
-.env.*
-!.env.example
-!.env.test
+.env*
+!.env
 
 # vercel
 .vercel

examples/betterauth/CHANGELOG.md

@@ -1,298 +0,0 @@
-# betterauth
-
-## 0.1.25
-
-### Patch Changes
-
-- Updated dependencies [048ac1d]
-  - jazz-tools@0.14.22
-  - jazz-betterauth-server-plugin@0.14.22
-  - jazz-inspector@0.14.22
-  - jazz-react@0.14.22
-  - jazz-react-auth-betterauth@0.14.22
-  - jazz-betterauth-client-plugin@0.14.22
-
-## 0.1.24
-
-### Patch Changes
-
-- Updated dependencies [e7e505e]
-- Updated dependencies [13b57aa]
-- Updated dependencies [5662faa]
-- Updated dependencies [2116a59]
-  - jazz-tools@0.14.21
-  - jazz-betterauth-server-plugin@0.14.21
-  - jazz-inspector@0.14.21
-  - jazz-react@0.14.21
-  - jazz-react-auth-betterauth@0.14.21
-  - jazz-betterauth-client-plugin@0.14.21
-
-## 0.1.23
-
-### Patch Changes
-
-- Updated dependencies [6f72419]
-- Updated dependencies [04b20c2]
-  - jazz-tools@0.14.20
-  - jazz-betterauth-server-plugin@0.14.20
-  - jazz-inspector@0.14.20
-  - jazz-react@0.14.20
-  - jazz-react-auth-betterauth@0.14.20
-  - jazz-betterauth-client-plugin@0.14.20
-
-## 0.1.22
-
-### Patch Changes
-
-- jazz-betterauth-client-plugin@0.14.19
-- jazz-betterauth-server-plugin@0.14.19
-- jazz-react-auth-betterauth@0.14.19
-- jazz-inspector@0.14.19
-- jazz-react@0.14.19
-- jazz-tools@0.14.19
-
-## 0.1.21
-
-### Patch Changes
-
-- Updated dependencies [4b950bc]
-- Updated dependencies [d6d9c0a]
-- Updated dependencies [c559054]
-  - jazz-tools@0.14.18
-  - jazz-betterauth-server-plugin@0.14.18
-  - jazz-inspector@0.14.18
-  - jazz-react@0.14.18
-  - jazz-react-auth-betterauth@0.14.18
-  - jazz-betterauth-client-plugin@0.14.18
-
-## 0.1.20
-
-### Patch Changes
-
-- Updated dependencies [e512df4]
-  - jazz-betterauth-server-plugin@0.14.17
-  - jazz-tools@0.14.17
-  - jazz-betterauth-client-plugin@0.14.17
-  - jazz-inspector@0.14.17
-  - jazz-react@0.14.17
-  - jazz-react-auth-betterauth@0.14.17
-
-## 0.1.19
-
-### Patch Changes
-
-- jazz-betterauth-server-plugin@0.14.16
-- jazz-inspector@0.14.16
-- jazz-react@0.14.16
-- jazz-react-auth-betterauth@0.14.16
-- jazz-tools@0.14.16
-- jazz-betterauth-client-plugin@0.14.16
-
-## 0.1.18
-
-### Patch Changes
-
-- Updated dependencies [f9590f9]
-  - jazz-react@0.14.15
-  - jazz-betterauth-server-plugin@0.14.15
-  - jazz-inspector@0.14.15
-  - jazz-react-auth-betterauth@0.14.15
-  - jazz-tools@0.14.15
-  - jazz-betterauth-client-plugin@0.14.15
-
-## 0.1.17
-
-### Patch Changes
-
-- Updated dependencies [e32a1f7]
-  - jazz-tools@0.14.14
-  - jazz-betterauth-server-plugin@0.14.14
-  - jazz-inspector@0.14.14
-  - jazz-react@0.14.14
-  - jazz-react-auth-betterauth@0.14.14
-  - jazz-betterauth-client-plugin@0.14.14
-
-## 0.1.16
-
-### Patch Changes
-
-- jazz-inspector@0.14.13
-- jazz-react@0.14.13
-- jazz-react-auth-betterauth@0.14.13
-
-## 0.1.15
-
-### Patch Changes
-
-- jazz-inspector@0.14.12
-- jazz-react@0.14.12
-- jazz-react-auth-betterauth@0.14.12
-
-## 0.1.14
-
-### Patch Changes
-
-- Updated dependencies [dc746a2]
-- Updated dependencies [f869d9a]
-- Updated dependencies [3fe6832]
-  - jazz-react-auth-betterauth@0.14.10
-  - jazz-inspector@0.14.10
-  - jazz-react@0.14.10
-  - jazz-tools@0.14.10
-  - jazz-betterauth-server-plugin@0.14.10
-  - jazz-betterauth-client-plugin@0.14.10
-
-## 0.1.13
-
-### Patch Changes
-
-- Updated dependencies [22c2600]
-  - jazz-tools@0.14.9
-  - jazz-betterauth-server-plugin@0.14.9
-  - jazz-inspector@0.14.9
-  - jazz-react@0.14.9
-  - jazz-react-auth-betterauth@0.14.9
-  - jazz-betterauth-client-plugin@0.14.9
-
-## 0.1.12
-
-### Patch Changes
-
-- Updated dependencies [637ae13]
-  - jazz-tools@0.14.8
-  - jazz-betterauth-server-plugin@0.14.8
-  - jazz-inspector@0.14.8
-  - jazz-react@0.14.8
-  - jazz-react-auth-betterauth@0.14.8
-  - jazz-betterauth-client-plugin@0.14.8
-
-## 0.1.11
-
-### Patch Changes
-
-- Updated dependencies [365b0ea]
-  - jazz-tools@0.14.7
-  - jazz-betterauth-server-plugin@0.14.7
-  - jazz-inspector@0.14.7
-  - jazz-react@0.14.7
-  - jazz-react-auth-betterauth@0.14.7
-  - jazz-betterauth-client-plugin@0.14.7
-
-## 0.1.10
-
-### Patch Changes
-
-- Updated dependencies [9d6d9fe]
-- Updated dependencies [9d6d9fe]
-  - jazz-tools@0.14.6
-  - jazz-betterauth-server-plugin@0.14.6
-  - jazz-inspector@0.14.6
-  - jazz-react@0.14.6
-  - jazz-react-auth-betterauth@0.14.6
-  - jazz-betterauth-client-plugin@0.14.6
-
-## 0.1.9
-
-### Patch Changes
-
-- Updated dependencies [91cbb2f]
-- Updated dependencies [20b3d88]
-  - jazz-tools@0.14.5
-  - jazz-betterauth-server-plugin@0.14.5
-  - jazz-inspector@0.14.5
-  - jazz-react@0.14.5
-  - jazz-react-auth-betterauth@0.14.5
-  - jazz-betterauth-client-plugin@0.14.5
-
-## 0.1.8
-
-### Patch Changes
-
-- Updated dependencies [011af55]
-  - jazz-tools@0.14.4
-  - jazz-betterauth-server-plugin@0.14.4
-  - jazz-inspector@0.14.4
-  - jazz-react@0.14.4
-  - jazz-react-auth-betterauth@0.14.4
-  - jazz-betterauth-client-plugin@0.14.4
-
-## 0.1.7
-
-### Patch Changes
-
-- Updated dependencies [3d1027f]
-- Updated dependencies [c240eed]
-  - jazz-tools@0.14.2
-  - jazz-betterauth-server-plugin@0.14.2
-  - jazz-inspector@0.14.2
-  - jazz-react@0.14.2
-  - jazz-react-auth-betterauth@0.14.2
-  - jazz-betterauth-client-plugin@0.14.2
-
-## 0.1.6
-
-### Patch Changes
-
-- Updated dependencies [cdfc105]
-  - jazz-tools@0.14.1
-  - jazz-betterauth-server-plugin@0.14.1
-  - jazz-inspector@0.14.1
-  - jazz-react@0.14.1
-  - jazz-react-auth-betterauth@0.14.1
-  - jazz-betterauth-client-plugin@0.14.1
-
-## 0.1.5
-
-### Patch Changes
-
-- Updated dependencies [5835ed1]
-  - jazz-tools@0.14.0
-  - jazz-betterauth-server-plugin@0.14.0
-  - jazz-inspector@0.14.0
-  - jazz-react@0.14.0
-  - jazz-react-auth-betterauth@0.14.0
-  - jazz-betterauth-client-plugin@0.14.0
-
-## 0.1.4
-
-### Patch Changes
-
-- jazz-betterauth-server-plugin@0.13.32
-- jazz-react@0.13.32
-- jazz-react-auth-betterauth@0.13.32
-- jazz-betterauth-client-plugin@0.13.32
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [e5b170f]
-  - jazz-tools@0.13.31
-  - jazz-betterauth-server-plugin@0.13.31
-  - jazz-inspector@0.13.31
-  - jazz-react@0.13.31
-  - jazz-react-auth-betterauth@0.13.31
-  - jazz-betterauth-client-plugin@0.13.31
-
-## 0.1.2
-
-### Patch Changes
-
-- jazz-betterauth-server-plugin@0.13.30
-- jazz-inspector@0.13.30
-- jazz-react@0.13.30
-- jazz-react-auth-betterauth@0.13.30
-- jazz-tools@0.13.30
-- jazz-betterauth-client-plugin@0.13.30
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [8e5ff13]
-  - jazz-inspector@0.13.29
-  - jazz-betterauth-server-plugin@0.0.1
-  - jazz-react@0.13.29
-  - jazz-react-auth-betterauth@0.0.1
-  - jazz-tools@0.13.29
-  - jazz-betterauth-client-plugin@0.0.1

examples/betterauth/README.md

@@ -1,16 +1,14 @@
 # Better Auth Integration Example
 
-This example demonstrates how to integrate [Better Auth](https://www.better-auth.com/) with Jazz.
+This example demonstrates using Jazz with Better Auth and Next.js.
 
 ## Getting started
 
 To run this example, you may either:
-
-- Clone the Jazz monorepo and run this example from within.
-- Create a new Jazz project using this example as a template, and run that new project.
+* Clone the Jazz monorepo and run this example from within.
+* Create a new Jazz project using this example as a template, and run that new project.
 
 ### Setting environment variables
-
 - `NEXT_PUBLIC_AUTH_BASE_URL`: A URL to a Better Auth server. If undefined, the example will self-host a Better Auth server.
 - `BETTER_AUTH_SECRET`: The encryption secret used by the self-hosted Better Auth server (required only if `NEXT_PUBLIC_AUTH_BASE_URL` is undefined)
 - `GITHUB_CLIENT_ID`: The client ID for the GitHub OAuth provider used by the self-hosted Better Auth server (required only if `NEXT_PUBLIC_AUTH_BASE_URL` is undefined)
@@ -19,64 +17,33 @@ To run this example, you may either:
 ### Using this example as a template
 
 1. Create a new Jazz project, and use this example as a template.
-
 ```sh
 npx create-jazz-app@latest betterauth-app --example betterauth
 ```
-
-2. Navigate to the new project and install dependencies.
-
+2. Navigate to the new project and start the development server.
 ```sh
 cd betterauth-app
 pnpm install
-```
-
-3. Create a .env file (don't forget to set your [BETTER_AUTH_SECRET](https://www.better-auth.com/docs/installation#set-environment-variables)!)
-
-```sh
-mv .env.example .env
-```
-
-4. Start the development server
-
-```sh
 pnpm dev
 ```
 
-https://www.better-auth.com/docs/installation#set-environment-variables
-
 ### Using the monorepo
 
-This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+This requires `pnpm` to be installed; see [https://pnpm.io/installation](https://pnpm.io/installation).
 
-Clone the jazz repository.
-
-```bash
+1. Clone the `jazz` repository.
+```sh
 git clone https://github.com/garden-co/jazz.git
 ```
-
-Install and build dependencies.
-
-```bash
-pnpm i && npx turbo build
-```
-
-Go to the example directory.
-
-```bash
-cd jazz/examples/betterauth/
-```
-
-Create a .env file (don't forget to set your [BETTER_AUTH_SECRET](https://www.better-auth.com/docs/installation#set-environment-variables)!)
-
+2. Install dependencies.
 ```sh
-mv .env.example .env
+cd jazz
+pnpm install
 ```
-
-Start the dev server.
-
-```bash
+3. Navigate to the example and start the development server.
+```sh
+cd examples/betterauth
 pnpm dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+The example should be running at [http://localhost:3000](http://localhost:3000) by default.

examples/betterauth/components.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/styles/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}

examples/betterauth/package.json

@@ -1,5 +1,6 @@
 {
 	"name": "betterauth",
+	"version": "0.1.0",
 	"private": true,
 	"type": "module",
 	"scripts": {
@@ -14,24 +15,19 @@
 		"email": "email dev --dir src/components/emails"
 	},
 	"dependencies": {
-		"@icons-pack/react-simple-icons": "^12.8.0",
-		"@radix-ui/react-label": "^2.1.6",
-		"@radix-ui/react-slot": "^1.2.2",
+		"@garden-co/design-system": "workspace:*",
+		"@react-email/components": "^0.0.38",
 		"better-auth": "^1.2.4",
 		"better-sqlite3": "^11.9.1",
-		"class-variance-authority": "^0.7.1",
-		"clsx": "^2.1.1",
-		"jazz-react-auth-betterauth": "workspace:*",
-		"jazz-betterauth-client-plugin": "workspace:*",
 		"jazz-betterauth-server-plugin": "workspace:*",
+		"jazz-betterauth-client-plugin": "workspace:*",
+		"jazz-inspector": "workspace:*",
+		"jazz-react": "workspace:*",
+		"jazz-react-auth-betterauth": "workspace:*",
 		"jazz-tools": "workspace:*",
-		"lucide-react": "^0.510.0",
-		"next": "15.3.2",
+		"next": "15.3.1",
 		"react": "^18.0.0",
-		"react-dom": "^18.0.0",
-		"sonner": "^2.0.3",
-		"tailwind-merge": "^3.3.0",
-		"tw-animate-css": "^1.2.5"
+		"react-dom": "^18.0.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",

examples/betterauth/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

examples/betterauth/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

examples/betterauth/public/jazz-logo.svg

@@ -1,11 +1,17 @@
 <svg
       viewBox="0 0 386 146"
-      fill="currentColor"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path id="text"
         d="M176.725 33.865H188.275V22.7H176.725V33.865ZM164.9 129.4H172.875C182.72 129.4 188.275 123.9 188.275 114.22V43.6H176.725V109.545C176.725 115.65 173.975 118.51 167.925 118.51H164.9V129.4ZM245.298 53.28C241.613 45.47 233.363 41.95 222.748 41.95C208.998 41.95 200.748 48.44 197.888 58.615L208.613 61.915C210.648 55.315 216.368 52.565 222.638 52.565C231.933 52.565 235.673 56.415 236.058 64.61C226.433 65.93 216.643 67.195 209.768 69.23C200.583 72.145 195.743 77.865 195.743 86.83C195.743 96.51 202.673 104.65 215.818 104.65C225.443 104.65 232.318 101.35 237.213 94.365V103H247.388V66.425C247.388 61.475 247.168 57.185 245.298 53.28ZM217.853 95.245C210.483 95.245 207.128 91.34 207.128 86.72C207.128 82.045 210.593 79.515 215.323 77.92C220.328 76.435 226.983 75.5 235.948 74.18C235.893 76.93 235.673 80.725 234.738 83.475C233.418 89.25 227.643 95.245 217.853 95.245ZM251.22 103H301.545V92.715H269.535L303.195 45.47V43.6H254.3V53.885H284.935L251.22 101.185V103ZM304.815 103H355.14V92.715H323.13L356.79 45.47V43.6H307.895V53.885H338.53L304.815 101.185V103Z"
       />
+      <style>
+        path#text { fill: #000 }
+        @media (prefers-color-scheme: dark) {
+          path#text { fill: #fff }
+        }
+      </style>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

examples/betterauth/public/link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link-icon lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>

examples/betterauth/public/mail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-icon lucide-mail"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>

examples/betterauth/public/social/github.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

examples/betterauth/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

examples/betterauth/public/wrench.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench-icon lucide-wrench"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>

examples/betterauth/src/app/(app)/layout.tsx

@@ -1,22 +0,0 @@
-import { Navbar } from "@/components/navbar";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Jazz Example: Better Auth",
-  description: "Jazz example application demonstrating Better Auth integration",
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <>
-      <Navbar />
-      <div className="container mx-auto pt-16 min-h-screen flex flex-col items-center justify-center">
-        {children}
-      </div>
-    </>
-  );
-}

examples/betterauth/src/app/(app)/page.tsx

@@ -1,113 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { Account } from "jazz-tools";
-import { useAccount } from "jazz-tools/react";
-import {
-  AppWindowMacIcon,
-  FileTextIcon,
-  GlobeIcon,
-  WrenchIcon,
-} from "lucide-react";
-import Image from "next/image";
-
-export default function Home() {
-  const { me } = useAccount(Account, { resolve: { profile: {} } });
-
-  if (!me) {
-    return null;
-  }
-
-  return (
-    <div className="grow flex flex-col items-center justify-center">
-      <main className="flex flex-col gap-8 row-start-2 grow justify-center">
-        <Image
-          src="/jazz-logo.svg"
-          alt="Jazz logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <p className="text-sm/6 text-center sm:text-left">
-          Signed in as{" "}
-          <span className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-mono font-semibold">
-            {me.profile.name}
-          </span>{" "}
-          with id{" "}
-          <span className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-mono font-semibold">
-            {me.id}
-          </span>
-        </p>
-
-        <div className="flex gap-4 items-center flex-row">
-          <Button asChild size="lg">
-            <a
-              href="https://jazz.tools/docs"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Image src="/jazz.svg" alt="" width={20} height={20} />
-              Start building
-            </a>
-          </Button>
-
-          <Button asChild variant="secondary" size="lg">
-            <a
-              href="https://jazz.tools/docs"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <FileTextIcon className="size-4" />
-              Read the docs
-            </a>
-          </Button>
-        </div>
-      </main>
-
-      <footer className="flex gap-4 py-8">
-        <Button asChild variant="ghost">
-          <a
-            href="https://jazz.tools/api-reference"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <FileTextIcon className="size-4" />
-            API reference
-          </a>
-        </Button>
-        <Button asChild variant="ghost">
-          <a
-            href="https://jazz.tools/examples"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <AppWindowMacIcon className="size-4" />
-            Examples
-          </a>
-        </Button>
-
-        <Button asChild variant="ghost">
-          <a
-            href="https://jazz.tools/status"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <GlobeIcon className="size-4" />
-            Status
-          </a>
-        </Button>
-
-        <Button asChild variant="ghost">
-          <a
-            href="https://jazz.tools/showcase"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <WrenchIcon className="size-4" />
-            Built with Jazz
-          </a>
-        </Button>
-      </footer>
-    </div>
-  );
-}

examples/betterauth/src/app/(app)/settings/page.tsx

@@ -1,14 +0,0 @@
-import { UserSettings } from "@/components/user-settings";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Settings | Jazz Example: Better Auth",
-};
-
-export default function SettingsPage() {
-  return (
-    <div className="max-w-screen-md w-full mx-auto px-4">
-      <UserSettings />
-    </div>
-  );
-}

examples/betterauth/src/app/api/auth/[...all]/route.ts

@@ -1,10 +1,4 @@
 import { auth } from "@/lib/auth";
 import { toNextJsHandler } from "better-auth/next-js";
 
-export const { GET, POST } = (() => {
-  if (!process.env.NEXT_PUBLIC_AUTH_BASE_URL) {
-    return toNextJsHandler(auth.handler);
-  } else {
-    return { GET: undefined, POST: undefined };
-  }
-})();
+export const { GET, POST } = toNextJsHandler(auth.handler);

examples/betterauth/src/app/auth/forgot-password/page.tsx

@@ -1,10 +0,0 @@
-import { ForgotPasswordForm } from "@/components/forgot-password-form";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Forgot password | Jazz Example: Better Auth",
-};
-
-export default function ForgotPasswordPage() {
-  return <ForgotPasswordForm />;
-}

examples/betterauth/src/app/auth/layout.tsx

@@ -1,23 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-
-interface Props {
-  children: React.ReactNode;
-}
-
-export default function AuthLayout({ children }: Props) {
-  return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
-      <div className="flex w-full max-w-sm flex-col gap-6">
-        <Link
-          href="/"
-          className="flex items-center gap-2 self-center font-medium"
-        >
-          <Image src="/jazz.svg" alt="Jazz Logo" width={24} height={24} />
-          Jazz BetterAuth Demo
-        </Link>
-        {children}
-      </div>
-    </div>
-  );
-}

examples/betterauth/src/app/auth/reset-password/page.tsx

@@ -1,10 +0,0 @@
-import { ResetPasswordForm } from "@/components/reset-password-form";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Reset password | Jazz Example: Better Auth",
-};
-
-export default function ResetPasswordPage() {
-  return <ResetPasswordForm />;
-}

examples/betterauth/src/app/auth/sign-in/page.tsx

@@ -1,11 +0,0 @@
-import { SigninForm } from "@/components/signin-form";
-import type { Metadata } from "next";
-import { ssoProviders } from "../sso-providers";
-
-export const metadata: Metadata = {
-  title: "Sign in | Jazz Example: Better Auth",
-};
-
-export default function LoginPage() {
-  return <SigninForm providers={ssoProviders} />;
-}

examples/betterauth/src/app/auth/sign-up/page.tsx

@@ -1,11 +0,0 @@
-import { SignupForm } from "@/components/signup-form";
-import type { Metadata } from "next";
-import { ssoProviders } from "../sso-providers";
-
-export const metadata: Metadata = {
-  title: "Sign up | Jazz Example: Better Auth",
-};
-
-export default function LoginPage() {
-  return <SignupForm providers={ssoProviders} />;
-}

examples/betterauth/src/app/auth/sso-providers.ts

@@ -1,4 +0,0 @@
-import type { SSOProviderType } from "jazz-react-auth-betterauth";
-
-// Fill in the providers you want to use
-export const ssoProviders: SSOProviderType[] = ["github"];

examples/betterauth/src/app/delete-account/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { useAccount } from "jazz-react";
+import { redirect } from "next/navigation";
+
+export default function Page() {
+  const { logOut } = useAccount({ resolve: { profile: true } });
+  logOut();
+  redirect("/");
+}

examples/betterauth/src/app/forgot/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { ForgotForm } from "jazz-react-auth-betterauth";
+
+export default function ForgotPage() {
+  return <ForgotForm.default />;
+}

examples/betterauth/src/app/globals.css

@@ -1,123 +1,30 @@
 @import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
+@import "tailwindcss/utilities";
+@import "@garden-co/design-system/src/app/globals.css";
+@source "../../node_modules/@garden-co/design-system/src";
+@source "../../node_modules/jazz-react-auth-betterauth/dist";
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  --background: #ffffff;
+  --foreground: #171717;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
 }
 
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
   }
 }
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

examples/betterauth/src/app/layout.tsx

@@ -1,7 +1,17 @@
-import { JazzAndAuth } from "@/components/JazzAndAuth";
-import { Toaster } from "@/components/ui/sonner";
 import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { JazzAndAuth } from "@/components/JazzAndAuth";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
 
 export const metadata: Metadata = {
   title: "Jazz Example: Better Auth",
@@ -10,16 +20,15 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) {
   return (
     <html lang="en">
-      <body className="antialiased">
-        <JazzAndAuth>
-          {children}
-          <Toaster richColors />
-        </JazzAndAuth>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <JazzAndAuth>{children}</JazzAndAuth>
       </body>
     </html>
   );

examples/betterauth/src/app/magic-link/logIn/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+import { MagicLinkSignIn } from "jazz-react-auth-betterauth";
+
+export default MagicLinkSignIn.default;

examples/betterauth/src/app/magic-link/signIn/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+import { MagicLinkSignUp } from "jazz-react-auth-betterauth";
+
+export default MagicLinkSignUp.default;

examples/betterauth/src/app/mockEmail/email-verification/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { Verify } from "@/components/emails";
+
+export default function Page() {
+  const searchParams = new URLSearchParams(window.location.search);
+  const name = searchParams.get("name") ?? undefined;
+  const url = searchParams.get("url") ?? undefined;
+  const otp = searchParams.get("otp") ?? undefined;
+  return <Verify name={name} url={url} otp={otp}></Verify>;
+}

examples/betterauth/src/app/mockEmail/forgot-password/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { Reset } from "@/components/emails";
+
+export default function Page() {
+  const searchParams = new URLSearchParams(window.location.search);
+  const name = searchParams.get("name") ?? undefined;
+  const url = searchParams.get("url") ?? undefined;
+  const otp = searchParams.get("otp") ?? undefined;
+  return <Reset name={name} url={url} otp={otp}></Reset>;
+}

examples/betterauth/src/app/mockEmail/sign-in/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { Login } from "@/components/emails";
+
+export default function Page() {
+  const searchParams = new URLSearchParams(window.location.search);
+  const name = searchParams.get("name") ?? undefined;
+  const url = searchParams.get("url") ?? undefined;
+  const otp = searchParams.get("otp") ?? undefined;
+  return <Login name={name} url={url} otp={otp}></Login>;
+}

examples/betterauth/src/app/mockEmail/welcome/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { Welcome } from "@/components/emails";
+
+export default function Page() {
+  return <Welcome></Welcome>;
+}

examples/betterauth/src/app/page.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { Button } from "@/components/Button";
+import { useAccount, useIsAuthenticated } from "jazz-react";
+import { useAuth } from "jazz-react-auth-betterauth";
+import Image from "next/image";
+import { useCallback } from "react";
+
+export default function Home() {
+  const { auth, user, account } = useAuth();
+  const { me, logOut } = useAccount({ resolve: { profile: {} } });
+  const isAuthenticated = useIsAuthenticated();
+  const signOut = useCallback(() => {
+    auth.authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          logOut();
+        },
+      },
+    });
+  }, [logOut, auth]);
+  console.log("me", me);
+  console.log("user", user);
+  console.log("account", account);
+  console.log("auth.state", auth.state);
+  console.log("isAuthenticated", isAuthenticated);
+
+  return (
+    <>
+      <header className="absolute p-4 top-0 left-0 w-full z-10 flex items-center justify-between gap-4">
+        <div className="float-start flex gap-4">
+          {me && user && isAuthenticated && (
+            <>
+              <Button onClick={signOut}>Sign out</Button>
+              <Button href="/settings">Settings</Button>
+            </>
+          )}
+        </div>
+        <div className="float-end flex gap-4">
+          {!user && !isAuthenticated && (
+            <>
+              <Button href="/sign-in" variant="secondary">
+                Sign in
+              </Button>
+              <Button href="/sign-up">Sign up</Button>
+            </>
+          )}
+        </div>
+      </header>
+      <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+        <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+          <Image
+            src="/jazz-logo.svg"
+            alt="Jazz logo"
+            width={180}
+            height={38}
+            priority
+          />
+          <p className="text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+            {me && user && isAuthenticated && (
+              <>
+                {"Signed in as "}
+                <span className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
+                  {me.profile.name}
+                </span>
+                .
+              </>
+            )}
+            {!user && !isAuthenticated && <>Not signed in.</>}
+            {!user && isAuthenticated && (
+              <>Not connected to the authentication server.</>
+            )}
+            {user && !isAuthenticated && (
+              <>Authenticated, but not logged in. Try refreshing.</>
+            )}
+          </p>
+
+          <div className="flex gap-4 items-center flex-col sm:flex-row">
+            <a
+              className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
+              href="https://jazz.tools/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Image src="/jazz.svg" alt="Jazz logo" width={20} height={20} />
+              Start building
+            </a>
+            <a
+              className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center gap-2 hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto"
+              href="https://jazz.tools/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Image
+                aria-hidden
+                src="/file.svg"
+                alt="File icon"
+                width={16}
+                height={16}
+              />
+              Read the docs
+            </a>
+          </div>
+        </main>
+        <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
+          <a
+            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+            href="https://jazz.tools/api-reference"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              aria-hidden
+              src="/file.svg"
+              alt="File icon"
+              width={16}
+              height={16}
+            />
+            API reference
+          </a>
+          <a
+            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+            href="https://jazz.tools/examples"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              aria-hidden
+              src="/window.svg"
+              alt="Window icon"
+              width={16}
+              height={16}
+            />
+            Examples
+          </a>
+          <a
+            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+            href="https://jazz.tools/status"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              aria-hidden
+              src="/globe.svg"
+              alt="Globe icon"
+              width={16}
+              height={16}
+            />
+            Status
+          </a>
+          <a
+            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+            href="https://jazz.tools/showcase"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              aria-hidden
+              src="/wrench.svg"
+              alt="Wrench icon"
+              width={16}
+              height={16}
+            />
+            Built with Jazz
+          </a>
+        </footer>
+      </div>
+    </>
+  );
+}

examples/betterauth/src/app/pages/api/auth/[...all].ts

@@ -0,0 +1,7 @@
+import { auth } from "@/lib/auth";
+import { toNodeHandler } from "better-auth/node";
+
+// Disallow body parsing, we will parse it manually
+export const config = { api: { bodyParser: false } };
+
+export default toNodeHandler(auth.handler);

examples/betterauth/src/app/reset/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { ResetForm } from "jazz-react-auth-betterauth";
+
+export default function ResetPage() {
+  return <ResetForm.default />;
+}

examples/betterauth/src/app/settings/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SettingsForm } from "jazz-react-auth-betterauth";
+
+export default function SettingsPage() {
+  return <SettingsForm.default providers={["github"]} />;
+}

examples/betterauth/src/app/sign-in/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SignInForm } from "jazz-react-auth-betterauth";
+
+export default function SignInPage() {
+  return <SignInForm.default providers={["github"]} />;
+}

examples/betterauth/src/app/sign-up/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SignUpForm } from "jazz-react-auth-betterauth";
+
+export default function SignUpPage() {
+  return <SignUpForm.default providers={["github"]} />;
+}

examples/betterauth/src/app/social/logIn/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { useAuth } from "jazz-react-auth-betterauth";
+import { redirect } from "next/navigation";
+
+export default function Page() {
+  const { auth, user, account } = useAuth();
+  auth.logIn().then(redirect("/"));
+  return null;
+}

examples/betterauth/src/app/social/signIn/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { useAuth } from "jazz-react-auth-betterauth";
+import { redirect } from "next/navigation";
+
+export default function Page() {
+  const { auth, user, account } = useAuth();
+  auth.signIn().then(redirect("/"));
+  return null;
+}

examples/betterauth/src/components/Button.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { clsx } from "clsx";
+import Image from "next/image";
+import Link from "next/link";
+import { forwardRef } from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "danger";
+  children?: React.ReactNode;
+  className?: string;
+  src?: Parameters<typeof Image>[0]["src"];
+  alt?: Parameters<typeof Image>[0]["alt"];
+  href?: string;
+  newTab?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      children,
+      variant = "primary",
+      src,
+      alt,
+      href,
+      newTab = false,
+      ...buttonProps
+    },
+    ref,
+  ) => {
+    const primary =
+      "rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto";
+    const secondary =
+      "rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center gap-2 hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto";
+    const danger =
+      "rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center bg-red-400 dark:bg-red-600 gap-2 hover:bg-red-300 dark:hover:bg-red-700 hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto";
+    const classes = clsx(
+      variant === "primary"
+        ? primary
+        : variant === "secondary"
+          ? secondary
+          : danger,
+      className,
+    );
+    const [width, height] = [
+      variant === "primary" ? 20 : 16,
+      variant === "primary" ? 20 : 16,
+    ];
+    if (href) {
+      return (
+        <Link
+          href={href}
+          target={newTab ? "_blank" : undefined}
+          className={classes}
+          rel="noopener noreferrer"
+        >
+          {src && alt && (
+            <Image src={src} alt={alt} width={width} height={height} />
+          )}
+          {children}
+        </Link>
+      );
+    } else {
+      return (
+        <button
+          ref={ref}
+          {...buttonProps}
+          className={classes}
+          rel="noopener noreferrer"
+        >
+          {src && alt && (
+            <Image src={src} alt={alt} width={width} height={height} />
+          )}
+          {children}
+        </button>
+      );
+    }
+  },
+);

examples/betterauth/src/components/JazzAndAuth.tsx

@@ -1,33 +1,45 @@
 "use client";
 
+import { emailOTPClient, magicLinkClient } from "better-auth/client/plugins";
+import { JazzProvider } from "jazz-react";
 import { AuthProvider } from "jazz-react-auth-betterauth";
-import { JazzReactProvider } from "jazz-tools/react";
+import * as NextImage from "next/image";
+import * as NextLink from "next/link";
+import { useRouter } from "next/navigation";
 import { type ReactNode, lazy } from "react";
 
 const JazzDevTools =
   process.env.NODE_ENV === "production"
     ? () => null
     : lazy(() =>
-        import("jazz-tools/inspector").then((res) => ({
+        import("jazz-inspector").then((res) => ({
           default: res.JazzInspector,
         })),
       );
 
 export function JazzAndAuth({ children }: { children: ReactNode }) {
+  const router = useRouter();
   return (
-    <JazzReactProvider
+    <JazzProvider
       sync={{
         peer: "wss://cloud.jazz.tools/?key=betterauth-example@garden.co",
       }}
     >
-      <AuthProvider
-        options={{
-          baseURL: process.env.NEXT_PUBLIC_AUTH_BASE_URL,
-        }}
-      >
-        {children}
-      </AuthProvider>
-      <JazzDevTools />
-    </JazzReactProvider>
+      <>
+        <AuthProvider
+          Link={NextLink.default}
+          Image={NextImage.default}
+          navigate={router.push}
+          replace={router.replace}
+          options={{
+            baseURL: process.env.NEXT_PUBLIC_AUTH_BASE_URL,
+            plugins: [magicLinkClient(), emailOTPClient()],
+          }}
+        >
+          {children}
+        </AuthProvider>
+        <JazzDevTools />
+      </>
+    </JazzProvider>
   );
 }

examples/betterauth/src/components/SSOButton.tsx

@@ -1,137 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  SiApple,
-  SiDiscord,
-  SiDropbox,
-  SiFacebook,
-  SiGithub,
-  SiGitlab,
-  SiGoogle,
-  SiKick,
-  SiReddit,
-  SiRoblox,
-  SiSpotify,
-  SiTiktok,
-  SiTwitch,
-  SiVk,
-  SiX,
-  SiZoom,
-} from "@icons-pack/react-simple-icons";
-import { type SSOProviderType, useAuth } from "jazz-react-auth-betterauth";
-import { useRouter } from "next/navigation";
-import type { ReactNode } from "react";
-import { toast } from "sonner";
-
-interface SocialProvider {
-  name: string;
-  icon?: ReactNode;
-}
-
-const socialProviderMap: Record<SSOProviderType, SocialProvider> = {
-  github: {
-    name: "GitHub",
-    icon: <SiGithub />,
-  },
-  google: {
-    name: "Google",
-    icon: <SiGoogle />,
-  },
-  apple: {
-    name: "Apple",
-    icon: <SiApple />,
-  },
-  discord: {
-    name: "Discord",
-    icon: <SiDiscord />,
-  },
-  facebook: {
-    name: "Facebook",
-    icon: <SiFacebook />,
-  },
-  microsoft: {
-    name: "Microsoft",
-  },
-  twitter: {
-    name: "X",
-    icon: <SiX />,
-  },
-  dropbox: {
-    name: "Dropbox",
-    icon: <SiDropbox />,
-  },
-  linkedin: {
-    name: "LinkedIn",
-  },
-  gitlab: {
-    name: "GitLab",
-    icon: <SiGitlab />,
-  },
-  kick: {
-    name: "Kick",
-    icon: <SiKick />,
-  },
-  tiktok: {
-    name: "TikTok",
-    icon: <SiTiktok />,
-  },
-  twitch: {
-    name: "Twitch",
-    icon: <SiTwitch />,
-  },
-  vk: {
-    name: "VK",
-    icon: <SiVk />,
-  },
-  zoom: {
-    name: "Zoom",
-    icon: <SiZoom />,
-  },
-  roblox: {
-    name: "Roblox",
-    icon: <SiRoblox />,
-  },
-  reddit: {
-    name: "Reddit",
-    icon: <SiReddit />,
-  },
-  spotify: {
-    name: "Spotify",
-    icon: <SiSpotify />,
-  },
-};
-
-interface Props {
-  provider: SSOProviderType;
-}
-
-export function SSOButton({ provider }: Props) {
-  const auth = useAuth();
-  const router = useRouter();
-
-  return (
-    <Button
-      type="button"
-      variant="outline"
-      onClick={() => {
-        auth.authClient.signIn.social(
-          {
-            provider,
-          },
-          {
-            onSuccess: () => {
-              router.push("/");
-            },
-            onError: (error) => {
-              toast.error("Error", {
-                description: error.error.message,
-              });
-            },
-          },
-        );
-      }}
-    >
-      {socialProviderMap[provider].icon}
-      Continue with {socialProviderMap[provider].name}
-    </Button>
-  );
-}

examples/betterauth/src/components/emails/Common.ts

@@ -0,0 +1,68 @@
+import { COLORS } from "@garden-co/design-system/colors/colors";
+
+export const appName = "Jazz Example App";
+
+export const main = {
+  backgroundColor: "#f6f9fc",
+  padding: "10px 0",
+};
+
+export const container = {
+  backgroundColor: "#ffffff",
+  border: "1px solid #f0f0f0",
+  padding: "45px",
+};
+
+export const text = {
+  fontSize: "16px",
+  fontFamily:
+    "'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif",
+  fontWeight: "300",
+  color: "#404040",
+  lineHeight: "26px",
+};
+
+export const h1 = {
+  ...text,
+  fontSize: "24px",
+  fontWeight: "bold",
+};
+
+export const button = {
+  backgroundColor: COLORS.BLUE,
+  borderRadius: "4px",
+  color: "#fff",
+  fontFamily: "'Open Sans', 'Helvetica Neue', Arial",
+  fontSize: "15px",
+  textDecoration: "none",
+  textAlign: "center" as const,
+  display: "block",
+  width: "210px",
+  padding: "14px 7px",
+};
+
+export const anchor = {
+  textDecoration: "underline",
+};
+
+export const codeContainer = {
+  background: "rgba(0,0,0,.05)",
+  borderRadius: "4px",
+  margin: "16px auto 14px",
+  verticalAlign: "middle",
+  width: "280px",
+};
+
+export const code = {
+  color: "#000",
+  fontFamily: "HelveticaNeue-Bold",
+  fontSize: "32px",
+  fontWeight: 700,
+  letterSpacing: "6px",
+  lineHeight: "40px",
+  paddingBottom: "8px",
+  paddingTop: "8px",
+  margin: "0 auto",
+  display: "block",
+  textAlign: "center" as const,
+};

examples/betterauth/src/components/emails/Login.tsx

@@ -0,0 +1,91 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+import Image from "next/image";
+import * as React from "react";
+import {
+  appName,
+  button,
+  code,
+  codeContainer,
+  container,
+  h1,
+  main,
+  text,
+} from "./Common";
+
+export const Login = ({
+  name = undefined,
+  url = undefined,
+  otp = undefined,
+}: {
+  name?: string;
+  url?: string;
+  otp?: string;
+}) => {
+  return (
+    <Html>
+      <Head>
+        <title>
+          {url && !otp
+            ? `Your login link for ${appName}`
+            : `Your login code for ${appName}`}
+        </title>
+      </Head>
+      <Preview>
+        {url && !otp
+          ? `Your login link for ${appName}`
+          : `Your login code for ${appName}`}
+      </Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Image
+            src="/jazz.svg"
+            alt="Jazz logo"
+            width={100}
+            height={100}
+            priority
+          />
+          <Heading style={h1}>
+            {url && !otp
+              ? `Your login link for ${appName}`
+              : `Your login code for ${appName}`}
+          </Heading>
+          <Section>
+            <Text style={text}>Hello{name ? ` ${name}` : ""},</Text>
+            <Text style={text}>
+              Someone recently attempted to login to {appName} using your email
+              address.
+              {url && !otp ? " If this was you, you can login here:" : ""}
+            </Text>
+            {url && !otp && (
+              <Button style={button} href={url}>
+                Login
+              </Button>
+            )}
+            {otp && !url && (
+              <Section style={codeContainer}>
+                <Text style={code}>{otp}</Text>
+              </Section>
+            )}
+            <Text style={text}>
+              To keep your account secure, please do not forward this email to
+              anyone. If you did not try to login, just ignore and delete this
+              message.
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+export default Login;

examples/betterauth/src/components/emails/Reset.tsx

@@ -0,0 +1,84 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+import Image from "next/image";
+import * as React from "react";
+import {
+  appName,
+  button,
+  code,
+  codeContainer,
+  container,
+  h1,
+  main,
+  text,
+} from "./Common";
+
+export const Reset = ({
+  name = undefined,
+  url = undefined,
+  otp = undefined,
+}: {
+  name?: string;
+  url?: string;
+  otp?: string;
+}) => {
+  return (
+    <Html>
+      <Head>
+        <title>{`Reset your ${appName} password`}</title>
+      </Head>
+      <Preview>Reset your {appName} password</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Image
+            src="/jazz.svg"
+            alt="Jazz logo"
+            width={100}
+            height={100}
+            priority
+          />
+          <Heading style={h1}>Reset your {appName} password</Heading>
+          <Section>
+            <Text style={text}>Hello{name ? ` ${name}` : ""},</Text>
+            <Text style={text}>
+              Someone recently requested a password change for your {appName}{" "}
+              account.
+              {url && !otp
+                ? " If this was you, you can set a new password here:"
+                : ""}
+            </Text>
+            {url && !otp && (
+              <Button style={button} href={url}>
+                Reset password
+              </Button>
+            )}
+            {otp && !url && (
+              <Section style={codeContainer}>
+                <Text style={code}>{otp}</Text>
+              </Section>
+            )}
+            <Text style={text}>
+              If you do not want to change your password or did not request
+              this, just ignore and delete this message.
+            </Text>
+            <Text style={text}>
+              To keep your account secure, please do not forward this email to
+              anyone.
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+export default Reset;

examples/betterauth/src/components/emails/Verify.tsx

@@ -0,0 +1,80 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+import Image from "next/image";
+import * as React from "react";
+import {
+  appName,
+  button,
+  code,
+  codeContainer,
+  container,
+  h1,
+  main,
+  text,
+} from "./Common";
+
+export const Verify = ({
+  name = undefined,
+  url = undefined,
+  otp = undefined,
+}: {
+  name?: string;
+  url?: string;
+  otp?: string;
+}) => {
+  return (
+    <Html>
+      <Head>
+        <title>{`Verify your ${appName} account`}</title>
+      </Head>
+      <Preview>Verify your {appName} account</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Image
+            src="/jazz.svg"
+            alt="Jazz logo"
+            width={100}
+            height={100}
+            priority
+          />
+          <Heading style={h1}>Verify your {appName} account</Heading>
+          <Section>
+            <Text style={text}>Hello{name ? ` ${name}` : ""},</Text>
+            <Text style={text}>
+              Someone recently signed up for a {appName} account using your
+              email address.
+              {url && !otp
+                ? " If this was you, you can verify your account here:"
+                : ""}
+            </Text>
+            {url && !otp && (
+              <Button style={button} href={url}>
+                Verify account
+              </Button>
+            )}
+            {otp && !url && (
+              <Section style={codeContainer}>
+                <Text style={code}>{otp}</Text>
+              </Section>
+            )}
+            <Text style={text}>
+              To keep your account secure, please do not forward this email to
+              anyone.
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+export default Verify;

examples/betterauth/src/components/emails/Welcome.tsx

@@ -0,0 +1,53 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Row,
+  Section,
+  Text,
+} from "@react-email/components";
+import Image from "next/image";
+import * as React from "react";
+import { appName, button, container, h1, main, text } from "./Common";
+
+export const Welcome = () => {
+  return (
+    <Html>
+      <Head>
+        <title>{`Welcome to ${appName}`}</title>
+      </Head>
+      <Preview>Welcome to {appName}</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Image
+            src="/jazz.svg"
+            alt="Jazz logo"
+            width={100}
+            height={100}
+            priority
+          />
+          <Heading style={h1}>Welcome to {appName}</Heading>
+          <Section>
+            <Row>
+              <Text style={text}>
+                Congratulations! You have successfully registered for {appName}.
+                We are excited to have you on board!
+              </Text>
+            </Row>
+          </Section>
+          <Section>
+            <Button style={button} href="/">
+              Go home
+            </Button>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+export default Welcome;

examples/betterauth/src/components/emails/index.ts

@@ -0,0 +1,5 @@
+export * from "./Common";
+export * from "./Welcome";
+export * from "./Verify";
+export * from "./Reset";
+export * from "./Login";

examples/betterauth/src/components/forgot-password-form.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { useAuth } from "jazz-react-auth-betterauth";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { toast } from "sonner";
-
-export function ForgotPasswordForm() {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const auth = useAuth();
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    auth.authClient.forgetPassword(
-      { email, redirectTo: `${window.location.origin}/auth/reset-password` },
-      {
-        onSuccess: () => {
-          toast.success("Email sent");
-        },
-        onError: (error) => {
-          toast.error("Error", {
-            description: error.error.message,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-6">
-      <Card>
-        <CardHeader className="text-center">
-          <CardTitle className="text-xl">Recover password</CardTitle>
-          <CardDescription>
-            Enter your email to receive a link to reset your password
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit}>
-            <div className="grid gap-6">
-              <div className="grid gap-6">
-                <div className="grid gap-3">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder="you@example.com"
-                    required
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                  />
-                </div>
-
-                <Button type="submit" className="w-full">
-                  Recover password
-                </Button>
-              </div>
-              <div className="text-center text-sm">
-                Back to{" "}
-                <Link
-                  href="/auth/sign-in"
-                  className="underline underline-offset-4"
-                >
-                  Sign in
-                </Link>
-              </div>
-            </div>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

examples/betterauth/src/components/navbar.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { useAuth } from "jazz-react-auth-betterauth";
-import { Account } from "jazz-tools";
-import { useAccount, useIsAuthenticated } from "jazz-tools/react";
-import Image from "next/image";
-import Link from "next/link";
-import { useCallback } from "react";
-
-export function Navbar() {
-  const { authClient } = useAuth();
-  const { logOut } = useAccount(Account, { resolve: { profile: {} } });
-
-  const isAuthenticated = useIsAuthenticated();
-
-  const signOut = useCallback(() => {
-    authClient.signOut().catch(console.error).finally(logOut);
-  }, [logOut, authClient]);
-
-  return (
-    <header className="absolute p-4 top-0 left-0 w-full z-10 flex justify-between">
-      <nav className="flex gap-4">
-        <Link href="/">
-          <Image
-            src="/jazz-logo.svg"
-            alt="Jazz logo"
-            width={96}
-            height={96}
-            priority
-          />
-        </Link>
-        {isAuthenticated && (
-          <Button asChild variant="link">
-            <Link href="/settings">Settings</Link>
-          </Button>
-        )}
-      </nav>
-      <nav className="flex gap-4">
-        {isAuthenticated ? (
-          <Button onClick={signOut}>Sign out</Button>
-        ) : (
-          <>
-            <Button asChild variant="secondary">
-              <Link href="/auth/sign-in">Sign in</Link>
-            </Button>
-            <Button asChild>
-              <Link href="/auth/sign-up">Sign up</Link>
-            </Button>
-          </>
-        )}
-      </nav>
-    </header>
-  );
-}

examples/betterauth/src/components/reset-password-form.tsx

@@ -1,108 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { useAuth } from "jazz-react-auth-betterauth";
-import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
-import { toast } from "sonner";
-
-export function ResetPasswordForm() {
-  const router = useRouter();
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const auth = useAuth();
-  const searchParams = useSearchParams();
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const token = searchParams.get("token");
-
-    if (password !== confirmPassword) {
-      toast.error("Passwords do not match");
-      return;
-    }
-
-    if (!token) {
-      toast.error("Invalid token");
-      return;
-    }
-
-    auth.authClient.resetPassword(
-      { newPassword: password, token },
-      {
-        onSuccess: () => {
-          toast.success("Password successfully updated");
-          router.push("/auth/sign-in");
-        },
-        onError: (error) => {
-          toast.error("Error", {
-            description: error.error.message,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-6">
-      <Card>
-        <CardHeader className="text-center">
-          <CardTitle className="text-xl">Reset password</CardTitle>
-          <CardDescription>Enter your new password</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit}>
-            <div className="grid gap-6">
-              <div className="grid gap-6">
-                <div className="grid gap-3">
-                  <Label htmlFor="password">New password</Label>
-                  <Input
-                    id="password"
-                    type="password"
-                    required
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                  />
-                </div>
-
-                <div className="grid gap-3">
-                  <Label htmlFor="confirmPassword">Confirm password</Label>
-                  <Input
-                    id="confirmPassword"
-                    type="password"
-                    required
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                  />
-                </div>
-
-                <Button type="submit" className="w-full">
-                  Set password
-                </Button>
-              </div>
-              <div className="text-center text-sm">
-                Back to{" "}
-                <Link
-                  href="/auth/sign-in"
-                  className="underline underline-offset-4"
-                >
-                  Sign in
-                </Link>
-              </div>
-            </div>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

examples/betterauth/src/components/signin-form.tsx

@@ -1,124 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { type SSOProviderType, useAuth } from "jazz-react-auth-betterauth";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { toast } from "sonner";
-import { SSOButton } from "./SSOButton";
-
-interface Props {
-  providers: SSOProviderType[];
-}
-
-export function SigninForm({ providers }: Props) {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-
-  const auth = useAuth();
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    await auth.authClient.signIn.email(
-      { email, password },
-      {
-        onSuccess: async () => {
-          await auth.logIn();
-          router.push("/");
-        },
-        onError: (error) => {
-          toast.error("Error", {
-            description: error.error.message,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-6">
-      <Card>
-        <CardHeader className="text-center">
-          <CardTitle className="text-xl">Welcome back</CardTitle>
-          <CardDescription>
-            Sign in with one of the following providers
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit}>
-            <div className="grid gap-6">
-              {providers.length > 0 && (
-                <>
-                  <div className="flex flex-col gap-4">
-                    {providers?.map((provider) => (
-                      <SSOButton key={provider} provider={provider} />
-                    ))}
-                  </div>
-                  <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
-                    <span className="bg-card text-muted-foreground relative z-10 px-2">
-                      Or continue with
-                    </span>
-                  </div>
-                </>
-              )}
-              <div className="grid gap-6">
-                <div className="grid gap-3">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder="you@example.com"
-                    required
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                  />
-                </div>
-                <div className="grid gap-3">
-                  <div className="flex items-center justify-between">
-                    <Label htmlFor="password">Password</Label>
-                    <Link
-                      href="/auth/forgot-password"
-                      className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
-                    >
-                      Forgot your password?
-                    </Link>
-                  </div>
-                  <Input
-                    id="password"
-                    type="password"
-                    required
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                  />
-                </div>
-                <Button type="submit" className="w-full">
-                  Sign in
-                </Button>
-              </div>
-              <div className="text-center text-sm">
-                Don&apos;t have an account?{" "}
-                <Link
-                  href="/auth/sign-up"
-                  className="underline underline-offset-4"
-                >
-                  Sign up
-                </Link>
-              </div>
-            </div>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

examples/betterauth/src/components/signup-form.tsx

@@ -1,151 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { type SSOProviderType, useAuth } from "jazz-react-auth-betterauth";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { toast } from "sonner";
-import { SSOButton } from "./SSOButton";
-
-interface Props {
-  providers: SSOProviderType[];
-}
-
-export function SignupForm({ providers }: Props) {
-  const router = useRouter();
-  const auth = useAuth();
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    if (password !== confirmPassword) {
-      toast.error("Error", {
-        description: "Passwords do not match",
-      });
-      return;
-    }
-
-    await auth.authClient.signUp.email(
-      {
-        email,
-        password,
-        name,
-      },
-      {
-        onSuccess: async () => {
-          await auth.signIn();
-          router.push("/");
-        },
-        onError: (error) => {
-          toast.error("Sign up error", {
-            description: error.error.message,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-6">
-      <Card>
-        <CardHeader className="text-center">
-          <CardTitle className="text-xl">Welcome</CardTitle>
-          <CardDescription>
-            Sign up with one of the following providers
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit}>
-            <div className="grid gap-6">
-              {providers.length > 0 && (
-                <>
-                  <div className="flex flex-col gap-4">
-                    {providers?.map((provider) => (
-                      <SSOButton key={provider} provider={provider} />
-                    ))}
-                  </div>
-                  <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
-                    <span className="bg-card text-muted-foreground relative z-10 px-2">
-                      Or continue with
-                    </span>
-                  </div>
-                </>
-              )}
-              <div className="grid gap-6">
-                <div className="grid gap-3">
-                  <Label htmlFor="name">Name</Label>
-                  <Input
-                    id="name"
-                    type="text"
-                    placeholder="John Doe"
-                    required
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                  />
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder="you@example.com"
-                    required
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                  />
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="password">Password</Label>
-                  <Input
-                    id="password"
-                    type="password"
-                    placeholder="********"
-                    required
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                  />
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="confirmPassword">Confirm password</Label>
-                  <Input
-                    id="confirmPassword"
-                    type="password"
-                    required
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                  />
-                </div>
-                <Button type="submit" className="w-full">
-                  Sign up
-                </Button>
-              </div>
-              <div className="text-center text-sm">
-                Already have an account?{" "}
-                <Link
-                  href="/auth/sign-in"
-                  className="underline underline-offset-4"
-                >
-                  Sign in
-                </Link>
-              </div>
-            </div>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

examples/betterauth/src/components/ui/button.tsx

@@ -1,59 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };

examples/betterauth/src/components/ui/card.tsx

@@ -1,92 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  );
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-};

examples/betterauth/src/components/ui/sonner.tsx

@@ -1,22 +0,0 @@
-"use client";
-
-import { Toaster as Sonner, type ToasterProps } from "sonner";
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  return (
-    <Sonner
-      theme="light"
-      className="toaster group"
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  );
-};
-
-export { Toaster };

examples/betterauth/src/components/user-settings.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { useAuth } from "jazz-react-auth-betterauth";
-import { useAccount, useIsAuthenticated } from "jazz-tools/react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { toast } from "sonner";
-
-export function UserSettings() {
-  const router = useRouter();
-  const { authClient } = useAuth();
-  const { logOut } = useAccount();
-  const isAuthenticated = useIsAuthenticated();
-
-  if (!isAuthenticated) {
-    return (
-      <div className="flex flex-col gap-8">
-        <h1 className="text-center text-2xl">Forbidden</h1>
-        <p className="text-center text-sm text-muted-foreground">
-          Please{" "}
-          <Link href="/auth/sign-in" className="underline text-primary">
-            sign in
-          </Link>{" "}
-          to access this page.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div className="flex flex-col gap-8">
-        <h1 className="text-4xl font-semibold">Settings</h1>
-
-        <Button
-          variant="destructive"
-          className="relative"
-          type="button"
-          onClick={async (e) => {
-            e.preventDefault();
-            authClient.deleteUser(undefined, {
-              onSuccess: () => {
-                logOut();
-                router.push("/");
-              },
-              onError: (error) => {
-                toast.error("Error", {
-                  description: error.error.message,
-                });
-              },
-            });
-          }}
-        >
-          Delete account
-        </Button>
-      </div>
-    </>
-  );
-}

examples/betterauth/src/lib/auth-email.ts

@@ -0,0 +1,63 @@
+import type { betterAuth } from "better-auth";
+import type { emailOTP } from "better-auth/plugins";
+import type { magicLink } from "better-auth/plugins";
+
+export const sendEmailOtpCb: Parameters<
+  typeof emailOTP
+>[0]["sendVerificationOTP"] = async ({ email, otp, type }) => {
+  const searchParams = new URLSearchParams();
+  searchParams.set("email", email);
+  searchParams.set("otp", otp);
+
+  let emailLink = "";
+  if (type === "sign-in") {
+    // Send the OTP for sign-in
+    emailLink = `/mockEmail/sign-in?${searchParams.toString()}`;
+  } else if (type === "email-verification") {
+    // Send the OTP for email verification
+    emailLink = `/mockEmail/email-verification?${searchParams.toString()}`;
+  } else {
+    // Send the OTP for password reset
+    emailLink = `/mockEmail/forget-password?${searchParams.toString()}`;
+  }
+  console.log("Mock email sent: " + emailLink);
+};
+
+export const sendMagicLinkCb: Parameters<typeof magicLink>[0]["sendMagicLink"] =
+  async ({ email, url }) => {
+    const searchParams = new URLSearchParams();
+    searchParams.set("url", url);
+    const emailLink = `/mockEmail/sign-in?${searchParams.toString()}`;
+    console.log("Mock email sent: " + emailLink);
+  };
+
+export const sendWelcomeEmailCb: NonNullable<
+  NonNullable<
+    NonNullable<Parameters<typeof betterAuth>[0]["databaseHooks"]>["user"]
+  >["create"]
+>["after"] = async (user) => {
+  const searchParams = new URLSearchParams();
+  searchParams.set("name", user.name);
+  const emailLink = `/mockEmail/welcome?${searchParams.toString()}`;
+  console.log("Mock email sent: " + emailLink);
+};
+
+export const sendVerificationEmailCb: NonNullable<
+  Parameters<typeof betterAuth>[0]["emailVerification"]
+>["sendVerificationEmail"] = async ({ user, url }) => {
+  const searchParams = new URLSearchParams();
+  searchParams.set("name", user.name);
+  searchParams.set("url", url);
+  const emailLink = `/mockEmail/email-verification?${searchParams.toString()}`;
+  console.log("Mock email sent: " + emailLink);
+};
+
+export const sendResetPasswordCb: NonNullable<
+  Parameters<typeof betterAuth>[0]["emailAndPassword"]
+>["sendResetPassword"] = async ({ user, url }) => {
+  const searchParams = new URLSearchParams();
+  searchParams.set("name", user.name);
+  searchParams.set("url", url);
+  const emailLink = `/mockEmail/forgot-password?${searchParams.toString()}`;
+  console.log("Mock email sent: " + emailLink);
+};

examples/betterauth/src/lib/auth.ts

@@ -1,42 +1,64 @@
+import * as crypto from "node:crypto";
+import { appName } from "@/components/emails";
 import { betterAuth } from "better-auth";
 import { getMigrations } from "better-auth/db";
+import { emailOTP, haveIBeenPwned, magicLink } from "better-auth/plugins";
 import Database from "better-sqlite3";
 import { jazzPlugin } from "jazz-betterauth-server-plugin";
+import {
+  sendEmailOtpCb,
+  sendMagicLinkCb,
+  sendResetPasswordCb,
+  sendVerificationEmailCb,
+  sendWelcomeEmailCb,
+} from "./auth-email";
 import { socialProviders } from "./socialProviders";
 
 export const auth = await (async () => {
+  const generatedKeys = crypto.generateKeyPairSync("ed25519");
+
   // Configure Better Auth server
   const auth = betterAuth({
-    appName: "Jazz Example: Better Auth",
+    appName: appName,
+    secret: undefined as string | undefined,
     database: new Database("sqlite.db"),
     emailAndPassword: {
       enabled: true,
-      async sendResetPassword({ url }) {
-        // Here we can send an email to the user with the reset password link
-        console.log("****** RESET PASSWORD ******");
-        console.log("navigate to", url, "to reset your password");
-        console.log("******");
-      },
+      sendResetPassword: sendResetPasswordCb,
     },
     emailVerification: {
-      async sendVerificationEmail(data) {
-        console.error("Not implemented");
+      sendVerificationEmail: sendVerificationEmailCb,
+    },
+    socialProviders: socialProviders,
+    account: {
+      accountLinking: {
+        allowDifferentEmails: true,
+        allowUnlinkingAll: true,
       },
     },
-    socialProviders,
     user: {
       deleteUser: {
         enabled: true,
       },
     },
-    plugins: [jazzPlugin()],
+    plugins: [
+      haveIBeenPwned(),
+      jazzPlugin(
+        generatedKeys.publicKey.export({
+          type: "spki",
+          format: "pem",
+        }) as string,
+        process.env.BETTER_AUTH_SECRET,
+      ),
+      magicLink({
+        sendMagicLink: sendMagicLinkCb,
+      }),
+      emailOTP({ sendVerificationOTP: sendEmailOtpCb }),
+    ],
     databaseHooks: {
       user: {
         create: {
-          async after(user) {
-            // Here we can send a welcome email to the user
-            console.error("Not implemented");
-          },
+          after: sendWelcomeEmailCb,
         },
       },
     },
@@ -46,5 +68,27 @@ export const auth = await (async () => {
   const migrations = await getMigrations(auth.options);
   await migrations.runMigrations();
 
+  // Set database encryption secret
+  auth.options.secret = process.env.BETTER_AUTH_SECRET;
+  if (process.env.BETTER_AUTH_SECRET) {
+    const signedSecret = crypto
+      .sign(
+        undefined,
+        Buffer.from(process.env.BETTER_AUTH_SECRET),
+        generatedKeys.privateKey,
+      )
+      .toString("hex");
+    auth.api
+      .setSecret({
+        body: {
+          secret: process.env.BETTER_AUTH_SECRET,
+          signedSecret,
+        },
+      })
+      .then((response) => response)
+      .then((data) => console.log(`Set secret: ${data.status}`))
+      .catch((error) => console.error(error));
+  }
+
   return auth;
 })();

examples/betterauth/tests/authFlow.spec.ts

@@ -11,14 +11,14 @@ test("should sign up, sign in, and logout", async ({ page }) => {
   await page.goto("/");
   const homePage = new HomePage(page);
   await homePage.expectLoggedOut();
-  await homePage.signUpLink.click();
+  await homePage.signUpLinkButton.click();
   await homePage.signUpEmail(username, email, password);
   await homePage.expectLoggedIn(username);
 
   // Log out & sign in
   await homePage.logout();
   await homePage.expectLoggedOut();
-  await homePage.signInLink.click();
+  await homePage.signInLinkButton.click();
   await homePage.signInEmail(email, password);
   await homePage.expectLoggedIn(username);
 

examples/betterauth/tests/pages/HomePage.ts

@@ -4,11 +4,11 @@ export class HomePage {
   constructor(public page: Page) {}
 
   usernameInput = this.page.getByRole("textbox", {
-    name: "Name",
+    name: "Full name",
     exact: true,
   });
   emailInput = this.page.getByRole("textbox", {
-    name: "Email",
+    name: "Email address",
     exact: true,
   });
   passwordInput = this.page.getByRole("textbox", {
@@ -27,11 +27,11 @@ export class HomePage {
     name: "Sign in",
     exact: true,
   });
-  signUpLink = this.page.getByRole("link", {
+  signUpLinkButton = this.page.getByRole("link", {
     name: "Sign up",
     exact: true,
   });
-  signInLink = this.page.getByRole("link", {
+  signInLinkButton = this.page.getByRole("link", {
     name: "Sign in",
     exact: true,
   });
@@ -60,17 +60,17 @@ export class HomePage {
 
   async expectLoggedIn(name?: string) {
     await expect(this.logoutButton).toBeVisible();
-    await expect(this.signInLink).not.toBeVisible();
-    await expect(this.signUpLink).not.toBeVisible();
+    await expect(this.signInLinkButton).not.toBeVisible();
+    await expect(this.signUpLinkButton).not.toBeVisible();
     if (name) {
-      await expect(this.page.getByText(`Signed in as ${name}`)).toBeVisible();
+      await expect(this.page.getByText(`Signed in as ${name}.`)).toBeVisible();
     }
   }
 
   async expectLoggedOut() {
     await expect(this.logoutButton).not.toBeVisible();
-    await expect(this.signInLink).toBeVisible();
-    await expect(this.signUpLink).toBeVisible();
-    await expect(this.page.getByText(`Anonymous user`)).toBeVisible();
+    await expect(this.signInLinkButton).toBeVisible();
+    await expect(this.signUpLinkButton).toBeVisible();
+    await expect(this.page.getByText(`Not signed in.`)).toBeVisible();
   }
 }

examples/chat-rn-expo-clerk/.gitignore

@@ -0,0 +1,17 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+ios
+android

examples/chat-rn-expo-clerk/README.md

@@ -0,0 +1,24 @@
+# 🎷 Jazz + Expo + `expo-router` + Clerk Auth
+
+## 🚀 How to Run
+
+### 1. Inside the Workspace Root
+
+First, install dependencies and build the project:
+
+```bash
+pnpm i
+pnpm run build
+```
+
+### 2. Inside the `examples/chat-rn-expo-clerk` Directory
+
+Next, navigate to the specific example project and run the following commands:
+
+```bash
+pnpm expo prebuild
+pnpx pod-install
+pnpm expo run:ios
+```
+
+This will set up and launch the app on iOS. For Android, you can replace the last command with `pnpm expo run:android`.

examples/chat-rn-expo-clerk/app.json

@@ -0,0 +1,45 @@
+{
+  "expo": {
+    "name": "jazz-chat-rn-expo-clerk",
+    "scheme": "jazz-chat-rn-expo-clerk",
+    "slug": "jazz-chat-rn-expo-clerk",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.jazz.chatrnclerk"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.jazz.chatrnclerk"
+    },
+    "newArchEnabled": true,
+    "plugins": [
+      "expo-secure-store",
+      "expo-font",
+      "expo-router",
+      "expo-sqlite",
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "The app accesses your photos to let you share them with your friends."
+        }
+      ]
+    ],
+    "extra": {
+      "eas": {
+        "projectId": "ca3d46e5-a10a-47ec-9d77-3b841e1c62d4"
+      }
+    }
+  }
+}

examples/chat-rn-expo-clerk/app/(app)/_layout.tsx

@@ -0,0 +1,15 @@
+import { Redirect, Stack } from "expo-router";
+import { useIsAuthenticated } from "jazz-expo";
+import React from "react";
+
+export default function HomeLayout() {
+  const isAuthenticated = useIsAuthenticated();
+
+  if (isAuthenticated) {
+    return <Redirect href={"/chat"} />;
+  }
+
+  return (
+    <Stack screenOptions={{ headerShown: false, headerBackVisible: true }} />
+  );
+}

examples/chat-rn-expo-clerk/app/(app)/index.tsx

@@ -0,0 +1,33 @@
+import { SignedOut } from "@clerk/clerk-expo";
+import { Link } from "expo-router";
+import React from "react";
+import { Text, View } from "react-native";
+
+export default function HomePage() {
+  return (
+    <View className="flex-1 justify-center items-center bg-gray-100 p-6">
+      <SignedOut>
+        <View className="bg-white p-6 rounded-lg shadow-lg w-11/12 max-w-md">
+          <Text className="text-2xl font-bold text-center text-gray-900 mb-4">
+            Jazz 🤝 Clerk 🤝 Expo
+          </Text>
+          <Link href="/sign-in" className="mb-4">
+            <Text className="text-center text-blue-600 underline text-lg">
+              Sign In
+            </Text>
+          </Link>
+          <Link href="/sign-in-oauth" className="mb-4">
+            <Text className="text-center text-blue-600 underline text-lg">
+              Sign In OAuth
+            </Text>
+          </Link>
+          <Link href="/sign-up">
+            <Text className="text-center text-blue-600 underline text-lg">
+              Sign Up
+            </Text>
+          </Link>
+        </View>
+      </SignedOut>
+    </View>
+  );
+}

examples/chat-rn-expo-clerk/app/(auth)/_layout.tsx

@@ -0,0 +1,20 @@
+import { Redirect, Stack } from "expo-router";
+import { useIsAuthenticated } from "jazz-expo";
+
+export default function UnAuthenticatedLayout() {
+  const isAuthenticated = useIsAuthenticated();
+
+  if (isAuthenticated) {
+    return <Redirect href={"/chat"} />;
+  }
+
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: true,
+        headerBackVisible: true,
+        headerTitle: "",
+      }}
+    />
+  );
+}

examples/chat-rn-expo-clerk/app/(auth)/sign-in-oauth.tsx

@@ -0,0 +1,65 @@
+import { useOAuth } from "@clerk/clerk-expo";
+import * as Linking from "expo-linking";
+import { Link } from "expo-router";
+import * as WebBrowser from "expo-web-browser";
+import React from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+
+export const useWarmUpBrowser = () => {
+  React.useEffect(() => {
+    // Warm up the android browser to improve UX
+    // https://docs.expo.dev/guides/authentication/#improving-user-experience
+    void WebBrowser.warmUpAsync();
+    return () => {
+      void WebBrowser.coolDownAsync();
+    };
+  }, []);
+};
+
+WebBrowser.maybeCompleteAuthSession();
+
+const SignInWithOAuth = () => {
+  useWarmUpBrowser();
+
+  const { startOAuthFlow } = useOAuth({ strategy: "oauth_google" });
+
+  const onPress = React.useCallback(async () => {
+    try {
+      const { createdSessionId, signIn, signUp, setActive } =
+        await startOAuthFlow({
+          redirectUrl: Linking.createURL("/", {
+            scheme: "jazz-chat-rn-expo-clerk",
+          }),
+        });
+
+      if (createdSessionId) {
+        setActive!({ session: createdSessionId });
+      } else {
+        // Use signIn or signUp for next steps such as MFA
+      }
+    } catch (err) {
+      console.error("OAuth error", err);
+    }
+  }, []);
+
+  return (
+    <View className="flex-1 justify-center items-center bg-gray-50 p-6">
+      <View className="bg-white w-11/12 max-w-md p-8 rounded-lg shadow-lg items-center">
+        <TouchableOpacity
+          onPress={onPress}
+          className="w-full bg-red-500 py-3 rounded-lg flex items-center justify-center"
+        >
+          <Text className="text-white text-lg font-semibold">
+            Sign in with Google
+          </Text>
+        </TouchableOpacity>
+        <Link href="/" className="mt-4">
+          <Text className="text-blue-600 text-lg font-semibold underline mb-6">
+            Back to Home
+          </Text>
+        </Link>
+      </View>
+    </View>
+  );
+};
+export default SignInWithOAuth;

examples/chat-rn-expo-clerk/app/(auth)/sign-in.tsx

@@ -0,0 +1,79 @@
+import { useSignIn } from "@clerk/clerk-expo";
+import { Link } from "expo-router";
+import React from "react";
+import { Text, TextInput, TouchableOpacity, View } from "react-native";
+
+export default function SignInPage() {
+  const { signIn, setActive, isLoaded } = useSignIn();
+  const [emailAddress, setEmailAddress] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [errorMessage, setErrorMessage] = React.useState("");
+
+  const onSignInPress = React.useCallback(async () => {
+    if (!isLoaded) {
+      return;
+    }
+
+    setErrorMessage("");
+
+    try {
+      const signInAttempt = await signIn.create({
+        identifier: emailAddress,
+        password,
+      });
+
+      if (signInAttempt.status === "complete") {
+        await setActive({ session: signInAttempt.createdSessionId });
+      } else {
+        console.error(JSON.stringify(signInAttempt, null, 2));
+        setErrorMessage("Invalid credentials. Please try again.");
+      }
+    } catch (err: any) {
+      console.error(JSON.stringify(err, null, 2));
+      if (err.errors && err.errors[0]?.message) {
+        setErrorMessage(err.errors[0].message);
+      } else {
+        setErrorMessage("An unexpected error occurred. Please try again.");
+      }
+    }
+  }, [isLoaded, emailAddress, password]);
+
+  return (
+    <View className="flex-1 justify-center items-center bg-gray-50 p-6">
+      <View className="bg-white w-11/12 max-w-md p-8 rounded-lg shadow-md">
+        <Text className="text-3xl font-bold text-center text-gray-800 mb-6">
+          Sign In
+        </Text>
+        {errorMessage ? (
+          <Text className="text-red-500 text-center mb-4">{errorMessage}</Text>
+        ) : null}
+        <TextInput
+          autoCapitalize="none"
+          value={emailAddress}
+          placeholder="Email..."
+          onChangeText={(emailAddress) => setEmailAddress(emailAddress)}
+          className="w-full h-12 mb-4 px-4 bg-gray-100 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
+        />
+        <TextInput
+          value={password}
+          placeholder="Password..."
+          secureTextEntry={true}
+          onChangeText={(password) => setPassword(password)}
+          className="w-full h-12 mb-6 px-4 bg-gray-100 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
+        />
+        <TouchableOpacity
+          onPress={onSignInPress}
+          className="w-full h-12 bg-blue-600 rounded-lg flex items-center justify-center"
+        >
+          <Text className="text-white text-lg font-semibold">Sign In</Text>
+        </TouchableOpacity>
+        <View className="flex-row items-center justify-center mt-4">
+          <Text className="text-gray-600">Don't have an account?</Text>
+          <Link href="/sign-up">
+            <Text className="text-blue-500 ml-2 font-semibold">Sign up</Text>
+          </Link>
+        </View>
+      </View>
+    </View>
+  );
+}

examples/chat-rn-expo-clerk/app/(auth)/sign-up.tsx

@@ -0,0 +1,120 @@
+import { useSignUp } from "@clerk/clerk-expo";
+import { useNavigation } from "@react-navigation/native";
+import * as React from "react";
+import { Text, TextInput, TouchableOpacity, View } from "react-native";
+
+export default function SignUpPage() {
+  const { isLoaded, signUp, setActive } = useSignUp();
+
+  const [emailAddress, setEmailAddress] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [pendingVerification, setPendingVerification] = React.useState(false);
+  const [code, setCode] = React.useState("");
+  const [errorMessage, setErrorMessage] = React.useState("");
+  const navigation = useNavigation();
+
+  const onSignUpPress = async () => {
+    if (!isLoaded) return;
+
+    setErrorMessage("");
+
+    try {
+      await signUp.create({
+        emailAddress,
+        password,
+      });
+
+      await signUp.prepareEmailAddressVerification({
+        strategy: "email_code",
+      });
+
+      setPendingVerification(true);
+    } catch (err: any) {
+      console.error(JSON.stringify(err, null, 2));
+      if (err.errors && err.errors[0]?.message) {
+        setErrorMessage(err.errors[0].message);
+      } else {
+        setErrorMessage("An unexpected error occurred. Please try again.");
+      }
+    }
+  };
+
+  const onPressVerify = async () => {
+    if (!isLoaded) return;
+
+    setErrorMessage("");
+
+    try {
+      const completeSignUp = await signUp.attemptEmailAddressVerification({
+        code,
+      });
+
+      if (completeSignUp.status === "complete") {
+        await setActive({ session: completeSignUp.createdSessionId });
+      } else {
+        console.error(JSON.stringify(completeSignUp, null, 2));
+        setErrorMessage("Failed to verify. Please check your code.");
+      }
+    } catch (err: any) {
+      console.error(JSON.stringify(err, null, 2));
+      setErrorMessage("Invalid verification code. Please try again.");
+    }
+  };
+
+  return (
+    <View className="flex-1 justify-center items-center bg-gray-50 p-6">
+      <View className="bg-white w-11/12 max-w-md p-8 rounded-lg shadow-lg">
+        <Text className="text-3xl font-bold text-center text-gray-800 mb-6">
+          {pendingVerification ? "Verify Email" : "Sign Up"}
+        </Text>
+        {errorMessage ? (
+          <Text className="text-red-500 text-center mb-4">{errorMessage}</Text>
+        ) : null}
+
+        {!pendingVerification && (
+          <>
+            <TextInput
+              autoCapitalize="none"
+              value={emailAddress}
+              placeholder="Email..."
+              onChangeText={(email) => setEmailAddress(email)}
+              className="w-full h-12 mb-4 px-4 bg-gray-100 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
+            />
+            <TextInput
+              value={password}
+              placeholder="Password..."
+              secureTextEntry={true}
+              onChangeText={(password) => setPassword(password)}
+              className="w-full h-12 mb-6 px-4 bg-gray-100 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
+            />
+            <TouchableOpacity
+              onPress={onSignUpPress}
+              className="w-full h-12 bg-blue-600 rounded-lg flex justify-center items-center mb-4"
+            >
+              <Text className="text-white text-lg font-semibold">Sign Up</Text>
+            </TouchableOpacity>
+          </>
+        )}
+
+        {pendingVerification && (
+          <>
+            <TextInput
+              value={code}
+              placeholder="Verification Code..."
+              onChangeText={(code) => setCode(code)}
+              className="w-full h-12 mb-4 px-4 bg-gray-100 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
+            />
+            <TouchableOpacity
+              onPress={onPressVerify}
+              className="w-full h-12 bg-green-600 rounded-lg flex justify-center items-center mb-4"
+            >
+              <Text className="text-white text-lg font-semibold">
+                Verify Email
+              </Text>
+            </TouchableOpacity>
+          </>
+        )}
+      </View>
+    </View>
+  );
+}

examples/chat-rn-expo-clerk/app/+html.tsx

@@ -0,0 +1,42 @@
+import { ScrollViewStyleReset } from "expo-router/html";
+import { type PropsWithChildren } from "react";
+
+/**
+ * This file is web-only and used to configure the root HTML for every web page during static rendering.
+ * The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
+ */
+export default function Root({ children }: PropsWithChildren) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+
+        {/*
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;

examples/chat-rn-expo-clerk/app/+not-found.tsx

@@ -0,0 +1,29 @@
+import { Link, Stack } from "expo-router";
+import { StyleSheet, Text, View } from "react-native";
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: "Oops!" }} />
+      <View style={styles.container}>
+        <Text>This screen doesn't exist.</Text>
+        <Link href="/" style={styles.link}>
+          <Text>Go to home screen!</Text>
+        </Link>
+      </View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+  },
+  link: {
+    marginTop: 15,
+    paddingVertical: 15,
+  },
+});

examples/chat-rn-expo-clerk/app/_layout.tsx

@@ -0,0 +1,71 @@
+import "../global.css";
+import { ClerkLoaded, ClerkProvider } from "@clerk/clerk-expo";
+import { secureStore } from "@clerk/clerk-expo/secure-store";
+import { useFonts } from "expo-font";
+import { Slot, useRouter, useSegments } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
+import { useIsAuthenticated, useJazzContext } from "jazz-expo";
+import React, { useEffect } from "react";
+import { tokenCache } from "../cache";
+import { JazzAndAuth } from "../src/auth-context";
+
+SplashScreen.preventAutoHideAsync();
+
+function InitialLayout() {
+  const isAuthenticated = useIsAuthenticated();
+  const segments = useSegments();
+  const router = useRouter();
+
+  useEffect(() => {
+    const inAuthGroup = segments[0] === "(auth)";
+
+    if (isAuthenticated && inAuthGroup) {
+      router.replace("/chat");
+    } else if (!isAuthenticated && !inAuthGroup) {
+      router.replace("/");
+    }
+
+    SplashScreen.hideAsync();
+  }, [isAuthenticated, segments, router]);
+
+  return <Slot />;
+}
+
+export default function RootLayout() {
+  const [fontsLoaded] = useFonts({
+    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
+  });
+
+  const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;
+
+  if (!publishableKey) {
+    throw new Error(
+      "Missing Publishable Key. Please set EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY in your .env",
+    );
+  }
+
+  useEffect(() => {
+    if (fontsLoaded) {
+    } else {
+      SplashScreen.preventAutoHideAsync();
+    }
+  }, [fontsLoaded]);
+
+  if (!fontsLoaded) {
+    return null;
+  }
+
+  return (
+    <ClerkProvider
+      tokenCache={tokenCache}
+      publishableKey={publishableKey}
+      __experimental_resourceCache={secureStore}
+    >
+      <ClerkLoaded>
+        <JazzAndAuth>
+          <InitialLayout />
+        </JazzAndAuth>
+      </ClerkLoaded>
+    </ClerkProvider>
+  );
+}

examples/chat-rn-expo-clerk/app/chat/[chatId].tsx

@@ -0,0 +1,224 @@
+import { Chat, Message } from "@/src/schema";
+import { useNavigation } from "@react-navigation/native";
+import clsx from "clsx";
+import * as Clipboard from "expo-clipboard";
+import * as ImagePicker from "expo-image-picker";
+import { useLocalSearchParams } from "expo-router";
+import { useAccount, useCoState } from "jazz-expo";
+import { ProgressiveImg } from "jazz-expo";
+import { createImage } from "jazz-react-native-media-images";
+import { Group, ID } from "jazz-tools";
+import { useEffect, useLayoutEffect, useState } from "react";
+import React, {
+  SafeAreaView,
+  View,
+  Text,
+  Alert,
+  TouchableOpacity,
+  FlatList,
+  KeyboardAvoidingView,
+  TextInput,
+  Button,
+  Image,
+  ActivityIndicator,
+} from "react-native";
+
+export default function Conversation() {
+  const { chatId } = useLocalSearchParams();
+  const { me } = useAccount();
+  const [chat, setChat] = useState<Chat>();
+  const [message, setMessage] = useState("");
+  const loadedChat = useCoState(Chat, chat?.id, { resolve: { $each: true } });
+  const navigation = useNavigation();
+  const [isUploading, setIsUploading] = useState(false);
+
+  useEffect(() => {
+    if (chat) return;
+    if (chatId === "new") {
+      createChat();
+    } else {
+      loadChat(chatId as ID<Chat>);
+    }
+  }, [chat]);
+
+  // Effect to dynamically set header options
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerTitle: "Chat",
+      headerRight: () =>
+        chat ? (
+          <Button
+            onPress={() => {
+              if (chat?.id) {
+                Clipboard.setStringAsync(
+                  `https://chat.jazz.tools/#/chat/${chat.id}`,
+                );
+                Alert.alert("Copied to clipboard", `Chat ID: ${chat.id}`);
+              }
+            }}
+            title="Share"
+          />
+        ) : null,
+    });
+  }, [navigation, chat]);
+
+  const createChat = () => {
+    const group = Group.create({ owner: me });
+    group.addMember("everyone", "writer");
+    const chat = Chat.create([], { owner: group });
+    setChat(chat);
+  };
+
+  const loadChat = async (chatId: ID<Chat>) => {
+    try {
+      const chat = await Chat.load(chatId, me);
+      setChat(chat);
+    } catch (error) {
+      console.log("Error loading chat", error);
+      Alert.alert("Error", `Error loading chat: ${error}`);
+    }
+  };
+
+  const sendMessage = () => {
+    if (!chat) return;
+    if (message.trim()) {
+      chat.push(Message.create({ text: message }, { owner: chat._owner }));
+      setMessage("");
+    }
+  };
+
+  const handleImageUpload = async () => {
+    try {
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        base64: true,
+        quality: 0.7,
+      });
+
+      if (!result.canceled && result.assets[0].base64 && chat) {
+        setIsUploading(true);
+        const base64Uri = `data:image/jpeg;base64,${result.assets[0].base64}`;
+
+        const image = await createImage(base64Uri, {
+          owner: chat._owner,
+          maxSize: 2048,
+        });
+
+        chat.push(Message.create({ text: "", image }, { owner: chat._owner }));
+      }
+    } catch (error) {
+      Alert.alert("Error", "Failed to upload image");
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const renderMessageItem = ({ item }: { item: Message }) => {
+    const isMe = item._edits.text.by?.isMe;
+    return (
+      <View
+        className={clsx(
+          `rounded-xl px-3 py-2 max-w-[75%] my-1`,
+          isMe ? `bg-blue-500 self-end` : `bg-gray-200 self-start`,
+        )}
+      >
+        {!isMe ? (
+          <Text
+            className={clsx(
+              `text-xs text-gray-500 mb-1`,
+              isMe ? "text-right" : "text-left",
+            )}
+          >
+            {item._edits.text.by?.profile?.name}
+          </Text>
+        ) : null}
+        <View
+          className={clsx(
+            "flex relative items-end justify-between",
+            isMe ? "flex-row" : "flex-row",
+          )}
+        >
+          {item.image && (
+            <ProgressiveImg image={item.image} maxWidth={1024}>
+              {({ src, res, originalSize }) => (
+                <Image
+                  source={{ uri: src }}
+                  className="w-48 h-48 rounded-lg mb-2"
+                  resizeMode="cover"
+                />
+              )}
+            </ProgressiveImg>
+          )}
+          {item.text && (
+            <Text
+              className={clsx(
+                !isMe ? "text-black" : "text-gray-200",
+                `text-md max-w-[85%]`,
+              )}
+            >
+              {item.text}
+            </Text>
+          )}
+          <Text
+            className={clsx(
+              "text-[10px] text-right ml-2",
+              !isMe ? "mt-2 text-gray-500" : "mt-1 text-gray-200",
+            )}
+          >
+            {item._edits.text.madeAt?.getHours().toString().padStart(2, "0")}:
+            {item._edits.text.madeAt?.getMinutes().toString().padStart(2, "0")}
+          </Text>
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View className="flex-1 bg-gray-50">
+      <FlatList
+        contentContainerStyle={{
+          flexGrow: 1,
+          paddingVertical: 10,
+          paddingHorizontal: 8,
+        }}
+        className="flex"
+        data={loadedChat}
+        keyExtractor={(item) => item.id}
+        renderItem={renderMessageItem}
+      />
+      <KeyboardAvoidingView
+        keyboardVerticalOffset={110}
+        behavior="padding"
+        className="p-3 bg-white border-t border-gray-300"
+      >
+        <SafeAreaView className="flex-row items-center gap-2">
+          <TouchableOpacity
+            onPress={handleImageUpload}
+            disabled={isUploading}
+            className="h-10 w-10 items-center justify-center"
+          >
+            {isUploading ? (
+              <ActivityIndicator size="small" color="#0000ff" />
+            ) : (
+              <Text className="text-2xl">🖼️</Text>
+            )}
+          </TouchableOpacity>
+          <TextInput
+            className="flex-1 rounded-full h-10 px-4 bg-gray-100 border border-gray-300 focus:border-blue-500 focus:bg-white"
+            value={message}
+            onChangeText={setMessage}
+            placeholder="Type a message..."
+            textAlignVertical="center"
+            onSubmitEditing={sendMessage}
+          />
+          <TouchableOpacity
+            onPress={sendMessage}
+            className="bg-blue-500 rounded-full h-10 w-10 items-center justify-center"
+          >
+            <Text className="text-white text-xl">↑</Text>
+          </TouchableOpacity>
+        </SafeAreaView>
+      </KeyboardAvoidingView>
+    </View>
+  );
+}

examples/chat-rn-expo-clerk/app/chat/_layout.tsx

@@ -0,0 +1,14 @@
+import { Stack } from "expo-router";
+import React from "react";
+
+export default function ChatLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: true,
+        headerBackVisible: true,
+        headerTitle: "",
+      }}
+    />
+  );
+}

examples/chat-rn-expo-clerk/app/chat/index.tsx

@@ -0,0 +1,90 @@
+import { useNavigation } from "@react-navigation/native";
+import { useRouter } from "expo-router";
+import { ID } from "jazz-tools";
+import { useLayoutEffect } from "react";
+import React, {
+  Button,
+  Text,
+  TouchableOpacity,
+  View,
+  Alert,
+} from "react-native";
+
+import { useUser } from "@clerk/clerk-expo";
+import { useAccount } from "jazz-expo";
+import { Chat } from "../../src/schema";
+
+export default function ChatScreen() {
+  const { logOut } = useAccount();
+  const router = useRouter();
+  const navigation = useNavigation();
+  const { user } = useUser();
+
+  function handleLogOut() {
+    logOut();
+    router.navigate("/");
+  }
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerTitle: "Chat",
+      headerRight: () => <Button onPress={handleLogOut} title="Logout" />,
+    });
+  }, [navigation]);
+
+  const loadChat = async (chatId: ID<Chat> | "new") => {
+    router.navigate(`/chat/${chatId}`);
+  };
+
+  const joinChat = () => {
+    Alert.prompt(
+      "Join Chat",
+      "Enter the Chat ID (example: co_zBGEHYvRfGuT2YSBraY3njGjnde)",
+      [
+        {
+          text: "Cancel",
+          style: "cancel",
+        },
+        {
+          text: "Join",
+          onPress: (chatId) => {
+            if (chatId) {
+              loadChat(chatId as ID<Chat>);
+            } else {
+              Alert.alert("Error", "Chat ID cannot be empty.");
+            }
+          },
+        },
+      ],
+      "plain-text",
+    );
+  };
+
+  return (
+    <View className="flex-1 bg-gray-50">
+      <View className="flex-1 justify-center items-center px-6">
+        <View className="w-full max-w-sm bg-white p-8 rounded-lg shadow-lg">
+          <Text className="text-xl font-semibold text-gray-800">
+            Welcome, {user?.emailAddresses[0].emailAddress}
+          </Text>
+          <TouchableOpacity
+            onPress={() => loadChat("new")}
+            className="w-full bg-blue-600 py-4 rounded-md mb-4 mt-4"
+          >
+            <Text className="text-white text-lg font-semibold text-center">
+              Start New Chat
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={joinChat}
+            className="w-full bg-green-500 py-4 rounded-md"
+          >
+            <Text className="text-white text-lg font-semibold text-center">
+              Join Chat
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+}