[V0_FILE]typescriptreact:file="app/_layout.tsx" "use client" import { ConvexProvider, ConvexReactClient } from "convex/react" import { useEffect, useState } from "react" import { ActivityIndicator, View } from "react-native" import { AuthProvider } from "@convex-dev/auth/react" import { Slot } from "expo-router" // Initialize the Convex client const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!, { unsavedChangesWarning: false, }) export default function RootLayout() { const [ready, setReady] = useState(false) useEffect(() => { // Simulate loading resources setTimeout(() => { setReady(true) }, 1000) }, []) if (!ready) { return ( ) } return ( ) } [V0_FILE]typescriptreact:file="app/index.tsx" import { useConvexAuth } from "@convex-dev/auth/react" import { Redirect } from "expo-router" import { ActivityIndicator, View } from "react-native" export default function Home() { const { isAuthenticated, isLoading } = useConvexAuth() if (isLoading) { return ( ) } if (!isAuthenticated) { return } return } [V0_FILE]typescriptreact:file="app/auth/login.tsx" "use client" import { useAuthActions } from "@convex-dev/auth/react" import { router } from "expo-router" import { useState } from "react" import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from "react-native" import { useMutation } from "convex/react" import { api } from "../../convex/_generated/api" export default function Login() { const { signIn } = useAuthActions() const createOrUpdateUser = useMutation(api.users.createOrUpdateUser) const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [loading, setLoading] = useState(false) const handleGoogleSignIn = async () => { try { setLoading(true) const user = await signIn("google") if (user) { await createOrUpdateUser({ name: user.name || "", email: user.email || "", imageUrl: user.image || undefined, }) router.replace("/dashboard") } } catch (error) { console.error("Error signing in with Google:", error) Alert.alert("Error", "Failed to sign in with Google") } finally { setLoading(false) } } const handleEmailPasswordSignIn = async () => { if (!email || !password) { Alert.alert("Error", "Please enter email and password") return } try { setLoading(true) const user = await signIn("password", { email, password }) if (user) { await createOrUpdateUser({ name: user.name || email.split("@")[0], email: user.email || email, }) router.replace("/dashboard") } } catch (error) { console.error("Error signing in with email/password:", error) Alert.alert("Error", "Failed to sign in") } finally { setLoading(false) } } return ( Login {loading ? "Signing in..." : "Sign in"} {loading ? "Signing in..." : "Sign in with Google"} router.push("/auth/register")}> Don't have an account? Register ) } const styles = StyleSheet.create({ container: { flex: 1, padding: 20, justifyContent: "center", }, title: { fontSize: 24, fontWeight: "bold", marginBottom: 20, textAlign: "center", }, form: { width: "100%", }, input: { borderWidth: 1, borderColor: "#ddd", padding: 15, borderRadius: 8, marginBottom: 15, }, button: { backgroundColor: "#0070f3", padding: 15, borderRadius: 8, alignItems: "center", marginBottom: 15, }, googleButton: { backgroundColor: "#4285F4", }, buttonText: { color: "white", fontWeight: "bold", }, link: { color: "#0070f3", textAlign: "center", marginTop: 10, }, }) [V0_FILE]typescriptreact:file="app/auth/register.tsx" "use client" import { useAuthActions } from "@convex-dev/auth/react" import { router } from "expo-router" import { useState } from "react" import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from "react-native" import { useMutation } from "convex/react" import { api } from "../../convex/_generated/api" export default function Register() { const { signUp } = useAuthActions() const createOrUpdateUser = useMutation(api.users.createOrUpdateUser) const [name, setName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [loading, setLoading] = useState(false) const handleRegister = async () => { if (!name || !email || !password) { Alert.alert("Error", "Please fill all fields") return } try { setLoading(true) const user = await signUp("password", { email, password }) if (user) { await createOrUpdateUser({ name, email, }) router.replace("/dashboard") } } catch (error) { console.error("Error registering:", error) Alert.alert("Error", "Failed to register") } finally { setLoading(false) } } return ( Register {loading ? "Registering..." : "Register"} router.push("/auth/login")}> Already have an account? Login ) } const styles = StyleSheet.create({ container: { flex: 1, padding: 20, justifyContent: "center", }, title: { fontSize: 24, fontWeight: "bold", marginBottom: 20, textAlign: "center", }, form: { width: "100%", }, input: { borderWidth: 1, borderColor: "#ddd", padding: 15, borderRadius: 8, marginBottom: 15, }, button: { backgroundColor: "#0070f3", padding: 15, borderRadius: 8, alignItems: "center", marginBottom: 15, }, buttonText: { color: "white", fontWeight: "bold", }, link: { color: "#0070f3", textAlign: "center", marginTop: 10, }, }) [V0_FILE]typescriptreact:file="app/(authenticated)/_layout.tsx" import { useConvexAuth } from "@convex-dev/auth/react" import { Redirect, Stack } from "expo-router" import { ActivityIndicator, View } from "react-native" export default function AuthenticatedLayout() { const { isAuthenticated, isLoading } = useConvexAuth() if (isLoading) { return ( ) } if (!isAuthenticated) { return } return ( ) } [V0_FILE]typescriptreact:file="app/(authenticated)/dashboard.tsx" "use client" import { useQuery } from "convex/react" import { api } from "../../convex/_generated/api" import { FlatList, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native" import { useState } from "react" import { useMutation } from "convex/react" import { router } from "expo-router" import { useAuthActions } from "@convex-dev/auth/react" export default function Dashboard() { const { signOut } = useAuthActions() const todos = useQuery(api.todos.getTodos) const addTodo = useMutation(api.todos.addTodo) const [text, setText] = useState("") const handleAddTodo = async () => { if (text.trim()) { await addTodo({ text }) setText("") } } const handleLogout = async () => { await signOut() router.replace("/auth/login") } return ( My Todos router.push("/profile")}> Profile Logout Add {todos ? ( item._id} renderItem={({ item }) => ( {item.text} )} ListEmptyComponent={No todos yet. Add one!} /> ) : ( Loading todos... )} ) } const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, header: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 20, }, title: { fontSize: 24, fontWeight: "bold", }, actions: { flexDirection: "row", }, profileButton: { backgroundColor: "#0070f3", paddingHorizontal: 15, paddingVertical: 8, borderRadius: 8, marginRight: 10, }, logoutButton: { backgroundColor: "#f44336", paddingHorizontal: 15, paddingVertical: 8, borderRadius: 8, }, inputContainer: { flexDirection: "row", marginBottom: 20, }, input: { flex: 1, borderWidth: 1, borderColor: "#ddd", padding: 10, borderRadius: 8, marginRight: 10, }, addButton: { backgroundColor: "#0070f3", paddingHorizontal: 15, justifyContent: "center", borderRadius: 8, }, buttonText: { color: "white", fontWeight: "bold", }, todoItem: { padding: 15, borderBottomWidth: 1, borderBottomColor: "#eee", }, todoText: { fontSize: 16, }, emptyText: { textAlign: "center", marginTop: 20, color: "#666", }, loading: { flex: 1, justifyContent: "center", alignItems: "center", }, }) [V0_FILE]typescriptreact:file="app/(authenticated)/profile.tsx" "use client" import { useQuery, useMutation } from "convex/react" import { api } from "../../convex/_generated/api" import { StyleSheet, Text, TouchableOpacity, View, Image, Alert } from "react-native" import * as ImagePicker from "expo-image-picker" import { useState } from "react" export default function Profile() { const user = useQuery(api.users.getUser) const profileImageUrl = useQuery(api.users.getUserProfileImage) const generateUploadUrl = useMutation(api.users.generateUploadUrl) const updateProfile = useMutation(api.users.updateUserProfile) const [uploading, setUploading] = useState(false) const handleImageUpload = async () => { // Request permission const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync() if (!permissionResult.granted) { Alert.alert("Permission Required", "You need to grant permission to access your photos") return } // Open image picker const pickerResult = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true, aspect: [1, 1], quality: 0.8, }) if (pickerResult.canceled) return try { setUploading(true) // Generate upload URL const uploadUrl = await generateUploadUrl() // Upload image const response = await fetch(pickerResult.assets[0].uri) const blob = await response.blob() const result = await fetch(uploadUrl, { method: "POST", body: blob, }) const { storageId } = await result.json() // Update profile with storage ID await updateProfile({ imageStorageId: storageId }) Alert.alert("Success", "Profile image updated successfully") } catch (error) { console.error("Error uploading image:", error) Alert.alert("Error", "Failed to upload image") } finally { setUploading(false) } } return ( {profileImageUrl ? ( ) : ( {user?.name?.charAt(0) || "?"} )} {uploading ? "Uploading..." : "Change Photo"} {user?.name || "User"} {user?.email || ""} ) } const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, profileHeader: { alignItems: "center", marginBottom: 30, }, imageContainer: { alignItems: "center", marginBottom: 20, }, profileImage: { width: 120, height: 120, borderRadius: 60, marginBottom: 10, }, placeholderImage: { backgroundColor: "#0070f3", justifyContent: "center", alignItems: "center", }, placeholderText: { color: "white", fontSize: 40, fontWeight: "bold", }, uploadButton: { backgroundColor: "#0070f3", paddingHorizontal: 15, paddingVertical: 8, borderRadius: 8, }, uploadButtonText: { color: "white", fontWeight: "bold", }, profileInfo: { alignItems: "center", }, name: { fontSize: 24, fontWeight: "bold", marginBottom: 5, }, email: { fontSize: 16, color: "#666", }, }) [V0_FILE]typescriptreact:file="convex/schema.ts" import { defineSchema, defineTable } from "convex/server" import { v } from "convex/values" import { authTables } from "@convex-dev/auth/server" export default defineSchema({ ...authTables, users: defineTable({ name: v.string(), email: v.string(), imageStorageId: v.optional(v.id("_storage")), imageUrl: v.optional(v.string()), // For Google profile image URL }).index("by_email", ["email"]), todos: defineTable({ text: v.string(), isCompleted: v.boolean(), userId: v.id("users"), }).index("by_user", ["userId"]), }) [V0_FILE]typescriptreact:file="convex/auth.config.ts" import { defineConfig } from "@convex-dev/auth/server" import { Google } from "@auth/core/providers/google" import { Password } from "@convex-dev/auth/providers/Password" export default defineConfig({ providers: [ Google({ clientId: process.env.AUTH_GOOGLE_ID, clientSecret: process.env.AUTH_GOOGLE_SECRET, }), Password, ], }) [V0_FILE]typescriptreact:file="convex/users.ts" import { mutation, query } from "./_generated/server" import { v } from "convex/values" import { getAuthUserId } from "@convex-dev/auth/server" // Create or update user profile export const createOrUpdateUser = mutation({ args: { name: v.string(), email: v.string(), imageUrl: v.optional(v.string()), }, handler: async (ctx, args) => { const userId = await getAuthUserId(ctx) if (!userId) { throw new Error("Not authenticated") } const existingUser = await ctx.db .query("users") .withIndex("by_email", (q) => q.eq("email", args.email)) .unique() if (existingUser) { return await ctx.db.patch(existingUser._id, { name: args.name, imageUrl: args.imageUrl, }) } else { return await ctx.db.insert("users", { _id: userId, name: args.name, email: args.email, imageUrl: args.imageUrl, }) } }, }) // Get current user export const getUser = query({ handler: async (ctx) => { const userId = await getAuthUserId(ctx) if (!userId) { return null } return await ctx.db.get(userId) }, }) // Generate upload URL for profile image export const generateUploadUrl = mutation(async (ctx) => { const userId = await getAuthUserId(ctx) if (!userId) { throw new Error("Not authenticated") } return await ctx.storage.generateUploadUrl() }) // Update user profile with storage ID or URL export const updateUserProfile = mutation({ args: { name: v.optional(v.string()), imageStorageId: v.optional(v.id("_storage")), imageUrl: v.optional(v.string()), }, handler: async (ctx, args) => { const userId = await getAuthUserId(ctx) if (!userId) { throw new Error("Not authenticated") } const updateData: any = {} if (args.name) updateData.name = args.name if (args.imageStorageId) { updateData.imageStorageId = args.imageStorageId updateData.imageUrl = null // Clear Google URL if exists } else if (args.imageUrl) { updateData.imageUrl = args.imageUrl updateData.imageStorageId = null // Clear storage ID if exists } return await ctx.db.patch(userId, updateData) }, }) // Get user profile image URL export const getUserProfileImage = query({ handler: async (ctx) => { const userId = await getAuthUserId(ctx) if (!userId) { return null } const user = await ctx.db.get(userId) if (!user) { return null } if (user.imageUrl) { return user.imageUrl // Return Google image URL directly } else if (user.imageStorageId) { return await ctx.storage.getUrl(user.imageStorageId) } return null // No profile image }, }) // Delete user and all their todos export const deleteUserAndTodos = mutation({ handler: async (ctx) => { const userId = await getAuthUserId(ctx) if (!userId) { throw new Error("Not authenticated") } // Delete all user's todos const userTodos = await ctx.db .query("todos") .withIndex("by_user", (q) => q.eq("userId", userId)) .collect() for (const todo of userTodos) { await ctx.db.delete(todo._id) } // Delete user await ctx.db.delete(userId) // Invalidate session await ctx.auth.invalidateSession() }, }) [V0_FILE]typescriptreact:file="convex/todos.ts" import { mutation, query } from "./_generated/server" import { v } from "convex/values" import { getAuthUserId } from "@convex-dev/auth/server" // Add a new todo export const addTodo = mutation({ args: { text: v.string() }, handler: async (ctx, args) => { const userId = await getAuthUserId(ctx) if (!userId) { throw new Error("Not authenticated") } return await ctx.db.insert("todos", { text: args.text, isCompleted: false, userId, }) }, }) // Get all todos for the current user export const getTodos = query({ handler: async (ctx) => { const userId = await getAuthUserId(ctx) if (!userId) { throw new Error("Not authenticated") } return await ctx.db .query("todos") .withIndex("by_user", (q) => q.eq("userId", userId)) .collect() }, }) // Toggle todo completion status export const toggleTodo = mutation({ args: { id: v.id("todos") }, handler: async (ctx, args) => { const userId = await getAuthUserId(ctx) if (!userId) { throw new Error("Not authenticated") } const todo = await ctx.db.get(args.id) if (!todo) { throw new Error("Todo not found") } if (todo.userId !== userId) { throw new Error("Unauthorized") } return await ctx.db.patch(args.id, { isCompleted: !todo.isCompleted, }) }, }) // Delete a todo export const deleteTodo = mutation({ args: { id: v.id("todos") }, handler: async (ctx, args) => { const userId = await getAuthUserId(ctx) if (!userId) { throw new Error("Not authenticated") } const todo = await ctx.db.get(args.id) if (!todo) { throw new Error("Todo not found") } if (todo.userId !== userId) { throw new Error("Unauthorized") } return await ctx.db.delete(args.id) }, }) [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" export default function Page() { return null }