r9stack 0.4.1

package/dist/payload/templates/src/components/ui/button.tsx

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

package/dist/payload/templates/src/lib/auth-client.ts

@@ -0,0 +1,29 @@
+import { createContext, useContext } from 'react'
+import type { User } from './auth'
+
+export interface AuthContextValue {
+  user: User | null
+  isAuthenticated: boolean
+  isLoading: boolean
+  signIn: () => void
+  signOut: () => void
+}
+
+export const AuthContext = createContext<AuthContextValue | null>(null)
+
+export function useAuth(): AuthContextValue {
+  const context = useContext(AuthContext)
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}
+
+export function signIn() {
+  window.location.href = '/auth/sign-in'
+}
+
+export function signOut() {
+  window.location.href = '/auth/sign-out'
+}
+

package/dist/payload/templates/src/lib/auth-server.ts

@@ -0,0 +1,97 @@
+import { createServerFn } from '@tanstack/react-start'
+import { getRequest, setCookie, deleteCookie } from '@tanstack/react-start/server'
+import { getIronSession } from 'iron-session'
+import { WorkOS } from '@workos-inc/node'
+import type { SessionData, User } from './auth'
+
+const workos = new WorkOS(process.env.WORKOS_API_KEY)
+const clientId = process.env.WORKOS_CLIENT_ID!
+
+const sessionOptions = {
+  password: process.env.WORKOS_COOKIE_PASSWORD!,
+  cookieName: 'r9_session',
+  cookieOptions: {
+    secure: process.env.NODE_ENV === 'production',
+    httpOnly: true,
+    sameSite: 'lax' as const,
+  },
+}
+
+export const getAuthUrl = createServerFn({ method: 'GET' }).handler(async () => {
+  const authorizationUrl = workos.userManagement.getAuthorizationUrl({
+    provider: 'authkit',
+    clientId,
+    redirectUri: process.env.WORKOS_REDIRECT_URI!,
+  })
+  return authorizationUrl
+})
+
+export const getCurrentUser = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<User | null> => {
+    const request = getRequest()
+    if (!request) return null
+
+    const response = new Response()
+    const session = await getIronSession<SessionData>(request, response, sessionOptions)
+
+    if (!session.user) return null
+    if (session.expiresAt && Date.now() > session.expiresAt) return null
+
+    return session.user
+  }
+)
+
+export const handleAuthCallback = createServerFn({ method: 'GET' }).handler(
+  async (ctx: { data: { code: string } }): Promise<User> => {
+    const { code } = ctx.data
+
+    const authResponse = await workos.userManagement.authenticateWithCode({
+      clientId,
+      code,
+    })
+
+    const user: User = {
+      id: authResponse.user.id,
+      email: authResponse.user.email,
+      firstName: authResponse.user.firstName,
+      lastName: authResponse.user.lastName,
+      profilePictureUrl: authResponse.user.profilePictureUrl,
+    }
+
+    const request = getRequest()
+    if (!request) throw new Error('No request available')
+
+    const response = new Response()
+    const session = await getIronSession<SessionData>(request, response, sessionOptions)
+
+    session.user = user
+    session.accessToken = authResponse.accessToken
+    session.refreshToken = authResponse.refreshToken
+    session.expiresAt = Date.now() + 60 * 60 * 1000 // 1 hour
+
+    await session.save()
+
+    const cookieHeader = response.headers.get('Set-Cookie')
+    if (cookieHeader) {
+      const [nameValue] = cookieHeader.split(';')
+      const [, value] = nameValue.split('=')
+      setCookie('r9_session', value, {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax',
+        maxAge: 60 * 60,
+        path: '/',
+      })
+    }
+
+    return user
+  }
+)
+
+export const signOutServer = createServerFn({ method: 'POST' }).handler(
+  async () => {
+    deleteCookie('r9_session')
+    return { success: true }
+  }
+)
+

package/dist/payload/templates/src/lib/auth.ts

@@ -0,0 +1,15 @@
+export interface User {
+  id: string
+  email: string
+  firstName: string | null
+  lastName: string | null
+  profilePictureUrl: string | null
+}
+
+export interface SessionData {
+  user?: User
+  accessToken?: string
+  refreshToken?: string
+  expiresAt?: number
+}
+

package/dist/payload/templates/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+

package/dist/payload/templates/src/router.tsx

@@ -0,0 +1,18 @@
+import { createRouter as createTanStackRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function createRouter() {
+  const router = createTanStackRouter({
+    routeTree,
+    scrollRestoration: true,
+  })
+
+  return router
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}
+

package/dist/payload/templates/src/routes/__root.tsx

@@ -0,0 +1,53 @@
+import { HeadContent, Scripts, createRootRoute, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+import { AuthProvider } from '../components/AuthProvider'
+import { ConvexClientProvider } from '../components/ConvexClientProvider'
+
+import appCss from '../styles.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { title: '{{PROJECT_NAME}}' },
+      { property: 'og:type', content: 'website' },
+      { property: 'og:title', content: '{{PROJECT_NAME}}' },
+      { property: 'og:description', content: 'Built with r9stack' },
+      { property: 'og:image', content: '/images/logo.png' },
+      { name: 'twitter:card', content: 'summary' },
+      { name: 'twitter:title', content: '{{PROJECT_NAME}}' },
+      { name: 'twitter:description', content: 'Built with r9stack' },
+      { name: 'twitter:image', content: '/images/logo.png' },
+    ],
+    links: [{ rel: 'stylesheet', href: appCss }],
+  }),
+  shellComponent: RootDocument,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <AuthProvider>
+          <ConvexClientProvider>
+            {children}
+          </ConvexClientProvider>
+        </AuthProvider>
+        <TanStackDevtools
+          config={{ position: 'bottom-right' }}
+          plugins={[
+            { name: 'Tanstack Router', render: <TanStackRouterDevtoolsPanel /> },
+          ]}
+        />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+

package/dist/payload/templates/src/routes/app/demo/convex.messages.tsx

@@ -0,0 +1,66 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useQuery, useMutation } from 'convex/react'
+import { api } from '../../../../convex/_generated/api'
+import { useState } from 'react'
+import { Button } from '../../../components/ui/button'
+
+export const Route = createFileRoute('/app/demo/convex/messages')({
+  component: MessagesDemo,
+})
+
+function MessagesDemo() {
+  const messages = useQuery(api.messages.list)
+  const sendMessage = useMutation(api.messages.send)
+  const [newMessage, setNewMessage] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!newMessage.trim()) return
+
+    await sendMessage({ text: newMessage.trim() })
+    setNewMessage('')
+  }
+
+  return (
+    <div className="p-8 max-w-2xl">
+      <h1 className="text-2xl font-bold text-foreground mb-2">
+        Convex Messages Demo
+      </h1>
+      <p className="text-muted-foreground mb-6">
+        Real-time messages powered by Convex. Open in multiple tabs to see sync!
+      </p>
+
+      <form onSubmit={handleSubmit} className="flex gap-2 mb-6">
+        <input
+          type="text"
+          value={newMessage}
+          onChange={(e) => setNewMessage(e.target.value)}
+          placeholder="Type a message..."
+          className="flex-1 px-3 py-2 border border-input rounded-md bg-background text-foreground"
+        />
+        <Button type="submit">Send</Button>
+      </form>
+
+      <div className="space-y-2">
+        {messages === undefined ? (
+          <p className="text-muted-foreground">Loading...</p>
+        ) : messages.length === 0 ? (
+          <p className="text-muted-foreground">No messages yet. Send one!</p>
+        ) : (
+          messages.map((message) => (
+            <div
+              key={message._id}
+              className="p-3 bg-muted rounded-md"
+            >
+              <p className="text-foreground">{message.text}</p>
+              <p className="text-xs text-muted-foreground mt-1">
+                {new Date(message.createdAt).toLocaleString()}
+              </p>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+

package/dist/payload/templates/src/routes/app/index.tsx

@@ -0,0 +1,20 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useAuth } from '../../lib/auth-client'
+
+export const Route = createFileRoute('/app/')({ component: AppHome })
+
+function AppHome() {
+  const { user } = useAuth()
+
+  return (
+    <div className="p-8">
+      <h1 className="text-3xl font-bold text-foreground mb-4">
+        Welcome{user?.firstName ? `, ${user.firstName}` : ''}!
+      </h1>
+      <p className="text-muted-foreground">
+        You're now in the authenticated area of your app.
+      </p>
+    </div>
+  )
+}
+

package/dist/payload/templates/src/routes/app/route.tsx

@@ -0,0 +1,23 @@
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { getCurrentUser } from '../../lib/auth-server'
+import { AppShell } from '../../components/AppShell'
+
+export const Route = createFileRoute('/app')({
+  beforeLoad: async () => {
+    const user = await getCurrentUser()
+    if (!user) {
+      throw redirect({ to: '/' })
+    }
+    return {}
+  },
+  component: AppLayout,
+})
+
+function AppLayout() {
+  return (
+    <AppShell>
+      <Outlet />
+    </AppShell>
+  )
+}
+

package/dist/payload/templates/src/routes/auth/callback.tsx

@@ -0,0 +1,36 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { handleAuthCallback } from '../../lib/auth-server'
+
+export const Route = createFileRoute('/auth/callback')({
+  beforeLoad: async ({ search }) => {
+    const code = (search as { code?: string }).code
+
+    if (!code) {
+      throw redirect({ to: '/', search: { error: 'no_code' } })
+    }
+
+    try {
+      await handleAuthCallback({ data: { code } })
+      throw redirect({ to: '/app' })
+    } catch (error) {
+      if (error instanceof Response || (error as { to?: string })?.to) {
+        throw error
+      }
+      console.error('Auth callback error:', error)
+      throw redirect({ to: '/', search: { error: 'auth_failed' } })
+    }
+  },
+  component: CallbackPage,
+})
+
+function CallbackPage() {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4" />
+        <p className="text-muted-foreground">Completing sign in...</p>
+      </div>
+    </div>
+  )
+}
+

package/dist/payload/templates/src/routes/auth/sign-in.tsx

@@ -0,0 +1,22 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { getAuthUrl } from '../../lib/auth-server'
+
+export const Route = createFileRoute('/auth/sign-in')({
+  beforeLoad: async () => {
+    const authUrl = await getAuthUrl()
+    throw redirect({ href: authUrl })
+  },
+  component: SignInPage,
+})
+
+function SignInPage() {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4" />
+        <p className="text-muted-foreground">Redirecting to sign in...</p>
+      </div>
+    </div>
+  )
+}
+

package/dist/payload/templates/src/routes/auth/sign-out.tsx

@@ -0,0 +1,22 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { signOutServer } from '../../lib/auth-server'
+
+export const Route = createFileRoute('/auth/sign-out')({
+  beforeLoad: async () => {
+    await signOutServer()
+    throw redirect({ to: '/' })
+  },
+  component: SignOutPage,
+})
+
+function SignOutPage() {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4" />
+        <p className="text-muted-foreground">Signing out...</p>
+      </div>
+    </div>
+  )
+}
+

package/dist/payload/templates/src/routes/index.tsx

@@ -0,0 +1,85 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useAuth } from '../lib/auth-client'
+import { Button } from '../components/ui/button'
+
+export const Route = createFileRoute('/')({ component: LandingPage })
+
+function LandingPage() {
+  const { user, isAuthenticated, isLoading, signIn } = useAuth()
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b border-border">
+        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <span className="text-xl font-semibold text-foreground">
+              {{PROJECT_NAME}}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-3">
+            {isLoading ? (
+              <div className="w-20 h-9 bg-muted animate-pulse rounded-md" />
+            ) : isAuthenticated ? (
+              <Link to="/app">
+                <Button>Go to App</Button>
+              </Link>
+            ) : (
+              <>
+                <Button variant="ghost" onClick={signIn}>
+                  Sign In
+                </Button>
+                <Button onClick={signIn}>Get Started</Button>
+              </>
+            )}
+          </div>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <main className="max-w-6xl mx-auto px-6 py-20">
+        <div className="text-center max-w-3xl mx-auto">
+          <h1 className="text-5xl font-bold tracking-tight text-foreground mb-6">
+            Welcome to {{PROJECT_NAME}}
+          </h1>
+          <p className="text-xl text-muted-foreground mb-10">
+            Built with r9stack — TanStack Start, Convex, WorkOS, and shadcn/ui
+            pre-integrated.
+          </p>
+
+          <div className="flex items-center justify-center gap-4 mb-16">
+            {isAuthenticated ? (
+              <Link to="/app">
+                <Button size="lg" className="px-8">
+                  Open App
+                </Button>
+              </Link>
+            ) : (
+              <>
+                <Button size="lg" className="px-8" onClick={signIn}>
+                  Get Started Free
+                </Button>
+                <Button size="lg" variant="outline" onClick={signIn}>
+                  Sign In
+                </Button>
+              </>
+            )}
+          </div>
+
+          {isAuthenticated && user && (
+            <div className="mb-16 p-4 bg-muted/50 rounded-lg border border-border inline-block">
+              <p className="text-sm text-muted-foreground">
+                Signed in as{' '}
+                <span className="font-medium text-foreground">
+                  {user.email}
+                </span>
+              </p>
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}
+