fix(better-auth): add some docs, fix some starter missing deps, fix p…

…assing jwt to zero

apps/chat/package.json

@@ -32,7 +32,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@docsearch/react": "^3.6.1",
     "@floating-ui/react": "^0.27.0",
-    "@rocicorp/zero": "^0.9.2024121900",
+    "@rocicorp/zero": "0.9.2024121900",
     "@tamagui/helpers-icon": "^1.120.2",
     "@tamagui/linear-gradient": "^1.120.2",
     "@tamagui/lucide-icons": "^1.120.2",

apps/chat/src/helpers/pluralize.ts

@@ -0,0 +1,19 @@
+let pluralRules = new Intl.PluralRules('en-US')
+
+export function pluralize(count: number, singular: string, plural: string) {
+  const grammaticalNumber = pluralRules.select(count)
+  switch (grammaticalNumber) {
+    case 'one':
+      return `${count} ${singular}`
+    case 'other':
+      return `${count} ${plural}`
+    default:
+      throw new Error(
+        `Can't pluralize: ${grammaticalNumber} for ${count} / ${singular} / ${plural}`
+      )
+  }
+}
+
+export function setPluralizeLocale(locale: Intl.LocalesArgument) {
+  pluralRules = new Intl.PluralRules(locale)
+}

apps/chat/src/interface/settings/ServerSettingsPane.tsx

@@ -7,7 +7,7 @@ import { DevTools } from '~/dev/DevTools'
 import { randomID } from '~/helpers/randomID'
 import { hiddenPanelWidth } from '~/interface/settings/constants'
 import { useCurrentServer, useCurrentServerRoles } from '~/state/server'
-import type { Role, Server } from '~/zero/schema'
+import type { Role, RoleWithRelations, Server, User } from '~/zero/schema'
 import { mutate } from '~/zero/zero'
 import { Avatar } from '../Avatar'
 import { ButtonSimple } from '../ButtonSimple'
@@ -165,11 +165,14 @@ const SettingsServerPermissions = ({ server }: { server: Server }) => {
   )
 }
 
-const RoleListItem = ({ role, ...rest }: Omit<EditableListItemProps, 'role'> & { role?: Role }) => {
+const RoleListItem = ({
+  role,
+  ...rest
+}: Omit<EditableListItemProps, 'role'> & { role?: RoleWithRelations }) => {
   return (
     <EditableListItem
       icon={<Circle size={24} bg={role?.color || 'gray'} />}
-      after={<SizableText>3 members</SizableText>}
+      after={<SizableText>{role?.members?.length} members</SizableText>}
       {...rest}
     >
       {role?.name || ''}

apps/chat/src/interface/sidebar/SidebarServerChannelsList.tsx

@@ -23,7 +23,6 @@ type ServerChannelSort = string[]
 export const SidebarServerChannelsList = () => {
   const { user } = useAuth()
   const server = useCurrentServer()
-  console.log('server', server)
   const channels = useServerChannels()
   const channelSort: ServerChannelSort =
     Array.isArray(server?.channelSort) && server.channelSort.length

apps/chat/src/state/server.ts

@@ -11,8 +11,11 @@ export const useCurrentServer = () => {
 
 export const useCurrentServerRoles = () => {
   const [userState] = useUserState()
-  return useQuery((q) => q.server.where('id', userState?.activeServer || '').related('roles'))[0][0]
-    ?.roles
+  return useQuery((q) =>
+    q.server
+      .where('id', userState?.activeServer || '')
+      .related('roles', (r) => r.related('members'))
+  )[0][0]?.roles
 }
 
 export const useCurrentServerMembership = () => {

apps/chat/src/zero/schema.ts

@@ -346,6 +346,8 @@ export type Role = Row<typeof roleSchema>
 export type UserRole = Row<typeof userRoleSchema>
 export type ChannelRole = Row<typeof channelRoleSchema>
 
+export type RoleWithRelations = Role & { members: readonly User[] }
+
 export type MessageWithRelations = Message & {
   reactions: readonly Reaction[]
   thread?: readonly Thread[]

examples/one-zero/app/_layout.css

@@ -45,6 +45,10 @@ body > div {
 }
 
 a {
+  text-decoration: none;
+}
+
+p a {
   color: inherit;
   text-decoration: underline;
   text-decoration-thickness: 2px;

examples/one-zero/app/index.tsx

@@ -30,6 +30,8 @@ export default function HomePage() {
           <Avatar image={user.image || ''} />
           <SizableText>{user.name}</SizableText>
 
+          <Button onPress={() => authClient.signOut()}>Logout</Button>
+
           {isWeb && !isTauri && jwtToken && (
             <a href={`one-chat://finish-auth?token=${session?.token}`}>
               <Button>Login in Tauri</Button>

examples/one-zero/package.json

@@ -24,7 +24,7 @@
     "zero:build-schema": "cd ./src/zero && zero-build-schema -p './schema.ts'"
   },
   "dependencies": {
-    "@rocicorp/zero": "^0.9.2024121900",
+    "@rocicorp/zero": "0.9.2024121900",
     "@tamagui/config": "^1.120.2",
     "@tamagui/linear-gradient": "^1.120.2",
     "@tamagui/lucide-icons": "^1.120.2",
@@ -48,6 +48,8 @@
     "tamagui": "^1.120.2"
   },
   "devDependencies": {
+    "@types/node": "^22.1.0",
+    "vite": "^6.0.5",
     "@tamagui/vite-plugin": "^1.120.2",
     "@tauri-apps/cli": "^2",
     "tsx": "^4.19.0"

examples/one-zero/src/better-auth/AuthEffects.tsx

@@ -12,13 +12,16 @@ export const AuthEffects = () => {
 }
 
 const useAuthPassJWTSecretToZeroEffect = () => {
-  const { jwtToken } = useAuth()
+  const { jwtToken, user } = useAuth()
 
   useEffect(() => {
-    if (jwtToken) {
-      setZeroAuth(jwtToken)
+    if (user && jwtToken) {
+      setZeroAuth({
+        jwtToken,
+        userID: user.id,
+      })
     }
-  }, [jwtToken])
+  }, [user, jwtToken])
 }
 
 const useAuthPassTokenToTauriEffect = () => {
@@ -32,9 +35,13 @@ const useAuthPassTokenToTauriEffect = () => {
         switch (url.host) {
           case 'finish-auth': {
             const token = url.searchParams.get('token')
+            const session = url.searchParams.get('session')
 
-            if (token) {
-              setAuthClientToken(token)
+            if (token && session) {
+              setAuthClientToken({
+                token,
+                session,
+              })
             }
 
             break

packages/better-auth/src/index.ts

@@ -8,20 +8,35 @@ interface StorageKeys {
   session: string
 }
 
-interface AuthClientConfig {
-  options?: ClientOptions
+interface ExtraConfig {
   storageKeys?: StorageKeys
 }
 
-export function createBetterAuthClient(config: AuthClientConfig = {}) {
+/**
+ *
+ * This is a very early package to lightly abstract better-auth/client to work well with:
+ *  - React and React Native
+ *  - jwt tokens
+ *
+ *  1. Stores the session and jwt configuration locally and restores from it if existing
+ *  2. Provides a useAuth hook that automatically fetches jwt token for you
+ *
+ * @param options better-auth/client createAuthClient optinos
+ * @param extraConfig for setting localStorage keys
+ * @returns
+ */
+export function createBetterAuthClient(
+  options: ClientOptions = {},
+  { storageKeys }: ExtraConfig = {}
+) {
   const keys = {
-    token: config.storageKeys?.token ?? 'TOKEN_KEY',
-    session: config.storageKeys?.session ?? 'SESSION_KEY',
+    token: storageKeys?.token ?? 'TOKEN_KEY',
+    session: storageKeys?.session ?? 'SESSION_KEY',
   }
 
   const createAuthClientWithSession = (session: string) => {
     return createAuthClient({
-      ...config.options,
+      ...options,
       fetchOptions: {
         headers: {
           Authorization: `Bearer ${session}`,
@@ -33,7 +48,9 @@ export function createBetterAuthClient(config: AuthClientConfig = {}) {
   let authClient = (() => {
     const existingSession =
       typeof localStorage !== 'undefined' ? localStorage.getItem(keys.session) : ''
-    return existingSession ? createAuthClientWithSession(existingSession) : createAuthClient()
+    return existingSession
+      ? createAuthClientWithSession(existingSession)
+      : createAuthClient(options)
   })()
 
   const authClientVersion = createEmitter<number>()

tsconfig.build.json

@@ -22,6 +22,9 @@
     {
       "path": "examples/one-fullstack"
     },
+    {
+      "path": "examples/one-zero"
+    },
     {
       "path": "examples/bare"
     }

yarn.lock

@@ -7525,7 +7525,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocicorp/zero@npm:^0.9.2024121900":
+"@rocicorp/zero@npm:0.9.2024121900":
   version: 0.9.2024121900
   resolution: "@rocicorp/zero@npm:0.9.2024121900"
   dependencies:
@@ -22014,7 +22014,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "one-zero@workspace:examples/one-zero"
   dependencies:
-    "@rocicorp/zero": "npm:^0.9.2024121900"
+    "@rocicorp/zero": "npm:0.9.2024121900"
     "@tamagui/config": "npm:^1.120.2"
     "@tamagui/linear-gradient": "npm:^1.120.2"
     "@tamagui/lucide-icons": "npm:^1.120.2"
@@ -22125,7 +22125,7 @@ __metadata:
     "@dnd-kit/sortable": "npm:^10.0.0"
     "@docsearch/react": "npm:^3.6.1"
     "@floating-ui/react": "npm:^0.27.0"
-    "@rocicorp/zero": "npm:^0.9.2024121900"
+    "@rocicorp/zero": "npm:0.9.2024121900"
     "@tamagui/helpers-icon": "npm:^1.120.2"
     "@tamagui/linear-gradient": "npm:^1.120.2"
     "@tamagui/lucide-icons": "npm:^1.120.2"