create-varity-app 2.0.0-beta.2 → 2.0.0-beta.4

package/dist/create.js

@@ -9,9 +9,9 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const VARITY_PACKAGE_VERSION = "^2.0.0-beta.2";
 const WORKSPACE_DEPS = {
-    "@varity-labs/sdk": VARITY_PACKAGE_VERSION,
-    "@varity-labs/types": VARITY_PACKAGE_VERSION,
-    "@varity-labs/ui-kit": VARITY_PACKAGE_VERSION,
+    "@varity-labs/sdk": "^2.0.0-beta.2",
+    "@varity-labs/types": "^2.0.0-beta.2",
+    "@varity-labs/ui-kit": "^2.0.0-beta.5",
 };
 const EXCLUDED_FILES = new Set([
     ".env.local",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-varity-app",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "description": "Create production-ready apps with auth, database, and payments built in",
   "license": "MIT",
   "repository": {
@@ -38,6 +38,11 @@
     "LICENSE"
   ],
   "type": "module",
+  "scripts": {
+    "prebuild": "node scripts/copy-template.mjs",
+    "build": "tsc",
+    "clean": "rm -rf dist template"
+  },
   "dependencies": {
     "chalk": "^5.3.0",
     "commander": "^12.1.0",
@@ -52,10 +57,5 @@
     "@types/prompts": "^2.4.9",
     "@types/validate-npm-package-name": "^4.0.2",
     "typescript": "^5.5.0"
-  },
-  "scripts": {
-    "prebuild": "node scripts/copy-template.mjs",
-    "build": "tsc",
-    "clean": "rm -rf dist template"
   }
-}
+}

package/template/.env.example

@@ -6,8 +6,9 @@
 # For production: `varitykit app deploy` injects all credentials automatically.
 # You never need to manually set these values.
 
-# Auth provider configuration (managed by Varity)
-NEXT_PUBLIC_PRIVY_APP_ID=
+# Auth configuration (managed by Varity)
+# Leave blank for dev mode, auto-configured on deploy
+NEXT_PUBLIC_VARITY_AUTH_ID=
 
 # Database (optional — dev database used automatically when blank)
 NEXT_PUBLIC_VARITY_APP_TOKEN=

package/template/.turbo/turbo-build.log

@@ -13,7 +13,7 @@
 
    Creating an optimized production build ...
  ⚠ Mismatching @next/swc version, detected: 15.5.7 while Next.js is on 15.5.11. Please ensure these match
- ✓ Compiled successfully in 27.8s
+ ✓ Compiled successfully in 36.9s
    Linting and checking validity of types ...
    Collecting page data ...
    Generating static pages (0/11) ...
@@ -31,17 +31,17 @@ Deploy with `varitykit app deploy` to get your own private database.
 Route (app)                                 Size  First Load JS
 ┌ ○ /                                    5.69 kB         125 kB
 ├ ○ /_not-found                            132 B         116 kB
-├ ○ /dashboard                           3.75 kB        1.33 MB
-├ ○ /dashboard/projects                  4.95 kB        1.33 MB
-├ ○ /dashboard/settings                  5.88 kB        1.33 MB
-├ ○ /dashboard/tasks                     3.17 kB        1.33 MB
-├ ○ /dashboard/team                      3.06 kB        1.33 MB
+├ ○ /dashboard                           3.75 kB        1.37 MB
+├ ○ /dashboard/projects                  4.95 kB        1.37 MB
+├ ○ /dashboard/settings                  5.88 kB        1.37 MB
+├ ○ /dashboard/tasks                     3.17 kB        1.37 MB
+├ ○ /dashboard/team                      3.06 kB        1.37 MB
 ├ ○ /icon.svg                                0 B            0 B
-└ ○ /login                               1.31 kB        1.33 MB
+└ ○ /login                               1.32 kB        1.37 MB
 + First Load JS shared by all             116 kB
   ├ chunks/79135-4ac590d187e38d6f.js     45.3 kB
   ├ chunks/f0439f7a-76e885cef8778491.js  54.3 kB
-  ├ chunks/webpack-ea5a8e6ec96b5a02.js   16.1 kB
+  ├ chunks/webpack-8c7850c3c7158c7b.js   16.1 kB
   └ other shared chunks (total)            241 B
 
 

package/template/package.json

@@ -17,9 +17,9 @@
     "deploy": "varitykit app deploy"
   },
   "dependencies": {
-    "@varity-labs/sdk": "workspace:^",
-    "@varity-labs/types": "workspace:^",
-    "@varity-labs/ui-kit": "workspace:^",
+    "@varity-labs/sdk": "^2.0.0-beta.2",
+    "@varity-labs/types": "^2.0.0-beta.2",
+    "@varity-labs/ui-kit": "^2.0.0-beta.5",
     "lucide-react": "^0.400.0",
     "next": "^15.0.0",
     "react": "^18.3.0",

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

@@ -7,18 +7,20 @@ import { useProjects, useTasks, useTeam } from '@/lib/hooks';
 import { CommandPalette } from '@varity-labs/ui-kit';
 import { Menu, X } from 'lucide-react';
 
-// Conditionally import Privy/UI-Kit components
+// Conditionally import UI-Kit components
 let DashboardLayout: any = null;
-let PrivyProtectedRoute: any = null;
-let PrivyStackComponent: any = null;
-let usePrivyHook: any = null;
+let ProtectedRoute: any = null;
+let AuthStackComponent: any = null;
+let ZeroDevProviderComponent: 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;
+  ProtectedRoute = uiKit.PrivyProtectedRoute;
+  AuthStackComponent = uiKit.PrivyStack;
+  ZeroDevProviderComponent = uiKit.ZeroDevProvider;
+  useAuthHook = uiKit.useAuth;
 } catch {}
 
 function RedirectToLogin() {
@@ -111,8 +113,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();
@@ -152,7 +154,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
   const userName = user?.email?.address?.split('@')[0] || 'User';
   const userEmail = user?.email?.address || '';
 
-  const handleLogout = async () => {
+  const handleSignOut = async () => {
     await logout();
     router.push('/');
   };
@@ -194,7 +196,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
               </nav>
               <div className="mt-8 px-3 border-t border-gray-200 pt-4">
                 <button
-                  onClick={handleLogout}
+                  onClick={handleSignOut}
                   className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-red-600 hover:bg-red-50 transition-colors"
                 >
                   Sign Out
@@ -210,7 +212,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
               onClose={() => setMobileMenuOpen(false)}
               navItems={navWithActive}
               userEmail={userEmail}
-              onLogout={handleLogout}
+              onLogout={handleSignOut}
               onNavigate={(path) => router.push(path)}
             />
           )}
@@ -241,7 +243,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
           onClose={() => setMobileMenuOpen(false)}
           navItems={navWithActive}
           userEmail={userEmail}
-          onLogout={handleLogout}
+          onLogout={handleSignOut}
           onNavigate={(path) => router.push(path)}
         />
       )}
@@ -257,7 +259,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
             name: userName,
             address: userEmail,
           }}
-          onLogout={handleLogout}
+          onLogout={handleSignOut}
           onNavigateToProfile={() => router.push('/dashboard/settings')}
           onNavigateToSettings={() => router.push('/dashboard/settings')}
           onSearchClick={() => setCommandPaletteOpen(true)}
@@ -277,21 +279,23 @@ export default function DashboardRootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  // Always wrap in PrivyStack + PrivyProtectedRoute - uses dev credentials automatically when env vars are empty
-  if (!PrivyProtectedRoute || !PrivyStackComponent) {
+  // Auth provider (managed by Varity) with gas sponsorship
+  if (!ProtectedRoute || !AuthStackComponent || !ZeroDevProviderComponent) {
     // Fallback if ui-kit package isn't installed
     return <DashboardShell>{children}</DashboardShell>;
   }
 
   return (
-    <PrivyStackComponent
-      appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
+    <AuthStackComponent
+      appId={process.env.NEXT_PUBLIC_VARITY_AUTH_ID}
       loginMethods={['email', 'google']}
       appearance={{ theme: 'light', accentColor: '#2563EB', logo: '/logo.svg' }}
     >
-      <PrivyProtectedRoute fallback={<RedirectToLogin />}>
-        <DashboardShell>{children}</DashboardShell>
-      </PrivyProtectedRoute>
-    </PrivyStackComponent>
+      <ZeroDevProviderComponent>
+        <ProtectedRoute fallback={<RedirectToLogin />}>
+          <DashboardShell>{children}</DashboardShell>
+        </ProtectedRoute>
+      </ZeroDevProviderComponent>
+    </AuthStackComponent>
   );
 }

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_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.PrivyUserProfile;
+  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');
 
@@ -556,14 +556,14 @@ export default function SettingsPage() {
         )}
       </div>
 
-      {/* Privy Account Settings */}
-      {privyAppId && PrivyUserProfile && (
+      {/* Advanced Account Settings */}
+      {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
+            Advanced 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/login/page.tsx

@@ -6,29 +6,31 @@ 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 AuthStackComponent: any = null;
+let ZeroDevProviderComponent: 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;
+  AuthStackComponent = uiKit.PrivyStack;
+  ZeroDevProviderComponent = uiKit.ZeroDevProvider;
+  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();
+  const handleSignIn = () => {
+    if (auth?.login) {
+      auth.login();
     }
   };
 
@@ -49,15 +51,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}
+              onClick={handleSignIn}
+              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 +81,18 @@ function LoginContent() {
 }
 
 export default function LoginPage() {
-  // Always wrap in PrivyStack - it uses dev credentials automatically when no appId is provided
-  if (PrivyStackComponent) {
+  // Auth provider (managed by Varity) with gas sponsorship
+  if (AuthStackComponent && ZeroDevProviderComponent) {
     return (
-      <PrivyStackComponent
-        appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
+      <AuthStackComponent
+        appId={process.env.NEXT_PUBLIC_VARITY_AUTH_ID}
         loginMethods={['email', 'google']}
         appearance={{ theme: 'light', accentColor: '#2563EB', logo: '/logo.svg' }}
       >
-        <LoginContent />
-      </PrivyStackComponent>
+        <ZeroDevProviderComponent>
+          <LoginContent />
+        </ZeroDevProviderComponent>
+      </AuthStackComponent>
     );
   }
 

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 —
+  // Auth provider 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,
   };
 }