create-m5kdev 0.25.2 → 0.26.1

package/templates/minimal-app/apps/expo/src/app/login.tsx.tpl

@@ -0,0 +1,71 @@
+import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { Link, useRouter } from "expo-router";
+import { Button } from "heroui-native";
+import { useState } from "react";
+import { Text, View } from "react-native";
+import { AuthScaffold } from "../components/AuthScaffold";
+import { FormTextField } from "../components/FormTextField";
+import { StatusText } from "../components/StatusText";
+
+export default function LoginScreen() {
+  const authClient = useAuthClient();
+  const { registerSession } = useSession();
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+  const [isBusy, setIsBusy] = useState(false);
+
+  const submit = async () => {
+    setIsBusy(true);
+    setStatus(null);
+    try {
+      const result = await authClient.signIn.email({ email, password });
+      if (result.error || !result.data?.user) {
+        setStatus(result.error?.message ?? "Authentication failed");
+        return;
+      }
+      registerSession(() => router.replace("/posts"));
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "Authentication failed");
+    } finally {
+      setIsBusy(false);
+    }
+  };
+
+  return (
+    <AuthScaffold title="Login" description="Sign in to the protected Expo test app.">
+      <View className="gap-4">
+        <FormTextField
+          label="Email"
+          testID="login-email"
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+        />
+        <FormTextField
+          label="Password"
+          testID="login-password"
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry
+        />
+        <StatusText testID="auth-error" tone="error">
+          {status}
+        </StatusText>
+        <Button testID="login-submit" onPress={submit} isDisabled={isBusy}>
+          Login
+        </Button>
+        <View className="flex-row justify-between">
+          <Link href="/signup" asChild>
+            <Text className="text-primary underline">Sign up</Text>
+          </Link>
+          <Link href="/forgot-password" asChild>
+            <Text className="text-primary underline">Forgot password</Text>
+          </Link>
+        </View>
+      </View>
+    </AuthScaffold>
+  );
+}

package/templates/minimal-app/apps/expo/src/app/logout.tsx.tpl

@@ -0,0 +1,19 @@
+import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
+import { Redirect } from "expo-router";
+import { useEffect, useState } from "react";
+import { LoadingScreen } from "../components/LoadingScreen";
+
+export default function LogoutScreen() {
+  const authClient = useAuthClient();
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    authClient.signOut().finally(() => setDone(true));
+  }, [authClient]);
+
+  if (!done) {
+    return <LoadingScreen />;
+  }
+
+  return <Redirect href="/login" />;
+}

package/templates/minimal-app/apps/expo/src/app/organization/accept-invitation.tsx.tpl

@@ -0,0 +1,85 @@
+import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { type Href, Redirect, useLocalSearchParams, useRouter } from "expo-router";
+import { useEffect, useMemo, useState } from "react";
+import { LoadingScreen } from "../../components/LoadingScreen";
+import { trpcClient } from "../../lib/trpc";
+
+function singleParam(value: string | string[] | undefined) {
+  return Array.isArray(value) ? value[0] : value;
+}
+
+export default function AcceptInvitationScreen() {
+  const authClient = useAuthClient();
+  const { data: session, registerSession } = useSession();
+  const router = useRouter();
+  const params = useLocalSearchParams<{ id?: string | string[] }>();
+  const invitationId = singleParam(params.id);
+  const [errorPath, setErrorPath] = useState<string | null>(null);
+
+  const signupPath = useMemo(() => {
+    if (!invitationId) return null;
+    return trpcClient.auth.readInvitation
+      .query({ id: invitationId })
+      .then((invitation) => {
+        const search = new URLSearchParams({
+          invitation: invitationId,
+          email: invitation.email,
+        });
+        return `/signup?${search.toString()}`;
+      })
+      .catch(() => "/signup");
+  }, [invitationId]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    if (!invitationId) {
+      setErrorPath("/signup");
+      return;
+    }
+
+    if (!session) {
+      signupPath?.then((path) => {
+        if (!cancelled) router.replace(path as Href);
+      });
+      return;
+    }
+
+    authClient.organization
+      .acceptInvitation({ invitationId })
+      .then(async ({ data, error }) => {
+        if (error) {
+          throw new Error(error.message ?? "Unable to accept invitation");
+        }
+
+        const organizationId =
+          (data as { invitation?: { organizationId?: string } | null } | null)?.invitation
+            ?.organizationId ?? null;
+
+        if (organizationId) {
+          const activeResult = await authClient.organization.setActive({ organizationId });
+          if (activeResult.error) {
+            throw new Error(activeResult.error.message ?? "Unable to activate organization");
+          }
+        }
+
+        if (!cancelled) {
+          registerSession(() => router.replace("/posts"));
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setErrorPath("/signup");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [authClient, invitationId, registerSession, router, session, signupPath]);
+
+  if (errorPath) {
+    return <Redirect href={errorPath as Href} />;
+  }
+
+  return <LoadingScreen />;
+}

package/templates/minimal-app/apps/expo/src/app/posts.tsx.tpl

@@ -0,0 +1,40 @@
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { Link, Redirect } from "expo-router";
+import { Button, Card, Typography } from "heroui-native";
+import { ScrollView, Text, View } from "react-native";
+
+export default function PostsScreen() {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return <Redirect href="/login" />;
+  }
+
+  return (
+    <ScrollView className="flex-1 bg-background" contentContainerClassName="px-5 py-8">
+      <View className="gap-5">
+        <View className="gap-2">
+          <Text className="text-3xl font-semibold text-foreground">Editorial posts</Text>
+          <Typography.Paragraph className="text-default-600">
+            A small blog that protects auth changes across web and Expo.
+          </Typography.Paragraph>
+          <Text testID="session-email" className="text-sm text-default-600">
+            {session.user.email}
+          </Text>
+        </View>
+        <Card className="gap-2 p-5">
+          <Text className="text-lg font-semibold text-foreground">Native fixture post</Text>
+          <Typography.Paragraph>
+            This protected screen is rendered by Expo Router and authenticated through
+            @m5kdev/frontend.
+          </Typography.Paragraph>
+        </Card>
+        <Link href="/logout" asChild>
+          <Button testID="logout-submit" variant="outline">
+            Logout
+          </Button>
+        </Link>
+      </View>
+    </ScrollView>
+  );
+}

package/templates/minimal-app/apps/expo/src/app/reset-password.tsx.tpl

@@ -0,0 +1,75 @@
+import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
+import { useLocalSearchParams } from "expo-router";
+import { Button } from "heroui-native";
+import { useState } from "react";
+import { View } from "react-native";
+import { AuthScaffold } from "../components/AuthScaffold";
+import { FormTextField } from "../components/FormTextField";
+import { StatusText } from "../components/StatusText";
+
+function singleParam(value: string | string[] | undefined) {
+  return Array.isArray(value) ? value[0] : value;
+}
+
+export default function ResetPasswordScreen() {
+  const authClient = useAuthClient();
+  const params = useLocalSearchParams<{ token?: string | string[] }>();
+  const token = singleParam(params.token);
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+  const [tone, setTone] = useState<"error" | "success">("success");
+  const [isBusy, setIsBusy] = useState(false);
+
+  const submit = async () => {
+    setStatus(null);
+    if (!token) {
+      setTone("error");
+      setStatus("Reset token is required");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setTone("error");
+      setStatus("Passwords do not match");
+      return;
+    }
+    setIsBusy(true);
+    try {
+      await authClient.resetPassword({ newPassword, token });
+      setTone("success");
+      setStatus("Password reset successfully");
+    } catch (error) {
+      setTone("error");
+      setStatus(error instanceof Error ? error.message : "Password reset failed");
+    } finally {
+      setIsBusy(false);
+    }
+  };
+
+  return (
+    <AuthScaffold title="Set a new password">
+      <View className="gap-4">
+        <FormTextField
+          label="New password"
+          testID="reset-password-new"
+          value={newPassword}
+          onChangeText={setNewPassword}
+          secureTextEntry
+        />
+        <FormTextField
+          label="Confirm password"
+          testID="reset-password-confirm"
+          value={confirmPassword}
+          onChangeText={setConfirmPassword}
+          secureTextEntry
+        />
+        <StatusText testID="auth-status" tone={tone}>
+          {status}
+        </StatusText>
+        <Button testID="reset-password-submit" onPress={submit} isDisabled={isBusy}>
+          Reset password
+        </Button>
+      </View>
+    </AuthScaffold>
+  );
+}

package/templates/minimal-app/apps/expo/src/app/signup.tsx.tpl

@@ -0,0 +1,193 @@
+import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { USER_LOCALE_HEADER } from "@m5kdev/commons/modules/auth/auth.constants";
+import { resolveAppLocale } from "@m5kdev/commons/modules/auth/auth.locale";
+import { APP_LOCALE_CONFIG } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
+import { Link, useLocalSearchParams, useRouter } from "expo-router";
+import { Button } from "heroui-native";
+import { useEffect, useMemo, useState } from "react";
+import { Text, View } from "react-native";
+import { AuthScaffold } from "../components/AuthScaffold";
+import { FormTextField } from "../components/FormTextField";
+import { StatusText } from "../components/StatusText";
+import { isWaitlistProfile } from "../config";
+import { trpcClient } from "../lib/trpc";
+
+function singleParam(value: string | string[] | undefined) {
+  return Array.isArray(value) ? value[0] : value;
+}
+
+export default function SignupScreen() {
+  const authClient = useAuthClient();
+  const { registerSession } = useSession();
+  const router = useRouter();
+  const params = useLocalSearchParams<{
+    code?: string | string[];
+    email?: string | string[];
+    invitation?: string | string[];
+  }>();
+  const code = singleParam(params.code);
+  const invitation = singleParam(params.invitation);
+  const lockedEmail = singleParam(params.email);
+  const isPublicWaitlist = isWaitlistProfile && !code && !invitation;
+  const [email, setEmail] = useState(lockedEmail ?? "");
+  const [password, setPassword] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+  const [statusTone, setStatusTone] = useState<"error" | "success">("success");
+  const [isBusy, setIsBusy] = useState(false);
+  const [waitlistCodeStatus, setWaitlistCodeStatus] = useState<string | null>(null);
+  const [isValidatingWaitlistCode, setIsValidatingWaitlistCode] = useState(false);
+  const [waitlistCodeError, setWaitlistCodeError] = useState(false);
+
+  const waitlistStatusText = useMemo(() => {
+    if (!code) return null;
+    if (isValidatingWaitlistCode) return "Validating the invitation code...";
+    if (waitlistCodeError) return "An error occurred while validating the invitation code.";
+    if (waitlistCodeStatus === "VALID") return "Invitation code is valid. You can proceed.";
+    if (waitlistCodeStatus === "EXPIRED") return "Invitation code has expired.";
+    if (waitlistCodeStatus === "NOT_FOUND") return "Invitation code not found.";
+    if (waitlistCodeStatus) return "Invalid invitation code.";
+    return null;
+  }, [code, isValidatingWaitlistCode, waitlistCodeError, waitlistCodeStatus]);
+
+  useEffect(() => {
+    if (lockedEmail) setEmail(lockedEmail);
+  }, [lockedEmail]);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!code) {
+      setWaitlistCodeStatus(null);
+      setWaitlistCodeError(false);
+      return;
+    }
+
+    setIsValidatingWaitlistCode(true);
+    setWaitlistCodeError(false);
+    trpcClient.auth.validateWaitlistCode
+      .query({ code })
+      .then((result) => {
+        if (!cancelled) setWaitlistCodeStatus(result.status);
+      })
+      .catch(() => {
+        if (!cancelled) setWaitlistCodeError(true);
+      })
+      .finally(() => {
+        if (!cancelled) setIsValidatingWaitlistCode(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [code]);
+
+  const submitWaitlist = async () => {
+    setIsBusy(true);
+    setStatus(null);
+    try {
+      await trpcClient.auth.joinWaitlist.mutate({ email });
+      setStatusTone("success");
+      setStatus("Waitlist confirmation email sent");
+    } catch (error) {
+      setStatusTone("error");
+      setStatus(error instanceof Error ? error.message : "Failed to join waitlist");
+    } finally {
+      setIsBusy(false);
+    }
+  };
+
+  const submitSignup = async () => {
+    setIsBusy(true);
+    setStatus(null);
+    try {
+      const deviceLocale = Intl.DateTimeFormat().resolvedOptions().locale;
+      const userLocale = resolveAppLocale(deviceLocale, APP_LOCALE_CONFIG);
+      const result = await authClient.signUp.email(
+        {
+          name: email,
+          email,
+          password,
+        },
+        {
+          headers: {
+            "Waitlist-Invitation-Code": code ?? "",
+            "Organization-Invitation-Code": invitation ?? "",
+            [USER_LOCALE_HEADER]: userLocale,
+          },
+        }
+      );
+      if (result.error) {
+        setStatusTone("error");
+        setStatus(result.error.message ?? "Signup failed");
+        return;
+      }
+      if (isWaitlistProfile || invitation) {
+        const loginResult = await authClient.signIn.email({ email, password });
+        if (loginResult.error || !loginResult.data?.user) {
+          setStatusTone("error");
+          setStatus(loginResult.error?.message ?? "Authentication failed");
+          return;
+        }
+        registerSession(() => router.replace("/posts"));
+        return;
+      }
+      setStatusTone("success");
+      setStatus("Verification email sent");
+    } catch (error) {
+      setStatusTone("error");
+      setStatus(error instanceof Error ? error.message : "Signup failed");
+    } finally {
+      setIsBusy(false);
+    }
+  };
+
+  return (
+    <AuthScaffold
+      title={isPublicWaitlist ? "Join the waitlist" : "Sign up"}
+      description={
+        isPublicWaitlist
+          ? "Request access to the waitlist test profile."
+          : "Create a test account for the Expo app."
+      }
+    >
+      <View className="gap-4">
+        <FormTextField
+          label="Email"
+          testID={isPublicWaitlist ? "waitlist-email" : "signup-email"}
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+          editable={!lockedEmail}
+        />
+        {isPublicWaitlist ? null : (
+          <FormTextField
+            label="Password"
+            testID="signup-password"
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+          />
+        )}
+        <StatusText
+          testID="waitlist-code-status"
+          tone={waitlistCodeStatus === "VALID" ? "success" : "error"}
+        >
+          {waitlistStatusText}
+        </StatusText>
+        <StatusText testID="auth-status" tone={statusTone}>
+          {status}
+        </StatusText>
+        <Button
+          testID={isPublicWaitlist ? "waitlist-submit" : "signup-submit"}
+          onPress={isPublicWaitlist ? submitWaitlist : submitSignup}
+          isDisabled={isBusy}
+        >
+          {isPublicWaitlist ? "Join the waitlist" : "Sign up"}
+        </Button>
+        <Link href="/login" asChild>
+          <Text className="text-center text-primary underline">Already have an account?</Text>
+        </Link>
+      </View>
+    </AuthScaffold>
+  );
+}

package/templates/minimal-app/apps/expo/src/components/AuthScaffold.tsx.tpl

@@ -0,0 +1,34 @@
+import { Card, Typography } from "heroui-native";
+import type { ReactNode } from "react";
+import { ScrollView, Text, View } from "react-native";
+import { appTitle } from "../config";
+
+export function AuthScaffold({
+  children,
+  description,
+  title,
+}: {
+  children: ReactNode;
+  description?: string;
+  title: string;
+}) {
+  return (
+    <ScrollView className="flex-1 bg-background" contentContainerClassName="flex-grow px-5 py-8">
+      <View className="flex-1 justify-center gap-5">
+        <View className="gap-2">
+          <Text className="text-center text-xs font-semibold uppercase tracking-widest text-default-500">
+            Expo auth fixture
+          </Text>
+          <Text className="text-center text-3xl font-semibold text-foreground">{appTitle}</Text>
+          <Typography.Paragraph className="text-center text-default-600">
+            {description ?? "Native auth screens backed by @m5kdev/frontend."}
+          </Typography.Paragraph>
+        </View>
+        <Card className="gap-5 p-5">
+          <Text className="text-xl font-semibold text-foreground">{title}</Text>
+          {children}
+        </Card>
+      </View>
+    </ScrollView>
+  );
+}

package/templates/minimal-app/apps/expo/src/components/FormTextField.tsx.tpl

@@ -0,0 +1,37 @@
+import { Input, Label, TextField } from "heroui-native";
+import type { TextInputProps } from "react-native";
+
+export function FormTextField({
+  label,
+  testID,
+  value,
+  onChangeText,
+  secureTextEntry,
+  keyboardType,
+  autoCapitalize = "none",
+  editable = true,
+}: {
+  label: string;
+  testID: string;
+  value: string;
+  onChangeText: (value: string) => void;
+  secureTextEntry?: boolean;
+  keyboardType?: TextInputProps["keyboardType"];
+  autoCapitalize?: TextInputProps["autoCapitalize"];
+  editable?: boolean;
+}) {
+  return (
+    <TextField isRequired isDisabled={!editable}>
+      <Label>{label}</Label>
+      <Input
+        testID={testID}
+        value={value}
+        onChangeText={onChangeText}
+        secureTextEntry={secureTextEntry}
+        keyboardType={keyboardType}
+        autoCapitalize={autoCapitalize}
+        editable={editable}
+      />
+    </TextField>
+  );
+}

package/templates/minimal-app/apps/expo/src/components/LoadingScreen.tsx.tpl

@@ -0,0 +1,10 @@
+import { Typography } from "heroui-native";
+import { View } from "react-native";
+
+export function LoadingScreen() {
+  return (
+    <View className="flex-1 items-center justify-center bg-background px-6">
+      <Typography.Paragraph testID="loading-state">Loading auth session...</Typography.Paragraph>
+    </View>
+  );
+}

package/templates/minimal-app/apps/expo/src/components/StatusText.tsx.tpl

@@ -0,0 +1,22 @@
+import { Text } from "react-native";
+
+export function StatusText({
+  children,
+  tone = "default",
+  testID,
+}: {
+  children: string | null;
+  tone?: "default" | "error" | "success";
+  testID?: string;
+}) {
+  if (!children) return null;
+
+  const toneClass =
+    tone === "error" ? "text-danger" : tone === "success" ? "text-success" : "text-default-600";
+
+  return (
+    <Text testID={testID} className={`text-sm ${toneClass}`}>
+      {children}
+    </Text>
+  );
+}

package/templates/minimal-app/apps/expo/src/config.ts.tpl

@@ -0,0 +1,9 @@
+import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
+
+export const serverUrl = process.env.EXPO_PUBLIC_SERVER_URL ?? "http://127.0.0.1:8080";
+
+export const appUrl = process.env.EXPO_PUBLIC_APP_URL ?? "http://127.0.0.1:8081";
+
+export const isWaitlistProfile = process.env.EXPO_PUBLIC_ENABLE_WAITLIST === "true";
+
+export const appTitle = APP_NAME;

package/templates/minimal-app/apps/expo/src/global.css.tpl

@@ -0,0 +1,11 @@
+@import "tailwindcss";
+@import "uniwind";
+
+@import "heroui-native/styles";
+
+/* End-user path: heroui-native lives in the project's node_modules, one
+   level up from this src/global.css file. */
+/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind v4 source directive. */
+@source '../node_modules/heroui-native/lib';
+/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind v4 source directive for workspace package classes. */
+@source '../../../../packages/frontend/dist/src/**/*.{js,ts,jsx,tsx}';

package/templates/minimal-app/apps/expo/src/lib/trpc.ts.tpl

@@ -0,0 +1,20 @@
+import type { BackendTRPCRouter } from "@m5kdev/backend/types";
+import { transformer } from "@m5kdev/commons/utils/trpc";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { serverUrl } from "../config";
+
+export const trpcClient = createTRPCClient<BackendTRPCRouter>({
+  links: [
+    httpBatchLink({
+      url: `${serverUrl}/trpc`,
+      fetch(url, options) {
+        return fetch(url, {
+          ...options,
+          body: options?.body ? (options.body as BodyInit | null | undefined) : undefined,
+          credentials: "include",
+        });
+      },
+      transformer,
+    }),
+  ],
+});

package/templates/minimal-app/apps/expo/tsconfig.json.tpl

@@ -0,0 +1,11 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/assets/*": ["./assets/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts", "uniwind-env.d.ts"]
+}

package/templates/minimal-app/apps/expo/uniwind-env.d.ts.tpl

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

package/templates/minimal-app/apps/expo/uniwind-types.d.ts.tpl

@@ -0,0 +1,10 @@
+// NOTE: This file is generated by uniwind and it should not be edited manually.
+/// <reference types="uniwind/types" />
+
+declare module 'uniwind' {
+    export interface UniwindConfig {
+        themes: readonly ['light', 'dark']
+    }
+}
+
+export {}