Compare commits

..

40 Commits

Author SHA1 Message Date
Benjamin S. Leveritt
c76b15a924 Rename Expo in selector
Signed-off-by: Benjamin S. Leveritt <benjamin@leveritt.co.uk>
2025-03-27 15:00:35 +00:00
Benjamin S. Leveritt
6c68128cb3 Bump to 0.13.0
Signed-off-by: Benjamin S. Leveritt <benjamin@leveritt.co.uk>
2025-03-27 15:00:15 +00:00
Guido D'Orsi
32be2a8454 chore: update lockfile 2025-03-27 14:21:27 +01:00
Guido D'Orsi
68a5928d6d chore: migrate jazz-react-native-core o declaration files 2025-03-27 14:20:08 +01:00
Guido D'Orsi
ffa44d1b9e chore: more cleanup 2025-03-27 14:15:35 +01:00
Guido D'Orsi
1e243abd5a chore: update lockfile 2025-03-27 14:12:30 +01:00
Guido D'Orsi
774b9640ca feat: re-export the testing entry on jazz-expo and jazz-react-native 2025-03-27 14:11:59 +01:00
Guido D'Orsi
72e66c884a chore: clean up changes 2025-03-27 13:14:53 +01:00
Guido D'Orsi
12cd8dddb8 Merge remote-tracking branch 'origin/main' into feat/separate-expo-rn 2025-03-27 12:35:17 +01:00
Guido D'Orsi
51c9f09056 chore: clean up deps 2025-03-27 12:32:46 +01:00
pax-k
e2f05b3b8c fix: tests 2025-03-26 15:37:08 +02:00
Brad Anderson
336c2eda6d fix: removing mystery starters 2025-03-25 17:04:53 -04:00
Brad Anderson
0cf456a154 PR feedback 2025-03-25 10:56:51 -04:00
Brad Anderson
edcbabc9b6 PR feedback 2025-03-25 10:56:51 -04:00
Brad Anderson
1a7d862cb9 chore: rebase oops 2025-03-25 10:56:51 -04:00
Brad Anderson
56074d598d chore: rebase 2025-03-25 10:56:51 -04:00
Brad Anderson
b79adbc6d1 chore: docs update 2025-03-25 10:56:51 -04:00
Brad Anderson
98f8ab249f chore: first cut at docs changes 2025-03-25 10:56:51 -04:00
Brad Anderson
abb2357be2 fix: comment out suppressions 2025-03-25 10:56:51 -04:00
Brad Anderson
11603e14d7 fix: tests work 2025-03-25 10:56:51 -04:00
Brad Anderson
2ba1f1b5d7 wip: failing unit test work 2025-03-25 10:56:50 -04:00
Brad Anderson
af5bf96df1 fix: react/dom dependency warnings 2025-03-25 10:56:50 -04:00
Brad Anderson
9a11a19aa8 fix: more cleanup of packages 2025-03-25 10:56:50 -04:00
Brad Anderson
366a3e8e2f fix: lock file regen 2025-03-25 10:56:50 -04:00
Brad Anderson
f754896f13 fix: clean up styles 2025-03-25 10:56:50 -04:00
pax-k
3fb50d9aee works 2025-03-25 10:56:50 -04:00
pax-k
af4cd3df89 fix(rn): added ios and android dirs for barebone rn chat app 2025-03-25 10:56:50 -04:00
pax-k
c19989249d fix: workspace package versions for react, react-native 2025-03-25 10:56:50 -04:00
Brad Anderson
e8a3002577 try 0.78 on all RN apps 2025-03-25 10:56:49 -04:00
Brad Anderson
29083a9cf0 cosmetic 2025-03-25 10:56:49 -04:00
Brad Anderson
0c9e112be1 chat-rn builds and runs, but blank 2025-03-25 10:56:49 -04:00
Brad Anderson
b13f8889ec more naming changes 2025-03-25 10:56:49 -04:00
Brad Anderson
de2f998115 rename RN example apps 2025-03-25 10:56:49 -04:00
Brad Anderson
ea1468a609 add chat app & deps 2025-03-25 10:55:50 -04:00
Brad Anderson
77bc548c9b app starts, lint, format 2025-03-25 10:55:50 -04:00
Brad Anderson
88095b714e add chat-rn-cli app for frameworkless testing 2025-03-25 10:55:50 -04:00
Brad Anderson
987f037547 small changes 2025-03-25 10:55:50 -04:00
Brad Anderson
d86a2d1496 move jazz-expo-clerk-auth under jazz-expo, rename local e2e test 2025-03-25 10:55:48 -04:00
Brad Anderson
67c1654987 remove op-sqlite from chat-rn-clerk 2025-03-25 10:55:47 -04:00
Brad Anderson
58332c22fc feat: Separate Expo and React Native 2025-03-25 10:55:47 -04:00
1005 changed files with 24302 additions and 64590 deletions

View File

@@ -9,23 +9,18 @@
"cojson-storage",
"cojson-storage-indexeddb",
"cojson-storage-sqlite",
"cojson-storage-rn-sqlite",
"cojson-transport-ws",
"jazz-browser",
"jazz-auth-clerk",
"jazz-auth-betterauth",
"jazz-betterauth-client-plugin",
"jazz-betterauth-server-plugin",
"jazz-react-auth-betterauth",
"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-auth-clerk",
"jazz-react-native-media-images",
"jazz-run",
"jazz-svelte",

View File

@@ -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
---

View File

@@ -15,7 +15,4 @@ jobs:
with:
version: latest
- name: Run Biome
run: biome ci .
- name: Check Catalog Dependencies
run: node scripts/check-catalog-deps.js
run: biome ci .

View File

@@ -13,7 +13,7 @@ jobs:
continue-on-error: true
strategy:
matrix:
project: ["tests/e2e", "examples/chat", "examples/clerk", "examples/betterauth", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/organization", "examples/pets", "starters/react-passkey-auth"]
project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "starters/react-passkey-auth"]
steps:
- uses: actions/checkout@v4

3
.gitignore vendored
View File

@@ -23,11 +23,8 @@ test-results
.husky
.vscode/*
.idea/*
.svelte-kit
.cursorrules
.windsurfrules
playwright-report

View File

@@ -13,7 +13,6 @@
"**/android/**",
"packages/jazz-svelte/**",
"examples/*svelte*/**",
"examples/jazz-paper-scissors/src/routeTree.gen.ts",
"homepage/homepage/**",
"**/package.json"
]

View File

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

View File

@@ -1,47 +0,0 @@
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
sqlite.db
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# env files (can opt-in for committing if needed)
.env*
!.env
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

View File

@@ -1,36 +0,0 @@
# betterauth
## 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

View File

@@ -1,49 +0,0 @@
# Better Auth Integration Example
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.
### 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)
- `GITHUB_CLIENT_SECRET`: The client secret for the GitHub OAuth provider used by the self-hosted Better Auth server (required only if `NEXT_PUBLIC_AUTH_BASE_URL` is undefined)
### 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 start the development server.
```sh
cd betterauth-app
pnpm install
pnpm dev
```
### Using the monorepo
This requires `pnpm` to be installed; see [https://pnpm.io/installation](https://pnpm.io/installation).
1. Clone the `jazz` repository.
```sh
git clone https://github.com/garden-co/jazz.git
```
2. Install dependencies.
```sh
cd jazz
pnpm install
```
3. Navigate to the example and start the development server.
```sh
cd examples/betterauth
pnpm dev
```
The example should be running at [http://localhost:3000](http://localhost:3000) by default.

View File

@@ -1,7 +0,0 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;

View File

@@ -1,43 +0,0 @@
{
"name": "betterauth",
"version": "0.1.3",
"private": true,
"type": "module",
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint",
"format-and-lint": "biome check .",
"format-and-lint:fix": "biome check . --write",
"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui",
"email": "email dev --dir src/components/emails"
},
"dependencies": {
"@react-email/components": "^0.0.38",
"better-auth": "^1.2.4",
"better-sqlite3": "^11.9.1",
"jazz-betterauth-server-plugin": "workspace:*",
"jazz-betterauth-client-plugin": "workspace:*",
"jazz-inspector": "workspace:*",
"jazz-react": "workspace:*",
"jazz-react-auth-betterauth": "workspace:*",
"jazz-tools": "workspace:*",
"next": "15.3.1",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"@biomejs/biome": "1.9.4",
"@playwright/test": "^1.50.1",
"@tailwindcss/postcss": "^4",
"@types/better-sqlite3": "^7.6.12",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"react-email": "^4.0.11",
"tailwindcss": "^4",
"typescript": "^5"
}
}

View File

@@ -1,53 +0,0 @@
import { defineConfig, devices } from "@playwright/test";
import isCI from "is-ci";
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// dotenv.config({ path: path.resolve(__dirname, '.env') });
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: "./tests",
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: isCI,
/* Retry on CI only */
retries: isCI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: isCI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: "html",
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: "http://localhost:3000/",
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: "on-first-retry",
permissions: ["clipboard-read", "clipboard-write"],
},
/* Configure projects for major browsers */
projects: [
{
name: "chromium",
use: { ...devices["Desktop Chrome"] },
},
],
/* Run your local dev server before starting the tests */
webServer: [
{
command: "pnpm dev",
url: "http://localhost:3000/",
reuseExistingServer: !isCI,
},
],
});

View File

@@ -1,5 +0,0 @@
const config = {
plugins: ["@tailwindcss/postcss"],
};
export default config;

View File

@@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 391 B

View File

@@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -1,21 +0,0 @@
<svg
viewBox="0 0 386 146"
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"
d="M136.179 44.8277C136.179 44.8277 136.179 44.8277 136.179 44.8276V21.168C117.931 28.5527 97.9854 32.6192 77.0897 32.6192C65.1466 32.6192 53.5138 31.2908 42.331 28.7737V51.4076C42.331 51.4076 42.331 51.4076 42.331 51.4076V81.1508C41.2955 80.4385 40.1568 79.8458 38.9405 79.3915C36.1732 78.358 33.128 78.0876 30.1902 78.6145C27.2524 79.1414 24.5539 80.4419 22.4358 82.3516C20.3178 84.2613 18.8754 86.6944 18.291 89.3433C17.7066 91.9921 18.0066 94.7377 19.1528 97.2329C20.2991 99.728 22.2403 101.861 24.7308 103.361C27.2214 104.862 30.1495 105.662 33.1448 105.662H33.1455C33.6061 105.662 33.8365 105.662 34.0314 105.659C44.5583 105.449 53.042 96.9656 53.2513 86.4386C53.2534 86.3306 53.2544 86.2116 53.2548 86.0486H53.2552V85.7149L53.2552 85.5521V82.0762L53.2552 53.1993C61.0533 54.2324 69.0092 54.7656 77.0897 54.7656C77.6696 54.7656 78.2489 54.7629 78.8276 54.7574V110.696C77.792 109.983 76.6533 109.391 75.437 108.936C72.6697 107.903 69.6246 107.632 66.6867 108.159C63.7489 108.686 61.0504 109.987 58.9323 111.896C56.8143 113.806 55.3719 116.239 54.7875 118.888C54.2032 121.537 54.5031 124.283 55.6494 126.778C56.7956 129.273 58.7368 131.405 61.2273 132.906C63.7179 134.406 66.646 135.207 69.6414 135.207C70.1024 135.207 70.3329 135.207 70.5279 135.203C81.0548 134.994 89.5385 126.51 89.7478 115.983C89.7517 115.788 89.7517 115.558 89.7517 115.097V111.621L89.7517 54.3266C101.962 53.4768 113.837 51.4075 125.255 48.2397V80.9017C124.219 80.1894 123.081 79.5966 121.864 79.1424C119.097 78.1089 116.052 77.8384 113.114 78.3653C110.176 78.8922 107.478 80.1927 105.36 82.1025C103.242 84.0122 101.799 86.4453 101.215 89.0941C100.631 91.743 100.931 94.4886 102.077 96.9837C103.223 99.4789 105.164 101.612 107.655 103.112C110.145 104.612 113.073 105.413 116.069 105.413C116.53 105.413 116.76 105.413 116.955 105.409C127.482 105.2 135.966 96.7164 136.175 86.1895C136.179 85.9945 136.179 85.764 136.179 85.3029V81.8271L136.179 44.8277Z"
fill="#146AFF"
/>
</svg>

Before

Width:  |  Height:  |  Size: 3.3 KiB

View File

@@ -1,12 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 125 125"
fill="none"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M118.179 29.6597V6C99.931 13.3847 79.9854 17.4512 59.0897 17.4512C47.1466 17.4512 35.5138 16.1228 24.331 13.6057V36.2396V65.9828C23.2955 65.2705 22.1568 64.6778 20.9405 64.2235C18.1732 63.19 15.128 62.9196 12.1902 63.4465C9.25242 63.9734 6.55392 65.2739 4.43582 67.1836C2.31782 69.0933 0.875416 71.5264 0.291016 74.1753C-0.293384 76.8241 0.00661504 79.5697 1.15281 82.0649C2.29911 84.56 4.24032 86.693 6.73082 88.193C9.22142 89.694 12.1495 90.494 15.1448 90.494C15.6054 90.494 15.8365 90.494 16.0314 90.491C26.5583 90.281 35.042 81.7976 35.2513 71.2706C35.2534 71.1626 35.2544 71.0436 35.2548 70.8806L35.2552 70.5469V70.3841V66.9082V38.0313C43.0533 39.0644 51.0092 39.5976 59.0897 39.5976C59.6696 39.5976 60.2489 39.5949 60.8276 39.5894V95.528C59.792 94.815 58.6533 94.223 57.437 93.768C54.6697 92.735 51.6246 92.464 48.6867 92.991C45.7489 93.518 43.0504 94.819 40.9323 96.728C38.8143 98.638 37.3719 101.071 36.7875 103.72C36.2032 106.369 36.5031 109.115 37.6494 111.61C38.7956 114.105 40.7368 116.237 43.2273 117.738C45.7179 119.238 48.646 120.039 51.6414 120.039C52.1024 120.039 52.3329 120.039 52.5279 120.035C63.0548 119.826 71.5385 111.342 71.7478 100.815C71.7517 100.62 71.7517 100.39 71.7517 99.929V96.453V39.1586C83.962 38.3088 95.837 36.2395 107.255 33.0717V65.7337C106.219 65.0214 105.081 64.4286 103.864 63.9744C101.097 62.9409 98.052 62.6704 95.114 63.1973C92.176 63.7242 89.478 65.0247 87.36 66.9345C85.242 68.8442 83.799 71.2773 83.215 73.9261C82.631 76.575 82.931 79.3206 84.077 81.8157C85.223 84.3109 87.164 86.444 89.655 87.944C92.145 89.444 95.073 90.245 98.069 90.245C98.53 90.245 98.76 90.245 98.955 90.241C109.482 90.032 117.966 81.5484 118.175 71.0215C118.179 70.8265 118.179 70.596 118.179 70.1349V66.6591V29.6597Z"
fill="#146AFF"
/>
</svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

View File

@@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 344 B

View File

@@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 301 B

View File

@@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 823 B

View File

@@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 385 B

View File

@@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 369 B

View File

@@ -1,10 +0,0 @@
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 };
}
})();

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

View File

@@ -1,7 +0,0 @@
"use client";
import ForgotForm from "@/components/forms/Forgot";
export default function ForgotPage() {
return <ForgotForm />;
}

View File

@@ -1,27 +0,0 @@
@import "tailwindcss";
@import "tailwindcss/utilities";
:root {
--background: #ffffff;
--foreground: #171717;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}

View File

@@ -1,35 +0,0 @@
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",
description: "Jazz example application demonstrating Better Auth integration",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<JazzAndAuth>{children}</JazzAndAuth>
</body>
</html>
);
}

View File

@@ -1,5 +0,0 @@
"use client";
import MagicLinkSignIn from "@/components/routes/magic-link/signIn/page";
export default MagicLinkSignIn;

View File

@@ -1,5 +0,0 @@
"use client";
import MagicLinkSignUp from "@/components/routes/magic-link/logIn/page";
export default MagicLinkSignUp;

View File

@@ -1,11 +0,0 @@
"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>;
}

View File

@@ -1,11 +0,0 @@
"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>;
}

View File

@@ -1,11 +0,0 @@
"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>;
}

View File

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

View File

@@ -1,165 +0,0 @@
"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 { authClient, account, state } = useAuth();
const hasCredentials = state !== "anonymous";
const { me, logOut } = useAccount({ resolve: { profile: {} } });
const isAuthenticated = useIsAuthenticated();
const signOut = useCallback(() => {
authClient.signOut().catch(console.error).finally(logOut);
}, [logOut, authClient]);
console.log("me", me);
console.log("account", account);
console.log("state", state);
console.log("hasCredentials", hasCredentials);
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 && hasCredentials && isAuthenticated && (
<>
<Button onClick={signOut}>Sign out</Button>
<Button href="/settings">Settings</Button>
</>
)}
</div>
<div className="float-end flex gap-4">
{!hasCredentials && !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 && hasCredentials && 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>
.
</>
)}
{!hasCredentials && !isAuthenticated && <>Not signed in.</>}
{!hasCredentials && isAuthenticated && (
<>Not connected to the authentication server.</>
)}
{hasCredentials && !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>
</>
);
}

View File

@@ -1,7 +0,0 @@
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);

View File

@@ -1,7 +0,0 @@
"use client";
import ResetForm from "@/components/forms/Reset";
export default function ResetPage() {
return <ResetForm />;
}

View File

@@ -1,7 +0,0 @@
"use client";
import SettingsForm from "@/components/forms/Settings";
export default function SettingsPage() {
return <SettingsForm providers={["github"]} />;
}

View File

@@ -1,7 +0,0 @@
"use client";
import SignInForm from "@/components/forms/SignIn";
export default function SignInPage() {
return <SignInForm providers={["github"]} />;
}

View File

@@ -1,7 +0,0 @@
"use client";
import SignUpForm from "@/components/forms/SignUp";
export default function SignUpPage() {
return <SignUpForm providers={["github"]} />;
}

View File

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

View File

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

View File

@@ -1,85 +0,0 @@
import { Button } from "@/components/Button";
import { AccountsType, useAuth } from "jazz-react-auth-betterauth";
export const AccountProviders = ({
setLoading,
setError,
accounts,
}: {
setLoading: React.Dispatch<React.SetStateAction<boolean>>;
setError: React.Dispatch<React.SetStateAction<Error | undefined>>;
accounts: AccountsType | undefined;
}) => {
const auth = useAuth();
return (
<table className="w-full text-sm border-full border-collapse">
<thead className="text-xs">
<tr>
<th scope="col" className="px-6 py-3">
Provider
</th>
<th scope="col" className="px-6 py-3">
Created
</th>
<th scope="col" className="px-6 py-3">
Updated
</th>
<th scope="col" className="px-6 py-3">
Scopes
</th>
</tr>
</thead>
<tbody>
{!accounts?.data?.length && "No authentication providers found"}
{accounts?.data &&
accounts.data.map((account) => (
<tr key={account.id} className="border-b">
<th
scope="row"
className="px-6 py-4 font-medium whitespace-nowrap"
>
{account.provider}
</th>
<td className="px-6 py-4">
{account.createdAt.toLocaleString()}
</td>
<td className="px-6 py-4">
{account.updatedAt.toLocaleString()}
</td>
<td className="px-6 py-4">{account.scopes.join(", ")}</td>
<td className="px-6 py-4">
<Button
variant="secondary"
className="relative"
onClick={async (e) => {
e.preventDefault();
setLoading(true);
const { error } = await auth.authClient.unlinkAccount({
providerId: account.provider,
accountId: account.id,
});
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
setLoading(false);
}}
>
Unlink
</Button>
</td>
</tr>
))}
</tbody>
</table>
);
};

View File

@@ -1,92 +0,0 @@
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?: string;
alt?: string;
imageClassName?: string;
href?: string;
newTab?: boolean;
}
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
(
{
className,
children,
variant = "primary",
src,
alt,
imageClassName,
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
className={imageClassName}
src={src}
alt={alt}
width={width}
height={height}
/>
)}
{children}
</Link>
);
} else {
return (
<button
ref={ref}
{...buttonProps}
className={classes}
rel="noopener noreferrer"
>
{src && alt && (
<Image
className={imageClassName}
src={src}
alt={alt}
width={width}
height={height}
/>
)}
{children}
</button>
);
}
},
);

View File

@@ -1,56 +0,0 @@
import { Button } from "@/components/Button";
import { useAuth } from "jazz-react-auth-betterauth";
import { useRouter } from "next/navigation";
import { forwardRef } from "react";
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
children?: React.ReactNode;
src?: InstanceType<typeof Image>["src"];
alt?: InstanceType<typeof Image>["alt"];
callbackURL: string;
setLoading: React.Dispatch<React.SetStateAction<boolean>>;
setError: React.Dispatch<React.SetStateAction<Error | undefined>>;
}
export const DeleteAccountButton = forwardRef<HTMLButtonElement, ButtonProps>(
({ callbackURL, setLoading, setError }) => {
const router = useRouter();
const auth = useAuth();
return (
<Button
variant="danger"
className="relative"
onClick={async (e) => {
e.preventDefault();
setLoading(true);
const { error } = await auth.authClient.deleteUser(
{
callbackURL: callbackURL,
},
{
onSuccess: () => {
router.replace(callbackURL);
},
},
);
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
setLoading(false);
}}
>
Delete account
</Button>
);
},
);

View File

@@ -1,37 +0,0 @@
"use client";
import { emailOTPClient, magicLinkClient } from "better-auth/client/plugins";
import { JazzProvider } from "jazz-react";
import { AuthProvider } from "jazz-react-auth-betterauth";
import { type ReactNode, lazy } from "react";
const JazzDevTools =
process.env.NODE_ENV === "production"
? () => null
: lazy(() =>
import("jazz-inspector").then((res) => ({
default: res.JazzInspector,
})),
);
export function JazzAndAuth({ children }: { children: ReactNode }) {
return (
<JazzProvider
sync={{
peer: "wss://cloud.jazz.tools/?key=betterauth-example@garden.co",
}}
>
<>
<AuthProvider
options={{
baseURL: process.env.NEXT_PUBLIC_AUTH_BASE_URL,
plugins: [magicLinkClient(), emailOTPClient()],
}}
>
{children}
</AuthProvider>
<JazzDevTools />
</>
</JazzProvider>
);
}

View File

@@ -1,7 +0,0 @@
export function Loading() {
return (
<div className="flex h-full items-center justify-center">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
</div>
);
}

View File

@@ -1,73 +0,0 @@
import { Button } from "@/components/Button";
import { SSOProviderType, useAuth } from "jazz-react-auth-betterauth";
import { socialProviderNames } from "jazz-react-auth-betterauth";
import { forwardRef } from "react";
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
children?: React.ReactNode;
src?: InstanceType<typeof Image>["src"];
alt?: InstanceType<typeof Image>["alt"];
provider: SSOProviderType;
link?: boolean;
callbackURL?: string;
setLoading: React.Dispatch<React.SetStateAction<boolean>>;
setError: React.Dispatch<React.SetStateAction<Error | undefined>>;
}
export const SSOButton = forwardRef<HTMLButtonElement, ButtonProps>(
(
{
children,
provider,
link = false,
callbackURL,
setLoading,
setError,
...buttonProps
},
ref,
) => {
const auth = useAuth();
const providerName = socialProviderNames[provider];
return (
<Button
src={`/social/${provider}.svg`}
alt={`${providerName} logo`}
imageClassName="absolute left-3 dark:invert"
variant="secondary"
className="relative"
onClick={async (e) => {
e.preventDefault();
setLoading(true);
const { error } = await (async () => {
if (link) {
return await auth.authClient.linkSocial({
provider: provider,
});
} else {
return await auth.authClient.signIn.social({
provider: provider,
callbackURL: callbackURL,
});
}
})();
if (error) {
setError({
...error,
name: error.message ?? error.statusText,
message: error.message ?? error.statusText,
});
}
setLoading(false);
}}
{...buttonProps}
ref={ref}
>
{link
? `Link ${providerName} account`
: `Continue with ${providerName}`}
{children}
</Button>
);
},
);

View File

@@ -1,66 +0,0 @@
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: "#146AFF",
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,
};

View File

@@ -1,91 +0,0 @@
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;

View File

@@ -1,84 +0,0 @@
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;

View File

@@ -1,80 +0,0 @@
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;

View File

@@ -1,53 +0,0 @@
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;

View File

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

View File

@@ -1,199 +0,0 @@
import { Button } from "@/components/Button";
import { Loading } from "@/components/Loading";
import { useAuth } from "jazz-react-auth-betterauth";
import type { FullAuthClient } from "jazz-react-auth-betterauth";
import { useState } from "react";
const title = "Forgot Password";
export default function ForgotForm() {
const auth = useAuth();
const [email, setEmail] = useState<string>("");
const [otp, setOtp] = useState<string>("");
const [otpSentStatus, setOtpSentStatus] = useState<boolean>(false);
const [otpStatus, setOtpStatus] = useState<boolean>(false);
const [password, setPassword] = useState<string>("");
const [confirmPassword, setConfirmPassword] = useState<string>("");
const [status, setStatus] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<Error | undefined>(undefined);
return (
<div className="min-h-screen flex flex-col justify-center">
<div className="max-w-md flex flex-col gap-8 w-full px-6 py-12 mx-auto">
<div>
<h1 className="text-stone-950 dark:text-white font-display text-5xl lg:text-6xl font-medium tracking-tighter mb-2">
{title}
</h1>
<p>
Enter your email address, and we'll send you a link to reset your
password.
</p>
</div>
{status && !otpStatus && (
<div>
Instructions to reset your password have been sent to {email}, if an
account with that email address exists.
</div>
)}
{otpStatus && (
<div>
Your password has been successfully reset. You may now log in.
</div>
)}
{error && <div>{error.message}</div>}
{loading && <Loading />}
<form className="flex flex-col gap-6">
<div>
<label htmlFor="email-address">Email address</label>
<input
id="email-address"
value={email}
disabled={loading}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<Button
onClick={async (e) => {
e.preventDefault();
setLoading(true);
const { data, error } = await auth.authClient.forgetPassword({
email: email,
redirectTo: `${window.location.origin}/reset`,
});
setStatus(data?.status ?? false);
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
setLoading(false);
}}
disabled={loading}
>
Send recovery link
</Button>
<Button
onClick={async (e) => {
e.preventDefault();
setLoading(true);
const { data, error } = await (
auth.authClient as FullAuthClient
).emailOtp.sendVerificationOtp({
email: email,
type: "forget-password",
});
setStatus(data?.success ?? false);
setOtpSentStatus(data?.success ?? false);
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
setLoading(false);
}}
disabled={loading}
>
Send recovery one-time password
</Button>
</form>
{otpSentStatus && (
<form
className="flex flex-col gap-6"
onSubmit={async (e) => {
e.preventDefault();
setLoading(true);
if (password !== confirmPassword) {
setError(new Error("Passwords do not match"));
setLoading(false);
return;
}
const { data, error } = await (
auth.authClient as FullAuthClient
).emailOtp.resetPassword({
email: email,
otp: otp,
password: password,
});
setStatus(data?.success ?? false);
setOtpStatus(data?.success ?? false);
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
setLoading(false);
}}
>
<div>
<label htmlFor="otp">One-time password</label>
<input
id="otp"
value={otp}
disabled={loading}
onChange={(e) => setOtp(e.target.value)}
/>
</div>
<div>
<label htmlFor="password">Password</label>
<input
id="password"
type="password"
value={password}
disabled={loading}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div>
<label htmlFor="confirm-password">Confirm password</label>
<input
id="confirm-password"
type="password"
value={confirmPassword}
disabled={loading}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
</div>
<Button type={"submit"} disabled={loading}>
Submit
</Button>
</form>
)}
<Button href="/sign-in" disabled={loading}>
Sign in
</Button>
</div>
</div>
);
}

View File

@@ -1,115 +0,0 @@
import { Button } from "@/components/Button";
import { Loading } from "@/components/Loading";
import { useAuth } from "jazz-react-auth-betterauth";
import Link from "next/link";
import { useState } from "react";
const title = "Reset Password";
export default function ResetForm() {
const auth = useAuth();
const searchParams = new URLSearchParams(window.location.search);
const token = searchParams.get("token");
const initialError = searchParams.get("error");
const [error, setError] = useState<Error | undefined>(
initialError
? {
name: initialError,
message: initialError,
}
: undefined,
);
const [password, setPassword] = useState<string>("");
const [confirmPassword, setConfirmPassword] = useState<string>("");
const [status, setStatus] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
return (
<div className="min-h-screen flex flex-col justify-center">
<div className="max-w-md flex flex-col gap-8 w-full px-6 py-12 mx-auto">
<div>
<h1 className="text-stone-950 dark:text-white font-display text-5xl lg:text-6xl font-medium tracking-tighter mb-2">
{title}
</h1>
<p>Enter your new password.</p>
</div>
{status && (
<div>
Your password has been reset. You may now{" "}
<Link href="/sign-in">sign in</Link>.
</div>
)}
{error && <div>{error.message}</div>}
{loading && <Loading />}
<form
className="flex flex-col gap-6"
onSubmit={async (e) => {
e.preventDefault();
setLoading(true);
if (password !== confirmPassword) {
setError(new Error("Passwords do not match"));
setLoading(false);
return;
}
if (!token) {
setError(new Error("No password reset token provided"));
setLoading(false);
return;
}
const { data, error } = await auth.authClient.resetPassword({
newPassword: password,
token,
});
setStatus(data?.status ?? false);
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
setLoading(false);
}}
>
<div>
<label htmlFor="password">Password</label>
<input
id="password"
type="password"
value={password}
disabled={loading}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div>
<label htmlFor="confirm-password">Confirm password</label>
<input
id="confirm-password"
type="password"
value={confirmPassword}
disabled={loading}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
</div>
<Button type="submit" disabled={loading}>
Reset password
</Button>
</form>
<Button href="/sign-in" disabled={loading}>
Sign in
</Button>
</div>
</div>
);
}

View File

@@ -1,222 +0,0 @@
import { AccountProviders } from "@/components/AccountProviders";
import { Button } from "@/components/Button";
import { DeleteAccountButton } from "@/components/DeleteAccountButton";
import { Loading } from "@/components/Loading";
import { SSOButton } from "@/components/SSOButton";
import { useAccount, useIsAuthenticated } from "jazz-react";
import { useAuth } from "jazz-react-auth-betterauth";
import type {
AccountsType,
FullAuthClient,
SSOProviderType,
} from "jazz-react-auth-betterauth";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
const title = "Settings";
export default function SettingsForm({
providers,
}: {
providers?: SSOProviderType[];
}) {
const router = useRouter();
const { authClient, account, state } = useAuth();
const hasCredentials = state !== "anonymous";
const [accounts, setAccounts] = useState<AccountsType | undefined>(undefined);
useEffect(() => {
return authClient.useSession.subscribe(() => {
authClient.listAccounts().then((x) => setAccounts(x));
});
}, [authClient]);
const [status, setStatus] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<Error | undefined>(undefined);
const [otpSentStatus, setOtpSentStatus] = useState<boolean>(false);
const [otpStatus, setOtpStatus] = useState<boolean>(false);
const [otp, setOtp] = useState<string>("");
const { me, logOut } = useAccount({ resolve: { profile: true } });
const isAuthenticated = useIsAuthenticated();
const signOut = useCallback(() => {
authClient
.signOut()
.catch(console.error)
.finally(() => {
logOut();
router.push("/");
});
}, [logOut, authClient]);
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">
{me && hasCredentials && account && isAuthenticated && (
<Button className="float-start" onClick={signOut}>
Sign out
</Button>
)}
</div>
</header>
<div className="min-h-screen flex flex-col justify-center font-[family-name:var(--font-geist-sans)]">
<div className="max-w-md flex flex-col gap-8 w-full px-6 py-12 mx-auto">
<h1 className="text-stone-950 dark:text-white font-display text-5xl lg:text-6xl font-medium tracking-tighter mb-2">
{title}
</h1>
{status && account && !account?.emailVerified && (
<div>
Instructions to verify your account have been sent to{" "}
{account.email}, if an account with that email address exists.
</div>
)}
{(status || otpStatus) && account && account.emailVerified && (
<div>Your account has been successfully verified.</div>
)}
{error && <div>{error.message}</div>}
{loading && <Loading />}
<AccountProviders
accounts={accounts}
setLoading={setLoading}
setError={setError}
/>
{accounts?.data &&
providers?.map((x) => {
return (
accounts.data.find((y) => y.provider === x) === undefined && (
<SSOButton
link={true}
provider={x}
setLoading={setLoading}
setError={setError}
/>
)
);
})}
{account && account.emailVerified && <p>Account verified.</p>}
{account && !account.emailVerified && (
<>
<Button
variant="secondary"
className="relative"
onClick={async (e) => {
e.preventDefault();
setLoading(true);
const { data, error } =
await authClient.sendVerificationEmail({
email: account.email,
callbackURL: `${window.location.origin}`,
});
setStatus(data?.status ?? false);
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
setLoading(false);
}}
>
Send verification link
</Button>
<Button
variant="secondary"
className="relative"
onClick={async (e) => {
e.preventDefault();
setLoading(true);
const { data, error } = await (
authClient as FullAuthClient
).emailOtp.sendVerificationOtp({
email: account.email,
type: "email-verification",
});
setStatus(data?.success ?? false);
setOtpSentStatus(data?.success ?? false);
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
setLoading(false);
}}
>
Send verification one-time password
</Button>
</>
)}
{otpSentStatus && account && !account.emailVerified && (
<form
className="flex flex-col gap-6"
onSubmit={async (e) => {
e.preventDefault();
setLoading(true);
const { data, error } = await (
authClient as FullAuthClient
).emailOtp.verifyEmail({
email: account.email,
otp: otp,
});
setOtpStatus(data?.status ?? false);
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
setLoading(false);
}}
>
<div>
<label htmlFor="otp">One-time password</label>
<input
id="otp"
value={otp}
disabled={loading}
onChange={(e) => setOtp(e.target.value)}
/>
</div>
<Button type={"submit"} disabled={loading}>
Submit
</Button>
</form>
)}
<DeleteAccountButton
setLoading={setLoading}
setError={setError}
callbackURL={`${window.location.origin}/delete-account`}
/>
</div>
</div>
</>
);
}

View File

@@ -1,245 +0,0 @@
import { Button } from "@/components/Button";
import { Loading } from "@/components/Loading";
import { SSOButton } from "@/components/SSOButton";
import { useAuth } from "jazz-react-auth-betterauth";
import type {
FullAuthClient,
SSOProviderType,
} from "jazz-react-auth-betterauth";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
const title = "Sign In";
export default function SignInForm({
providers,
}: {
providers?: SSOProviderType[];
}) {
const router = useRouter();
const auth = useAuth();
const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [rememberMe, setRememberMe] = useState(true);
const [otp, setOtp] = useState<string>("");
const [otpStatus, setOtpStatus] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<Error | undefined>(undefined);
return (
<div className="min-h-screen flex flex-col justify-center">
<h1 className="sr-only">{title}</h1>
<div className="max-w-md flex flex-col gap-8 w-full px-6 py-12 mx-auto">
{otpStatus && (
<div>A one-time password has been sent to your email.</div>
)}
{error && <div>{error.message}</div>}
{loading && <Loading />}
<form
className="flex flex-col gap-6"
onSubmit={async (e) => {
e.preventDefault();
setLoading(true);
if (!otpStatus) {
await auth.authClient.signIn.email(
{
email,
password,
rememberMe,
},
{
onSuccess: async () => {
await auth.logIn();
router.push("/");
},
onError: (error) => {
setError(error.error);
},
},
);
} else {
const { data, error } = await (
auth.authClient as FullAuthClient
).signIn.emailOtp({
email: email,
otp: otp,
});
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
if (data) {
await auth.logIn();
router.push("/");
}
}
setLoading(false);
}}
>
<div>
<label htmlFor="email-address">Email address</label>
<input
id="email-address"
value={email}
disabled={loading}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
{!otpStatus && (
<div>
<label htmlFor="password">Password</label>
<input
id="password"
type="password"
value={password}
disabled={loading}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
)}
{otpStatus && (
<div>
<label htmlFor="otp">One-time password</label>
<input
id="otp"
value={otp}
disabled={loading}
onChange={(e) => setOtp(e.target.value)}
/>
</div>
)}
<div className="items-center">
<div>
<label htmlFor="remember-me">Remember me</label>
<input
id="remember-me"
type="checkbox"
checked={rememberMe}
disabled={loading}
onChange={(e) => setRememberMe(e.target.checked)}
/>
</div>
<Link href="/forgot" className="text-sm float-right">
Forgot password?
</Link>
</div>
<Button type="submit" disabled={loading}>
Sign in
</Button>
</form>
<div className="flex items-center gap-4">
<hr className="flex-1" />
<p className="text-center">or</p>
<hr className="flex-1" />
</div>
<div className="flex flex-col gap-4">
{providers?.map((x) => {
return (
<SSOButton
callbackURL={`${window.location.origin}/social/logIn`}
provider={x}
setLoading={setLoading}
setError={setError}
/>
);
})}
<Button
variant="secondary"
className="relative"
onClick={async (e) => {
e.preventDefault();
setLoading(true);
const { error } = await (
auth.authClient as FullAuthClient
).signIn.magicLink({
email: email,
callbackURL: `${window.location.origin}/magic-link/logIn`,
});
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
setLoading(false);
}}
>
<Image
src="/link.svg"
alt="Link icon"
className="absolute left-3"
width={16}
height={16}
/>
Sign in with magic link
</Button>
<Button
variant="secondary"
className="relative"
onClick={async (e) => {
e.preventDefault();
setLoading(true);
const { data, error } = await (
auth.authClient as FullAuthClient
).emailOtp.sendVerificationOtp({
email: email,
type: "sign-in",
});
setOtpStatus(data?.success ?? false);
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
setLoading(false);
}}
>
<Image
src="/mail.svg"
alt="Mail icon"
className="absolute left-3"
width={16}
height={16}
/>
Sign in with one-time password
</Button>
</div>
<p className="text-sm">
Don't have an account? <Link href="/sign-up">Sign up</Link>
</p>
</div>
</div>
);
}

View File

@@ -1,257 +0,0 @@
import { Button } from "@/components/Button";
import { Loading } from "@/components/Loading";
import { SSOButton } from "@/components/SSOButton";
import { useAuth } from "jazz-react-auth-betterauth";
import type {
FullAuthClient,
SSOProviderType,
} from "jazz-react-auth-betterauth";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
const title = "Sign Up";
export default function SignUpForm({
providers,
}: {
providers?: SSOProviderType[];
}) {
const router = useRouter();
const auth = useAuth();
const [name, setName] = useState<string>("");
const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [confirmPassword, setConfirmPassword] = useState<string>("");
const [otp, setOtp] = useState<string>("");
const [otpStatus, setOtpStatus] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<Error | undefined>(undefined);
return (
<div className="min-h-screen flex flex-col justify-center">
<h1 className="sr-only">{title}</h1>
<div className="max-w-md flex flex-col gap-8 w-full px-6 py-12 mx-auto">
{otpStatus && (
<div>A one-time password has been sent to your email.</div>
)}
{error && <div>{error.message}</div>}
{loading && <Loading />}
<form
className="flex flex-col gap-6"
onSubmit={async (e) => {
e.preventDefault();
setLoading(true);
if (password !== confirmPassword) {
setError(new Error("Passwords do not match"));
setLoading(false);
return;
}
if (!otpStatus) {
await auth.authClient.signUp.email(
{
email,
password,
name,
},
{
onSuccess: async () => {
await auth.signIn();
router.push("/");
},
onError: (error) => {
setError(error.error);
},
},
);
} else {
const { data, error } = await (
auth.authClient as FullAuthClient
).signIn.emailOtp({
email: email,
otp: otp,
});
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
if (data) {
await auth.signIn();
router.push("/");
}
}
setLoading(false);
}}
>
<div>
<label htmlFor="full-name">Full name</label>
<input
id="full-name"
value={name}
disabled={loading}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div>
<label htmlFor="email-address">Email address</label>
<input
id="email-address"
value={email}
disabled={loading}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
{!otpStatus && (
<>
<div>
<label htmlFor="password">Password</label>
<input
id="password"
type="password"
value={password}
disabled={loading}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div>
<label htmlFor="confirm-password">Confirm password</label>
<input
id="confirm-password"
type="password"
value={confirmPassword}
disabled={loading}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
</div>
</>
)}
{otpStatus && (
<div>
<label htmlFor="otp">One-time password</label>
<input
id="otp"
value={otp}
disabled={loading}
onChange={(e) => setOtp(e.target.value)}
/>
</div>
)}
<Button type="submit" disabled={loading}>
Sign up
</Button>
</form>
<div className="flex items-center gap-4">
<hr className="flex-1" />
<p className="text-center">or</p>
<hr className="flex-1" />
</div>
<div className="flex flex-col gap-4">
{providers?.map((x) => {
return (
<SSOButton
callbackURL={`${window.location.origin}/social/signIn`}
provider={x}
setLoading={setLoading}
setError={setError}
/>
);
})}
<Button
variant="secondary"
className="relative"
onClick={async (e) => {
e.preventDefault();
setLoading(true);
const { error } = await (
auth.authClient as FullAuthClient
).signIn.magicLink({
email: email,
callbackURL: `${window.location.origin}/magic-link/signIn`,
});
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
setLoading(false);
}}
>
<Image
src="/link.svg"
alt="Link icon"
className="absolute left-3"
width={16}
height={16}
/>
Sign up with magic link
</Button>
<Button
variant="secondary"
className="relative"
onClick={async (e) => {
e.preventDefault();
setLoading(true);
const { data, error } = await (
auth.authClient as FullAuthClient
).emailOtp.sendVerificationOtp({
email: email,
type: "sign-in",
});
setOtpStatus(data?.success ?? false);
const errorMessage = error?.message ?? error?.statusText;
setError(
error
? {
...error,
name: error.statusText,
message:
errorMessage && errorMessage.length > 0
? errorMessage
: "An error occurred",
}
: undefined,
);
setLoading(false);
}}
>
<Image
src="/mail.svg"
alt="Mail icon"
className="absolute left-3"
width={16}
height={16}
/>
Sign up with one-time password
</Button>
</div>
<p className="text-sm">
Already have an account? <Link href="/sign-in">Sign in</Link>
</p>
</div>
</div>
);
}

View File

@@ -1,21 +0,0 @@
import { useAuth } from "jazz-react-auth-betterauth";
import { useRouter } from "next/navigation";
export default function Page() {
const router = useRouter();
const auth = useAuth();
const searchParams = new URLSearchParams(window.location.search);
const error = searchParams.get("error");
if (!error) {
auth.logIn().then(() => router.push("/"));
return null;
} else {
return (
<div className="min-h-screen flex flex-col justify-center">
<div className="max-w-md flex flex-col gap-8 w-full px-6 py-12 mx-auto">
<div>{error}</div>
</div>
</div>
);
}
}

View File

@@ -1,21 +0,0 @@
import { useAuth } from "jazz-react-auth-betterauth";
import { useRouter } from "next/navigation";
export default function Page() {
const router = useRouter();
const auth = useAuth();
const searchParams = new URLSearchParams(window.location.search);
const error = searchParams.get("error");
if (!error) {
auth.signIn().then(() => router.push("/"));
return null;
} else {
return (
<div className="min-h-screen flex flex-col justify-center">
<div className="max-w-md flex flex-col gap-8 w-full px-6 py-12 mx-auto">
<div>{error}</div>
</div>
</div>
);
}
}

View File

@@ -1,63 +0,0 @@
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);
};

View File

@@ -1,62 +0,0 @@
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 () => {
// Configure Better Auth server
const auth = betterAuth({
appName: appName,
database: new Database("sqlite.db"),
emailAndPassword: {
enabled: true,
sendResetPassword: sendResetPasswordCb,
},
emailVerification: {
sendVerificationEmail: sendVerificationEmailCb,
},
socialProviders: socialProviders,
account: {
accountLinking: {
allowDifferentEmails: true,
allowUnlinkingAll: true,
},
},
user: {
deleteUser: {
enabled: true,
},
},
plugins: [
haveIBeenPwned(),
jazzPlugin(),
magicLink({
sendMagicLink: sendMagicLinkCb,
}),
emailOTP({ sendVerificationOTP: sendEmailOtpCb }),
],
databaseHooks: {
user: {
create: {
after: sendWelcomeEmailCb,
},
},
},
});
// Run database migrations
const migrations = await getMigrations(auth.options);
await migrations.runMigrations();
return auth;
})();

View File

@@ -1,186 +0,0 @@
const apple =
process.env.APPLE_CLIENT_ID &&
process.env.APPLE_CLIENT_SECRET &&
process.env.APPLE_APP_BUNDLE_IDENTIFIER
? {
apple: {
clientId: process.env.APPLE_CLIENT_ID as string,
clientSecret: process.env.APPLE_CLIENT_SECRET as string,
// For native iOS
appBundleIdentifier: process.env
.APPLE_APP_BUNDLE_IDENTIFIER as string,
},
}
: undefined;
const discord =
process.env.DISCORD_CLIENT_ID && process.env.DISCORD_CLIENT_SECRET
? {
discord: {
clientId: process.env.DISCORD_CLIENT_ID as string,
clientSecret: process.env.DISCORD_CLIENT_SECRET as string,
},
}
: undefined;
const facebook =
process.env.FACEBOOK_CLIENT_ID && process.env.FACEBOOK_CLIENT_SECRET
? {
facebook: {
clientId: process.env.FACEBOOK_CLIENT_ID as string,
clientSecret: process.env.FACEBOOK_CLIENT_SECRET as string,
},
}
: undefined;
const github =
process.env.GITHUB_CLIENT_ID && process.env.GITHUB_CLIENT_SECRET
? {
github: {
clientId: process.env.GITHUB_CLIENT_ID as string,
clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
},
}
: undefined;
const google =
process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET
? {
google: {
clientId: process.env.GOOGLE_CLIENT_ID as string,
clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
},
}
: undefined;
const kick =
process.env.KICK_CLIENT_ID && process.env.KICK_CLIENT_SECRET
? {
kick: {
clientId: process.env.KICK_CLIENT_ID as string,
clientSecret: process.env.KICK_CLIENT_SECRET as string,
},
}
: undefined;
const microsoft =
process.env.MICROSOFT_CLIENT_ID && process.env.MICROSOFT_CLIENT_SECRET
? {
microsoft: {
clientId: process.env.MICROSOFT_CLIENT_ID as string,
clientSecret: process.env.MICROSOFT_CLIENT_SECRET as string,
tenantId: "common",
requireSelectAccount: true,
},
}
: undefined;
const tiktok =
process.env.TIKTOK_CLIENT_ID &&
process.env.TIKTOK_CLIENT_SECRET &&
process.env.TIKTOK_CLIENT_KEY
? {
tiktok: {
clientId: process.env.TIKTOK_CLIENT_ID,
clientSecret: process.env.TIKTOK_CLIENT_SECRET,
clientKey: process.env.TIKTOK_CLIENT_KEY,
},
}
: undefined;
const twitch =
process.env.TWITCH_CLIENT_ID && process.env.TWITCH_CLIENT_SECRET
? {
twitch: {
clientId: process.env.TWITCH_CLIENT_ID as string,
clientSecret: process.env.TWITCH_CLIENT_SECRET as string,
},
}
: undefined;
const twitter =
process.env.TWITTER_CLIENT_ID && process.env.TWITTER_CLIENT_SECRET
? {
twitter: {
clientId: process.env.TWITTER_CLIENT_ID,
clientSecret: process.env.TWITTER_CLIENT_SECRET,
},
}
: undefined;
const dropbox =
process.env.DROPBOX_CLIENT_ID && process.env.DROPBOX_CLIENT_SECRET
? {
dropbox: {
clientId: process.env.DROPBOX_CLIENT_ID as string,
clientSecret: process.env.DROPBOX_CLIENT_SECRET as string,
},
}
: undefined;
const linkedin =
process.env.LINKEDIN_CLIENT_ID && process.env.LINKEDIN_CLIENT_SECRET
? {
linkedin: {
clientId: process.env.LINKEDIN_CLIENT_ID as string,
clientSecret: process.env.LINKEDIN_CLIENT_SECRET as string,
},
}
: undefined;
const gitlab =
process.env.GITLAB_CLIENT_ID &&
process.env.GITLAB_CLIENT_SECRET &&
process.env.GITLAB_ISSUER
? {
gitlab: {
clientId: process.env.GITLAB_CLIENT_ID as string,
clientSecret: process.env.GITLAB_CLIENT_SECRET as string,
issuer: process.env.GITLAB_ISSUER as string,
},
}
: undefined;
const reddit =
process.env.REDDIT_CLIENT_ID && process.env.REDDIT_CLIENT_SECRET
? {
reddit: {
clientId: process.env.REDDIT_CLIENT_ID as string,
clientSecret: process.env.REDDIT_CLIENT_SECRET as string,
},
}
: undefined;
const roblox =
process.env.ROBLOX_CLIENT_ID && process.env.ROBLOX_CLIENT_SECRET
? {
roblox: {
clientId: process.env.ROBLOX_CLIENT_ID,
clientSecret: process.env.ROBLOX_CLIENT_SECRET,
},
}
: undefined;
const spotify =
process.env.SPOTIFY_CLIENT_ID && process.env.SPOTIFY_CLIENT_SECRET
? {
spotify: {
clientId: process.env.SPOTIFY_CLIENT_ID as string,
clientSecret: process.env.SPOTIFY_CLIENT_SECRET as string,
},
}
: undefined;
const vk =
process.env.VK_CLIENT_ID && process.env.VK_CLIENT_SECRET
? {
vk: {
clientId: process.env.VK_CLIENT_ID as string,
clientSecret: process.env.VK_CLIENT_SECRET as string,
},
}
: undefined;
export const socialProviders = {
...(apple && { ...apple }),
...(discord && { ...discord }),
...(facebook && { ...facebook }),
...(github && { ...github }),
...(google && { ...google }),
...(kick && { ...kick }),
...(microsoft && { ...microsoft }),
...(tiktok && { ...tiktok }),
...(twitch && { ...twitch }),
...(twitter && { ...twitter }),
...(dropbox && { ...dropbox }),
...(linkedin && { ...linkedin }),
...(gitlab && { ...gitlab }),
...(reddit && { ...reddit }),
...(roblox && { ...roblox }),
...(spotify && { ...spotify }),
...(vk && { ...vk }),
};

View File

@@ -1,28 +0,0 @@
import { randomBytes } from "node:crypto";
import { test } from "@playwright/test";
import { HomePage } from "./pages/HomePage";
test("should sign up, sign in, and logout", async ({ page }) => {
const username = randomBytes(4).toString("hex");
const email = `${username}@example.com`;
const password = randomBytes(8).toString("hex");
// Sign up
await page.goto("/");
const homePage = new HomePage(page);
await homePage.expectLoggedOut();
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.signInLinkButton.click();
await homePage.signInEmail(email, password);
await homePage.expectLoggedIn(username);
// Logout
await homePage.logout();
await homePage.expectLoggedOut();
});

View File

@@ -1,76 +0,0 @@
import { type Page, expect } from "@playwright/test";
export class HomePage {
constructor(public page: Page) {}
usernameInput = this.page.getByRole("textbox", {
name: "Full name",
exact: true,
});
emailInput = this.page.getByRole("textbox", {
name: "Email address",
exact: true,
});
passwordInput = this.page.getByRole("textbox", {
name: "Password",
exact: true,
});
confirmPasswordInput = this.page.getByRole("textbox", {
name: "Confirm password",
exact: true,
});
signUpButton = this.page.getByRole("button", {
name: "Sign up",
exact: true,
});
signInButton = this.page.getByRole("button", {
name: "Sign in",
exact: true,
});
signUpLinkButton = this.page.getByRole("link", {
name: "Sign up",
exact: true,
});
signInLinkButton = this.page.getByRole("link", {
name: "Sign in",
exact: true,
});
logoutButton = this.page.getByRole("button", {
name: "Sign out",
exact: true,
});
async signUpEmail(name: string, email: string, password: string) {
await this.usernameInput.fill(name);
await this.emailInput.fill(email);
await this.passwordInput.fill(password);
await this.confirmPasswordInput.fill(password);
await this.signUpButton.click();
}
async signInEmail(email: string, password: string) {
await this.emailInput.fill(email);
await this.passwordInput.fill(password);
await this.signInButton.click();
}
async logout() {
await this.logoutButton.click();
}
async expectLoggedIn(name?: string) {
await expect(this.logoutButton).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();
}
}
async expectLoggedOut() {
await expect(this.logoutButton).not.toBeVisible();
await expect(this.signInLinkButton).toBeVisible();
await expect(this.signUpLinkButton).toBeVisible();
await expect(this.page.getByText(`Not signed in.`)).toBeVisible();
}
}

View File

@@ -1,27 +0,0 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}

View File

@@ -1,298 +1,5 @@
# chat-rn-expo-clerk
## 1.0.122
### Patch Changes
- Updated dependencies [e5b170f]
- jazz-tools@0.13.31
- jazz-expo@0.13.31
- jazz-react-native-media-images@0.13.31
## 1.0.121
### Patch Changes
- jazz-expo@0.13.30
- jazz-tools@0.13.30
- jazz-react-native-media-images@0.13.30
## 1.0.120
### Patch Changes
- jazz-expo@0.13.29
- jazz-tools@0.13.29
- jazz-react-native-media-images@0.13.29
## 1.0.119
### Patch Changes
- jazz-expo@0.13.28
- jazz-tools@0.13.28
- jazz-react-native-media-images@0.13.28
## 1.0.118
### Patch Changes
- jazz-expo@0.13.27
- jazz-tools@0.13.27
- jazz-react-native-media-images@0.13.27
## 1.0.117
### Patch Changes
- Updated dependencies [ff846d9]
- jazz-tools@0.13.26
- jazz-expo@0.13.26
- jazz-react-native-media-images@0.13.26
## 1.0.116
### Patch Changes
- jazz-expo@0.13.25
- jazz-tools@0.13.25
- jazz-react-native-media-images@0.13.25
## 1.0.115
### Patch Changes
- Updated dependencies [02a240c]
- jazz-tools@0.13.23
- jazz-expo@0.13.23
- jazz-react-native-media-images@0.13.23
## 1.0.114
### Patch Changes
- jazz-expo@0.13.22
## 1.0.113
### Patch Changes
- jazz-expo@0.13.21
- jazz-tools@0.13.21
- jazz-react-native-media-images@0.13.21
## 1.0.112
### Patch Changes
- Updated dependencies [439f0fe]
- jazz-tools@0.13.20
- jazz-expo@0.13.20
- jazz-react-native-media-images@0.13.20
## 1.0.111
### Patch Changes
- Updated dependencies [80530a4]
- jazz-tools@0.13.19
- jazz-expo@0.13.19
- jazz-react-native-media-images@0.13.19
## 1.0.110
### Patch Changes
- Updated dependencies [761759c]
- jazz-tools@0.13.18
- jazz-expo@0.13.18
- jazz-react-native-media-images@0.13.18
## 1.0.109
### Patch Changes
- jazz-expo@0.13.17
- jazz-tools@0.13.17
- jazz-react-native-media-images@0.13.17
## 1.0.108
### Patch Changes
- jazz-expo@0.13.16
- jazz-tools@0.13.16
- jazz-react-native-media-images@0.13.16
## 1.0.107
### Patch Changes
- jazz-expo@0.13.15
- jazz-tools@0.13.15
- jazz-react-native-media-images@0.13.15
## 1.0.106
### Patch Changes
- Updated dependencies [bd94012]
- jazz-expo@0.13.14
- jazz-tools@0.13.14
- jazz-react-native-media-images@0.13.14
## 1.0.105
### Patch Changes
- jazz-expo@0.13.13
- jazz-tools@0.13.13
- jazz-react-native-media-images@0.13.13
## 1.0.104
### Patch Changes
- Updated dependencies [4547525]
- jazz-tools@0.13.12
- jazz-expo@0.13.12
- jazz-react-native-media-images@0.13.12
## 1.0.103
### Patch Changes
- Updated dependencies [17273a6]
- jazz-tools@0.13.11
- jazz-expo@0.13.11
- jazz-react-native-media-images@0.13.11
## 1.0.102
### Patch Changes
- jazz-expo@0.13.10
- jazz-tools@0.13.10
- jazz-react-native-media-images@0.13.10
## 1.0.101
### Patch Changes
- Updated dependencies [a6cf01f]
- jazz-tools@0.13.9
- jazz-expo@0.13.9
- jazz-react-native-media-images@0.13.9
## 1.0.100
### Patch Changes
- jazz-expo@0.13.8
## 1.0.99
### Patch Changes
- Updated dependencies [bc3d7bb]
- jazz-tools@0.13.7
- jazz-expo@0.13.7
- jazz-react-native-media-images@0.13.7
## 1.0.98
### Patch Changes
- Updated dependencies [fe6f561]
- jazz-tools@0.13.5
- jazz-expo@0.13.5
- jazz-react-native-media-images@0.13.5
## 1.0.97
### Patch Changes
- Updated dependencies [3129982]
- Updated dependencies [3129982]
- jazz-expo@0.13.4
- jazz-tools@0.13.4
- jazz-react-native-media-images@0.13.4
## 1.0.96
### Patch Changes
- Updated dependencies [12f8bfa]
- Updated dependencies [bd57177]
- jazz-tools@0.13.3
- jazz-expo@0.13.3
- jazz-react-native-media-images@0.13.3
## 1.0.95
### Patch Changes
- jazz-expo@0.13.2
- jazz-tools@0.13.2
- jazz-react-native-media-images@0.13.2
## 1.0.94
### Patch Changes
- Updated dependencies [63a7aa0]
- jazz-expo@0.13.1
## 1.0.93
### Patch Changes
- Updated dependencies [bce3bcc]
- Updated dependencies [afd1374]
- jazz-expo@0.13.0
- jazz-tools@0.13.0
- jazz-react-native-media-images@0.13.0
## 1.0.92
### Patch Changes
- jazz-react-native@0.12.2
- jazz-react-native-auth-clerk@0.12.2
- jazz-tools@0.12.2
- jazz-react-native-media-images@0.12.2
## 1.0.91
### Patch Changes
- jazz-react-native@0.12.1
- jazz-react-native-auth-clerk@0.12.1
- jazz-tools@0.12.1
- jazz-react-native-media-images@0.12.1
## 1.0.90
### Patch Changes
- Updated dependencies [01523dc]
- Updated dependencies [4ea87dc]
- Updated dependencies [1e6da19]
- Updated dependencies [b6c6a0a]
- jazz-tools@0.12.0
- jazz-react-native@0.12.0
- jazz-react-native-auth-clerk@0.12.0
- jazz-react-native-media-images@0.12.0
## 1.0.89
### Patch Changes
- jazz-react-native@0.11.8
- jazz-react-native-auth-clerk@0.11.8
- jazz-tools@0.11.8
- jazz-react-native-media-images@0.11.8
## 1.0.88
### Patch Changes

View File

@@ -17,7 +17,7 @@ Next, navigate to the specific example project and run the following commands:
```bash
pnpm expo prebuild
pnpx pod-install
npx pod-install
pnpm expo run:ios
```

View File

@@ -23,7 +23,6 @@
},
"package": "com.jazz.chatrnclerk"
},
"newArchEnabled": true,
"plugins": [
"expo-secure-store",
"expo-font",

View File

@@ -2,40 +2,29 @@ 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 { Slot } 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({
const [loaded] = useFonts({
SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
});
useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
}
}, [loaded]);
if (!loaded) {
return null;
}
const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;
if (!publishableKey) {
@@ -44,17 +33,6 @@ export default function RootLayout() {
);
}
useEffect(() => {
if (fontsLoaded) {
} else {
SplashScreen.preventAutoHideAsync();
}
}, [fontsLoaded]);
if (!fontsLoaded) {
return null;
}
return (
<ClerkProvider
tokenCache={tokenCache}
@@ -63,7 +41,7 @@ export default function RootLayout() {
>
<ClerkLoaded>
<JazzAndAuth>
<InitialLayout />
<Slot />
</JazzAndAuth>
</ClerkLoaded>
</ClerkProvider>

View File

@@ -7,7 +7,7 @@ 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 { CoPlainText, Group, ID } from "jazz-tools";
import { Group, ID } from "jazz-tools";
import { useEffect, useLayoutEffect, useState } from "react";
import React, {
SafeAreaView,
@@ -28,7 +28,7 @@ export default function Conversation() {
const { me } = useAccount();
const [chat, setChat] = useState<Chat>();
const [message, setMessage] = useState("");
const loadedChat = useCoState(Chat, chat?.id, { resolve: { $each: true } });
const loadedChat = useCoState(Chat, chat?.id, [{}]);
const navigation = useNavigation();
const [isUploading, setIsUploading] = useState(false);
@@ -71,8 +71,8 @@ export default function Conversation() {
const loadChat = async (chatId: ID<Chat>) => {
try {
const chat = await Chat.load(chatId);
if (chat) setChat(chat);
const chat = await Chat.load(chatId, me, []);
setChat(chat);
} catch (error) {
console.log("Error loading chat", error);
Alert.alert("Error", `Error loading chat: ${error}`);
@@ -82,12 +82,7 @@ export default function Conversation() {
const sendMessage = () => {
if (!chat) return;
if (message.trim()) {
chat.push(
Message.create(
{ text: CoPlainText.create(message, chat._owner) },
chat._owner,
),
);
chat.push(Message.create({ text: message }, { owner: chat._owner }));
setMessage("");
}
};
@@ -109,12 +104,7 @@ export default function Conversation() {
maxSize: 2048,
});
chat.push(
Message.create(
{ text: CoPlainText.create("", chat._owner), image },
chat._owner,
),
);
chat.push(Message.create({ text: "", image }, { owner: chat._owner }));
}
} catch (error) {
Alert.alert("Error", "Failed to upload image");
@@ -175,8 +165,8 @@ export default function Conversation() {
!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")}
{item._edits.text.madeAt.getHours()}:
{item._edits.text.madeAt.getMinutes()}
</Text>
</View>
</View>

View File

@@ -1,17 +1,20 @@
{
"name": "chat-rn-expo-clerk",
"main": "index.js",
"version": "1.0.122",
"version": "1.0.88",
"scripts": {
"build": "expo export -p ios",
"start": "expo start",
"format-and-lint": "biome check .",
"format-and-lint:fix": "biome check . --write",
"android": "expo run:android",
"ios": "expo prebuild && pnpx pod-install && expo run:ios",
"ios": "expo run:ios",
"web": "expo start --web",
"run:ios": "pnpm expo prebuild && npx pod-install && pnpm expo run:ios"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@azure/core-asynciterator-polyfill": "^1.0.2",
"@bacons/text-decoder": "0.0.0",
@@ -20,25 +23,26 @@
"@craftzdog/react-native-buffer": "6.0.5",
"@expo/vector-icons": "^14.0.2",
"@react-native-community/netinfo": "11.4.1",
"@react-navigation/native": "7.0.19",
"@react-navigation/native": "7.0.15",
"@react-navigation/native-stack": "7.2.1",
"clsx": "^2.0.0",
"expo": "^52.0.42",
"expo-build-properties": "~0.13.1",
"expo-clipboard": "~7.0.0",
"expo": "^52.0.39",
"expo-build-properties": "~0.13.2",
"expo-clipboard": "~7.0.1",
"expo-constants": "~17.0.8",
"expo-crypto": "~14.0.2",
"expo-dev-client": "~5.0.16",
"expo-crypto": "~14.0.1",
"expo-dev-client": "~5.0.14",
"expo-file-system": "^18.0.4",
"expo-font": "~13.0.1",
"expo-image-picker": "~16.0.6",
"expo-image-picker": "~16.0.4",
"expo-linking": "~7.0.5",
"expo-router": "~4.0.19",
"expo-secure-store": "~14.0.0",
"expo-splash-screen": "~0.29.22",
"expo-sqlite": "15.1.3",
"expo-router": "~4.0.11",
"expo-secure-store": "~14.0.1",
"expo-splash-screen": "~0.29.16",
"expo-sqlite": "15.1.2",
"expo-status-bar": "~2.0.1",
"expo-web-browser": "~14.0.1",
"expo-system-ui": "~4.0.8",
"expo-web-browser": "~14.0.2",
"jazz-expo": "workspace:*",
"jazz-react-native-media-images": "workspace:*",
"jazz-tools": "workspace:*",
@@ -57,11 +61,14 @@
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/jest": "^29.5.13",
"@types/react": "~18.3.12",
"@types/react-test-renderer": "^19.0.0",
"jest": "^29.6.3",
"jest-expo": "51.0.2",
"react-test-renderer": "18.3.1",
"tailwindcss": "^3.4.17",
"typescript": "5.6.2"
"typescript": "~5.6.2"
},
"private": true
}

View File

@@ -1,5 +1,6 @@
import { useClerk } from "@clerk/clerk-expo";
import { JazzProviderWithClerk } from "jazz-expo/auth/clerk";
// FIXME: why isn't the export working? IDE is fine, Metro doesn't like the non 'dist' import
import { JazzProviderWithClerk } from "jazz-expo/dist/auth/clerk";
import React, { PropsWithChildren } from "react";
import { apiKey } from "./apiKey";

View File

@@ -1,7 +1,7 @@
import { CoList, CoMap, CoPlainText, ImageDefinition, co } from "jazz-tools";
import { CoList, CoMap, ImageDefinition, co } from "jazz-tools";
export class Message extends CoMap {
text = co.ref(CoPlainText);
text = co.string;
image = co.optional.ref(ImageDefinition);
}

View File

@@ -1,263 +1,5 @@
# chat-rn-expo
## 1.0.109
### Patch Changes
- Updated dependencies [e5b170f]
- jazz-tools@0.13.31
- jazz-expo@0.13.31
## 1.0.108
### Patch Changes
- jazz-expo@0.13.30
- jazz-tools@0.13.30
## 1.0.107
### Patch Changes
- jazz-expo@0.13.29
- jazz-tools@0.13.29
## 1.0.106
### Patch Changes
- jazz-expo@0.13.28
- jazz-tools@0.13.28
## 1.0.105
### Patch Changes
- jazz-expo@0.13.27
- jazz-tools@0.13.27
## 1.0.104
### Patch Changes
- Updated dependencies [ff846d9]
- jazz-tools@0.13.26
- jazz-expo@0.13.26
## 1.0.103
### Patch Changes
- jazz-expo@0.13.25
- jazz-tools@0.13.25
## 1.0.102
### Patch Changes
- Updated dependencies [02a240c]
- jazz-tools@0.13.23
- jazz-expo@0.13.23
## 1.0.101
### Patch Changes
- jazz-expo@0.13.22
## 1.0.100
### Patch Changes
- jazz-expo@0.13.21
- jazz-tools@0.13.21
## 1.0.99
### Patch Changes
- Updated dependencies [439f0fe]
- jazz-tools@0.13.20
- jazz-expo@0.13.20
## 1.0.98
### Patch Changes
- Updated dependencies [80530a4]
- jazz-tools@0.13.19
- jazz-expo@0.13.19
## 1.0.97
### Patch Changes
- Updated dependencies [761759c]
- jazz-tools@0.13.18
- jazz-expo@0.13.18
## 1.0.96
### Patch Changes
- jazz-expo@0.13.17
- jazz-tools@0.13.17
## 1.0.95
### Patch Changes
- jazz-expo@0.13.16
- jazz-tools@0.13.16
## 1.0.94
### Patch Changes
- jazz-expo@0.13.15
- jazz-tools@0.13.15
## 1.0.93
### Patch Changes
- Updated dependencies [bd94012]
- jazz-expo@0.13.14
- jazz-tools@0.13.14
## 1.0.92
### Patch Changes
- jazz-expo@0.13.13
- jazz-tools@0.13.13
## 1.0.91
### Patch Changes
- Updated dependencies [4547525]
- jazz-tools@0.13.12
- jazz-expo@0.13.12
## 1.0.90
### Patch Changes
- Updated dependencies [17273a6]
- jazz-tools@0.13.11
- jazz-expo@0.13.11
## 1.0.89
### Patch Changes
- jazz-expo@0.13.10
- jazz-tools@0.13.10
## 1.0.88
### Patch Changes
- Updated dependencies [a6cf01f]
- jazz-tools@0.13.9
- jazz-expo@0.13.9
## 1.0.87
### Patch Changes
- jazz-expo@0.13.8
## 1.0.86
### Patch Changes
- Updated dependencies [bc3d7bb]
- jazz-tools@0.13.7
- jazz-expo@0.13.7
## 1.0.85
### Patch Changes
- Updated dependencies [fe6f561]
- jazz-tools@0.13.5
- jazz-expo@0.13.5
## 1.0.84
### Patch Changes
- Updated dependencies [3129982]
- Updated dependencies [3129982]
- jazz-expo@0.13.4
- jazz-tools@0.13.4
## 1.0.83
### Patch Changes
- Updated dependencies [12f8bfa]
- Updated dependencies [bd57177]
- jazz-tools@0.13.3
- jazz-expo@0.13.3
## 1.0.82
### Patch Changes
- jazz-expo@0.13.2
- jazz-tools@0.13.2
## 1.0.81
### Patch Changes
- Updated dependencies [63a7aa0]
- jazz-expo@0.13.1
## 1.0.80
### Patch Changes
- Updated dependencies [bce3bcc]
- Updated dependencies [afd1374]
- jazz-expo@0.13.0
- jazz-tools@0.13.0
## 1.0.88
### Patch Changes
- jazz-react-native@0.12.2
- jazz-tools@0.12.2
## 1.0.87
### Patch Changes
- jazz-react-native@0.12.1
- jazz-tools@0.12.1
## 1.0.86
### Patch Changes
- Updated dependencies [01523dc]
- Updated dependencies [4ea87dc]
- Updated dependencies [1e6da19]
- Updated dependencies [b6c6a0a]
- jazz-tools@0.12.0
- jazz-react-native@0.12.0
## 1.0.85
### Patch Changes
- jazz-react-native@0.11.8
- jazz-tools@0.11.8
## 1.0.84
### Patch Changes

View File

@@ -1,55 +0,0 @@
const { withBuildProperties } = require("expo-build-properties");
const { withDangerousMod } = require("@expo/config-plugins");
const fs = require("fs/promises");
const path = require("path");
/**
* https://github.com/mrousavy/nitro/issues/422#issuecomment-2545988256
*/
function withCustomIosMod(config) {
// Use expo-build-properties to bump iOS deployment target
config = withBuildProperties(config, { ios: { deploymentTarget: "16.0" } });
// Patch the generated Podfile fallback to ensure platform is always 16.0
config = withDangerousMod(config, [
"ios",
async (modConfig) => {
const podfilePath = path.join(
modConfig.modRequest.platformProjectRoot,
"Podfile",
);
let contents = await fs.readFile(podfilePath, "utf-8");
// Check if the IPHONEOS_DEPLOYMENT_TARGET setting is already present
// We search for the key being assigned, e.g., config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] =
const deploymentTargetSettingExists =
/\.build_settings\s*\[\s*['"]IPHONEOS_DEPLOYMENT_TARGET['"]\s*\]\s*=/.test(
contents,
);
if (!deploymentTargetSettingExists) {
// IPHONEOS_DEPLOYMENT_TARGET setting not found, proceed to add it.
contents = contents.replace(
/(post_install\s+do\s+\|installer\|[\s\S]*?)(\r?\n\s end\s*)$/m,
`$1
# Expo Build Properties: force deployment target
# https://github.com/mrousavy/nitro/issues/422#issuecomment-2545988256
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '16.0'
end
end
$2`,
);
}
await fs.writeFile(podfilePath, contents);
return modConfig;
},
]);
return config;
}
module.exports = ({ config }) => {
return withCustomIosMod(config);
};

View File

@@ -1,6 +1,6 @@
{
"name": "chat-rn-expo",
"version": "1.0.109",
"version": "1.0.79",
"main": "index.js",
"scripts": {
"build": "expo export -p ios",
@@ -8,7 +8,7 @@
"format-and-lint": "biome check .",
"format-and-lint:fix": "biome check . --write",
"android": "expo run:android",
"ios": "expo prebuild && pnpx pod-install && expo run:ios",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
@@ -16,19 +16,20 @@
"@bacons/text-decoder": "0.0.0",
"@craftzdog/react-native-buffer": "6.0.5",
"@react-native-community/netinfo": "11.4.1",
"@react-navigation/native": "7.0.19",
"@react-navigation/native": "7.0.15",
"@react-navigation/native-stack": "7.2.1",
"clsx": "^2.0.0",
"expo": "52.0.42",
"expo-build-properties": "~0.13.1",
"expo-clipboard": "~7.0.0",
"expo": "^52.0.39",
"expo-build-properties": "~0.13.2",
"expo-clipboard": "~7.0.1",
"expo-constants": "~17.0.8",
"expo-dev-client": "~5.0.16",
"expo-dev-client": "~5.0.14",
"expo-linking": "~7.0.5",
"expo-secure-store": "~14.0.0",
"expo-sqlite": "15.1.3",
"expo-secure-store": "~14.0.1",
"expo-sqlite": "15.1.2",
"expo-status-bar": "~2.0.1",
"expo-web-browser": "~14.0.1",
"expo-system-ui": "~4.0.8",
"expo-web-browser": "~14.0.2",
"jazz-expo": "workspace:*",
"jazz-tools": "workspace:*",
"nativewind": "^4.1.21",
@@ -36,8 +37,6 @@
"react-dom": "18.3.1",
"react-native": "0.76.7",
"react-native-get-random-values": "^1.11.0",
"react-native-nitro-modules": "0.25.2",
"react-native-quick-crypto": "1.0.0-beta.15",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "4.4.0",
"react-native-url-polyfill": "^2.0.0",
@@ -47,7 +46,7 @@
"@babel/core": "^7.25.2",
"@types/react": "~18.3.12",
"tailwindcss": "^3.4.17",
"typescript": "5.6.2"
"typescript": "~5.6.2"
},
"private": true
}

View File

@@ -6,7 +6,6 @@ import {
} from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import * as Linking from "expo-linking";
import { RNQuickCrypto } from "jazz-expo/crypto";
import React, { StrictMode, useEffect, useState } from "react";
import HandleInviteScreen from "./invite";
@@ -47,7 +46,6 @@ function App() {
return (
<StrictMode>
<JazzProvider
CryptoProvider={RNQuickCrypto}
sync={{
peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
}}

View File

@@ -20,8 +20,7 @@ import { Chat, Message } from "./schema";
export default function ChatScreen({ navigation }: { navigation: any }) {
const { me, logOut } = useAccount();
const [chatId, setChatId] = useState<ID<Chat>>();
const [chatIdInput, setChatIdInput] = useState<string>();
const loadedChat = useCoState(Chat, chatId, { resolve: { $each: true } });
const loadedChat = useCoState(Chat, chatId, [{}]);
const [message, setMessage] = useState("");
const profile = useCoState(Profile, me._refs.profile?.id, {});
@@ -58,11 +57,27 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
};
const joinChat = () => {
if (chatIdInput) {
setChatId(chatIdInput as ID<Chat>);
} else {
Alert.alert("Error", "Chat ID cannot be empty.");
}
Alert.prompt(
"Join Chat",
"Enter the Chat ID (example: co_zBGEHYvRfGuT2YSBraY3njGjnde)",
[
{
text: "Cancel",
style: "cancel",
},
{
text: "Join",
onPress: (chatId) => {
if (chatId) {
setChatId(chatId as ID<Chat>);
} else {
Alert.alert("Error", "Chat ID cannot be empty.");
}
},
},
],
"plain-text",
);
};
const sendMessage = () => {
@@ -110,12 +125,8 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
!isMe ? "mt-2" : "mt-1",
)}
>
{item?._edits?.text?.madeAt?.getHours().toString().padStart(2, "0")}
:
{item?._edits?.text?.madeAt
?.getMinutes()
.toString()
.padStart(2, "0")}
{item?._edits?.text?.madeAt?.getHours()}:
{item?._edits?.text?.madeAt?.getMinutes()}
</Text>
</View>
</View>
@@ -145,25 +156,9 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
>
<Text className="text-white font-semibold">Start new chat</Text>
</TouchableOpacity>
<Text className="text-m font-bold mt-6">Join existing chat</Text>
<TextInput
className="rounded h-12 p-2 m-2 mt-4 w-80 border border-gray-200 block"
placeholder="Chat ID"
value={chatIdInput ?? ""}
onChangeText={(value) => {
setChatIdInput(value);
}}
textAlignVertical="center"
onSubmitEditing={() => {
if (chatIdInput) {
setChatId(chatIdInput as ID<Chat>);
}
}}
testID="chat-id-input"
/>
<TouchableOpacity
onPress={joinChat}
className="bg-green-500 p-4 rounded-md"
className="bg-green-500 p-4 rounded-md mt-4"
>
<Text className="text-white font-semibold">Join chat</Text>
</TouchableOpacity>
@@ -173,6 +168,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
<FlatList
contentContainerStyle={{
flexGrow: 1,
flex: 1,
gap: 6,
padding: 8,
}}

View File

@@ -9,8 +9,6 @@ appId: com.jazz.chatrn
# - tapOn: "Reload"
# login
- assertVisible: "Logout"
- tapOn: "Logout"
- assertVisible: "Anonymous user"
- runFlow:
label: "Erase existing username"
@@ -44,11 +42,9 @@ appId: com.jazz.chatrn
# logout
- tapOn: "Logout"
- assertVisible: "Anonymous user"
# join chat
- tapOn:
id: "chat-id-input"
- inputText: "co_zFs6KFyhxPw4xtw83tcEMzeHUNv" # Use a static id because maestro doesn't have access to the system clipboard
- tapOn: "Join chat"
- assertVisible: "boorad"
- assertVisible: "bro, low key, it do be like that tho"
# This doesn't work on CI, maybe because Android has a different alert dialog
# - tapOn: "Join chat"
# - inputText: "co_zFs6KFyhxPw4xtw83tcEMzeHUNv" # Use a static id because maestro doesn't have access to the system clipboard
# - pressKey: "enter"
# - assertVisible: "boorad"
# - assertVisible: "bro, low key, it do be like that tho"

View File

@@ -1,304 +0,0 @@
# chat-rn
## 1.0.117
### Patch Changes
- Updated dependencies [e5b170f]
- Updated dependencies [d63716a]
- Updated dependencies [d5edad7]
- jazz-tools@0.13.31
- cojson@0.13.31
- jazz-react-native@0.13.31
- cojson-transport-ws@0.13.31
## 1.0.116
### Patch Changes
- Updated dependencies [07dd2c5]
- cojson@0.13.30
- cojson-transport-ws@0.13.30
- jazz-react-native@0.13.30
- jazz-tools@0.13.30
## 1.0.115
### Patch Changes
- Updated dependencies [eef1a5d]
- Updated dependencies [191ae38]
- Updated dependencies [daee7b9]
- cojson@0.13.29
- jazz-react-native@0.13.29
- cojson-transport-ws@0.13.29
- jazz-tools@0.13.29
## 1.0.114
### Patch Changes
- Updated dependencies [e7ccb2c]
- Updated dependencies [422dbc4]
- cojson@0.13.28
- cojson-transport-ws@0.13.28
- jazz-react-native@0.13.28
- jazz-tools@0.13.28
## 1.0.113
### Patch Changes
- Updated dependencies [6357052]
- cojson@0.13.27
- cojson-transport-ws@0.13.27
- jazz-react-native@0.13.27
- jazz-tools@0.13.27
## 1.0.112
### Patch Changes
- Updated dependencies [ff846d9]
- jazz-tools@0.13.26
- jazz-react-native@0.13.26
## 1.0.111
### Patch Changes
- Updated dependencies [a846e07]
- cojson@0.13.25
- cojson-transport-ws@0.13.25
- jazz-react-native@0.13.25
- jazz-tools@0.13.25
## 1.0.110
### Patch Changes
- Updated dependencies [6b781cf]
- Updated dependencies [02a240c]
- cojson@0.13.23
- jazz-tools@0.13.23
- cojson-transport-ws@0.13.23
- jazz-react-native@0.13.23
## 1.0.109
### Patch Changes
- jazz-react-native@0.13.22
## 1.0.108
### Patch Changes
- Updated dependencies [e14e61f]
- cojson@0.13.21
- cojson-transport-ws@0.13.21
- jazz-react-native@0.13.21
- jazz-tools@0.13.21
## 1.0.107
### Patch Changes
- Updated dependencies [adfc9a6]
- Updated dependencies [1389207]
- Updated dependencies [d6e143e]
- Updated dependencies [439f0fe]
- Updated dependencies [3e6229d]
- cojson@0.13.20
- jazz-tools@0.13.20
- jazz-react-native@0.13.20
- cojson-transport-ws@0.13.20
## 1.0.106
### Patch Changes
- Updated dependencies [80530a4]
- jazz-tools@0.13.19
- jazz-react-native@0.13.19
## 1.0.105
### Patch Changes
- Updated dependencies [9089252]
- Updated dependencies [b470f63]
- Updated dependencies [761759c]
- Updated dependencies [66373ba]
- Updated dependencies [f24cad1]
- cojson@0.13.18
- jazz-tools@0.13.18
- cojson-transport-ws@0.13.18
- jazz-react-native@0.13.18
## 1.0.104
### Patch Changes
- Updated dependencies [9fb98e2]
- Updated dependencies [0b89fad]
- cojson@0.13.17
- cojson-transport-ws@0.13.17
- jazz-react-native@0.13.17
- jazz-tools@0.13.17
## 1.0.103
### Patch Changes
- Updated dependencies [c6fb8dc]
- cojson@0.13.16
- cojson-transport-ws@0.13.16
- jazz-react-native@0.13.16
- jazz-tools@0.13.16
## 1.0.102
### Patch Changes
- Updated dependencies [c712ef2]
- cojson@0.13.15
- cojson-transport-ws@0.13.15
- jazz-react-native@0.13.15
- jazz-tools@0.13.15
## 1.0.101
### Patch Changes
- Updated dependencies [5c2c7d4]
- cojson@0.13.14
- cojson-transport-ws@0.13.14
- jazz-react-native@0.13.14
- jazz-tools@0.13.14
## 1.0.100
### Patch Changes
- Updated dependencies [ec9cb40]
- cojson@0.13.13
- cojson-transport-ws@0.13.13
- jazz-react-native@0.13.13
- jazz-tools@0.13.13
## 1.0.99
### Patch Changes
- Updated dependencies [4547525]
- Updated dependencies [65719f2]
- jazz-tools@0.13.12
- cojson@0.13.12
- jazz-react-native@0.13.12
- cojson-transport-ws@0.13.12
## 1.0.98
### Patch Changes
- Updated dependencies [17273a6]
- Updated dependencies [3396ed4]
- Updated dependencies [17273a6]
- Updated dependencies [267ea4c]
- cojson@0.13.11
- jazz-tools@0.13.11
- cojson-transport-ws@0.13.11
- jazz-react-native@0.13.11
## 1.0.97
### Patch Changes
- Updated dependencies [f837cfe]
- cojson@0.13.10
- cojson-transport-ws@0.13.10
- jazz-react-native@0.13.10
- jazz-tools@0.13.10
## 1.0.96
### Patch Changes
- Updated dependencies [a6cf01f]
- jazz-tools@0.13.9
- jazz-react-native@0.13.9
## 1.0.95
### Patch Changes
- Updated dependencies [bc3d7bb]
- Updated dependencies [4e9aae1]
- Updated dependencies [21c935c]
- Updated dependencies [aa1c80e]
- Updated dependencies [13074be]
- jazz-tools@0.13.7
- cojson@0.13.7
- jazz-react-native@0.13.7
- cojson-transport-ws@0.13.7
## 1.0.94
### Patch Changes
- Updated dependencies [e090b39]
- Updated dependencies [fe6f561]
- cojson@0.13.5
- jazz-tools@0.13.5
- cojson-transport-ws@0.13.5
- jazz-react-native@0.13.5
## 1.0.93
### Patch Changes
- Updated dependencies [3129982]
- jazz-tools@0.13.4
- jazz-react-native@0.13.4
## 1.0.92
### Patch Changes
- Updated dependencies [12f8bfa]
- Updated dependencies [b19cab7]
- Updated dependencies [bd57177]
- jazz-tools@0.13.3
- cojson-transport-ws@0.13.3
- jazz-react-native@0.13.3
## 1.0.91
### Patch Changes
- Updated dependencies [c551839]
- cojson@0.13.2
- cojson-transport-ws@0.13.2
- jazz-react-native@0.13.2
- jazz-tools@0.13.2
## 1.0.90
### Patch Changes
- Updated dependencies [63a7aa0]
- jazz-react-native@0.13.1
## 1.0.89
### Patch Changes
- Updated dependencies [a013538]
- Updated dependencies [bce3bcc]
- Updated dependencies [afd1374]
- Updated dependencies [bce3bcc]
- cojson@0.13.0
- jazz-react-native@0.13.0
- jazz-tools@0.13.0
- cojson-transport-ws@0.13.0

View File

@@ -26,7 +26,7 @@ This will set up and launch the app on iOS. For Android, you can skip `pnpm pods
This was created using the following command:
```bash
pnpx @react-native-community/cli init chat-rn --version 0.76.7 --install-pods true --skip-git-init true --package-name com.chatrn --directory chat-rn
bunx @react-native-community/cli init chat-rn --version 0.78 --install-pods true --skip-git-init true --package-name com.jazz.chatrn --directory chat-rn
```
Then change package name in `package.json`, and begin build instructions above.
Then delete `bun.lock`, change package name in `package.json`, and begin build instructions above.

View File

@@ -1920,72 +1920,72 @@ SPEC CHECKSUMS:
fmt: 10c6e61f4be25dc963c36bd73fc7b1705fe975be
glog: 08b301085f15bcbb6ff8632a8ebaf239aae04e6a
hermes-engine: eb4a80f6bf578536c58a44198ec93a30f6e69218
op-sqlite: 7ecaedd41684cc6c9f6fa267db0da48cbb11dc90
op-sqlite: 17f173ae72a5e9617bf9000c9e0474cc518fdc5c
RCT-Folly: bf5c0376ffe4dd2cf438dcf86db385df9fdce648
RCTDeprecation: 7691283dd69fed46f6653d376de6fa83aaad774c
RCTRequired: eac044a04629288f272ee6706e31f81f3a2b4bfe
RCTTypeSafety: cfe499e127eda6dd46e5080e12d80d0bfe667228
React: 1f3737a983fdd26fb3d388ddbca41a26950fe929
React-callinvoker: 5c15ac628eab5468fe0b4dc453495f4742761f00
React-Core: e467bf49f10da6fe92d915d2311cd0fd9bfbe052
React-CoreModules: 0299b3c0782edd3b37c8445ba07bf18ceb73812d
React-cxxreact: 54e253030b3b82b05575f19a1fb0e25c049f30ba
React-Core: 4b90a977a5b2777fd8f4a8db7325a83431ecd2d8
React-CoreModules: 385bbacfa34ac9208aa24f239a5184fa7ab1cd28
React-cxxreact: 3e09bcdf1f86b931b5e96bf5429d7c274a0ec168
React-debug: 2086b55a5e55fb0abae58c42b8f280ebd708c956
React-defaultsnativemodule: f80f41ea8c1216917fd224b553291360e0e6a175
React-domnativemodule: b14aaaf4afbaa7e1dbc86ad78cbcc71eb59f1faf
React-Fabric: 409ce8a065374d737bdbc0fce506dcdda8f51e88
React-FabricComponents: bd5faafffd07e56cf217d5417e80ec29348c19d9
React-FabricImage: 04d01f3ecfed6121733613a5c794f684e81cb3fb
React-defaultsnativemodule: 491e2541856e3580dae7f29d80754673a2134e48
React-domnativemodule: 4aaed5d5eef3da7d7d49b1f2ae8f422a4d7794b7
React-Fabric: 5b8373d1bd34bf269b13529a0ebee0643165ccf8
React-FabricComponents: 3f8528c3ed060464a120e161ffaef9307a88817b
React-FabricImage: 8efa4e206b1e5cf2e8e1e48fd345619c5c0484f4
React-featureflags: 4503c901bf16b267b689e8a1aed24e951e0b091b
React-featureflagsnativemodule: 79c980bfc96bcdcc9bd793d49fe75bbfb0e417ad
React-graphics: c2febdc940fb3ebdaef082d940b70254ef49c7a1
React-hermes: 91baa15c07e76b0768d6e10f4dac1c080a47eef4
React-idlecallbacksnativemodule: 5daef402290b91e54a884101b032186c03fa1827
React-ImageManager: b258354a48a92168edc41fdc0c14a4310cc4d576
React-jserrorhandler: 45d858315f6474dad3912aadb3f6595004dc5f4f
React-jsi: 87fa67556d7a82125bc77930bf973717fb726d14
React-jsiexecutor: 3a92052dd96cff1cd693fa3ef8d9738b1d05372a
React-jsinspector: 05aff7dd91b0685d351cdeb8c151c9f9ec97accd
React-jsitracing: 419fa21e8543f5a938b11b5a0bfc257b00dac7a5
React-logger: 5cad0c76d056809523289e589309012215a393b5
React-Mapbuffer: a381120aea722d2244d4e4b663a10d4c3b2d4e51
React-microtasksnativemodule: d9b946675010659cddd1c7611c074216579c8ad3
react-native-get-random-values: d16467cf726c618e9c7a8c3c39c31faa2244bbba
react-native-mmkv: b4af3744580f08e1ffc7761103b408d313b2f772
react-native-netinfo: cec9c4e86083cb5b6aba0e0711f563e2fbbff187
react-native-safe-area-context: 0f16e24dc808e9f0ced17f2bdcec692b2376fb68
React-featureflagsnativemodule: 415168f5d23413fd0cc55ad98c41a3f3f135b2a7
React-graphics: c619a6e974baf9a7dbae8442944c7b7408391d46
React-hermes: 24bfc254f1ba83182d4936641898fe963af343fb
React-idlecallbacksnativemodule: 2c2e4c3f561a98c84a7a68c0d1f868b64ca5f839
React-ImageManager: ba9c89729be310413c610444a658fac505253d2c
React-jserrorhandler: bf16ea495377b22223bf93f3ef6d0711b9852613
React-jsi: ede7e8c96f997f8772871c82688cea53c1ffb148
React-jsiexecutor: fc9b287189ce800a92d5ab4e7291508eacaab451
React-jsinspector: fa5e8b22102b599c2bb2aeafebbf957a1ab836da
React-jsitracing: f38c15aeb910bafcf3ba2e24af8c92e6af4ce1d4
React-logger: f9d104eace4ce03d7d5ab96802069d9905082225
React-Mapbuffer: 23ffe602d0f5ca53b861ef8534cb8c63c4479671
React-microtasksnativemodule: 73fdf0c53b6d50d55de2d5bd9abfb8c006b043a4
react-native-get-random-values: 21325b2244dfa6b58878f51f9aa42821e7ba3d06
react-native-mmkv: 21d0f6ed2d9532f2370cef81eca4ccbef7350441
react-native-netinfo: f0a9899081c185db1de5bb2fdc1c88c202a059ac
react-native-safe-area-context: 458f6b948437afcb59198016b26bbd02ff9c3b47
React-nativeconfig: 67fa7a63ea288cb5b1d0dd2deaf240405fec164f
React-NativeModulesApple: 34b7a4d7441a4ee78d18109ff107c1ccf7c074a9
React-perflogger: d1149037ac466ad2141d4ae541ca16cb73b2343b
React-performancetimeline: 6b46b0a17727a3ec22ec4777d156d6b6efc4f8eb
React-NativeModulesApple: cbf1a34443e1f67b56344547f4b0af69e1c685ba
React-perflogger: f02ee21d98773121d77993b3c1a8be445840fae3
React-performancetimeline: 7021d68884291b649b4c39ecb71e0fd3a2e53a59
React-RCTActionSheet: ad84d5a0bd1ad1782f0b78b280c6f329ad79a53a
React-RCTAnimation: 64ed42bb43b33b0d861126f83048429606390903
React-RCTAppDelegate: de8150cd7e748bd7a98ffc05c88f21c668407ab4
React-RCTBlob: e74dfdbbfcd46d9d1eec3b3a0f045e655e3f7861
React-RCTFabric: bc0327e719fb12f969ac0e17485ba274b9c2c335
React-RCTImage: 1b6d8ad60f74a3cec4ee52e0ca55f1773afd03f4
React-RCTLinking: 88b2384d876346fbb16839a60c1d20830b2e95fe
React-RCTNetwork: 88aa473814e796d3a7bc6a0b51e7ae5749bdc243
React-RCTSettings: 0d73a1846aef87ef07c2026c186ea0d80602a130
React-RCTText: bfdb776f849156f895909ee999b4b5f2f9cf9a0b
React-RCTVibration: 81c8bbcc841ce5a7ae6e1bd2ec949b30e58d1fcf
React-RCTAnimation: 388460f7c124c76e337c6646738a83d6ea147095
React-RCTAppDelegate: 4661e2a44f7ce1033bf6f373f7d5368b11f5a2be
React-RCTBlob: 07cccbb74e22ce66745358799f6ab02a5bed2993
React-RCTFabric: 77ebcd07a3c1f3d4c2d2f67f69033a65d16a36a8
React-RCTImage: 8fbdae841ea1217c44f4c413bba2403134b83cd1
React-RCTLinking: c59bf8286ba2cc327b01bb524fb9c16446dc18bc
React-RCTNetwork: 2c137a0aaaed2cf4bb53aff82a2bb8c34f2fbeac
React-RCTSettings: 9fcd32c5b38af6421a3dd20cdd9ebf09df0a9a6d
React-RCTText: 5308618477fec454282809065bd121c2bd3dd5e1
React-RCTVibration: 7b2a186756b5c8e586e3e7948eed4432a93299c0
React-rendererconsistency: 65d4692825fda4d9516924b68c29d0f28da3158c
React-rendererdebug: ab3696594d3506acc22ecea4dd68ac258c529c2d
React-rendererdebug: 0b97f49d44c91862e1576961faf6bde836ed4eb3
React-rncore: 6aca111c05a48c58189a005cb10a7b52780738dc
React-RuntimeApple: 5245e8cf30e417fe3e798ed991b938679656ab8f
React-RuntimeCore: c79d23b31aded614f4afeaac53f4da37c792c362
React-RuntimeApple: aa20633298595444bf2dfbc5246889b4f475b871
React-RuntimeCore: 8ac56cc6d82a1090f1d15d48b487c9a5a1d7d915
React-runtimeexecutor: 732038d7c356ba74132f1d16253a410621d3c2c1
React-RuntimeHermes: b3b1d7fc42d74141a71ae23fedbc4e07e5a7fbd2
React-runtimescheduler: 6e804311c6c9512ffe7f4b68d012767b225c48a1
React-RuntimeHermes: a695d944686adc97f85a1b34c31840a0a39e356c
React-runtimescheduler: 00666e100e35a13f28fb2fdab22817cf62bbd6a3
React-timing: c2915214b94a62bdf77d2965c31f76bc25b362a5
React-utils: 0342746d2cf989cf5e0d1b84c98cfa152edbdf3f
ReactCodegen: ca395237650513af628c32aa1eb8fd586c771b13
ReactCommon: 81e0744ee33adfd6d586141b927024f488bc49ea
RNCClipboard: bdad452a8a44c90098dab5468152a6f72cb689be
RNScreens: 351f431ef2a042a1887d4d90e1c1024b8ae9d123
React-utils: 9f9a6a31d703b136eb1614d914c10a3c96b1e6dd
ReactCodegen: 5d7e2d2948a6629a51a59ebc99f620e2afb13ee5
ReactCommon: 04292c6f596181ebf755e7929d96d2148542b0e8
RNCClipboard: c1dd9a853d56764a04ba278f61cd2cb58a138396
RNScreens: d022507f2b6d76c73335e9e35aedcf7bb2f791b0
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
Yoga: 90d80701b27946c4b23461c00a7207f300a6ff71
PODFILE CHECKSUM: 3c941cec20e8dff1c7d38ce78a515b4cca0ee574
COCOAPODS: 1.16.2
COCOAPODS: 1.15.2

View File

@@ -1,13 +1,14 @@
{
"name": "chat-rn",
"version": "1.0.117",
"main": "index.js",
"private": true,
"version": "1.0.84",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"pods": "pod-install"
"test": "jest",
"pods": "bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install --project-directory=ios"
},
"dependencies": {
"@azure/core-asynciterator-polyfill": "^1.0.2",
@@ -16,11 +17,12 @@
"@op-engineering/op-sqlite": "^11.4.8",
"@react-native-clipboard/clipboard": "1.16.1",
"@react-native-community/netinfo": "11.4.1",
"@react-navigation/native": "7.0.19",
"@react-navigation/native": "7.0.15",
"@react-navigation/native-stack": "7.2.1",
"clsx": "^2.0.0",
"cojson": "workspace:*",
"cojson-transport-ws": "workspace:*",
"jazz-expo": "workspace:*",
"jazz-react-native": "workspace:*",
"jazz-tools": "workspace:*",
"react": "18.3.1",
@@ -46,13 +48,15 @@
"@react-native/typescript-config": "0.76.7",
"@rnx-kit/metro-config": "^2.0.1",
"@rnx-kit/metro-resolver-symlinks": "^0.2.1",
"@types/jest": "^29.5.13",
"@types/react": "^18.3.12",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"pod-install": "^0.3.5",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "18.3.1",
"typescript": "5.6.2"
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"

View File

@@ -1,6 +1,6 @@
import Clipboard from "@react-native-clipboard/clipboard";
import { useAccount, useCoState } from "jazz-react-native";
import { CoPlainText, Group, ID, Profile } from "jazz-tools";
import { Group, ID, Profile } from "jazz-tools";
import { useEffect, useState } from "react";
import {
Alert,
@@ -19,7 +19,7 @@ import { Chat, Message } from "./schema";
export function ChatScreen({ navigation }: { navigation: any }) {
const { me, logOut } = useAccount();
const [chatId, setChatId] = useState<ID<Chat>>();
const loadedChat = useCoState(Chat, chatId, { resolve: { $each: true } });
const loadedChat = useCoState(Chat, chatId, [{}]);
const [message, setMessage] = useState("");
const profile = useCoState(Profile, me._refs.profile?.id, {});
@@ -83,10 +83,7 @@ export function ChatScreen({ navigation }: { navigation: any }) {
if (!loadedChat) return;
if (message.trim()) {
loadedChat.push(
Message.create(
{ text: CoPlainText.create(message, loadedChat?._owner) },
loadedChat?._owner,
),
Message.create({ text: message }, { owner: loadedChat?._owner }),
);
setMessage("");
}
@@ -119,12 +116,8 @@ export function ChatScreen({ navigation }: { navigation: any }) {
!isMe ? styles.timestampOther : styles.timestampMy,
]}
>
{item?._edits?.text?.madeAt?.getHours().toString().padStart(2, "0")}
:
{item?._edits?.text?.madeAt
?.getMinutes()
.toString()
.padStart(2, "0")}
{item?._edits?.text?.madeAt?.getHours()}:
{item?._edits?.text?.madeAt?.getMinutes()}
</Text>
</View>
</View>

View File

@@ -1,7 +1,7 @@
import { CoList, CoMap, CoPlainText, co } from "jazz-tools";
import { CoList, CoMap, co } from "jazz-tools";
export class Message extends CoMap {
text = co.ref(CoPlainText);
text = co.string;
}
export class Chat extends CoList.Of(co.ref(Message)) {}

View File

@@ -1,275 +1,5 @@
# chat-vue
## 0.0.100
### Patch Changes
- Updated dependencies [e5b170f]
- jazz-tools@0.13.31
- jazz-browser@0.13.31
- jazz-vue@0.13.31
## 0.0.99
### Patch Changes
- jazz-browser@0.13.30
- jazz-tools@0.13.30
- jazz-vue@0.13.30
## 0.0.98
### Patch Changes
- jazz-browser@0.13.29
- jazz-tools@0.13.29
- jazz-vue@0.13.29
## 0.0.97
### Patch Changes
- jazz-browser@0.13.28
- jazz-tools@0.13.28
- jazz-vue@0.13.28
## 0.0.96
### Patch Changes
- jazz-browser@0.13.27
- jazz-tools@0.13.27
- jazz-vue@0.13.27
## 0.0.95
### Patch Changes
- Updated dependencies [ff846d9]
- jazz-tools@0.13.26
- jazz-browser@0.13.26
- jazz-vue@0.13.26
## 0.0.94
### Patch Changes
- jazz-browser@0.13.25
- jazz-tools@0.13.25
- jazz-vue@0.13.25
## 0.0.93
### Patch Changes
- Updated dependencies [02a240c]
- jazz-tools@0.13.23
- jazz-browser@0.13.23
- jazz-vue@0.13.23
## 0.0.92
### Patch Changes
- jazz-browser@0.13.21
- jazz-tools@0.13.21
- jazz-vue@0.13.21
## 0.0.91
### Patch Changes
- Updated dependencies [439f0fe]
- jazz-tools@0.13.20
- jazz-browser@0.13.20
- jazz-vue@0.13.20
## 0.0.90
### Patch Changes
- Updated dependencies [80530a4]
- jazz-tools@0.13.19
- jazz-browser@0.13.19
- jazz-vue@0.13.19
## 0.0.89
### Patch Changes
- Updated dependencies [761759c]
- jazz-tools@0.13.18
- jazz-browser@0.13.18
- jazz-vue@0.13.18
## 0.0.88
### Patch Changes
- jazz-browser@0.13.17
- jazz-tools@0.13.17
- jazz-vue@0.13.17
## 0.0.87
### Patch Changes
- jazz-browser@0.13.16
- jazz-tools@0.13.16
- jazz-vue@0.13.16
## 0.0.86
### Patch Changes
- jazz-browser@0.13.15
- jazz-tools@0.13.15
- jazz-vue@0.13.15
## 0.0.85
### Patch Changes
- jazz-browser@0.13.14
- jazz-tools@0.13.14
- jazz-vue@0.13.14
## 0.0.84
### Patch Changes
- jazz-browser@0.13.13
- jazz-tools@0.13.13
- jazz-vue@0.13.13
## 0.0.83
### Patch Changes
- Updated dependencies [4547525]
- Updated dependencies [29e05c4]
- jazz-tools@0.13.12
- jazz-browser@0.13.12
- jazz-vue@0.13.12
## 0.0.82
### Patch Changes
- Updated dependencies [17273a6]
- jazz-tools@0.13.11
- jazz-browser@0.13.11
- jazz-vue@0.13.11
## 0.0.81
### Patch Changes
- jazz-browser@0.13.10
- jazz-tools@0.13.10
- jazz-vue@0.13.10
## 0.0.80
### Patch Changes
- Updated dependencies [a6cf01f]
- jazz-tools@0.13.9
- jazz-browser@0.13.9
- jazz-vue@0.13.9
## 0.0.79
### Patch Changes
- Updated dependencies [bc3d7bb]
- jazz-tools@0.13.7
- jazz-browser@0.13.7
- jazz-vue@0.13.7
## 0.0.78
### Patch Changes
- Updated dependencies [fe6f561]
- jazz-tools@0.13.5
- jazz-browser@0.13.5
- jazz-vue@0.13.5
## 0.0.77
### Patch Changes
- Updated dependencies [3129982]
- jazz-browser@0.13.4
- jazz-tools@0.13.4
- jazz-vue@0.13.4
## 0.0.76
### Patch Changes
- Updated dependencies [12f8bfa]
- Updated dependencies [bd57177]
- jazz-tools@0.13.3
- jazz-browser@0.13.3
- jazz-vue@0.13.3
## 0.0.75
### Patch Changes
- jazz-browser@0.13.2
- jazz-tools@0.13.2
- jazz-vue@0.13.2
## 0.0.74
### Patch Changes
- Updated dependencies [afd1374]
- jazz-tools@0.13.0
- jazz-browser@0.13.0
- jazz-vue@0.13.0
## 0.0.73
### Patch Changes
- Updated dependencies [cc684eb]
- jazz-browser@0.12.2
- jazz-vue@0.12.2
- jazz-tools@0.12.2
## 0.0.72
### Patch Changes
- jazz-browser@0.12.1
- jazz-tools@0.12.1
- jazz-vue@0.12.1
## 0.0.71
### Patch Changes
- Updated dependencies [01523dc]
- Updated dependencies [4ea87dc]
- Updated dependencies [1e6da19]
- Updated dependencies [b6c6a0a]
- Updated dependencies [4c01459]
- jazz-tools@0.12.0
- jazz-vue@0.12.0
- jazz-browser@0.12.0
## 0.0.70
### Patch Changes
- jazz-browser@0.11.8
- jazz-tools@0.11.8
- jazz-vue@0.11.8
## 0.0.69
### Patch Changes

View File

@@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="./public/favicon.ico" type="image/png">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jazz Chat Vue Example</title>
<title>Vite App</title>
</head>
<body>
<div id="app"></div>

View File

@@ -1,11 +1,11 @@
{
"name": "chat-vue",
"version": "0.0.100",
"version": "0.0.69",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build-type-check": "run-p type-check \"build {@}\" --",
"build-type-check": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build": "vite build",
"type-check": "vue-tsc --build --force",
@@ -31,8 +31,8 @@
"npm-run-all2": "^6.2.3",
"postcss": "^8.4.27",
"tailwindcss": "^3.4.17",
"typescript": "5.6.2",
"vite": "6.0.11",
"typescript": "~5.6.2",
"vite": "^6.0.11",
"vite-plugin-vue-devtools": "^7.4.6",
"vue-tsc": "^2.1.6"
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -1,9 +1,9 @@
<template>
<BubbleContainer :fromMe="lastEdit.by?.isMe">
<BubbleBody>{{ msg.text }}</BubbleBody>
<BubbleInfo :by="lastEdit.by?.profile?.name" :madeAt="lastEdit.madeAt" />
</BubbleContainer>
</template>
<BubbleContainer :fromMe="lastEdit.by?.isMe">
<BubbleBody>{{ msg.text }}</BubbleBody>
<BubbleInfo :by="lastEdit.by?.profile?.name" :madeAt="lastEdit.madeAt" />
</BubbleContainer>
</template>
<script lang="ts">
import { computed, defineComponent } from "vue";

View File

@@ -1,7 +1,7 @@
import { CoList, CoMap, CoPlainText, co } from "jazz-tools";
import { CoList, CoMap, co } from "jazz-tools";
export class Message extends CoMap {
text = co.ref(CoPlainText);
text = co.string;
}
export class Chat extends CoList.Of(co.ref(Message)) {}

View File

@@ -25,7 +25,7 @@
</template>
<script lang="ts">
import { CoPlainText, type ID } from "jazz-tools";
import type { ID } from "jazz-tools";
import { useCoState } from "jazz-vue";
import { type PropType, computed, defineComponent, ref } from "vue";
import ChatBody from "../components/ChatBody.vue";
@@ -49,7 +49,7 @@ export default defineComponent({
},
},
setup(props) {
const chat = useCoState(Chat, props.chatId, { resolve: { $each: true } });
const chat = useCoState(Chat, props.chatId, [{}]);
const showNLastMessages = ref(30);
const displayedMessages = computed(() => {
@@ -61,12 +61,7 @@ export default defineComponent({
}
function handleSubmit(text: string) {
chat?.value?.push(
Message.create(
{ text: CoPlainText.create(text, chat.value._owner) },
chat.value._owner,
),
);
chat?.value?.push(Message.create({ text }, { owner: chat.value._owner }));
}
return {

View File

@@ -1,292 +1,5 @@
# jazz-example-chat
## 0.0.198
### Patch Changes
- Updated dependencies [e5b170f]
- jazz-tools@0.13.31
- jazz-inspector@0.13.31
- jazz-react@0.13.31
## 0.0.197
### Patch Changes
- jazz-inspector@0.13.30
- jazz-react@0.13.30
- jazz-tools@0.13.30
## 0.0.196
### Patch Changes
- Updated dependencies [8e5ff13]
- jazz-inspector@0.13.29
- jazz-react@0.13.29
- jazz-tools@0.13.29
## 0.0.195
### Patch Changes
- jazz-inspector@0.13.28
- jazz-react@0.13.28
- jazz-tools@0.13.28
## 0.0.194
### Patch Changes
- jazz-inspector@0.13.27
- jazz-react@0.13.27
- jazz-tools@0.13.27
## 0.0.193
### Patch Changes
- Updated dependencies [ff846d9]
- jazz-tools@0.13.26
- jazz-inspector@0.13.26
- jazz-react@0.13.26
## 0.0.192
### Patch Changes
- jazz-inspector@0.13.25
- jazz-react@0.13.25
- jazz-tools@0.13.25
## 0.0.191
### Patch Changes
- Updated dependencies [02a240c]
- jazz-tools@0.13.23
- jazz-inspector@0.13.23
- jazz-react@0.13.23
## 0.0.190
### Patch Changes
- Updated dependencies [7de210f]
- jazz-inspector@0.13.21
- jazz-react@0.13.21
- jazz-tools@0.13.21
## 0.0.189
### Patch Changes
- Updated dependencies [439f0fe]
- jazz-tools@0.13.20
- jazz-inspector@0.13.20
- jazz-react@0.13.20
## 0.0.188
### Patch Changes
- Updated dependencies [80530a4]
- jazz-tools@0.13.19
- jazz-inspector@0.13.19
- jazz-react@0.13.19
## 0.0.187
### Patch Changes
- Updated dependencies [761759c]
- jazz-tools@0.13.18
- jazz-inspector@0.13.18
- jazz-react@0.13.18
## 0.0.186
### Patch Changes
- jazz-inspector@0.13.17
- jazz-react@0.13.17
- jazz-tools@0.13.17
## 0.0.185
### Patch Changes
- jazz-inspector@0.13.16
- jazz-react@0.13.16
- jazz-tools@0.13.16
## 0.0.184
### Patch Changes
- jazz-inspector@0.13.15
- jazz-react@0.13.15
- jazz-tools@0.13.15
## 0.0.183
### Patch Changes
- jazz-inspector@0.13.14
- jazz-react@0.13.14
- jazz-tools@0.13.14
## 0.0.182
### Patch Changes
- jazz-inspector@0.13.13
- jazz-react@0.13.13
- jazz-tools@0.13.13
## 0.0.181
### Patch Changes
- Updated dependencies [4547525]
- jazz-tools@0.13.12
- jazz-inspector@0.13.12
- jazz-react@0.13.12
## 0.0.180
### Patch Changes
- Updated dependencies [17273a6]
- jazz-tools@0.13.11
- jazz-inspector@0.13.11
- jazz-react@0.13.11
## 0.0.179
### Patch Changes
- jazz-inspector@0.13.10
- jazz-react@0.13.10
- jazz-tools@0.13.10
## 0.0.178
### Patch Changes
- Updated dependencies [a6cf01f]
- jazz-tools@0.13.9
- jazz-inspector@0.13.9
- jazz-react@0.13.9
## 0.0.177
### Patch Changes
- Updated dependencies [22b5c4f]
- Updated dependencies [31ea2ef]
- Updated dependencies [4530c4a]
- Updated dependencies [bc3d7bb]
- jazz-inspector@0.13.7
- jazz-tools@0.13.7
- jazz-react@0.13.7
## 0.0.176
### Patch Changes
- Updated dependencies [c320615]
- jazz-inspector@0.13.6
## 0.0.175
### Patch Changes
- Updated dependencies [08ae9b2]
- Updated dependencies [fe6f561]
- jazz-inspector@0.13.5
- jazz-tools@0.13.5
- jazz-react@0.13.5
## 0.0.174
### Patch Changes
- Updated dependencies [3129982]
- jazz-react@0.13.4
- jazz-tools@0.13.4
- jazz-inspector@0.13.4
## 0.0.173
### Patch Changes
- Updated dependencies [12f8bfa]
- Updated dependencies [bd57177]
- Updated dependencies [017f6c8]
- jazz-tools@0.13.3
- jazz-inspector@0.13.3
- jazz-react@0.13.3
## 0.0.172
### Patch Changes
- Updated dependencies [ae4be2b]
- jazz-inspector@0.13.2
- jazz-react@0.13.2
- jazz-tools@0.13.2
## 0.0.171
### Patch Changes
- Updated dependencies [2796689]
- Updated dependencies [afd1374]
- Updated dependencies [2224ed4]
- jazz-inspector@0.13.0
- jazz-tools@0.13.0
- jazz-react@0.13.0
## 0.0.170
### Patch Changes
- Updated dependencies [8a71835]
- jazz-inspector@0.12.2
- jazz-react@0.12.2
- jazz-tools@0.12.2
## 0.0.169
### Patch Changes
- jazz-inspector@0.12.1
- jazz-react@0.12.1
- jazz-tools@0.12.1
## 0.0.168
### Patch Changes
- Updated dependencies [01523dc]
- Updated dependencies [4ea87dc]
- Updated dependencies [1e6da19]
- Updated dependencies [b6c6a0a]
- Updated dependencies [9a56bb3]
- jazz-tools@0.12.0
- jazz-inspector@0.12.0
- jazz-react@0.12.0
## 0.0.167
### Patch Changes
- Updated dependencies [71b9390]
- jazz-inspector@0.11.8
- jazz-react@0.11.8
- jazz-tools@0.11.8
## 0.0.166
### Patch Changes

View File

@@ -1,7 +1,7 @@
{
"name": "jazz-example-chat",
"private": true,
"version": "0.0.198",
"version": "0.0.166",
"type": "module",
"scripts": {
"dev": "vite",
@@ -31,7 +31,7 @@
"is-ci": "^3.0.1",
"postcss": "^8.4.27",
"tailwindcss": "^3.4.17",
"typescript": "5.6.2",
"vite": "6.0.11"
"typescript": "~5.6.2",
"vite": "^6.0.11"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

View File

@@ -1,5 +1,5 @@
import { createImage, useAccount, useCoState } from "jazz-react";
import { Account, CoPlainText, ID } from "jazz-tools";
import { Account, ID } from "jazz-tools";
import { useState } from "react";
import { Chat, Message } from "./schema.ts";
import {
@@ -16,8 +16,8 @@ import {
} from "./ui.tsx";
export function ChatScreen(props: { chatID: ID<Chat> }) {
const chat = useCoState(Chat, props.chatID, { resolve: { $each: true } });
const account = useAccount();
const chat = useCoState(Chat, props.chatID, [{}]);
const [showNLastMessages, setShowNLastMessages] = useState(30);
if (!chat)
@@ -36,15 +36,7 @@ export function ChatScreen(props: { chatID: ID<Chat> }) {
}
createImage(file, { owner: chat._owner }).then((image) => {
chat.push(
Message.create(
{
text: CoPlainText.create(file.name, chat._owner),
image: image,
},
chat._owner,
),
);
chat.push(Message.create({ text: file.name, image: image }, chat._owner));
});
};
@@ -74,12 +66,7 @@ export function ChatScreen(props: { chatID: ID<Chat> }) {
<TextInput
onSubmit={(text) => {
chat.push(
Message.create(
{ text: CoPlainText.create(text, chat._owner) },
chat._owner,
),
);
chat.push(Message.create({ text }, { owner: chat._owner }));
}}
/>
</InputBar>
@@ -88,7 +75,7 @@ export function ChatScreen(props: { chatID: ID<Chat> }) {
}
function ChatBubble(props: { me: Account; msg: Message }) {
if (!props.me.canRead(props.msg) || !props.msg.text?.toString()) {
if (!props.me.canRead(props.msg)) {
return (
<BubbleContainer fromMe={false}>
<BubbleBody fromMe={false}>

View File

@@ -1,7 +1,7 @@
import { CoList, CoMap, CoPlainText, ImageDefinition, co } from "jazz-tools";
import { CoList, CoMap, ImageDefinition, co } from "jazz-tools";
export class Message extends CoMap {
text = co.ref(CoPlainText);
text = co.string;
image = co.optional.ref(ImageDefinition);
}

Some files were not shown because too many files have changed in this diff Show More