create-varity-app 2.0.0-beta.25 → 2.0.0-beta.26

package/README.md

@@ -77,7 +77,7 @@ Or deploy from your AI editor with the [Varity MCP server](https://www.npmjs.com
 
 ---
 
-**Part of the [Varity SDK](https://github.com/varity-labs/varity-sdk)** -- Build, deploy, and monetize apps 70% cheaper than AWS.
+**Part of the [Varity SDK](https://github.com/varity-labs/varity-sdk).** Deploy any app, AI agent, or LLM in 60 seconds. 60-80% cheaper than AWS.
 
 [Documentation](https://docs.varity.so) | [GitHub](https://github.com/varity-labs/varity-sdk) | [Discord](https://discord.gg/7vWsdwa2Bg)
 

package/dist/create.js

@@ -8,9 +8,9 @@ import { getInstallCommand } from "./utils.js";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const WORKSPACE_DEPS = {
-    "@varity-labs/sdk": "2.0.0-beta.6",
-    "@varity-labs/types": "2.0.0-beta.4",
-    "@varity-labs/ui-kit": "2.0.0-beta.7",
+    "@varity-labs/sdk": "2.0.0-beta.14",
+    "@varity-labs/types": "2.0.0-beta.8",
+    "@varity-labs/ui-kit": "2.0.0-beta.15",
 };
 const EXCLUDED_FILES = new Set([
     ".env.local",
@@ -74,11 +74,16 @@ export async function createApp(projectName, packageManager) {
                 return true;
             },
         });
-        // Rename gitignore → .gitignore (npm strips .gitignore from tarballs)
-        const gitignoreSrc = path.join(targetDir, "gitignore");
-        const gitignoreDst = path.join(targetDir, ".gitignore");
-        if (fs.existsSync(gitignoreSrc) && !fs.existsSync(gitignoreDst)) {
-            await fs.rename(gitignoreSrc, gitignoreDst);
+        // Rename dotfiles back (npm strips them from tarballs)
+        for (const [plain, dot] of [
+            ["gitignore", ".gitignore"],
+            ["npmrc", ".npmrc"],
+        ]) {
+            const src = path.join(targetDir, plain);
+            const dst = path.join(targetDir, dot);
+            if (fs.existsSync(src) && !fs.existsSync(dst)) {
+                await fs.rename(src, dst);
+            }
         }
         // Rewrite package.json
         const pkgPath = path.join(targetDir, "package.json");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-varity-app",
-  "version": "2.0.0-beta.25",
+  "version": "2.0.0-beta.26",
   "description": "Create production-ready apps with auth, database, and payments built in",
   "license": "MIT",
   "repository": {

package/template/.env.example

@@ -7,7 +7,7 @@
 # You never need to manually set these values.
 
 # Auth (optional — dev credentials used automatically when blank)
-NEXT_PUBLIC_PRIVY_APP_ID=
+NEXT_PUBLIC_VARITY_AUTH_APP_ID=
 
 # Database (optional — dev database used automatically when blank)
 NEXT_PUBLIC_VARITY_APP_TOKEN=

package/template/KNOWN_ISSUES.md

@@ -11,7 +11,7 @@
 | Feature | Status | Notes |
 |---------|--------|-------|
 | Landing Page | Working | 6 sections, scroll animations, social proof |
-| Auth (Login) | Working | Email/Google via Privy, zero-config dev credentials |
+| Auth (Login) | Working | Email/Google, zero-config dev credentials |
 | Dashboard | Working | KPI cards, checklist, activity feed |
 | Projects/Tasks/Team CRUD | Working | Full create, read, update, delete with validation |
 | Settings | Working | 4 tabs with backend persistence via DB Proxy |
@@ -22,8 +22,8 @@
 
 ## Known Issues
 
-### 1. Auth Uses Privy Directly (Abstraction Coming Post-Beta)
-The template uses `usePrivy()` and `NEXT_PUBLIC_PRIVY_APP_ID`. The planned `useAuth()` hook and `NEXT_PUBLIC_VARITY_AUTH_ID` env var are post-beta tasks. No action required -- current auth works correctly.
+### 1. Auth Provider Configuration
+The template uses `useAuth()` and `NEXT_PUBLIC_VARITY_AUTH_APP_ID`. Auth works correctly out of the box — no action required.
 
 ### 2. Payments Section is Placeholder
 Settings > Billing shows mock UI. Credit card payment integration (on/off ramp) is coming soon. Wire your own billing provider (Stripe, etc.) if needed now.
@@ -32,13 +32,13 @@ Settings > Billing shows mock UI. Credit card payment integration (on/off ramp)
 All pages are statically exported. No SSR, API routes, or middleware. Do not use dynamic routes (`[id]` patterns) -- use client-side state for detail views instead.
 
 ### 4. Navigation Flash
-Brief "Initializing Dashboard" screen when navigating between pages. Caused by `PrivyReadyGate` re-checking auth state. Resolves in under 1 second.
+Brief "Initializing Dashboard" screen when navigating between pages. Caused by `ReadyGate` re-checking auth state. Resolves in under 1 second.
 
 ### 5. Team Email Invites Are Local Only
 No SMTP integration. Team members are added to the database but no invitation email is sent. Integrate your own email service if needed.
 
 ### 6. Sessions and Password Are Auth-Provider Managed
-Settings > Security shows mock session data. Password changes and profile photos are managed by the auth provider (Privy), not the template.
+Settings > Security shows mock session data. Password changes and profile photos are managed by the auth provider, not the template.
 
 ## Environment
 

package/template/README.md

@@ -67,7 +67,7 @@ This template works immediately with **zero setup**:
 
 ### Instant Database
 - ✅ Create, read, update, delete data
-- ✅ Dev token built-in
+- ✅ Dev key built-in
 - ✅ Production-ready proxy
 - ❌ No credentials needed
 
@@ -216,7 +216,7 @@ The database collection is created automatically on first use — no migrations
 | Variable | Required | Notes |
 |----------|----------|-------|
 | `NEXT_PUBLIC_VARITY_AUTH_ID` | No | Auth provider (auto-configured) |
-| `NEXT_PUBLIC_VARITY_APP_TOKEN` | No | Database token (auto-configured) |
+| `NEXT_PUBLIC_VARITY_APP_TOKEN` | No | Database key (auto-configured) |
 | `NEXT_PUBLIC_VARITY_APP_ID` | No | App ID (auto-configured) |
 
 ## Deployment

package/template/next.config.js

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
   output: 'export',
   images: { unoptimized: true },
   trailingSlash: true,

package/template/npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

package/template/package.json

@@ -26,6 +26,10 @@
     "react": "^18.3.0",
     "react-dom": "^18.3.0"
   },
+  "overrides": {
+    "postcss": "$postcss",
+    "typescript": "^5.0.0"
+  },
   "devDependencies": {
     "@playwright/test": "^1.58.2",
     "@types/node": "^20.0.0",
@@ -33,7 +37,7 @@
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.0.0",
     "husky": "^9.1.7",
-    "postcss": "^8.0.0",
+    "postcss": "^8.4.31",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.0.0"
   }

package/template/src/app/dashboard/layout.tsx

@@ -7,22 +7,22 @@ import { useProjects, useTasks, useTeam } from '@/lib/hooks';
 import { CommandPalette } from '@varity-labs/ui-kit';
 import { Menu, X } from 'lucide-react';
 
-// Defensively import Privy/UI-Kit components at runtime (not statically) so the
+// Defensively import UI-Kit components at runtime (not statically) so the
 // dashboard renders gracefully even if @varity-labs/ui-kit hasn't been installed
 // yet (e.g. during local scaffolding before `npm install` completes).
 // This is intentional — it is NOT a sign that something is broken.
 // See KNOWN_ISSUES.md for details on this pattern.
 let DashboardLayout: any = null;
-let PrivyProtectedRoute: any = null;
-let PrivyStackComponent: any = null;
-let usePrivyHook: any = null;
+let ProtectedRouteComponent: any = null;
+let AuthProviderComponent: any = null;
+let useAuthHook: any = null;
 
 try {
   const uiKit = require('@varity-labs/ui-kit');
   DashboardLayout = uiKit.DashboardLayout;
-  PrivyProtectedRoute = uiKit.PrivyProtectedRoute;
-  PrivyStackComponent = uiKit.PrivyStack;
-  usePrivyHook = uiKit.usePrivy;
+  ProtectedRouteComponent = uiKit.ProtectedRoute;
+  AuthProviderComponent = uiKit.AuthProvider;
+  useAuthHook = uiKit.useAuth;
 } catch {
   // ui-kit not installed or not yet available — DashboardShell fallback renders below
 }
@@ -117,8 +117,8 @@ function MobileNav({
 
 function DashboardShell({ children }: { children: React.ReactNode }) {
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
-  const privy = usePrivyHook ? usePrivyHook() : { user: null, logout: async () => {} };
-  const { user, logout } = privy;
+  const auth = useAuthHook ? useAuthHook() : { user: null, logout: async () => {} };
+  const { user, logout } = auth;
   const pathname = usePathname();
   const router = useRouter();
   const isMobile = useIsMobile();
@@ -283,21 +283,21 @@ export default function DashboardRootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  // Always wrap in PrivyStack + PrivyProtectedRoute - uses dev credentials automatically when env vars are empty
-  if (!PrivyProtectedRoute || !PrivyStackComponent) {
+  // Always wrap in AuthProvider + ProtectedRoute - uses dev credentials automatically when env vars are empty
+  if (!ProtectedRouteComponent || !AuthProviderComponent) {
     // Fallback if ui-kit package isn't installed
     return <DashboardShell>{children}</DashboardShell>;
   }
 
   return (
-    <PrivyStackComponent
-      appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
+    <AuthProviderComponent
+      appId={process.env.NEXT_PUBLIC_VARITY_AUTH_APP_ID}
       loginMethods={['email', 'google']}
       appearance={{ theme: 'light', accentColor: '#2563EB', logo: '/logo.svg' }}
     >
-      <PrivyProtectedRoute fallback={<RedirectToLogin />}>
+      <ProtectedRouteComponent fallback={<RedirectToLogin />}>
         <DashboardShell>{children}</DashboardShell>
-      </PrivyProtectedRoute>
-    </PrivyStackComponent>
+      </ProtectedRouteComponent>
+    </AuthProviderComponent>
   );
 }

package/template/src/app/dashboard/settings/page.tsx

@@ -37,15 +37,15 @@ import {
   Key,
 } from 'lucide-react';
 
-const privyAppId = process.env.NEXT_PUBLIC_PRIVY_APP_ID;
+const authAppId = process.env.NEXT_PUBLIC_VARITY_AUTH_APP_ID;
 
-let PrivyUserProfile: any = null;
-let usePrivyHook: any = null;
+let UserProfileComponent: any = null;
+let useAuthHook: any = null;
 
 try {
   const uiKit = require('@varity-labs/ui-kit');
-  PrivyUserProfile = uiKit.PrivyUserProfile;
-  usePrivyHook = uiKit.usePrivy;
+  UserProfileComponent = uiKit.UserProfile;
+  useAuthHook = uiKit.useAuth;
 } catch {}
 
 const TABS = [
@@ -79,7 +79,7 @@ export default function SettingsPage() {
   const { settings, loading, update: updateSettings } = useUserSettings();
   const toast = useToast();
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() + env var, stable across renders
-  const privy = privyAppId && usePrivyHook ? usePrivyHook() : { logout: async () => {} };
+  const auth = authAppId && useAuthHook ? useAuthHook() : { logout: async () => {} };
 
   const [activeTab, setActiveTab] = useState<TabId>('general');
 
@@ -112,7 +112,7 @@ export default function SettingsPage() {
     },
   ]);
 
-  // Sync profile form when Privy data arrives asynchronously
+  // Sync profile form when auth data arrives asynchronously
   useEffect(() => {
     if (name || email) {
       setProfileForm({ name: name || '', email: email || '' });
@@ -557,13 +557,13 @@ export default function SettingsPage() {
       </div>
 
       {/* Account Settings */}
-      {privyAppId && PrivyUserProfile && (
+      {authAppId && UserProfileComponent && (
         <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
           <h2 className="mb-4 text-lg font-semibold text-gray-900 flex items-center gap-2">
             <Key className="h-5 w-5" />
             Account Settings
           </h2>
-          <PrivyUserProfile showLogoutButton={false} />
+          <UserProfileComponent showLogoutButton={false} />
         </div>
       )}
 
@@ -577,7 +577,7 @@ export default function SettingsPage() {
           These actions are permanent and cannot be undone.
         </p>
         <div className="flex flex-wrap gap-3">
-          <Button variant="danger" onClick={() => privy.logout()}>
+          <Button variant="danger" onClick={() => auth.logout()}>
             <LogOut className="h-4 w-4" />
             Sign Out
           </Button>

package/template/src/app/layout.tsx

@@ -1,19 +1,22 @@
 import type { Metadata } from 'next';
+import { APP_NAME } from '@/lib/constants';
 import { Providers } from '@/components/providers';
 import './globals.css';
 
+const appTitle = `${APP_NAME} - Dashboard`;
+
 export const metadata: Metadata = {
-  title: 'TaskFlow - Project Management',
+  title: appTitle,
   description: 'Manage projects, track tasks, and collaborate with your team.',
   metadataBase: new URL('https://example.com'),
   openGraph: {
-    title: 'TaskFlow - Project Management',
+    title: appTitle,
     description: 'Manage projects, track tasks, and collaborate with your team.',
     type: 'website',
   },
   twitter: {
     card: 'summary',
-    title: 'TaskFlow - Project Management',
+    title: appTitle,
     description: 'Manage projects, track tasks, and collaborate with your team.',
   },
 };

package/template/src/app/login/page.tsx

@@ -6,29 +6,29 @@ import Link from 'next/link';
 import { CheckCircle } from 'lucide-react';
 import { APP_NAME } from '@/lib/constants';
 
-let PrivyStackComponent: any = null;
-let usePrivyHook: (() => { authenticated: boolean; ready: boolean; login: () => void }) | null = null;
+let AuthProviderComponent: any = null;
+let useAuthHook: (() => { authenticated: boolean; ready: boolean; login: () => void }) | null = null;
 
 try {
   const uiKit = require('@varity-labs/ui-kit');
-  PrivyStackComponent = uiKit.PrivyStack;
-  usePrivyHook = uiKit.usePrivy;
+  AuthProviderComponent = uiKit.AuthProvider;
+  useAuthHook = uiKit.useAuth;
 } catch {}
 
 function LoginContent() {
   const router = useRouter();
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
-  const privy = usePrivyHook ? usePrivyHook() : null;
+  const auth = useAuthHook ? useAuthHook() : null;
 
   useEffect(() => {
-    if (privy?.authenticated) {
+    if (auth?.authenticated) {
       router.push('/dashboard');
     }
-  }, [privy?.authenticated, router]);
+  }, [auth?.authenticated, router]);
 
   const handleLogin = () => {
-    if (privy?.login) {
-      privy.login();
+    if (auth?.login) {
+      auth.login();
     }
   };
 
@@ -49,15 +49,15 @@ function LoginContent() {
         </div>
 
         <div className="rounded-xl border border-gray-200 bg-white p-8 shadow-sm">
-          {privy ? (
+          {auth ? (
             <button
               onClick={handleLogin}
-              disabled={!privy.ready || privy.authenticated}
+              disabled={!auth.ready || auth.authenticated}
               className="w-full px-6 py-3 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors shadow-sm"
             >
-              {!privy.ready
+              {!auth.ready
                 ? 'Loading...'
-                : privy.authenticated
+                : auth.authenticated
                 ? 'Already Signed In'
                 : 'Sign In with Email or Social'}
             </button>
@@ -79,16 +79,16 @@ function LoginContent() {
 }
 
 export default function LoginPage() {
-  // Always wrap in PrivyStack - it uses dev credentials automatically when no appId is provided
-  if (PrivyStackComponent) {
+  // Always wrap in AuthProvider - it uses dev credentials automatically when no appId is provided
+  if (AuthProviderComponent) {
     return (
-      <PrivyStackComponent
-        appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
+      <AuthProviderComponent
+        appId={process.env.NEXT_PUBLIC_VARITY_AUTH_APP_ID}
         loginMethods={['email', 'google']}
         appearance={{ theme: 'light', accentColor: '#2563EB', logo: '/logo.svg' }}
       >
         <LoginContent />
-      </PrivyStackComponent>
+      </AuthProviderComponent>
     );
   }
 

package/template/src/components/providers.tsx

@@ -5,7 +5,7 @@ import { ToastProvider } from '@varity-labs/ui-kit';
 
 export function Providers({ children }: { children: ReactNode }) {
   // Only ToastProvider at the global level.
-  // PrivyStack is added in dashboard/layout.tsx and login/page.tsx —
+  // AuthProvider is added in dashboard/layout.tsx and login/page.tsx —
   // the landing page loads instantly without any auth dependency.
   return <ToastProvider>{children}</ToastProvider>;
 }

package/template/src/lib/hooks.ts

@@ -4,18 +4,18 @@ import { useState, useEffect, useCallback } from 'react';
 import { projects, tasks, teamMembers, userSettings } from './database';
 import type { Project, Task, TeamMember, UserSettings } from '../types';
 
-let usePrivyHook: any = null;
+let useAuthHook: any = null;
 try {
   const uiKit = require('@varity-labs/ui-kit');
-  usePrivyHook = uiKit.usePrivy;
+  useAuthHook = uiKit.useAuth;
 } catch {}
 
 export function useCurrentUser() {
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
-  const privy = usePrivyHook ? usePrivyHook() : { user: null, authenticated: false, logout: async () => {} };
+  const auth = useAuthHook ? useAuthHook() : { user: null, authenticated: false, logout: async () => {} };
 
-  // Extract email from any Privy auth method (email, Google, GitHub, etc.)
-  const user = privy.user;
+  // Extract email from any auth method (email, Google, GitHub, etc.)
+  const user = auth.user;
   const email =
     user?.email?.address ||
     user?.google?.email ||
@@ -30,8 +30,8 @@ export function useCurrentUser() {
     id: user?.id || 'dev-user-id',
     email,
     name,
-    authenticated: privy.authenticated,
-    logout: privy.logout,
+    authenticated: auth.authenticated,
+    logout: auth.logout,
   };
 }