Implement auth pages on frontend

mobile/app/(auth)/_layout.tsx

@@ -0,0 +1,23 @@
+import { Stack } from "expo-router";
+
+export default function AuthLayout() {
+    return (
+        <Stack
+            screenOptions={{
+                headerShown: false,
+                contentStyle: { backgroundColor: "white" },
+                animation: "slide_from_right",
+            }}
+        >
+            <Stack.Screen
+                name="landing"
+                options={{
+                    animation: "fade",
+                }}
+            />
+            <Stack.Screen name="login" />
+            <Stack.Screen name="register" />
+            <Stack.Screen name="register-success" />
+        </Stack>
+    );
+}

mobile/app/(auth)/landing.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { View, Text, TouchableOpacity, SafeAreaView } from "react-native";
+import { useRouter } from "expo-router";
+
+export default function LandingScreen() {
+  const router = useRouter();
+
+  return (
+    <SafeAreaView className="flex-1 bg-white">
+      <View className="flex-1 justify-center items-center px-10">
+        {/* Simple Branding Icon */}
+        <View className="w-24 h-24 bg-green-100 rounded-3xl items-center justify-center mb-6">
+          <Text className="text-5xl">🌱</Text>
+        </View>
+
+        <Text className="text-4xl font-bold text-gray-900 text-center tracking-tight">
+          TerraDetect
+        </Text>
+        <Text className="text-gray-500 text-center mt-3 text-lg leading-6">
+          Real-time soil monitoring and AI-powered crop recommendations.
+        </Text>
+      </View>
+
+      <View className="p-8 space-y-4 mb-10">
+        <TouchableOpacity
+          onPress={() => router.push("/(auth)/login")}
+          activeOpacity={0.8}
+          className="bg-green-600 p-5 rounded-2xl items-center shadow-sm"
+        >
+          <Text className="text-white font-bold text-lg">Sign In</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() => router.push("/(auth)/register")}
+          activeOpacity={0.7}
+          className="bg-white border-2 border-green-600 p-5 rounded-2xl items-center"
+        >
+          <Text className="text-green-600 font-bold text-lg">
+            Create Account
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+}

mobile/app/(auth)/login.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { View, Text, TextInput, TouchableOpacity, Alert } from "react-native";
+import { useRouter } from "expo-router";
+import { api } from "../../lib/api";
+import { useAuthStore } from "../../store/authStore";
+
+export default function LoginScreen() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+  const loginToStore = useAuthStore((state) => state.login);
+
+  const handleLogin = async () => {
+    if (!email || !password)
+      return Alert.alert("Error", "Please fill in all fields");
+
+    setLoading(true);
+    try {
+      const data = await api.login({ email, password });
+
+      // Your Go backend returns { access_token, refresh_token, user: { username, device_id } }
+      await loginToStore(
+        { accessToken: data.access_token, refreshToken: data.refresh_token },
+        { username: data.user.username, deviceId: data.user.device_id },
+      );
+
+      router.replace("/(app)/dashboard");
+    } catch (err: any) {
+      Alert.alert("Login Failed", err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <View className="flex-1 bg-white justify-center px-8">
+      <Text className="text-3xl font-bold text-green-700 mb-8 text-center">
+        TerraDetect
+      </Text>
+
+      <View className="space-y-4">
+        <TextInput
+          className="bg-gray-100 p-4 rounded-xl text-gray-800"
+          placeholder="Email"
+          value={email}
+          onChangeText={setEmail}
+          autoCapitalize="none"
+        />
+        <TextInput
+          className="bg-gray-100 p-4 rounded-xl text-gray-800"
+          placeholder="Password"
+          secureTextEntry
+          value={password}
+          onChangeText={setPassword}
+        />
+
+        <TouchableOpacity
+          onPress={handleLogin}
+          disabled={loading}
+          className={`p-4 rounded-xl items-center ${loading ? "bg-green-300" : "bg-green-600"}`}
+        >
+          <Text className="text-white font-semibold text-lg">
+            {loading ? "Authenticating..." : "Sign In"}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}

mobile/app/(auth)/register-success.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { useRouter } from "expo-router";
+
+export default function RegisterSuccessScreen() {
+  const router = useRouter();
+
+  return (
+    <View className="flex-1 bg-white justify-center items-center px-10">
+      <View className="w-20 h-20 bg-green-500 rounded-full items-center justify-center mb-6">
+        <Text className="text-white text-3xl font-bold">✓</Text>
+      </View>
+
+      <Text className="text-3xl font-bold text-gray-900 text-center">
+        You're all set!
+      </Text>
+      <Text className="text-gray-500 text-center mt-4 text-lg">
+        Your account has been created. You can now log in to connect your
+        sensors and analyze your soil.
+      </Text>
+
+      <TouchableOpacity
+        onPress={() => router.replace("/(auth)/login")}
+        className="bg-green-600 w-full mt-10 p-5 rounded-2xl items-center"
+      >
+        <Text className="text-white font-bold text-lg">Go to Login</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}

mobile/app/(auth)/register.tsx

@@ -0,0 +1,111 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  Alert,
+  ScrollView,
+} from "react-native";
+import { useRouter } from "expo-router";
+import { api } from "../../lib/api";
+
+export default function RegisterScreen() {
+  const [form, setForm] = useState({
+    username: "",
+    email: "",
+    password: "",
+    deviceId: "",
+  });
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const handleRegister = async () => {
+    if (!form.username || !form.email || !form.password) {
+      return Alert.alert(
+        "Error",
+        "Username, Email, and Password are required.",
+      );
+    }
+
+    setLoading(true);
+    try {
+      // Calling your Go backend via the api.ts utility
+      await api.register({
+        username: form.username,
+        email: form.email,
+        password: form.password,
+        device_id: form.deviceId,
+      });
+
+      // Navigate to the success screen instead of a blocking alert
+      router.push("/(auth)/register-success");
+    } catch (err: any) {
+      // Fallback to error message from your Gin middleware/handlers
+      Alert.alert("Registration Failed", err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ScrollView className="flex-1 bg-white px-8 pt-20">
+      <Text className="text-3xl font-bold text-green-700 mb-2">
+        Create Account
+      </Text>
+      <Text className="text-gray-500 mb-8">
+        Join TerraDetect to start monitoring your soil.
+      </Text>
+
+      <View className="space-y-4">
+        <TextInput
+          className="bg-gray-100 p-4 rounded-xl text-gray-800"
+          placeholder="Username"
+          value={form.username}
+          onChangeText={(val) => setForm({ ...form, username: val })}
+        />
+        <TextInput
+          className="bg-gray-100 p-4 rounded-xl text-gray-800"
+          placeholder="Email"
+          keyboardType="email-address"
+          autoCapitalize="none"
+          value={form.email}
+          onChangeText={(val) => setForm({ ...form, email: val })}
+        />
+        <TextInput
+          className="bg-gray-100 p-4 rounded-xl text-gray-800"
+          placeholder="Password"
+          secureTextEntry
+          value={form.password}
+          onChangeText={(val) => setForm({ ...form, password: val })}
+        />
+        <TextInput
+          className="bg-gray-100 p-4 rounded-xl text-gray-800 border-2 border-green-50"
+          placeholder="Device ID (Optional)"
+          value={form.deviceId}
+          onChangeText={(val) => setForm({ ...form, deviceId: val })}
+        />
+
+        <TouchableOpacity
+          onPress={handleRegister}
+          disabled={loading}
+          className={`p-4 mt-4 rounded-xl items-center ${loading ? "bg-green-300" : "bg-green-600"}`}
+        >
+          <Text className="text-white font-semibold text-lg">
+            {loading ? "Creating Account..." : "Sign Up"}
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() => router.push("/(auth)/login")}
+          className="py-4"
+        >
+          <Text className="text-center text-gray-600">
+            Already have an account?{" "}
+            <Text className="text-green-700 font-bold">Login</Text>
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </ScrollView>
+  );
+}

mobile/app/_layout.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { Stack, useRouter, useSegments } from "expo-router";
+import { useAuthStore } from "../store/authStore";
+import { View, ActivityIndicator } from "react-native";
+
+export default function RootLayout() {
+  const { accessToken, loadFromStorage } = useAuthStore();
+  const segments = useSegments();
+  const router = useRouter();
+  const [isReady, setIsReady] = useState(false);
+
+  // 1. Initialize Auth State
+  useEffect(() => {
+    const initialize = async () => {
+      await loadFromStorage();
+      setIsReady(true);
+    };
+    initialize();
+  }, []);
+
+  // 2. Auth Guard Logic
+  useEffect(() => {
+    if (!isReady) return;
+
+    const inAppGroup = segments[0] === "(app)";
+
+    if (!accessToken && inAppGroup) {
+      // If user is not logged in and tries to access (app) folder
+      router.replace("/(auth)/landing");
+    } else if (accessToken && !inAppGroup) {
+      // If user is logged in and tries to access (auth) folder
+      router.replace("/(app)/dashboard");
+    }
+  }, [accessToken, segments, isReady]);
+
+  // 3. Loading State (Prevents flicker during hydration)
+  if (!isReady) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "white",
+        }}
+      >
+        <ActivityIndicator size="large" color="#15803d" />
+      </View>
+    );
+  }
+
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="(auth)" options={{ animation: "fade" }} />
+      <Stack.Screen name="(app)" options={{ animation: "fade" }} />
+    </Stack>
+  );
+}

mobile/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};

mobile/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

mobile/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

mobile/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};