diff --git a/.github/workflows/deploy-server.yml b/.github/workflows/deploy-server.yml new file mode 100644 index 0000000..757f167 --- /dev/null +++ b/.github/workflows/deploy-server.yml @@ -0,0 +1,33 @@ +name: "Deploy Server" + +on: + push: + branches: + - main + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: pnpm/action-setup@v3 + with: + version: 9 + - name: Use Node.js + uses: actions/setup-node@v3 + with: + node-version: 20 + cache: "pnpm" + - name: Install dependencies + run: pnpm install --frozen-lockfile + working-directory: ./apps/server + - name: Generate Prisma Client + working-directory: ./apps/server + run: pnpm prisma generate + - name: Build + working-directory: ./apps/server + run: pnpm build + - uses: superfly/flyctl-actions/setup-flyctl@master + - run: flyctl deploy --remote-only ./apps/server/build + env: + FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }} diff --git a/.github/workflows/deploy-web-client.yml b/.github/workflows/deploy-web-client.yml new file mode 100644 index 0000000..866c2c0 --- /dev/null +++ b/.github/workflows/deploy-web-client.yml @@ -0,0 +1,40 @@ +name: Deploy Web +env: + VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} +on: + push: + branches: + - main +jobs: + Deploy: + defaults: + run: + working-directory: ./apps/app + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: pnpm/action-setup@v3 + with: + version: 9 + - name: Use Node.js + uses: actions/setup-node@v3 + with: + node-version: 20 + cache: "pnpm" + - name: Install dependencies + run: pnpm install --frozen-lockfile + - name: Generate Prisma Client + run: cd ../server && pnpm prisma generate + - name: Setup production .env + run: cp .env.production .env + - name: Pre-build Tailwind CSS # fix for https://github.com/nativewind/nativewind/issues/591#issuecomment-1939369454 + run: npx tailwindcss -i ./src/global.css -o ./node_modules/.cache/nativewind/global.css.web.css + - name: Install Vercel CLI + run: npm install --global vercel@latest + - name: Pull Vercel Environment Information + run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }} + - name: Build Project Artifacts + run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }} + - name: Deploy Project Artifacts to Vercel + run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }} diff --git a/.github/workflows/tests-and-check.yml b/.github/workflows/tests-and-check.yml new file mode 100644 index 0000000..312a65c --- /dev/null +++ b/.github/workflows/tests-and-check.yml @@ -0,0 +1,40 @@ +name: Tests and Checks + +on: [push] + +jobs: + typecheck: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: pnpm/action-setup@v3 + with: + version: 9 + - name: Install dependencies + run: pnpm install --frozen-lockfile + - name: Generate Prisma Client + run: cd apps/server && pnpm prisma generate + - name: Typecheck + run: pnpm ts:check + lint: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: pnpm/action-setup@v3 + with: + version: 9 + - name: Install dependencies + run: pnpm install --frozen-lockfile + - name: Linting + run: pnpm lint + test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: pnpm/action-setup@v3 + with: + version: 9 + - name: Install dependencies + run: pnpm install --frozen-lockfile + - name: Test + run: pnpm test diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b855278 --- /dev/null +++ b/.gitignore @@ -0,0 +1,38 @@ +# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files + +# dependencies +node_modules/ + +# Expo +.expo/ +dist/ +web-build/ + +ios +android + +# Native +*.orig.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision + +# Metro +.metro-health-check* + +# debug +npm-debug.* +yarn-debug.* +yarn-error.* + +# macOS +.DS_Store +*.pem + +# local env files +.env*.local + +# typescript +*.tsbuildinfo diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..cc8df9d --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +node-linker=hoisted \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..03302b0 --- /dev/null +++ b/README.md @@ -0,0 +1,117 @@ +## Development + +### Setup + +```sh +pnpm install +docker-compose up +``` + +```sh +# in another tab +cd apps/server +cp .env.example .env +npx @serenity-kit/opaque@latest create-server-setup +# copy the string value as OPAQUE_SERVER_SETUP .env +pnpm prisma migrate dev +pnpm dev +``` + +```sh +# in another tab +cd apps/app +cp .env.example .env +pnpm dev +``` + +### Updating the Database Schema + +1. Make changes +2. Run `pnpm prisma migrate dev` +3. Run `pnpm prisma generate` +4. Restart the TS server in your editor + +### DB UI + +```bash +cd apps/backend +pnpm prisma studio +``` + +### Wipe all local data + +```bash +cd apps/backend +pnpm prisma migrate reset +``` + +## EAS Build + +Simulator build: + +```sh +eas build --profile development-simulator --platform ios +``` + +Internal distribution build: + +```sh +eas build --profile preview --platform ios +``` + +## Setup Production Environment and CI + +see [docs/setup-production-environment-and-ci.md](docs/setup-production-environment-and-ci.md) + +## Connect to the Production Database + +```sh +fly postgres connect -a +``` + +```sh +# list dbs +\list +# connect to a db +\c ; +# list tables +\dt +# query a table +SELECT * FROM "Document"; +``` + +## Architecture + +### Authentication + +Users use OPAQUE to authenticate with the server. After Login the server creates a session and stores it as HTTP-Only Cookie. The session is used to authenticate the user for authenticated requests and also to connect to the Websocket. + +### Invitation + +Users can invite other users to a list via an invitation link. + +Creating an invitation link: + +```ts +const seed = generateSeed(); +const (privKey, pubKey) = generateKeyPair(seed); +const listKeyLockbox = encrypt(pubKey, listKey); +const invitation = { + listKeyLockbox, +}; +const encryptedInvitation = encrypt(invitation, sessionKey); +``` + +InvitationLink: `${token}/#accessKey=${seed}` + +Accepting an invitation: + +```ts +const (privKey, pubKey) = generateKeyPair(seed); +const encryptedInvitation getInvitationByToken(token); +const invitation = decrypt(encryptedInvitation, sessionKey) +const listKey = decrypt(invitation.listKeyLockbox, privKey) +acceptInvitation(listId, listKey) +``` + +TODO better version where the token is also never exposed to the network so not even the ciphertext can be retrieved by a network attacker diff --git a/apps/app/.env b/apps/app/.env new file mode 100644 index 0000000..51a266b --- /dev/null +++ b/apps/app/.env @@ -0,0 +1,3 @@ +EXPO_PUBLIC_API_ENDPOINT=http://localhost:3030/api +EXPO_PUBLIC_SECSYNC_WS_ENDPOINT=ws://localhost:3030 +EXPO_PUBLIC_WEB_APP_ORIGIN=http://localhost:8081 \ No newline at end of file diff --git a/apps/app/.env.example b/apps/app/.env.example new file mode 100644 index 0000000..51a266b --- /dev/null +++ b/apps/app/.env.example @@ -0,0 +1,3 @@ +EXPO_PUBLIC_API_ENDPOINT=http://localhost:3030/api +EXPO_PUBLIC_SECSYNC_WS_ENDPOINT=ws://localhost:3030 +EXPO_PUBLIC_WEB_APP_ORIGIN=http://localhost:8081 \ No newline at end of file diff --git a/apps/app/.env.production b/apps/app/.env.production new file mode 100644 index 0000000..681e621 --- /dev/null +++ b/apps/app/.env.production @@ -0,0 +1,3 @@ +EXPO_PUBLIC_API_ENDPOINT=https://lini-api-production.fly.dev/api +EXPO_PUBLIC_SECSYNC_WS_ENDPOINT=wss://lini-api-production.fly.dev +EXPO_PUBLIC_WEB_APP_ORIGIN=https://www.lini.app diff --git a/apps/app/.gitignore b/apps/app/.gitignore new file mode 100644 index 0000000..2f62467 --- /dev/null +++ b/apps/app/.gitignore @@ -0,0 +1,16 @@ +node_modules/ +.expo/ +dist/ +npm-debug.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision +*.orig.* +web-build/ + +# macOS +.DS_Store + +.vercel diff --git a/apps/app/app.json b/apps/app/app.json new file mode 100644 index 0000000..13a6001 --- /dev/null +++ b/apps/app/app.json @@ -0,0 +1,41 @@ +{ + "expo": { + "name": "Lini", + "slug": "lini", + "owner": "naisho-gmbh", + "scheme": "acme", + "version": "1.0.0", + "orientation": "portrait", + "icon": "./assets/images/icon.png", + "userInterfaceStyle": "dark", + "splash": { + "image": "./assets/images/splash.png", + "resizeMode": "contain", + "backgroundColor": "#ffffff" + }, + "assetBundlePatterns": ["**/*"], + "ios": { + "supportsTablet": true, + "bundleIdentifier": "app.lini.app" + }, + "android": { + "adaptiveIcon": { + "foregroundImage": "./assets/images/adaptive-icon.png", + "backgroundColor": "#ffffff" + } + }, + "web": { + "favicon": "./assets/images/favicon.png", + "bundler": "metro" + }, + "plugins": ["expo-router", "expo-secure-store"], + "extra": { + "router": { + "origin": false + }, + "eas": { + "projectId": "59758628-b173-4b85-9fab-f3593b274895" + } + } + } +} diff --git a/apps/app/assets/fonts/SpaceMono-Regular.ttf b/apps/app/assets/fonts/SpaceMono-Regular.ttf new file mode 100755 index 0000000..28d7ff7 Binary files /dev/null and b/apps/app/assets/fonts/SpaceMono-Regular.ttf differ diff --git a/apps/app/assets/images/adaptive-icon.png b/apps/app/assets/images/adaptive-icon.png new file mode 100644 index 0000000..03d6f6b Binary files /dev/null and b/apps/app/assets/images/adaptive-icon.png differ diff --git a/apps/app/assets/images/favicon.png b/apps/app/assets/images/favicon.png new file mode 100644 index 0000000..82d96f7 Binary files /dev/null and b/apps/app/assets/images/favicon.png differ diff --git a/apps/app/assets/images/icon.png b/apps/app/assets/images/icon.png new file mode 100644 index 0000000..f5ec157 Binary files /dev/null and b/apps/app/assets/images/icon.png differ diff --git a/apps/app/assets/images/splash.png b/apps/app/assets/images/splash.png new file mode 100644 index 0000000..d077e59 Binary files /dev/null and b/apps/app/assets/images/splash.png differ diff --git a/apps/app/babel.config.js b/apps/app/babel.config.js new file mode 100644 index 0000000..02f1d10 --- /dev/null +++ b/apps/app/babel.config.js @@ -0,0 +1,11 @@ +/* eslint-disable unicorn/prefer-module */ +module.exports = (api) => { + api.cache(true); + return { + presets: [ + ["babel-preset-expo", { jsxImportSource: "nativewind" }], + "nativewind/babel", + ], + plugins: ["react-native-reanimated/plugin"], + }; +}; diff --git a/apps/app/components.json b/apps/app/components.json new file mode 100644 index 0000000..db0081c --- /dev/null +++ b/apps/app/components.json @@ -0,0 +1,7 @@ +{ + "platforms": "universal", + "aliases": { + "components": "~/components", + "lib": "~/lib" + } +} \ No newline at end of file diff --git a/apps/app/eas.json b/apps/app/eas.json new file mode 100644 index 0000000..768d4c7 --- /dev/null +++ b/apps/app/eas.json @@ -0,0 +1,36 @@ +{ + "cli": { + "version": ">= 7.8.5" + }, + "build": { + "development": { + "developmentClient": true, + "distribution": "internal" + }, + "development-simulator": { + "developmentClient": true, + "distribution": "internal", + "ios": { + "simulator": true + } + }, + "preview": { + "distribution": "internal", + "env": { + "EXPO_PUBLIC_API_ENDPOINT": "https://lini-api-production.fly.dev/api", + "EXPO_PUBLIC_SECSYNC_WS_ENDPOINT": "wss://lini-api-production.fly.dev", + "EXPO_PUBLIC_WEB_APP_ORIGIN": "https://www.lini.app" + } + }, + "production": { + "env": { + "EXPO_PUBLIC_API_ENDPOINT": "https://lini-api-production.fly.dev/api", + "EXPO_PUBLIC_SECSYNC_WS_ENDPOINT": "wss://lini-api-production.fly.dev", + "EXPO_PUBLIC_WEB_APP_ORIGIN": "https://www.lini.app" + } + } + }, + "submit": { + "production": {} + } +} diff --git a/apps/app/global.d.ts b/apps/app/global.d.ts new file mode 100644 index 0000000..a13e313 --- /dev/null +++ b/apps/app/global.d.ts @@ -0,0 +1 @@ +/// diff --git a/apps/app/metro.config.js b/apps/app/metro.config.js new file mode 100644 index 0000000..a67f5c4 --- /dev/null +++ b/apps/app/metro.config.js @@ -0,0 +1,38 @@ +/* eslint-disable unicorn/prefer-module */ + +// Learn more https://docs.expo.io/guides/customizing-metro +const { getDefaultConfig } = require("expo/metro-config"); +const { withNativeWind } = require("nativewind/metro"); + +const path = require("node:path"); + +// from https://github.com/nativewind/nativewind/blob/main/examples/expo-router/metro.config.js +/** @type {import('expo/metro-config').MetroConfig} */ +const config = getDefaultConfig(__dirname, { isCSSEnabled: true }); + +config.resolver.unstable_enableSymlinks = true; +config.resolver.unstable_enablePackageExports = true; + +//.needed for zustand https://github.com/pmndrs/zustand/discussions/1967#discussioncomment-9578159 +config.resolver.unstable_conditionNames = [ + "browser", + "require", + "react-native", +]; + +// Needed for monorepo setup (can be removed in standalone projects) +const projectRoot = __dirname; +const monorepoRoot = path.resolve(projectRoot, "../.."); + +config.watchFolders = [monorepoRoot]; + +config.resolver.nodeModulesPaths = [ + path.resolve(projectRoot, "node_modules"), + path.resolve(monorepoRoot, "node_modules"), +]; + +module.exports = withNativeWind(config, { + input: "./src/global.css", + // from https://github.com/nativewind/nativewind/blob/main/examples/expo-router/metro.config.js + inlineRem: false, +}); diff --git a/apps/app/package.json b/apps/app/package.json new file mode 100644 index 0000000..16fd0ca --- /dev/null +++ b/apps/app/package.json @@ -0,0 +1,72 @@ +{ + "name": "lini", + "main": "src/AppEntry.ts", + "version": "1.0.0", + "scripts": { + "dev": "EXPO_USE_METRO_WORKSPACE_ROOT=1 expo start --dev-client", + "ts:check": "tsc --noEmit", + "test": "jest", + "lint": "echo \"Lint not setup\" # expo lint" + }, + "jest": { + "preset": "jest-expo/web" + }, + "dependencies": { + "@expo/vector-icons": "^14.0.0", + "@radix-ui/react-checkbox": "^1.0.4", + "@radix-ui/react-popover": "^1.0.7", + "@react-navigation/drawer": "^6.6.15", + "@react-navigation/native": "^6.0.2", + "@tanstack/react-query": "^5.40.0", + "@trpc/client": "^11.0.0-rc.382", + "@trpc/react-query": "^11.0.0-rc.382", + "babel-preset-expo": "~11.0.0", + "canonicalize": "^2.0.0", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.1", + "expo": "~51.0.9", + "expo-constants": "~16.0.2", + "expo-crypto": "~13.0.2", + "expo-dev-client": "~4.0.15", + "expo-font": "~12.0.6", + "expo-linking": "~6.3.1", + "expo-router": "~3.5.14", + "expo-secure-store": "~13.0.1", + "expo-splash-screen": "~0.27.4", + "expo-standard-web-crypto": "^1.8.1", + "expo-status-bar": "~1.12.1", + "expo-system-ui": "~3.0.4", + "lucide-react-native": "^0.381.0", + "nativewind": "^4.0.36", + "position-strings": "^2.0.1", + "react": "18.2.0", + "react-dom": "18.2.0", + "react-native": "0.74.1", + "react-native-gesture-handler": "~2.16.1", + "react-native-libsodium": "^1.4.0", + "react-native-mmkv": "^2.12.2", + "react-native-opaque": "^0.3.1", + "react-native-reanimated": "~3.10.1", + "react-native-safe-area-context": "4.10.1", + "react-native-screens": "3.31.1", + "react-native-svg": "15.2.0", + "react-native-web": "~0.19.10", + "secsync": "^0.5.0", + "secsync-react-yjs": "^0.5.0", + "tailwind-merge": "^2.3.0", + "tailwindcss": "^3.4.0", + "tailwindcss-animate": "^1.0.7", + "yjs": "^13.6.15", + "zustand": "^4.5.2" + }, + "devDependencies": { + "@babel/core": "^7.20.0", + "@babel/runtime": "^7.24.7", + "@types/jest": "^29.5.12", + "@types/react": "~18.2.45", + "jest": "^29.2.1", + "jest-expo": "~51.0.1", + "typescript": "~5.3.3" + }, + "private": true +} diff --git a/apps/app/src/AppEntry.ts b/apps/app/src/AppEntry.ts new file mode 100644 index 0000000..460fdbd --- /dev/null +++ b/apps/app/src/AppEntry.ts @@ -0,0 +1,3 @@ +import "./polyfill.ts"; +// must to be after the polyfill +import "expo-router/entry"; diff --git a/apps/app/src/app/(app)/_layout.tsx b/apps/app/src/app/(app)/_layout.tsx new file mode 100644 index 0000000..fbd968a --- /dev/null +++ b/apps/app/src/app/(app)/_layout.tsx @@ -0,0 +1,56 @@ +import { DrawerActions } from "@react-navigation/native"; +import { Redirect, useNavigation, usePathname } from "expo-router"; +import { Drawer } from "expo-router/drawer"; +import { Pressable, useWindowDimensions } from "react-native"; +import { GestureHandlerRootView } from "react-native-gesture-handler"; +import { PanelLeft } from "~/lib/icons/PanelLeft"; +import { DrawerContent } from "../../components/drawerContent"; +import { useIsPermanentLeftDrawer } from "../../hooks/useIsPermanentDrawer"; +import { getSessionKey } from "../../utils/sessionKeyStorage"; + +export default function Layout() { + const isPermanentLeftDrawer = useIsPermanentLeftDrawer(); + const { width: fullWidth } = useWindowDimensions(); + const pathname = usePathname(); + + const sessionKey = getSessionKey(); + if (!sessionKey) { + const redirect = pathname !== "/" ? "?redirect=" + pathname : ""; + return ; + } + + return ( + + { + const navigation = useNavigation(); + + return ( + + navigation.dispatch(DrawerActions.toggleDrawer()) + } + > + + + ); + }, + headerTitle: () => null, + // drawerStyle: { + // width: 240, + // }, + }} + /> + + ); +} diff --git a/apps/app/src/app/(app)/index.tsx b/apps/app/src/app/(app)/index.tsx new file mode 100644 index 0000000..b9c7510 --- /dev/null +++ b/apps/app/src/app/(app)/index.tsx @@ -0,0 +1,13 @@ +import * as React from "react"; +import { View } from "react-native"; +import { Text } from "~/components/ui/text"; + +const Home: React.FC = () => { + return ( + + Welcome 🤗 + + ); +}; + +export default Home; diff --git a/apps/app/src/app/(app)/list-invitation/[token].tsx b/apps/app/src/app/(app)/list-invitation/[token].tsx new file mode 100644 index 0000000..cadb133 --- /dev/null +++ b/apps/app/src/app/(app)/list-invitation/[token].tsx @@ -0,0 +1,81 @@ +import { router, useLocalSearchParams } from "expo-router"; +import { Alert } from "react-native"; +import * as sodium from "react-native-libsodium"; +import { Button } from "~/components/ui/button"; +import { Card } from "~/components/ui/card"; +import { Text } from "~/components/ui/text"; +import { useLocker } from "../../../hooks/useLocker"; +import { acceptInvitation } from "../../../utils/acceptInvitation"; +import { getHashParameter } from "../../../utils/getHashParam"; +import { getSessionKey } from "../../../utils/sessionKeyStorage"; +import { trpc } from "../../../utils/trpc"; + +const Invitation: React.FC = () => { + const acceptDocumentInvitationMutation = + trpc.acceptDocumentInvitation.useMutation(); + const { token: rawToken } = useLocalSearchParams(); + const token = typeof rawToken === "string" ? rawToken : ""; + const key = getHashParameter("key"); + const { addItem } = useLocker(); + + const documentInvitationByTokenQuery = + trpc.documentInvitationByToken.useQuery(token); + + const acceptInvitationAndSend = () => { + if (!documentInvitationByTokenQuery.data) { + Alert.alert("Invitation not found."); + return; + } + + const sessionKey = getSessionKey(); + if (!sessionKey) { + Alert.alert("Session key not found."); + return; + } + + if (!key) { + Alert.alert("Key is not available in the Invitation URL."); + return; + } + + const { listKey } = acceptInvitation({ + ciphertext: documentInvitationByTokenQuery.data.ciphertext, + nonce: documentInvitationByTokenQuery.data.nonce, + seed: key, + sessionKey: sodium.from_base64(sessionKey).slice(0, 32), + }); + + acceptDocumentInvitationMutation.mutate( + { token }, + { + onError: () => { + alert("Failed to accept invitation. Please try again."); + }, + onSuccess: async (data) => { + if (data?.documentId) { + await addItem({ + type: "document", + documentId: data.documentId, + value: sodium.to_base64(listKey), + }); + router.navigate({ pathname: `/list/${data.documentId}` }); + } + }, + } + ); + }; + + return ( + +

Accept the invitation to this list.

+ +
+ ); +}; + +export default Invitation; diff --git a/apps/app/src/app/(app)/list/[listId].tsx b/apps/app/src/app/(app)/list/[listId].tsx new file mode 100644 index 0000000..e3e955f --- /dev/null +++ b/apps/app/src/app/(app)/list/[listId].tsx @@ -0,0 +1,38 @@ +import { useLocalSearchParams } from "expo-router"; +import React from "react"; +import { View } from "react-native"; +import sodium from "react-native-libsodium"; +import { Text } from "~/components/ui/text"; +import Document from "../../../components/document"; +import { useLocker } from "../../../hooks/useLocker"; + +const List: React.FC = () => { + const { listId } = useLocalSearchParams(); + const documentId = typeof listId === "string" ? listId : null; + + const { content } = useLocker(); + + if (!documentId) { + return ( + + Document not found + + ); + } + + const documentKeyBase64 = content[`document:${documentId}`]; + + if (!documentKeyBase64) { + return ( + + Loading document key … + + ); + } + + const documentKey = sodium.from_base64(documentKeyBase64); + + return ; +}; + +export default List; diff --git a/apps/app/src/app/+html.tsx b/apps/app/src/app/+html.tsx new file mode 100644 index 0000000..2d6b247 --- /dev/null +++ b/apps/app/src/app/+html.tsx @@ -0,0 +1,42 @@ +import { ScrollViewStyleReset } from "expo-router/html"; +import { type PropsWithChildren } from "react"; + +/** + * This file is web-only and used to configure the root HTML for every web page during static rendering. + * The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs. + */ +export default function Root({ children }: PropsWithChildren) { + return ( + + + + + + + {/* + Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. + However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line. + */} + + + {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */} +