@usequark/quark-create-app 1.23.11

package/templates/mobile/app/(auth)/sign-in.tsx

@@ -0,0 +1,140 @@
+import { useRouter } from "expo-router";
+import { useState } from "react";
+import { Alert, Pressable, Text, TextInput, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAuth } from "../../hooks/use-auth";
+import { useThemeTokens } from "../../lib/theme-tokens";
+
+export default function SignInScreen() {
+	const router = useRouter();
+	const { signIn, isLoading } = useAuth();
+	const { bgColor, textColor, mutedColor, borderColor, inputBg, isDark } =
+		useThemeTokens();
+	const insets = useSafeAreaInsets();
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+
+	async function handleSignIn() {
+		if (!email || !password) {
+			Alert.alert("Error", "Please enter email and password");
+			return;
+		}
+
+		try {
+			await signIn(email, password);
+			router.replace("/(app)");
+		} catch (error: unknown) {
+			Alert.alert(
+				"Sign In Failed",
+				error instanceof Error ? error.message : "Invalid credentials",
+			);
+		}
+	}
+
+	return (
+		<View
+			style={{
+				flex: 1,
+				justifyContent: "center",
+				padding: 20,
+				paddingTop: insets.top + 20,
+				backgroundColor: bgColor,
+			}}
+			accessibilityLabel="Sign in screen"
+		>
+			<Text
+				style={{
+					fontSize: 28,
+					fontWeight: "bold",
+					color: textColor,
+					marginBottom: 32,
+					textAlign: "center",
+				}}
+				accessibilityRole="header"
+			>
+				Welcome Back
+			</Text>
+
+			<TextInput
+				placeholder="Email"
+				placeholderTextColor={mutedColor}
+				value={email}
+				onChangeText={setEmail}
+				autoCapitalize="none"
+				keyboardType="email-address"
+				autoComplete="email"
+				style={{
+					backgroundColor: inputBg,
+					borderWidth: 1,
+					borderColor,
+					borderRadius: 8,
+					padding: 12,
+					marginBottom: 12,
+					fontSize: 16,
+					color: textColor,
+				}}
+				accessibilityLabel="Email address"
+				accessibilityHint="Enter your email address to sign in"
+			/>
+
+			<TextInput
+				placeholder="Password"
+				placeholderTextColor={mutedColor}
+				value={password}
+				onChangeText={setPassword}
+				secureTextEntry
+				autoComplete="password"
+				style={{
+					backgroundColor: inputBg,
+					borderWidth: 1,
+					borderColor,
+					borderRadius: 8,
+					padding: 12,
+					marginBottom: 20,
+					fontSize: 16,
+					color: textColor,
+				}}
+				accessibilityLabel="Password"
+				accessibilityHint="Enter your password to sign in"
+			/>
+
+			<Pressable
+				onPress={handleSignIn}
+				disabled={isLoading}
+				style={{
+					backgroundColor: isDark ? "#fff" : "#000",
+					padding: 14,
+					borderRadius: 8,
+					alignItems: "center",
+					opacity: isLoading ? 0.6 : 1,
+				}}
+				accessibilityLabel="Sign in"
+				accessibilityRole="button"
+				accessibilityState={{ disabled: isLoading }}
+			>
+				<Text
+					style={{
+						color: isDark ? "#000" : "#fff",
+						fontSize: 16,
+						fontWeight: "600",
+					}}
+				>
+					{isLoading ? "Signing in..." : "Sign In"}
+				</Text>
+			</Pressable>
+
+			<Pressable
+				onPress={() => router.push("/(auth)/sign-up")}
+				style={{ marginTop: 16, alignItems: "center" }}
+				accessibilityLabel="Go to sign up screen"
+				accessibilityRole="button"
+				accessibilityHint="Opens the account creation screen"
+			>
+				<Text style={{ color: mutedColor }}>
+					Don't have an account?{" "}
+					<Text style={{ fontWeight: "600", color: textColor }}>Sign Up</Text>
+				</Text>
+			</Pressable>
+		</View>
+	);
+}

package/templates/mobile/app/(auth)/sign-up.tsx

@@ -0,0 +1,178 @@
+import { useRouter } from "expo-router";
+import { useState } from "react";
+import { Alert, Pressable, Text, TextInput, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useThemeTokens } from "../../lib/theme-tokens";
+
+export default function SignUpScreen() {
+	const router = useRouter();
+	const { bgColor, textColor, mutedColor, inputBg, borderColor, isDark } =
+		useThemeTokens();
+	const insets = useSafeAreaInsets();
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [loading, setLoading] = useState(false);
+
+	async function handleSignUp() {
+		if (!name || !email || !password) {
+			Alert.alert("Error", "Please fill in all fields");
+			return;
+		}
+
+		setLoading(true);
+		try {
+			const { getConfig } = await import("../../lib/config");
+			const config = getConfig();
+
+			const response = await fetch(`${config.apiUrl}/api/auth/register`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ name, email, password }),
+			});
+
+			if (!response.ok) {
+				const error = await response.json();
+				throw new Error(error.message || "Registration failed");
+			}
+
+			Alert.alert("Success", "Account created! Please sign in.", [
+				{ text: "OK", onPress: () => router.replace("/(auth)/sign-in") },
+			]);
+		} catch (error: unknown) {
+			Alert.alert(
+				"Sign Up Failed",
+				error instanceof Error ? error.message : "Registration failed",
+			);
+		} finally {
+			setLoading(false);
+		}
+	}
+
+	return (
+		<View
+			style={{
+				flex: 1,
+				justifyContent: "center",
+				padding: 20,
+				paddingTop: insets.top + 20,
+				backgroundColor: bgColor,
+			}}
+			accessibilityLabel="Create account screen"
+		>
+			<Text
+				style={{
+					fontSize: 28,
+					fontWeight: "bold",
+					color: textColor,
+					marginBottom: 32,
+					textAlign: "center",
+				}}
+				accessibilityRole="header"
+			>
+				Create Account
+			</Text>
+
+			<TextInput
+				placeholder="Name"
+				placeholderTextColor={mutedColor}
+				value={name}
+				onChangeText={setName}
+				autoComplete="name"
+				style={{
+					backgroundColor: inputBg,
+					borderWidth: 1,
+					borderColor,
+					borderRadius: 8,
+					padding: 12,
+					marginBottom: 12,
+					fontSize: 16,
+					color: textColor,
+				}}
+				accessibilityLabel="Full name"
+				accessibilityHint="Enter your full name"
+			/>
+
+			<TextInput
+				placeholder="Email"
+				placeholderTextColor={mutedColor}
+				value={email}
+				onChangeText={setEmail}
+				autoCapitalize="none"
+				keyboardType="email-address"
+				autoComplete="email"
+				style={{
+					backgroundColor: inputBg,
+					borderWidth: 1,
+					borderColor,
+					borderRadius: 8,
+					padding: 12,
+					marginBottom: 12,
+					fontSize: 16,
+					color: textColor,
+				}}
+				accessibilityLabel="Email address"
+				accessibilityHint="Enter your email address"
+			/>
+
+			<TextInput
+				placeholder="Password"
+				placeholderTextColor={mutedColor}
+				value={password}
+				onChangeText={setPassword}
+				secureTextEntry
+				autoComplete="password-new"
+				style={{
+					backgroundColor: inputBg,
+					borderWidth: 1,
+					borderColor,
+					borderRadius: 8,
+					padding: 12,
+					marginBottom: 20,
+					fontSize: 16,
+					color: textColor,
+				}}
+				accessibilityLabel="Password"
+				accessibilityHint="Choose a password for your account"
+			/>
+
+			<Pressable
+				onPress={handleSignUp}
+				disabled={loading}
+				style={{
+					backgroundColor: isDark ? "#fff" : "#000",
+					padding: 14,
+					borderRadius: 8,
+					alignItems: "center",
+					opacity: loading ? 0.6 : 1,
+				}}
+				accessibilityLabel="Create account"
+				accessibilityRole="button"
+				accessibilityState={{ disabled: loading }}
+			>
+				<Text
+					style={{
+						color: isDark ? "#000" : "#fff",
+						fontSize: 16,
+						fontWeight: "600",
+					}}
+				>
+					{loading ? "Creating account..." : "Sign Up"}
+				</Text>
+			</Pressable>
+
+			<Pressable
+				onPress={() => router.back()}
+				style={{ marginTop: 16, alignItems: "center" }}
+				accessibilityLabel="Go to sign in screen"
+				accessibilityRole="button"
+				accessibilityHint="Opens the sign in screen"
+			>
+				<Text style={{ color: mutedColor }}>
+					Already have an account?{" "}
+					<Text style={{ fontWeight: "600", color: textColor }}>Sign In</Text>
+				</Text>
+			</Pressable>
+		</View>
+	);
+}

package/templates/mobile/app/+not-found.tsx

@@ -0,0 +1,32 @@
+import { Link, Stack } from "expo-router";
+import { Text, View } from "react-native";
+import { useThemeTokens } from "../lib/theme-tokens";
+
+export default function NotFoundScreen() {
+	const { bgColor, textColor, mutedColor } = useThemeTokens();
+
+	return (
+		<>
+			<Stack.Screen options={{ title: "Oops!" }} />
+			<View
+				style={{
+					flex: 1,
+					justifyContent: "center",
+					alignItems: "center",
+					padding: 20,
+					backgroundColor: bgColor,
+				}}
+			>
+				<Text style={{ fontSize: 20, fontWeight: "bold", color: textColor }}>
+					Page not found
+				</Text>
+				<Text style={{ marginTop: 8, color: mutedColor }}>
+					This screen doesn't exist.
+				</Text>
+				<Link href="/" style={{ marginTop: 16 }}>
+					<Text style={{ color: "#007AFF" }}>Go to home screen</Text>
+				</Link>
+			</View>
+		</>
+	);
+}

package/templates/mobile/app/_layout.tsx

@@ -0,0 +1,18 @@
+import { Slot } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { ThemeProvider } from "../components/ThemeProvider";
+import { useAuthInit } from "../hooks/use-auth";
+
+export default function RootLayout() {
+	useAuthInit();
+
+	return (
+		<SafeAreaProvider>
+			<ThemeProvider>
+				<StatusBar style="auto" />
+				<Slot />
+			</ThemeProvider>
+		</SafeAreaProvider>
+	);
+}

package/templates/mobile/app.json

@@ -0,0 +1,47 @@
+{
+	"expo": {
+		"name": "__QUARK_APP_NAME__",
+		"slug": "__QUARK_PROJECT_NAME__",
+		"scheme": "__QUARK_PROJECT_NAME__",
+		"version": "1.0.0",
+		"orientation": "portrait",
+		"icon": "./assets/icon.png",
+		"userInterfaceStyle": "automatic",
+		"newArchEnabled": true,
+		"splash": {
+			"image": "./assets/splash.png",
+			"resizeMode": "contain",
+			"backgroundColor": "#ffffff"
+		},
+		"ios": {
+			"supportsTablet": true,
+			"bundleIdentifier": "com.__QUARK_PROJECT_NAME__.app",
+			"config": {
+				"usesNonExemptEncryption": false
+			}
+		},
+		"android": {
+			"adaptiveIcon": {
+				"foregroundImage": "./assets/adaptive-icon.png",
+				"backgroundColor": "#ffffff"
+			},
+			"package": "com.__QUARK_PROJECT_NAME__.app"
+		},
+		"plugins": [
+			"expo-router",
+			"expo-secure-store"
+		],
+		"updates": {
+			"url": "https://u.expo.dev/__QUARK_PROJECT_NAME__",
+			"fallbackToCacheTimeout": 0
+		},
+		"runtimeVersion": {
+			"policy": "appVersion"
+		},
+		"extra": {
+			"eas": {
+				"projectId": "__QUARK_EAS_PROJECT_ID__"
+			}
+		}
+	}
+}

package/templates/mobile/biome.json

@@ -0,0 +1,27 @@
+{
+	"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"includes": ["**", "!**/dist", "!**/.expo"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
+	}
+}

package/templates/mobile/components/AuthGate.tsx

@@ -0,0 +1,19 @@
+import { type ReactNode, useEffect } from "react";
+import { useAuth } from "../hooks/use-auth";
+
+interface AuthGateProps {
+	children: ReactNode;
+}
+
+/**
+ * Wraps authenticated screens and ensures push token is registered.
+ */
+export function AuthGate({ children }: AuthGateProps) {
+	const { registerPushToken } = useAuth();
+
+	useEffect(() => {
+		registerPushToken();
+	}, [registerPushToken]);
+
+	return <>{children}</>;
+}

package/templates/mobile/components/ThemeProvider.tsx

@@ -0,0 +1,23 @@
+import { createContext, type ReactNode, useContext } from "react";
+import { useColorScheme } from "react-native";
+
+type Theme = "light" | "dark";
+
+const ThemeContext = createContext<Theme>("light");
+
+export function useTheme(): Theme {
+	return useContext(ThemeContext);
+}
+
+interface ThemeProviderProps {
+	children: ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+	const colorScheme = useColorScheme();
+	const theme: Theme = colorScheme === "dark" ? "dark" : "light";
+
+	return (
+		<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+	);
+}

package/templates/mobile/eas.json

@@ -0,0 +1,29 @@
+{
+	"cli": {
+		"version": ">= 15.0.0"
+	},
+	"build": {
+		"development": {
+			"developmentClient": true,
+			"distribution": "internal",
+			"android": {
+				"buildType": "apk"
+			}
+		},
+		"preview": {
+			"distribution": "internal",
+			"android": {
+				"buildType": "apk"
+			}
+		},
+		"production": {
+			"autoIncrement": true,
+			"android": {
+				"buildType": "app-bundle"
+			}
+		}
+	},
+	"submit": {
+		"production": {}
+	}
+}

package/templates/mobile/hooks/use-auth.ts

@@ -0,0 +1,127 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+	signIn as authSignIn,
+	signOut as authSignOut,
+	isAuthenticated as checkAuth,
+} from "../lib/auth";
+
+interface AuthState {
+	isAuthenticated: boolean;
+	isLoading: boolean;
+	signIn: (email: string, password: string) => Promise<void>;
+	signOut: () => Promise<void>;
+	registerPushToken: () => Promise<void>;
+}
+
+let authStateListeners: Array<() => void> = [];
+let globalAuthState: AuthState = {
+	isAuthenticated: false,
+	isLoading: true,
+	signIn: async () => {},
+	signOut: async () => {},
+	registerPushToken: async () => {},
+};
+
+function notifyListeners() {
+	for (const listener of authStateListeners) {
+		listener();
+	}
+}
+
+/**
+ * Initialize auth state on app launch.
+ */
+export function useAuthInit() {
+	const [, setState] = useState<AuthState>(globalAuthState);
+
+	useEffect(() => {
+		import("../lib/notifications")
+			.then((m) => m.configureNotificationHandler())
+			.catch(() => {});
+
+		(async () => {
+			try {
+				const authenticated = await checkAuth();
+				globalAuthState = {
+					...globalAuthState,
+					isAuthenticated: authenticated,
+					isLoading: false,
+				};
+				notifyListeners();
+			} catch {
+				globalAuthState = {
+					...globalAuthState,
+					isAuthenticated: false,
+					isLoading: false,
+				};
+				notifyListeners();
+			}
+		})();
+
+		const listener = () => {
+			setState({ ...globalAuthState });
+		};
+		authStateListeners.push(listener);
+
+		return () => {
+			authStateListeners = authStateListeners.filter((l) => l !== listener);
+		};
+	}, []);
+}
+
+/**
+ * Hook to access auth state and actions.
+ */
+export function useAuth(): AuthState {
+	const [state, setState] = useState<AuthState>(globalAuthState);
+
+	useEffect(() => {
+		setState({ ...globalAuthState });
+		const listener = () => setState({ ...globalAuthState });
+		authStateListeners.push(listener);
+		return () => {
+			authStateListeners = authStateListeners.filter((l) => l !== listener);
+		};
+	}, []);
+
+	const signIn = useCallback(async (email: string, password: string) => {
+		await authSignIn(email, password);
+		globalAuthState = {
+			...globalAuthState,
+			isAuthenticated: true,
+			isLoading: false,
+		};
+		notifyListeners();
+	}, []);
+
+	const signOut = useCallback(async () => {
+		await authSignOut();
+		globalAuthState = {
+			...globalAuthState,
+			isAuthenticated: false,
+			isLoading: false,
+		};
+		notifyListeners();
+	}, []);
+
+	const registerPushToken = useCallback(async () => {
+		try {
+			const { registerForPushNotifications, registerDevice } = await import(
+				"../lib/notifications"
+			);
+			const token = await registerForPushNotifications();
+			if (token) {
+				await registerDevice(token);
+			}
+		} catch {
+			// Non-critical - don't block auth flow
+		}
+	}, []);
+
+	return {
+		...state,
+		signIn,
+		signOut,
+		registerPushToken,
+	};
+}