@ramonclaudio/create-vexpo 0.1.0

package/dist/templates/default/app/(app)/sessions.tsx

@@ -0,0 +1,191 @@
+import { useEffect, useState } from "react";
+import {
+  Host,
+  ScrollView,
+  Button,
+  Text,
+  VStack,
+  HStack,
+  Spacer,
+  ContentUnavailableView,
+} from "@expo/ui/swift-ui";
+import {
+  background,
+  buttonStyle,
+  cornerRadius,
+  foregroundStyle,
+  frame,
+  multilineTextAlignment,
+  padding,
+  textSelection,
+  tint,
+} from "@expo/ui/swift-ui/modifiers";
+
+import { SkeletonSessions } from "@/components/ui/skeleton";
+import { useDynamicFont } from "@/lib/dynamic-font";
+
+import { authClient } from "@/lib/auth-client";
+import { haptics } from "@/lib/haptics";
+import { announce } from "@/lib/a11y";
+import { useColors } from "@/hooks/use-theme";
+
+type SessionRow = {
+  id: string;
+  token: string;
+  ipAddress?: string | null;
+  userAgent?: string | null;
+  createdAt: Date;
+  expiresAt: Date;
+};
+
+function formatRelative(date: Date): string {
+  const now = Date.now();
+  const delta = Math.max(0, now - date.getTime());
+  const seconds = Math.floor(delta / 1000);
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  if (months < 12) return `${months}mo ago`;
+  return `${Math.floor(months / 12)}y ago`;
+}
+
+function deviceLabel(userAgent?: string | null): string {
+  if (!userAgent) return "Unknown device";
+  if (/iPhone/i.test(userAgent)) return "iPhone";
+  if (/iPad/i.test(userAgent)) return "iPad";
+  if (/Mac/i.test(userAgent)) return "Mac";
+  if (/Android/i.test(userAgent)) return "Android";
+  if (/Windows/i.test(userAgent)) return "Windows";
+  if (/Linux/i.test(userAgent)) return "Linux";
+  return userAgent.slice(0, 40);
+}
+
+export default function SessionsScreen() {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  const [sessions, setSessions] = useState<SessionRow[] | null>(null);
+  const [revoking, setRevoking] = useState<string | null>(null);
+
+  const load = async () => {
+    const res = await authClient.listSessions();
+    if (res.error) {
+      setSessions([]);
+      return;
+    }
+    const rows = (res.data ?? []).map((s) => ({
+      id: s.id,
+      token: s.token,
+      ipAddress: s.ipAddress ?? null,
+      userAgent: s.userAgent ?? null,
+      createdAt: new Date(s.createdAt),
+      expiresAt: new Date(s.expiresAt),
+    }));
+    setSessions(rows);
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const revoke = async (token: string) => {
+    haptics.medium();
+    setRevoking(token);
+    try {
+      await authClient.revokeSession({ token });
+      haptics.success();
+      announce("Session revoked");
+      await load();
+    } catch {
+      haptics.error();
+    } finally {
+      setRevoking(null);
+    }
+  };
+
+  return (
+    <Host style={{ flex: 1, backgroundColor: colors.background }}>
+      {sessions === null ? (
+        <SkeletonSessions />
+      ) : sessions.length === 0 ? (
+        <ContentUnavailableView
+          title="No active sessions"
+          systemImage="list.bullet.rectangle.portrait"
+          description="You have no other active sessions."
+        />
+      ) : (
+        <ScrollView modifiers={[tint(colors.primary as string)]}>
+          <VStack
+            spacing={12}
+            alignment="leading"
+            modifiers={[padding({ horizontal: 24, top: 24, bottom: 40 })]}
+          >
+            <Text
+              modifiers={[
+                dfont({ size: 13, weight: "semibold" }),
+                foregroundStyle(colors.mutedForeground as string),
+              ]}
+            >
+              ACTIVE SESSIONS
+            </Text>
+            {sessions.map((s) => (
+              <HStack
+                key={s.id}
+                spacing={12}
+                alignment="center"
+                modifiers={[
+                  frame({ maxWidth: 10000 }),
+                  background(colors.muted as string),
+                  cornerRadius(20),
+                  padding({ horizontal: 20, vertical: 14 }),
+                ]}
+              >
+                <VStack alignment="leading" spacing={2}>
+                  <Text modifiers={[dfont({ size: 16, weight: "semibold" }), textSelection(true)]}>
+                    {deviceLabel(s.userAgent)}
+                  </Text>
+                  <Text
+                    modifiers={[
+                      dfont({ size: 13 }),
+                      foregroundStyle(colors.mutedForeground as string),
+                      textSelection(true),
+                    ]}
+                  >
+                    {s.ipAddress ?? "Unknown IP"} · {formatRelative(s.createdAt)}
+                  </Text>
+                </VStack>
+                <Spacer />
+                <Button modifiers={[buttonStyle("plain")]} onPress={() => revoke(s.token)}>
+                  <Text
+                    modifiers={[
+                      dfont({ size: 14, weight: "medium" }),
+                      foregroundStyle(colors.destructive as string),
+                    ]}
+                  >
+                    Revoke
+                  </Text>
+                </Button>
+              </HStack>
+            ))}
+            {revoking ? (
+              <Text
+                modifiers={[
+                  dfont({ size: 13 }),
+                  foregroundStyle(colors.mutedForeground as string),
+                  multilineTextAlignment("center"),
+                  frame({ maxWidth: 10000 }),
+                ]}
+              >
+                Revoking session...
+              </Text>
+            ) : null}
+          </VStack>
+        </ScrollView>
+      )}
+    </Host>
+  );
+}

package/dist/templates/default/app/(app)/welcome.tsx

@@ -0,0 +1,140 @@
+import { useState } from "react";
+import { Image as ExpoImage } from "expo-image";
+import { router } from "expo-router";
+import {
+  Host,
+  VStack,
+  Text,
+  Button,
+  Spacer,
+  Image,
+  ProgressView,
+  RNHostView,
+} from "@expo/ui/swift-ui";
+import {
+  foregroundStyle,
+  buttonStyle,
+  multilineTextAlignment,
+  progressViewStyle,
+  frame,
+  padding,
+  kerning,
+  tint,
+  accessibilityLabel,
+  accessibilityValue,
+} from "@expo/ui/swift-ui/modifiers";
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { Button as ButtonTokens } from "@/constants/layout";
+import { ProminentButton } from "@/components/ui/prominent-button";
+
+import { assets } from "@/lib/assets";
+import { haptics } from "@/lib/haptics";
+import { useColors, useThemedAsset } from "@/hooks/use-theme";
+import { useOnboarding } from "@/hooks/use-onboarding";
+
+type WelcomeStep =
+  | { brand: true; title: string; subtitle: string }
+  | { icon: "hammer.fill" | "checkmark.circle.fill"; title: string; subtitle: string };
+
+const STEPS: readonly WelcomeStep[] = [
+  { brand: true, title: "Welcome", subtitle: "Your new app starts here." },
+  { icon: "hammer.fill", title: "Built with Expo", subtitle: "Universal, fast, native." },
+  {
+    icon: "checkmark.circle.fill",
+    title: "Ready to Go",
+    subtitle: "Start building something great.",
+  },
+] as const;
+
+export default function WelcomeScreen() {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  const brandIcon = useThemedAsset(assets.brandIconLight, assets.brandIconDark);
+  const [step, setStep] = useState(0);
+  const { markSeen } = useOnboarding();
+
+  const handleContinue = async () => {
+    haptics.medium();
+    await markSeen();
+    router.replace("/");
+  };
+
+  const handleNext = () => {
+    haptics.light();
+    setStep((s) => Math.min(s + 1, STEPS.length - 1));
+  };
+
+  const current = STEPS[step];
+  const isLast = step === STEPS.length - 1;
+
+  return (
+    <Host style={{ flex: 1 }}>
+      <VStack spacing={0} modifiers={[padding({ horizontal: 24 }), tint(colors.primary as string)]}>
+        <VStack spacing={12} modifiers={[padding({ top: 24 })]}>
+          <ProgressView
+            value={(step + 1) / STEPS.length}
+            modifiers={[
+              progressViewStyle("linear"),
+              accessibilityLabel("Onboarding progress"),
+              accessibilityValue(`Step ${step + 1} of ${STEPS.length}`),
+            ]}
+          />
+        </VStack>
+
+        <Spacer />
+
+        <VStack key={step} spacing={12} alignment="center">
+          {"brand" in current ? (
+            <RNHostView matchContents>
+              <ExpoImage
+                source={brandIcon}
+                style={{ width: 96, height: 96 }}
+                contentFit="contain"
+                accessibilityLabel="App icon"
+              />
+            </RNHostView>
+          ) : (
+            <Image
+              systemName={current.icon}
+              size={48}
+              color={colors.primary as string}
+              modifiers={[frame({ width: 80, height: 80 })]}
+            />
+          )}
+          <Text modifiers={[dfont({ size: 34, weight: "bold" }), kerning(-0.5)]}>
+            {current.title}
+          </Text>
+          <Text
+            modifiers={[
+              dfont({ size: 17 }),
+              foregroundStyle(colors.mutedForeground as string),
+              multilineTextAlignment("center"),
+            ]}
+          >
+            {current.subtitle}
+          </Text>
+        </VStack>
+
+        <Spacer />
+
+        <VStack spacing={12} modifiers={[padding({ bottom: 24 })]}>
+          <ProminentButton
+            label={isLast ? "Get Started" : "Next"}
+            onPress={isLast ? handleContinue : handleNext}
+          />
+          {!isLast && (
+            <Button
+              label="Skip"
+              modifiers={[
+                buttonStyle("plain"),
+                dfont({ size: ButtonTokens.fontSize, weight: ButtonTokens.secondaryFontWeight }),
+                foregroundStyle(colors.mutedForeground as string),
+              ]}
+              onPress={handleContinue}
+            />
+          )}
+        </VStack>
+      </VStack>
+    </Host>
+  );
+}

package/dist/templates/default/app/(auth)/_layout.tsx

@@ -0,0 +1,31 @@
+import { Stack } from "expo-router";
+
+import { useColors } from "@/hooks/use-theme";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
+import { LoadingScreen } from "@/components/ui/loading-screen";
+
+export { AppErrorBoundary as ErrorBoundary } from "@/components/ui/error-boundary";
+
+export function SuspenseFallback() {
+  return <LoadingScreen />;
+}
+
+export default function AuthLayout() {
+  const colors = useColors();
+  const reduceMotion = useReducedMotion();
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        contentStyle: { backgroundColor: colors.background as string },
+        animation: reduceMotion ? "fade" : "fade_from_bottom",
+        animationDuration: reduceMotion ? 150 : 250,
+      }}
+    >
+      <Stack.Screen name="sign-in" />
+      <Stack.Screen name="sign-up" />
+      <Stack.Screen name="forgot-password" />
+      <Stack.Screen name="reset-password" />
+    </Stack>
+  );
+}

package/dist/templates/default/app/(auth)/forgot-password.tsx

@@ -0,0 +1,168 @@
+import { startTransition, useActionState, useEffect, useState } from "react";
+import { useQuery } from "convex/react";
+import { Image as ExpoImage } from "expo-image";
+import { router } from "expo-router";
+
+import { api } from "@/convex/_generated/api";
+import { Host, ScrollView, VStack, TextField, Button, Text, RNHostView } from "@expo/ui/swift-ui";
+import {
+  autocorrectionDisabled,
+  foregroundStyle,
+  buttonStyle,
+  background,
+  clipShape,
+  disabled,
+  keyboardType,
+  onSubmit,
+  submitLabel,
+  textFieldStyle,
+  textInputAutocapitalization,
+  padding,
+  frame,
+  scrollDismissesKeyboard,
+  accessibilityLabel,
+  accessibilityHint,
+  tint,
+} from "@expo/ui/swift-ui/modifiers";
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { Button as ButtonTokens } from "@/constants/layout";
+
+import { authClient } from "@/lib/auth-client";
+import { assets } from "@/lib/assets";
+import { haptics } from "@/lib/haptics";
+import { firstError, forgotPasswordSchema } from "@/lib/schemas";
+import { ProminentButton } from "@/components/ui/prominent-button";
+import { ErrorText } from "@/components/ui/status-text";
+import { announce } from "@/lib/a11y";
+import { useColors, useThemedAsset } from "@/hooks/use-theme";
+
+type ForgotState = { error?: string };
+const initialState: ForgotState = {};
+
+export default function ForgotPasswordScreen() {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  const brandIcon = useThemedAsset(assets.brandIconLight, assets.brandIconDark);
+  const [email, setEmail] = useState("");
+  const providers = useQuery(api.auth.getEnabledProviders);
+
+  // Password reset requires the email-OTP flow which requires Resend. When
+  // `REQUIRE_EMAIL_VERIFICATION` is unset on the Convex deployment, redirect
+  // away. the sign-in screen also hides the "Forgot password?" link in that
+  // mode, but a deeplinked navigation could still land here.
+  useEffect(() => {
+    if (providers !== undefined && providers.emailFeatures === false) {
+      router.replace("/sign-in");
+    }
+  }, [providers]);
+
+  const [state, submit, isPending] = useActionState<ForgotState, void>(async () => {
+    haptics.light();
+
+    const parsed = forgotPasswordSchema.safeParse({ email });
+    if (!parsed.success) {
+      haptics.error();
+      return { error: firstError(parsed)! };
+    }
+
+    try {
+      // OTP-based reset: server emails a 6-digit code, the next screen
+      // collects code + new password and calls emailOtp.resetPassword.
+      const response = await authClient.emailOtp.sendVerificationOtp({
+        email: parsed.data.email,
+        type: "forget-password",
+      });
+
+      if (response.error) {
+        haptics.error();
+        return { error: response.error.message ?? "Failed to send reset code" };
+      }
+      haptics.success();
+      announce("Reset code sent");
+      router.push({ pathname: "/reset-password", params: { email: parsed.data.email } });
+      return {};
+    } catch {
+      haptics.error();
+      return { error: "An unexpected error occurred. Please try again." };
+    }
+  }, initialState);
+
+  return (
+    <Host style={{ flex: 1, backgroundColor: colors.background }}>
+      <ScrollView
+        modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
+      >
+        <VStack
+          spacing={20}
+          alignment="leading"
+          modifiers={[padding({ horizontal: 24, top: 60, bottom: 40 })]}
+        >
+          <RNHostView matchContents>
+            <ExpoImage
+              source={brandIcon}
+              style={{ width: 56, height: 56 } as never}
+              accessibilityLabel="App icon"
+              contentFit="contain"
+            />
+          </RNHostView>
+
+          <VStack spacing={6} alignment="leading">
+            <Text modifiers={[dfont({ size: 28, weight: "bold" })]}>Reset your password</Text>
+            <Text
+              modifiers={[dfont({ size: 16 }), foregroundStyle(colors.mutedForeground as string)]}
+            >
+              Enter your email and we&apos;ll send you a 6-digit code.
+            </Text>
+          </VStack>
+
+          {state.error && <ErrorText>{state.error}</ErrorText>}
+
+          <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+            <Text modifiers={[dfont({ size: 17, weight: "semibold" })]}>Email</Text>
+            <TextField
+              placeholder="you@example.com"
+              onTextChange={setEmail}
+              modifiers={[
+                textFieldStyle("plain"),
+                padding({ horizontal: 16 }),
+                frame({ maxWidth: Infinity, height: ButtonTokens.height }),
+                background(colors.muted as string),
+                clipShape("capsule"),
+                dfont({ size: 16 }),
+                keyboardType("email-address"),
+                autocorrectionDisabled(),
+                textInputAutocapitalization("never"),
+                onSubmit(() => startTransition(() => submit())),
+                disabled(isPending),
+                submitLabel("send"),
+                accessibilityLabel("Email address"),
+                accessibilityHint("Enter the email associated with your account"),
+              ]}
+            />
+          </VStack>
+
+          <ProminentButton
+            label={isPending ? "Sending..." : "Send reset code"}
+            onPress={() => startTransition(() => submit())}
+            disabled={isPending}
+          />
+
+          <VStack alignment="center" modifiers={[frame({ maxWidth: Infinity })]}>
+            <Button
+              label="Back to sign in"
+              modifiers={[
+                buttonStyle("plain"),
+                foregroundStyle(colors.mutedForeground as string),
+                dfont({ size: 14, weight: "semibold" }),
+              ]}
+              onPress={() => {
+                haptics.light();
+                router.back();
+              }}
+            />
+          </VStack>
+        </VStack>
+      </ScrollView>
+    </Host>
+  );
+}