diff --git a/apps/web/app/(app)/api/setup-convex-auth/route.ts b/apps/web/app/(app)/api/setup-convex-auth/route.ts
new file mode 100644
index 00000000..bb6c0fcb
--- /dev/null
+++ b/apps/web/app/(app)/api/setup-convex-auth/route.ts
@@ -0,0 +1,564 @@
+// API endpoint to set up Convex Auth with email/password for a project
+// Writes auth files directly to the sandbox and commits via git integration
+
+import { NextRequest, NextResponse } from 'next/server'
+import { db } from '@/lib/db'
+import { projects } from '@react-native-vibe-code/database'
+import { eq, and } from 'drizzle-orm'
+import { auth } from '@/lib/auth/config'
+import { headers } from 'next/headers'
+import { Sandbox } from '@e2b/code-interpreter'
+
+export const maxDuration = 300 // 5 minutes for package installation
+
+// convex/auth.ts - Password provider configuration
+const CONVEX_AUTH_TS = `import { convexAuth } from "@convex-dev/auth/server"
+import { Password } from "@convex-dev/auth/providers/Password"
+
+export const { auth, signIn, signOut, store } = convexAuth({
+  providers: [Password],
+})
+`
+
+// convex/auth.config.ts - JWT configuration pointing to Convex site URL
+const CONVEX_AUTH_CONFIG_TS = `export default {
+  providers: [
+    {
+      domain: process.env.CONVEX_SITE_URL,
+      applicationID: "convex",
+    },
+  ],
+}
+`
+
+// app/(auth)/_layout.tsx
+const AUTH_LAYOUT_TSX = `import { Stack } from "expo-router"
+
+export default function AuthLayout() {
+  return <Stack screenOptions={{ headerShown: false }} />
+}
+`
+
+// app/(auth)/sign-in.tsx
+const SIGN_IN_TSX = `import { useState } from "react"
+import { View, TextInput, StyleSheet, Text, Pressable, Alert, KeyboardAvoidingView, Platform } from "react-native"
+import { useAuthActions } from "@convex-dev/auth/react"
+import { useRouter } from "expo-router"
+
+export default function SignInScreen() {
+  const { signIn } = useAuthActions()
+  const router = useRouter()
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleSignIn = async () => {
+    if (!email || !password) {
+      Alert.alert("Error", "Please enter your email and password")
+      return
+    }
+    setIsLoading(true)
+    try {
+      await signIn("password", { email, password, flow: "signIn" })
+      router.replace("/")
+    } catch (error) {
+      Alert.alert("Sign In Failed", error instanceof Error ? error.message : "An error occurred")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+    >
+      <View style={styles.inner}>
+        <Text style={styles.title}>Sign In</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Email"
+          value={email}
+          onChangeText={setEmail}
+          autoCapitalize="none"
+          keyboardType="email-address"
+          autoComplete="email"
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Password"
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry
+          autoComplete="current-password"
+        />
+        <Pressable
+          style={[styles.button, isLoading && styles.buttonDisabled]}
+          onPress={handleSignIn}
+          disabled={isLoading}
+        >
+          <Text style={styles.buttonText}>{isLoading ? "Signing in..." : "Sign In"}</Text>
+        </Pressable>
+        <Pressable onPress={() => router.push("/(auth)/sign-up")}>
+          <Text style={styles.link}>Don't have an account? Sign up</Text>
+        </Pressable>
+      </View>
+    </KeyboardAvoidingView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  inner: {
+    flex: 1,
+    justifyContent: "center",
+    padding: 24,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "bold",
+    marginBottom: 32,
+    textAlign: "center",
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 16,
+    fontSize: 16,
+  },
+  button: {
+    backgroundColor: "#000",
+    borderRadius: 8,
+    padding: 16,
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  link: {
+    textAlign: "center",
+    color: "#666",
+    fontSize: 14,
+  },
+})
+`
+
+// app/(auth)/sign-up.tsx
+const SIGN_UP_TSX = `import { useState } from "react"
+import { View, TextInput, StyleSheet, Text, Pressable, Alert, KeyboardAvoidingView, Platform } from "react-native"
+import { useAuthActions } from "@convex-dev/auth/react"
+import { useRouter } from "expo-router"
+
+export default function SignUpScreen() {
+  const { signIn } = useAuthActions()
+  const router = useRouter()
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [confirmPassword, setConfirmPassword] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleSignUp = async () => {
+    if (!email || !password || !confirmPassword) {
+      Alert.alert("Error", "Please fill in all fields")
+      return
+    }
+    if (password !== confirmPassword) {
+      Alert.alert("Error", "Passwords do not match")
+      return
+    }
+    setIsLoading(true)
+    try {
+      await signIn("password", { email, password, flow: "signUp" })
+      router.replace("/")
+    } catch (error) {
+      Alert.alert("Sign Up Failed", error instanceof Error ? error.message : "An error occurred")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+    >
+      <View style={styles.inner}>
+        <Text style={styles.title}>Create Account</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Email"
+          value={email}
+          onChangeText={setEmail}
+          autoCapitalize="none"
+          keyboardType="email-address"
+          autoComplete="email"
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Password"
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry
+          autoComplete="new-password"
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Confirm Password"
+          value={confirmPassword}
+          onChangeText={setConfirmPassword}
+          secureTextEntry
+          autoComplete="new-password"
+        />
+        <Pressable
+          style={[styles.button, isLoading && styles.buttonDisabled]}
+          onPress={handleSignUp}
+          disabled={isLoading}
+        >
+          <Text style={styles.buttonText}>{isLoading ? "Creating account..." : "Sign Up"}</Text>
+        </Pressable>
+        <Pressable onPress={() => router.back()}>
+          <Text style={styles.link}>Already have an account? Sign in</Text>
+        </Pressable>
+      </View>
+    </KeyboardAvoidingView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  inner: {
+    flex: 1,
+    justifyContent: "center",
+    padding: 24,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "bold",
+    marginBottom: 32,
+    textAlign: "center",
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 16,
+    fontSize: 16,
+  },
+  button: {
+    backgroundColor: "#000",
+    borderRadius: 8,
+    padding: 16,
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  link: {
+    textAlign: "center",
+    color: "#666",
+    fontSize: 14,
+  },
+})
+`
+
+/**
+ * Injects authTables import and spread into convex/schema.ts
+ */
+async function updateSchemaWithAuthTables(sandbox: Sandbox): Promise<void> {
+  const schemaPath = '/home/user/app/convex/schema.ts'
+  let currentContent: string
+  try {
+    currentContent = await sandbox.files.read(schemaPath)
+  } catch {
+    console.log('[Auth Setup] convex/schema.ts not found, skipping schema update')
+    return
+  }
+
+  if (currentContent.includes('authTables')) {
+    console.log('[Auth Setup] authTables already present in schema.ts, skipping')
+    return
+  }
+
+  let newContent = currentContent
+
+  // Add authTables import after last import statement
+  const authImport = `import { authTables } from "@convex-dev/auth/server"`
+  const importRegex = /^import .+$/gm
+  let lastImportMatch: RegExpExecArray | null = null
+  let match: RegExpExecArray | null
+  while ((match = importRegex.exec(currentContent)) !== null) {
+    lastImportMatch = match
+  }
+
+  if (lastImportMatch) {
+    const insertPos = lastImportMatch.index + lastImportMatch[0].length
+    newContent = newContent.slice(0, insertPos) + '\n' + authImport + newContent.slice(insertPos)
+  } else {
+    newContent = authImport + '\n' + newContent
+  }
+
+  // Spread authTables as first entry in defineSchema({...})
+  newContent = newContent.replace(
+    /defineSchema\(\{/,
+    'defineSchema({\n  ...authTables,'
+  )
+
+  await sandbox.files.write(schemaPath, newContent)
+  console.log('[Auth Setup] Updated convex/schema.ts with authTables')
+}
+
+/**
+ * Injects auth HTTP routes into convex/http.ts
+ */
+async function updateHttpWithAuthRoutes(sandbox: Sandbox): Promise<void> {
+  const httpPath = '/home/user/app/convex/http.ts'
+  let currentContent: string
+  try {
+    currentContent = await sandbox.files.read(httpPath)
+  } catch {
+    // http.ts doesn't exist, write a fresh one
+    const freshHttpTs = `import { httpRouter } from "convex/server"
+import { auth } from "./auth"
+
+const http = httpRouter()
+
+auth.addHttpRoutes(http)
+
+export default http
+`
+    await sandbox.files.write(httpPath, freshHttpTs)
+    console.log('[Auth Setup] Created convex/http.ts with auth routes')
+    return
+  }
+
+  if (currentContent.includes('auth.addHttpRoutes')) {
+    console.log('[Auth Setup] auth routes already present in http.ts, skipping')
+    return
+  }
+
+  let newContent = currentContent
+
+  // Add auth import after httpRouter import
+  const authImport = `import { auth } from "./auth"`
+  const httpRouterImportMatch = newContent.match(/^import \{ httpRouter \} from .+$/m)
+  if (httpRouterImportMatch) {
+    const insertPos = httpRouterImportMatch.index! + httpRouterImportMatch[0].length
+    newContent = newContent.slice(0, insertPos) + '\n' + authImport + newContent.slice(insertPos)
+  } else {
+    newContent = authImport + '\n' + newContent
+  }
+
+  // Add auth.addHttpRoutes(http) before export default
+  newContent = newContent.replace(
+    /export default http/,
+    'auth.addHttpRoutes(http)\n\nexport default http'
+  )
+
+  await sandbox.files.write(httpPath, newContent)
+  console.log('[Auth Setup] Updated convex/http.ts with auth routes')
+}
+
+/**
+ * Updates app/_layout.tsx to use ConvexAuthProvider instead of ConvexProvider/ConvexWrapper
+ */
+async function updateLayoutWithConvexAuthProvider(sandbox: Sandbox): Promise<void> {
+  const layoutPath = '/home/user/app/app/_layout.tsx'
+  let currentContent: string
+  try {
+    currentContent = await sandbox.files.read(layoutPath)
+  } catch {
+    console.log('[Auth Setup] app/_layout.tsx not found, skipping layout update')
+    return
+  }
+
+  if (currentContent.includes('ConvexAuthProvider')) {
+    console.log('[Auth Setup] ConvexAuthProvider already present in _layout.tsx, skipping')
+    return
+  }
+
+  let newContent = currentContent
+
+  if (currentContent.includes('ConvexProvider') && currentContent.includes('ConvexWrapper')) {
+    // Cloud enable was run — replace ConvexWrapper pattern with ConvexAuthProvider
+
+    // Replace the ConvexProvider + ConvexReactClient import line
+    newContent = newContent.replace(
+      /import \{ ConvexProvider, ConvexReactClient \} from ['"]convex\/react['"]\n/,
+      `import { ConvexAuthProvider } from "@convex-dev/auth/react-native"\nimport { ConvexReactClient } from "convex/react"\nimport * as SecureStore from "expo-secure-store"\n`
+    )
+
+    // Replace the conditional convex client initialization block with a direct one
+    newContent = newContent.replace(
+      /\/\/ Initialize Convex client\nconst convexUrl = process\.env\.EXPO_PUBLIC_CONVEX_URL\nconst convex = convexUrl\n  \? new ConvexReactClient\(convexUrl, \{ unsavedChangesWarning: false \}\)\n  : null\n/,
+      `const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!)\n`
+    )
+
+    // Remove the ConvexWrapper component definition
+    newContent = newContent.replace(
+      /\/\/ Wrapper to conditionally include ConvexProvider\nfunction ConvexWrapper\(\{ children \}: \{ children: React\.ReactNode \}\) \{\n  if \(convex\) \{\n    return <ConvexProvider client=\{convex\}>\{children\}<\/ConvexProvider>\n  \}\n  return <>\{children\}</>\n\}\n/,
+      ''
+    )
+
+    // Replace <ConvexWrapper> and </ConvexWrapper> JSX tags
+    newContent = newContent.replace(
+      /<ConvexWrapper>/g,
+      `<ConvexAuthProvider client={convex} storage={SecureStore}>`
+    )
+    newContent = newContent.replace(
+      /<\/ConvexWrapper>/g,
+      `</ConvexAuthProvider>`
+    )
+  } else if (currentContent.includes('ConvexProvider')) {
+    // ConvexProvider exists but no ConvexWrapper — simpler replacement
+    newContent = newContent.replace(
+      /import \{ ConvexProvider.*?\} from ['"]convex\/react['"]/,
+      `import { ConvexAuthProvider } from "@convex-dev/auth/react-native"\nimport { ConvexReactClient } from "convex/react"\nimport * as SecureStore from "expo-secure-store"`
+    )
+    newContent = newContent.replace(/<ConvexProvider([^>]*)>/g, `<ConvexAuthProvider client={convex} storage={SecureStore}>`)
+    newContent = newContent.replace(/<\/ConvexProvider>/g, `</ConvexAuthProvider>`)
+  } else {
+    // No Convex provider at all — inject ConvexAuthProvider around the root element
+    const authProviderImport = `import { ConvexAuthProvider } from "@convex-dev/auth/react-native"\nimport { ConvexReactClient } from "convex/react"\nimport * as SecureStore from "expo-secure-store"\n\nconst convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!)\n`
+
+    // Find last import and inject after it
+    const importRegex = /^import .+$/gm
+    let lastImportMatch: RegExpExecArray | null = null
+    let match: RegExpExecArray | null
+    while ((match = importRegex.exec(currentContent)) !== null) {
+      lastImportMatch = match
+    }
+
+    if (lastImportMatch) {
+      const insertPos = lastImportMatch.index + lastImportMatch[0].length
+      newContent = newContent.slice(0, insertPos) + '\n\n' + authProviderImport + newContent.slice(insertPos)
+    }
+
+    // Wrap the root return element with ConvexAuthProvider
+    console.log('[Auth Setup] No existing ConvexProvider found — manual wrapping may be needed in _layout.tsx')
+  }
+
+  await sandbox.files.write(layoutPath, newContent)
+  console.log('[Auth Setup] Updated app/_layout.tsx with ConvexAuthProvider')
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    // Authenticate user
+    const session = await auth.api.getSession({ headers: await headers() })
+    if (!session?.user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const { projectId } = body
+
+    if (!projectId) {
+      return NextResponse.json({ error: 'Missing projectId' }, { status: 400 })
+    }
+
+    // Get project with ownership check
+    const [project] = await db
+      .select()
+      .from(projects)
+      .where(and(eq(projects.id, projectId), eq(projects.userId, session.user.id)))
+      .limit(1)
+
+    if (!project) {
+      return NextResponse.json({ error: 'Project not found' }, { status: 404 })
+    }
+
+    if (!project.sandboxId) {
+      return NextResponse.json(
+        { error: 'No active sandbox found for this project' },
+        { status: 400 }
+      )
+    }
+
+    // Connect to sandbox
+    console.log('[Auth Setup] Connecting to sandbox:', project.sandboxId)
+    const sandbox = await Sandbox.connect(project.sandboxId)
+
+    // Step 1: Install required packages
+    console.log('[Auth Setup] Installing @convex-dev/auth, @auth/core, expo-secure-store...')
+    const installResult = await sandbox.commands.run(
+      'cd /home/user/app && bun add @convex-dev/auth @auth/core expo-secure-store',
+      { timeoutMs: 120000 }
+    )
+    if (installResult.exitCode !== 0) {
+      console.warn('[Auth Setup] Package install stderr:', installResult.stderr)
+    }
+    console.log('[Auth Setup] Packages installed')
+
+    // Step 2: Write convex/auth.ts
+    console.log('[Auth Setup] Writing convex/auth.ts...')
+    await sandbox.files.write('/home/user/app/convex/auth.ts', CONVEX_AUTH_TS)
+
+    // Step 3: Write convex/auth.config.ts
+    console.log('[Auth Setup] Writing convex/auth.config.ts...')
+    await sandbox.files.write('/home/user/app/convex/auth.config.ts', CONVEX_AUTH_CONFIG_TS)
+
+    // Step 4: Update convex/schema.ts with authTables
+    console.log('[Auth Setup] Updating convex/schema.ts...')
+    await updateSchemaWithAuthTables(sandbox)
+
+    // Step 5: Update convex/http.ts with auth routes
+    console.log('[Auth Setup] Updating convex/http.ts...')
+    await updateHttpWithAuthRoutes(sandbox)
+
+    // Step 6: Update app/_layout.tsx to use ConvexAuthProvider
+    console.log('[Auth Setup] Updating app/_layout.tsx...')
+    await updateLayoutWithConvexAuthProvider(sandbox)
+
+    // Step 7: Create auth screens directory and files
+    console.log('[Auth Setup] Creating auth screens...')
+    await sandbox.commands.run('mkdir -p /home/user/app/app/\\(auth\\)', { timeoutMs: 10000 })
+    await sandbox.files.write('/home/user/app/app/(auth)/_layout.tsx', AUTH_LAYOUT_TSX)
+    await sandbox.files.write('/home/user/app/app/(auth)/sign-in.tsx', SIGN_IN_TSX)
+    await sandbox.files.write('/home/user/app/app/(auth)/sign-up.tsx', SIGN_UP_TSX)
+
+    // Step 8: Commit all changes via git
+    console.log('[Auth Setup] Committing changes...')
+    try {
+      await sandbox.commands.run(
+        'cd /home/user/app && git add -A && git commit -m "Setup Convex Auth with email/password authentication"',
+        { timeoutMs: 30000 }
+      )
+      console.log('[Auth Setup] Git commit successful')
+    } catch (gitError) {
+      console.warn('[Auth Setup] Git commit failed (non-fatal):', gitError)
+      // Don't fail the operation if git commit fails
+    }
+
+    console.log('[Auth Setup] Convex Auth setup complete')
+
+    return NextResponse.json({
+      success: true,
+      message: 'Convex Auth setup complete. Note: run "npx @convex-dev/auth" in your project to generate JWT keys and configure CONVEX_SITE_URL in your Convex dashboard.',
+    })
+  } catch (error) {
+    console.error('[Auth Setup] Error:', error)
+    const errorMessage = error instanceof Error ? error.message : 'Failed to setup auth'
+    return NextResponse.json({ error: errorMessage }, { status: 500 })
+  }
+}
diff --git a/apps/web/app/(app)/p/[id]/page.tsx b/apps/web/app/(app)/p/[id]/page.tsx
index f52dbc62..d1e74934 100644
--- a/apps/web/app/(app)/p/[id]/page.tsx
+++ b/apps/web/app/(app)/p/[id]/page.tsx
@@ -18,6 +18,7 @@ import { AssetsPanel } from '@/components/assets-panel'
 import { ProjectsPanel } from '@/components/projects-panel'
 import { BackendPanel } from '@/components/backend-panel'
 import { CloudSidebarPanel } from '@/components/cloud-sidebar-panel'
+import { AuthSidebarPanel } from '@/components/auth-sidebar-panel'
 import { Sheet, SheetContent, SheetTitle } from '@/components/ui/sheet'
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden"
 // ResizableHandle and ResizablePanel/Group removed - using fixed 500px width for chat panel
@@ -595,6 +596,19 @@ function ProjectPageInternal() {
     fetchCloudStatus()
   }, [fetchCloudStatus])
 
+  const handleSetupAuth = useCallback(async (): Promise<void> => {
+    const response = await fetch('/api/setup-convex-auth', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ projectId }),
+    })
+
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.error || 'Failed to setup Convex Auth')
+    }
+  }, [projectId])
+
   // Legacy compatibility
   const isDesktopMode = viewMode === 'desktop'
 
@@ -2428,6 +2442,7 @@ function ProjectPageInternal() {
               cloudEnabled={cloudEnabled}
               cloudDeploymentUrl={cloudDeploymentUrl}
               onCloudEnabled={handleCloudEnabled}
+              onSetupAuth={handleSetupAuth}
             >
             <div className="flex h-full w-full">
           {/* Fixed width Chat/History panel - 500px */}
@@ -2610,6 +2625,22 @@ function ProjectPageInternal() {
               cloudEnabled={cloudEnabled}
               deploymentUrl={cloudDeploymentUrl}
               onCloudEnabled={handleCloudEnabled}
+              onNavigateToAuth={() => setMobileSidebarPanel('auth')}
+              onClose={() => setMobileSidebarPanel(null)}
+            />
+          </SheetContent>
+        </Sheet>
+
+        <Sheet open={mobileSidebarPanel === 'auth'} onOpenChange={(open) => !open && setMobileSidebarPanel(null)}>
+          <SheetContent side="left" className="w-full sm:max-w-[400px] p-0">
+            <VisuallyHidden.Root>
+              <SheetTitle>Authentication</SheetTitle>
+            </VisuallyHidden.Root>
+            <AuthSidebarPanel
+              projectId={projectId}
+              cloudEnabled={cloudEnabled}
+              onNavigateToCloud={() => setMobileSidebarPanel('cloud')}
+              onSetupAuth={handleSetupAuth}
               onClose={() => setMobileSidebarPanel(null)}
             />
           </SheetContent>
diff --git a/apps/web/components/app-sidebar.tsx b/apps/web/components/app-sidebar.tsx
index 2ebd8d03..9c01a402 100644
--- a/apps/web/components/app-sidebar.tsx
+++ b/apps/web/components/app-sidebar.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useState, useEffect, useRef } from "react"
-import { Image, FolderOpen, Database, ChevronLeft, ChevronRight, X, MessageSquare, Cloud } from "lucide-react"
+import { Image, FolderOpen, Database, ChevronLeft, ChevronRight, X, MessageSquare, Cloud, KeyRound } from "lucide-react"
 import {
   Sidebar,
   SidebarContent,
@@ -19,6 +19,7 @@ import { AssetsPanel } from "@/components/assets-panel"
 import { ProjectsPanel } from "@/components/projects-panel"
 import { BackendPanel } from "@/components/backend-panel"
 import { CloudSidebarPanel } from "@/components/cloud-sidebar-panel"
+import { AuthSidebarPanel } from "@/components/auth-sidebar-panel"
 import { UserMenu } from "@/components/user-menu"
 import { Session } from "@/lib/auth"
 import { cn } from "@/lib/utils"
@@ -39,6 +40,7 @@ interface AppSidebarProps {
   cloudEnabled?: boolean
   cloudDeploymentUrl?: string
   onCloudEnabled?: () => void
+  onSetupAuth?: () => Promise<void>
 }
 
 function SidebarToggle() {
@@ -93,6 +95,12 @@ function SidebarNav({
       icon: Cloud,
       spacer: false,
     },
+    {
+      id: "auth",
+      label: "Authentication",
+      icon: KeyRound,
+      spacer: false,
+    },
     {
       id: "backend",
       label: "Backend",
@@ -182,7 +190,7 @@ function PanelContent({
   children,
   onClose,
 }: {
-  isBottomOption: boolean
+  isBottomOption?: boolean
   isOpen: boolean
   isFirstOpen: boolean
   isSwitching: boolean
@@ -296,6 +304,7 @@ export function AppSidebar({
   cloudEnabled,
   cloudDeploymentUrl,
   onCloudEnabled,
+  onSetupAuth,
 }: AppSidebarProps) {
   const [internalActivePanel, setInternalActivePanel] = useState<string | null>(null)
   const [isFirstOpen, setIsFirstOpen] = useState(true)
@@ -396,6 +405,23 @@ export function AppSidebar({
               cloudEnabled={cloudEnabled || false}
               deploymentUrl={cloudDeploymentUrl}
               onCloudEnabled={onCloudEnabled}
+              onNavigateToAuth={() => handlePanelChange('auth')}
+              onClose={() => handlePanelChange(null)}
+            />
+          </PanelContent>
+
+          <PanelContent
+            isOpen={activePanel === "auth"}
+            isFirstOpen={isFirstOpen}
+            isSwitching={isSwitching}
+            onClose={() => handlePanelChange(null)}
+            isBottomOption
+          >
+            <AuthSidebarPanel
+              projectId={projectId}
+              cloudEnabled={cloudEnabled || false}
+              onNavigateToCloud={() => handlePanelChange('cloud')}
+              onSetupAuth={onSetupAuth || (async () => {})}
               onClose={() => handlePanelChange(null)}
             />
           </PanelContent>
diff --git a/apps/web/components/auth-sidebar-panel.tsx b/apps/web/components/auth-sidebar-panel.tsx
new file mode 100644
index 00000000..a46d7c08
--- /dev/null
+++ b/apps/web/components/auth-sidebar-panel.tsx
@@ -0,0 +1,197 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import {
+  KeyRound,
+  Cloud,
+  CheckCircle2,
+  Loader2,
+  ShieldCheck,
+  Package,
+  Database,
+  Globe,
+  Smartphone,
+  AlertCircle,
+} from 'lucide-react'
+
+interface AuthSidebarPanelProps {
+  projectId?: string
+  cloudEnabled: boolean
+  onNavigateToCloud: () => void
+  onSetupAuth: () => Promise<void>
+  onClose: () => void
+}
+
+const SETUP_STEPS = [
+  { icon: Package, text: '@convex-dev/auth package installation' },
+  { icon: ShieldCheck, text: 'Password provider configuration' },
+  { icon: Database, text: 'Auth tables in your database schema' },
+  { icon: Globe, text: 'HTTP routes for authentication' },
+  { icon: Smartphone, text: 'ConvexAuthProvider in your app layout' },
+]
+
+type SetupStatus = 'idle' | 'loading' | 'success' | 'error'
+
+export function AuthSidebarPanel({
+  projectId,
+  cloudEnabled,
+  onNavigateToCloud,
+  onSetupAuth,
+  onClose,
+}: AuthSidebarPanelProps) {
+  const [setupStatus, setSetupStatus] = useState<SetupStatus>('idle')
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  const handleSetupAuth = async () => {
+    setSetupStatus('loading')
+    setErrorMessage(null)
+    try {
+      await onSetupAuth()
+      setSetupStatus('success')
+    } catch (error) {
+      setSetupStatus('error')
+      setErrorMessage(error instanceof Error ? error.message : 'An unexpected error occurred')
+    }
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between h-[50px] border-b pr-12 pl-4">
+        <h2 className="font-semibold text-lg flex items-center gap-2">
+          <KeyRound className="h-5 w-5" />
+          Authentication
+        </h2>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 flex flex-col items-center overflow-hidden">
+        <div className="w-full max-w-[800px] flex flex-col h-full p-4">
+          <p className="text-sm text-muted-foreground mb-4">
+            Add user authentication to your app
+          </p>
+
+          {!cloudEnabled ? (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 p-4 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg">
+                <Cloud className="h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
+                <div>
+                  <div className="font-medium text-sm text-amber-800 dark:text-amber-200">
+                    Cloud Required
+                  </div>
+                  <div className="text-xs text-amber-700 dark:text-amber-300 mt-1">
+                    Authentication via Convex requires Cloud to be enabled for your project.
+                  </div>
+                </div>
+              </div>
+
+              <p className="text-sm text-muted-foreground">
+                Enable cloud to add Convex Auth to your app. Convex provides secure,
+                production-ready authentication with built-in support for email and password.
+              </p>
+
+              <Button className="w-full" onClick={onNavigateToCloud}>
+                <Cloud className="h-4 w-4 mr-2" />
+                Enable Cloud First
+              </Button>
+            </div>
+          ) : setupStatus === 'success' ? (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 p-4 bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800 rounded-lg">
+                <CheckCircle2 className="h-5 w-5 text-green-600 dark:text-green-400 mt-0.5 shrink-0" />
+                <div>
+                  <div className="font-medium text-sm text-green-800 dark:text-green-200">
+                    Auth setup complete
+                  </div>
+                  <div className="text-xs text-green-700 dark:text-green-300 mt-1">
+                    Convex Auth files have been written and committed to your project.
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-3 bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg">
+                <p className="text-xs text-blue-800 dark:text-blue-200 font-medium mb-1">Next step</p>
+                <p className="text-xs text-blue-700 dark:text-blue-300">
+                  Run <code className="font-mono bg-blue-100 dark:bg-blue-900 px-1 rounded">npx @convex-dev/auth</code> in your project to generate JWT keys, then set <code className="font-mono bg-blue-100 dark:bg-blue-900 px-1 rounded">CONVEX_SITE_URL</code> in your Convex dashboard.
+                </p>
+              </div>
+
+              <Button className="w-full" variant="outline" onClick={onClose}>
+                Close
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <p className="text-sm text-muted-foreground">
+                Set up email and password authentication for your Expo app using Convex Auth.
+              </p>
+
+              <div className="space-y-2">
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  What will be set up
+                </p>
+                <div className="space-y-2">
+                  {SETUP_STEPS.map(({ icon: Icon, text }) => (
+                    <div key={text} className="flex items-center gap-2.5 text-sm">
+                      <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+                      <span>{text}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {setupStatus === 'error' && errorMessage && (
+                <div className="flex items-start gap-3 p-4 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 rounded-lg">
+                  <AlertCircle className="h-5 w-5 text-red-600 dark:text-red-400 mt-0.5 shrink-0" />
+                  <div>
+                    <div className="font-medium text-sm text-red-800 dark:text-red-200">
+                      Setup failed
+                    </div>
+                    <div className="text-xs text-red-700 dark:text-red-300 mt-1">
+                      {errorMessage}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {setupStatus === 'loading' && (
+                <div className="p-3 bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg">
+                  <p className="text-sm text-blue-800 dark:text-blue-200">
+                    Installing packages and writing auth files to your project. This may take a minute...
+                  </p>
+                </div>
+              )}
+
+              {setupStatus === 'idle' && (
+                <div className="p-3 bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg">
+                  <p className="text-sm text-blue-800 dark:text-blue-200">
+                    Auth files will be written directly to your project and committed via git.
+                  </p>
+                </div>
+              )}
+
+              <Button
+                className="w-full"
+                onClick={handleSetupAuth}
+                disabled={setupStatus === 'loading' || !projectId}
+              >
+                {setupStatus === 'loading' ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Setting up...
+                  </>
+                ) : (
+                  <>
+                    <KeyRound className="h-4 w-4 mr-2" />
+                    {setupStatus === 'error' ? 'Retry Setup' : 'Setup Authentication'}
+                  </>
+                )}
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/components/cloud-sidebar-panel.tsx b/apps/web/components/cloud-sidebar-panel.tsx
index 623b72c4..1b5a468d 100644
--- a/apps/web/components/cloud-sidebar-panel.tsx
+++ b/apps/web/components/cloud-sidebar-panel.tsx
@@ -12,7 +12,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
-import { Database, Zap, Cloud, HardDrive, CheckCircle2, Loader2, ExternalLink } from 'lucide-react'
+import { Database, Zap, Cloud, HardDrive, CheckCircle2, Loader2, ExternalLink, KeyRound } from 'lucide-react'
 import { toast } from 'sonner'
 
 interface CloudSidebarPanelProps {
@@ -20,6 +20,7 @@ interface CloudSidebarPanelProps {
   cloudEnabled: boolean
   deploymentUrl?: string
   onCloudEnabled?: () => void
+  onNavigateToAuth?: () => void
   onClose: () => void
 }
 
@@ -28,6 +29,7 @@ export function CloudSidebarPanel({
   cloudEnabled,
   deploymentUrl,
   onCloudEnabled,
+  onNavigateToAuth,
   onClose,
 }: CloudSidebarPanelProps) {
   const [isEnabling, setIsEnabling] = useState(false)
@@ -116,6 +118,25 @@ export function CloudSidebarPanel({
                 <p className="text-sm text-muted-foreground">
                   Your app now has access to a real-time database. The AI will use Convex for all data persistence and backend logic.
                 </p>
+
+                <div className="border rounded-lg p-3 space-y-2">
+                  <div className="flex items-center gap-2">
+                    <KeyRound className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-medium">Authentication</span>
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    Add email/password authentication to your app with Convex Auth.
+                  </p>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-full"
+                    onClick={onNavigateToAuth}
+                  >
+                    <KeyRound className="h-3.5 w-3.5 mr-2" />
+                    Setup Authentication
+                  </Button>
+                </div>
               </div>
             ) : (
               <div className="space-y-4">
diff --git a/apps/web/components/mobile-burger-menu.tsx b/apps/web/components/mobile-burger-menu.tsx
index d9d5c5c0..3070fd74 100644
--- a/apps/web/components/mobile-burger-menu.tsx
+++ b/apps/web/components/mobile-burger-menu.tsx
@@ -16,6 +16,7 @@ import {
   FolderOpen,
   Database,
   Cloud,
+  KeyRound,
   Download,
   Rocket,
   ExternalLink,
@@ -136,6 +137,7 @@ export function MobileBurgerMenu({
     { id: null, label: "Chat", icon: MessageSquare },
     { id: "assets", label: "Assets", icon: Image },
     { id: "cloud", label: "Cloud", icon: Cloud },
+    { id: "auth", label: "Authentication", icon: KeyRound },
     { id: "projects", label: "Projects", icon: FolderOpen },
     { id: "backend", label: "Backend", icon: Database },
   ]