@pylonsync/create-pylon 0.8.0 → 0.8.2

package/bin/create-pylon.js

@@ -98,6 +98,12 @@ const TEMPLATE_REGISTRY = {
 		platforms: [],
 		unified: true,
 	},
+	mobile: {
+		blurb:
+			"App Store-ready mobile app — Expo Router, guest-first onboarding, Sign in with Apple/Google/email code, RevenueCat paywall, offline sync, EAS profiles + a submission checklist. Backend in apps/api.",
+		platforms: ["expo"],
+		unified: false,
+	},
 	consumer: {
 		blurb:
 			"Social feed — live posts + likes, public-read, owner-write. One SSR app.",
@@ -289,6 +295,7 @@ ${tmplLines.join("\n")}
 Examples:
   npm create @pylonsync/pylon my-app                        # default — the smallest SSR app that runs
   npm create @pylonsync/pylon my-app --template saas        # building a product? start here: landing + orgs + billing
+  npm create @pylonsync/pylon my-app --template mobile      # App Store-ready Expo app + backend: onboarding, sign-in, paywall
   npm create @pylonsync/pylon my-app --template todo        # live, optimistic todo (SSR, one port)
   npm create @pylonsync/pylon my-app --template chat         # realtime live chat room
   npm create @pylonsync/pylon my-app --template waitlist     # coming-soon landing + live signup counter
@@ -379,7 +386,8 @@ if (!isUnified && !flags.platforms) {
 				)
 			).trim()
 		: "";
-	flags.platforms = ans || "web";
+	flags.platforms =
+		ans || (TEMPLATE_REGISTRY[flags.template].platforms[0] ?? "web");
 }
 if (!flags.pm) {
 	const detected = detectPackageManager();
@@ -417,7 +425,7 @@ rl.close();
 // everything else, parse + validate the platform list.
 const platforms = isUnified
 	? []
-	: (flags.platforms ?? "web")
+	: (flags.platforms ?? TEMPLATE_REGISTRY[flags.template].platforms[0] ?? "web")
 			.split(",")
 			.map((p) => p.trim().toLowerCase())
 			.filter(Boolean);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Scaffold a new Pylon app — realtime backend + web/mobile/expo frontends in one command. Run via `npm create @pylonsync/pylon@latest`.",
   "publishConfig": {
     "access": "public"

package/templates/backend/mobile/apps/api/.env.example

@@ -0,0 +1,22 @@
+# Copy to .env for local development. `pylon deploy` reads secrets from
+# `pylon secrets set`, not from this file.
+
+# --- Native sign-in ---------------------------------------------------------
+# Sign in with Apple: the iOS bundle id (comma-separate several).
+PYLON_APPLE_NATIVE_CLIENT_IDS=com.example.__APP_NAME_SNAKE__
+# Google Sign-In: the iOS and Android OAuth client ids from Google Cloud.
+PYLON_GOOGLE_NATIVE_CLIENT_IDS=
+
+# --- Email codes -------------------------------------------------------------
+# Magic codes are logged to the console in dev. For real email set a provider:
+# PYLON_EMAIL_PROVIDER=resend
+# RESEND_API_KEY=re_...
+# PYLON_EMAIL_FROM="__APP_NAME__ <hello@example.com>"
+
+# --- In-app purchases (RevenueCat) --------------------------------------------
+# The Authorization header value you set on the RevenueCat webhook
+# (Project → Integrations → Webhooks). Unset = webhook disabled.
+REVENUECAT_WEBHOOK_AUTH=
+# Secret API key (Project → API keys) so syncEntitlements can read a
+# subscriber. A public SDK key also works for that read.
+REVENUECAT_SECRET_KEY=

package/templates/backend/mobile/apps/api/README.md

@@ -0,0 +1,31 @@
+# __APP_NAME__ API
+
+The Pylon backend for the __APP_NAME__ mobile app. One process serves the
+data API, realtime sync, auth, and the RevenueCat webhook.
+
+```
+app.ts                 User + Note + RcEntitlement (from @pylonsync/revenuecat)
+functions/createNote   server-enforced free-tier cap, then insert
+functions/revenuecatWebhook, syncEntitlements, _pylonRcUpsertEntitlement
+lib/purchases.ts       the RevenueCat plugin instance + FREE_NOTE_LIMIT
+```
+
+## Run
+
+```bash
+bun run dev      # http://localhost:4321 — the Expo app points here in dev
+```
+
+Magic codes print to this console in dev. Native sign-in needs the ids in
+`.env.example`.
+
+## Deploy
+
+```bash
+pylon deploy
+pylon secrets set REVENUECAT_WEBHOOK_AUTH=... REVENUECAT_SECRET_KEY=... \
+  PYLON_APPLE_NATIVE_CLIENT_IDS=com.example.__APP_NAME_SNAKE__
+```
+
+Then set `EXPO_PUBLIC_PYLON_BASE_URL` in `apps/expo/.env` to the deployed URL
+and point the RevenueCat webhook at `<url>/api/fn/revenuecatWebhook`.

package/templates/backend/mobile/apps/api/app.ts

@@ -0,0 +1,89 @@
+import {
+  auth,
+  buildManifest,
+  discoverFunctions,
+  entity,
+  field,
+  policy,
+} from "@pylonsync/sdk";
+// Native in-app purchases: RevenueCat events become RcEntitlement rows
+// that sync to every device. See lib/purchases.ts.
+import { purchases, FREE_NOTE_LIMIT } from "./lib/purchases";
+
+// Accounts. Email code, Sign in with Apple, and Google Sign-In all land
+// here. The app starts every user as a guest; signing in later merges the
+// guest's rows into the account, so nothing made before sign-up is lost.
+const User = entity(
+  "User",
+  {
+    email: field.string(),
+    displayName: field.string().optional(),
+    // The register / OAuth paths stamp these; the entity must declare them.
+    avatarColor: field.string().optional(),
+    emailVerified: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
+);
+
+// The app's data. One owner-scoped entity to build on: replace `Note` with
+// whatever your app stores. `field.owner()` stamps the caller's user id on
+// insert and the policy scopes every read and write to that owner.
+const Note = entity(
+  "Note",
+  {
+    ownerId: field.id("User").owner(),
+    title: field.string(),
+    body: field.string().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_owner", fields: ["ownerId"], unique: false }] },
+);
+
+const userPolicy = policy({
+  name: "user_self",
+  entity: "User",
+  allowRead: "auth.userId == data.id",
+  allowInsert: "false",
+  allowUpdate: "auth.userId == data.id",
+  allowDelete: "false",
+});
+
+// Reads, edits, and deletes go straight through sync. Inserts go through
+// the `createNote` action so the free-tier cap is enforced on the server
+// (a client cannot skip the paywall by writing the row itself).
+const notePolicy = policy({
+  name: "note_owner",
+  entity: "Note",
+  allowRead: "auth.userId == data.ownerId",
+  allowInsert: "false",
+  allowUpdate: "auth.userId == data.ownerId",
+  allowDelete: "auth.userId == data.ownerId",
+});
+
+const fns = await discoverFunctions();
+
+const manifest = buildManifest({
+  name: "__APP_NAME__",
+  version: "0.1.0",
+  entities: [User, Note, ...purchases.manifest.entities],
+  queries: fns.queries,
+  // The plugin's handlers are re-exported from functions/, so discovery
+  // already lists them; spreading `purchases.manifest.actions` too would
+  // register each twice.
+  actions: fns.actions,
+  policies: [userPolicy, notePolicy, ...purchases.manifest.policies],
+  // API only: the Expo app is the frontend.
+  routes: [],
+  // Email/password + magic codes are on by default. Native sign-in needs
+  // the app's ids on the server: PYLON_APPLE_NATIVE_CLIENT_IDS (the iOS
+  // bundle id) and PYLON_GOOGLE_NATIVE_CLIENT_IDS (the iOS + Android OAuth
+  // client ids). See .env.example.
+  auth: auth(),
+});
+
+// The CLI runs `bun run app.ts` and reads this as the manifest.
+console.log(JSON.stringify(manifest, null, 2));
+
+export { FREE_NOTE_LIMIT };
+export default manifest;

package/templates/backend/mobile/apps/api/functions/_pylonRcUpsertEntitlement.ts

@@ -0,0 +1 @@
+export { _pylonRcUpsertEntitlement as default } from "../lib/purchases";

package/templates/backend/mobile/apps/api/functions/createNote.ts

@@ -0,0 +1,44 @@
+import { mutation, v } from "@pylonsync/functions";
+import { hasEntitlement } from "@pylonsync/revenuecat";
+import { FREE_NOTE_LIMIT, PRO_ENTITLEMENT } from "../lib/purchases";
+
+/**
+ * Create a note for the caller. The free tier is capped here, on the
+ * server, so the paywall cannot be skipped by writing the row directly
+ * (the Note policy denies client inserts).
+ *
+ * Returns `LIMIT_REACHED` when a free account is at the cap; the app opens
+ * the paywall on that code.
+ */
+export default mutation({
+  args: {
+    title: v.string(),
+    body: v.optional(v.string()),
+  },
+  async handler(ctx, args: { title: string; body?: string }) {
+    const userId = ctx.auth.userId;
+    if (!userId) throw ctx.error("UNAUTHENTICATED", "sign in first");
+    const title = args.title.trim();
+    if (!title) throw ctx.error("INVALID_ARGS", "title is required");
+
+    const entitlements = await ctx.db.query("RcEntitlement", { userId });
+    const pro = hasEntitlement(
+      entitlements as Array<{ entitlement: string; status: string; expiresAt?: string | null }>,
+      PRO_ENTITLEMENT,
+    );
+    if (!pro) {
+      const mine = await ctx.db.query("Note", { ownerId: userId });
+      if (mine.length >= FREE_NOTE_LIMIT) {
+        throw ctx.error(
+          "LIMIT_REACHED",
+          `Free accounts can keep ${FREE_NOTE_LIMIT} notes. Upgrade for unlimited notes.`,
+        );
+      }
+    }
+    return ctx.db.insert("Note", {
+      ownerId: userId,
+      title,
+      body: args.body?.trim() ?? "",
+    });
+  },
+});

package/templates/backend/mobile/apps/api/functions/revenuecatWebhook.ts

@@ -0,0 +1 @@
+export { revenuecatWebhook as default } from "../lib/purchases";

package/templates/backend/mobile/apps/api/functions/syncEntitlements.ts

@@ -0,0 +1 @@
+export { syncEntitlements as default } from "../lib/purchases";

package/templates/backend/mobile/apps/api/lib/purchases.ts

@@ -0,0 +1,22 @@
+import { revenuecat } from "@pylonsync/revenuecat";
+
+/** Entitlement identifier as configured in the RevenueCat dashboard. */
+export const PRO_ENTITLEMENT = "pro";
+
+/** Notes a free account can keep. The `createNote` action enforces it. */
+export const FREE_NOTE_LIMIT = 10;
+
+// One plugin instance for the whole app. Its manifest fragment is spread
+// into app.ts; its handlers are re-exported from functions/ (one file per
+// function, because the loader wants one default export per file).
+//
+// Env (apps/api/.env):
+//   REVENUECAT_WEBHOOK_AUTH   the Authorization value you set on the dashboard webhook
+//   REVENUECAT_SECRET_KEY     for syncEntitlements (a public SDK key also works)
+// Point the dashboard webhook at https://<your-app>/api/fn/revenuecatWebhook.
+export const purchases = revenuecat({
+  entitlements: [PRO_ENTITLEMENT],
+});
+
+export const { revenuecatWebhook, syncEntitlements } = purchases.handlers;
+export const { _pylonRcUpsertEntitlement } = purchases.internals;

package/templates/backend/mobile/apps/api/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@__APP_NAME_KEBAB__/api",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pylon dev",
+    "build": "pylon build",
+    "deploy": "pylon deploy",
+    "check": "tsc --noEmit",
+    "test": "pylon test"
+  },
+  "dependencies": {
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/functions": "^__PYLON_VERSION__",
+    "@pylonsync/revenuecat": "^__PYLON_VERSION__"
+  },
+  "devDependencies": {
+    "@pylonsync/cli": "^__PYLON_VERSION__",
+    "@types/node": "^22.0.0",
+    "typescript": "^5.6.0"
+  }
+}

package/templates/backend/mobile/apps/api/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["app.ts", "functions", "lib"]
+}

package/templates/expo/mobile/apps/expo/.env.example

@@ -0,0 +1,19 @@
+# Copy to .env. Only EXPO_PUBLIC_* vars reach the app bundle.
+
+# The Pylon backend. Local: the api app on your machine. Android emulator
+# reaches the host at 10.0.2.2 (handled in src/pylon.ts when unset).
+EXPO_PUBLIC_PYLON_BASE_URL=http://localhost:4321
+
+# RevenueCat public SDK keys (Project → API keys). One per platform.
+EXPO_PUBLIC_REVENUECAT_IOS_KEY=
+EXPO_PUBLIC_REVENUECAT_ANDROID_KEY=
+
+# Google Sign-In OAuth client ids (Google Cloud → Credentials). The web
+# client id is what the SDK calls webClientId; the iOS id is the iOS client.
+EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID=
+EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID=
+
+# Shown in Settings and required by both stores.
+EXPO_PUBLIC_PRIVACY_URL=https://example.com/privacy
+EXPO_PUBLIC_TERMS_URL=https://example.com/terms
+EXPO_PUBLIC_SUPPORT_EMAIL=support@example.com

package/templates/expo/mobile/apps/expo/README.md

@@ -0,0 +1,34 @@
+# __APP_NAME__ (Expo)
+
+The mobile app. Expo Router, guest-first onboarding, Sign in with Apple /
+Google / email code, a RevenueCat paywall, and an offline-capable synced
+list, wired to the Pylon backend in `apps/api`.
+
+```
+app/_layout.tsx            session-driven route guard
+app/(onboarding)/welcome   three slides → guest session → paywall (once) → app
+app/(auth)/sign-in, verify Apple, Google, email code
+app/paywall                RevenueCat offering; annual preselected; restore
+app/(tabs)/index           the Notes list (free cap enforced server-side)
+app/(tabs)/settings        account, subscription, legal, delete account
+src/session.tsx            boot + state machine
+src/purchases.ts           RevenueCat wrapper, safe in Expo Go
+src/entitlements.ts        usePro() from the synced RcEntitlement rows
+src/analytics.ts           funnel events; wire to your SDK in one place
+STORE.md                   the submission checklist
+```
+
+## Run
+
+```bash
+cp .env.example .env
+bun run dev          # Expo Go: everything except native sign-in and purchases
+eas build --profile development --platform ios && bun run dev   # dev build: everything
+```
+
+The backend must be running (`cd ../api && bun run dev`) or deployed
+(`EXPO_PUBLIC_PYLON_BASE_URL` in `.env`).
+
+## Ship
+
+See `STORE.md`.

package/templates/expo/mobile/apps/expo/STORE.md

@@ -0,0 +1,82 @@
+# From scaffold to the App Store
+
+The order below is the shortest path that App Review and Google Play accept
+on the first try. Each step is one command or one dashboard page.
+
+## 1. Backend live
+
+```bash
+cd apps/api && pylon deploy
+pylon secrets set PYLON_APPLE_NATIVE_CLIENT_IDS=<bundle id> REVENUECAT_WEBHOOK_AUTH=<random> REVENUECAT_SECRET_KEY=<key>
+```
+
+Put the deployed URL in `apps/expo/eas.json` (`EXPO_PUBLIC_PYLON_BASE_URL`
+under `preview` and `production`).
+
+## 2. Identifiers
+
+- Pick a bundle id (`com.yourco.app`) and set `APP_BUNDLE_ID` in `eas.json`
+  env for every profile, or export it before building.
+- `eas init` prints the project id; set `EAS_PROJECT_ID` the same way.
+- Apple: an App ID with the Sign in with Apple capability. EAS creates it on
+  the first `eas build` when you let it manage credentials.
+- Google: OAuth client ids (iOS + Android + Web) in Google Cloud. Put the
+  web and iOS ids in `apps/expo/.env` and both ids in
+  `PYLON_GOOGLE_NATIVE_CLIENT_IDS` on the backend.
+
+## 3. Products
+
+1. App Store Connect → the app → Subscriptions: one group, monthly + annual
+   (annual with a 7-day introductory free trial converts best).
+2. Google Play Console → Monetize → Subscriptions: the same two products.
+3. RevenueCat → Project: add both apps, import the products, make an
+   entitlement `pro`, and an offering "default" with a monthly and an annual
+   package. Copy the iOS and Android public SDK keys to `apps/expo/.env`.
+4. RevenueCat → Integrations → Webhooks: URL `<backend>/api/fn/revenuecatWebhook`,
+   Authorization header = the `REVENUECAT_WEBHOOK_AUTH` value.
+
+## 4. Build
+
+```bash
+eas build --profile development --platform ios   # dev client for the simulator
+eas build --profile preview --platform all       # TestFlight / internal testing
+eas build --profile production --platform all    # store build
+```
+
+Test the purchase on TestFlight with a sandbox Apple ID before submitting.
+
+## 5. Store listing
+
+Both stores require, and reviewers check:
+
+- Privacy policy URL and terms URL (`EXPO_PUBLIC_PRIVACY_URL`, `EXPO_PUBLIC_TERMS_URL`).
+  The app shows them in Settings and under the paywall.
+- Account deletion inside the app (Settings → Delete account). Present.
+- Sign in with Apple when any other third-party sign-in is offered. Present.
+- Subscription terms next to the purchase button (price, period, renewal). Present.
+- Restore purchases. Present in the paywall and Settings.
+- App Privacy answers: this template stores email (account), user content
+  (notes), and purchase history (via RevenueCat). No tracking.
+- Screenshots: 6.7" and 6.1" iPhone; 7" and 10" tablets are optional when
+  `supportsTablet` is false.
+- A demo account for the reviewer: create one with an email code and put
+  the address plus "use the email code sent to this address" in Review
+  Notes, or turn on `PYLON_DEV_MODE`-style test codes on a staging backend.
+
+## 6. Submit
+
+```bash
+eas submit --platform ios --latest
+eas submit --platform android --latest
+```
+
+Fill `submit.production.ios.ascAppId` in `eas.json` with the App Store
+Connect app id first.
+
+## After launch
+
+- The `track()` calls in `src/analytics.ts` already name the funnel:
+  onboarding → paywall_shown → purchase_completed. Wire them to your
+  analytics SDK to see conversion per step.
+- Prices, trials, and which packages appear are RevenueCat offering
+  settings; change them without shipping an update.

package/templates/expo/mobile/apps/expo/app/(auth)/_layout.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { Stack } from "expo-router";
+
+export default function AuthLayout() {
+  return <Stack screenOptions={{ headerShown: false }} />;
+}

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

@@ -0,0 +1,194 @@
+import React, { useEffect, useState } from "react";
+import { Alert, Platform, Text, View } from "react-native";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { nativeSignIn, sendEmailCode } from "@pylonsync/react-native";
+import { track } from "@/analytics";
+import { useAppSession } from "@/session";
+import { space, useTheme } from "@/theme";
+import { Body, Button, Caption, Field, Screen, Spacer, Title } from "@/ui";
+
+type AppleAuth = typeof import("expo-apple-authentication");
+type GoogleSignin = typeof import("@react-native-google-signin/google-signin");
+
+function loadApple(): AppleAuth | null {
+  if (Platform.OS !== "ios") return null;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require("expo-apple-authentication") as AppleAuth;
+  } catch {
+    return null;
+  }
+}
+
+function loadGoogle(): GoogleSignin | null {
+  if (!process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID) return null;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require("@react-native-google-signin/google-signin") as GoogleSignin;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Sign in or create an account. Every method lands on the same server
+ * session; a guest's data merges into the account on first sign-in.
+ *
+ *   Apple   iOS only. Required by App Review when any third-party sign-in
+ *           is offered. Reveals the name only on the first sign-in, which
+ *           is forwarded to the server.
+ *   Google  when EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID is set.
+ *   Email   a 6-digit code; no password to remember.
+ */
+export default function SignIn() {
+  const router = useRouter();
+  const t = useTheme();
+  const params = useLocalSearchParams<{ next?: string }>();
+  const { continueAsGuest, state } = useAppSession();
+  const [email, setEmail] = useState("");
+  const [busy, setBusy] = useState<string | null>(null);
+  const [appleAvailable, setAppleAvailable] = useState(false);
+  const apple = loadApple();
+  const google = loadGoogle();
+
+  useEffect(() => {
+    void apple?.isAvailableAsync().then(setAppleAvailable);
+    google?.GoogleSignin.configure({
+      webClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID,
+      iosClientId: process.env.EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID,
+    });
+  }, [apple, google]);
+
+  function done() {
+    track("sign_in_completed");
+    if (params.next) router.replace(params.next as never);
+    else router.replace("/(tabs)");
+  }
+
+  async function withApple() {
+    if (!apple) return;
+    setBusy("apple");
+    track("sign_in_started", { method: "apple" });
+    try {
+      const credential = await apple.signInAsync({
+        requestedScopes: [
+          apple.AppleAuthenticationScope.FULL_NAME,
+          apple.AppleAuthenticationScope.EMAIL,
+        ],
+      });
+      if (!credential.identityToken) throw new Error("Apple returned no identity token");
+      const name = [credential.fullName?.givenName, credential.fullName?.familyName]
+        .filter(Boolean)
+        .join(" ");
+      await nativeSignIn("apple", credential.identityToken, name || undefined);
+      done();
+    } catch (e) {
+      if ((e as { code?: string })?.code !== "ERR_REQUEST_CANCELED") {
+        Alert.alert("Sign in failed", messageOf(e));
+      }
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  async function withGoogle() {
+    if (!google) return;
+    setBusy("google");
+    track("sign_in_started", { method: "google" });
+    try {
+      await google.GoogleSignin.hasPlayServices();
+      const result = await google.GoogleSignin.signIn();
+      const idToken = result.type === "success" ? result.data.idToken : null;
+      if (!idToken) return;
+      await nativeSignIn("google", idToken, result.type === "success" ? result.data.user.name : undefined);
+      done();
+    } catch (e) {
+      Alert.alert("Sign in failed", messageOf(e));
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  async function withEmail() {
+    const address = email.trim().toLowerCase();
+    if (!address.includes("@")) {
+      Alert.alert("Enter your email address");
+      return;
+    }
+    setBusy("email");
+    track("sign_in_started", { method: "email" });
+    try {
+      await sendEmailCode(address);
+      router.push({ pathname: "/(auth)/verify", params: { email: address, next: params.next ?? "" } });
+    } catch (e) {
+      Alert.alert("Couldn't send the code", messageOf(e));
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  return (
+    <Screen>
+      <Spacer h={space.xxl} />
+      <Title>Sign in</Title>
+      <Body muted style={{ marginTop: space.sm }}>
+        Keep your notes on every device. Anything you made already comes with you.
+      </Body>
+      <Spacer h={space.xxl} />
+      <View style={{ gap: space.md }}>
+        {appleAvailable && apple ? (
+          <apple.AppleAuthenticationButton
+            buttonType={apple.AppleAuthenticationButtonType.CONTINUE}
+            buttonStyle={
+              t.bg === "#ffffff"
+                ? apple.AppleAuthenticationButtonStyle.BLACK
+                : apple.AppleAuthenticationButtonStyle.WHITE
+            }
+            cornerRadius={12}
+            style={{ height: 52 }}
+            onPress={() => void withApple()}
+          />
+        ) : null}
+        {google ? (
+          <Button title="Continue with Google" variant="secondary" loading={busy === "google"} onPress={() => void withGoogle()} />
+        ) : null}
+        <View style={{ flexDirection: "row", alignItems: "center", gap: space.md, marginVertical: space.sm }}>
+          <View style={{ flex: 1, height: 1, backgroundColor: t.border }} />
+          <Caption>or</Caption>
+          <View style={{ flex: 1, height: 1, backgroundColor: t.border }} />
+        </View>
+        <Field
+          placeholder="you@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          textContentType="emailAddress"
+          autoComplete="email"
+          value={email}
+          onChangeText={setEmail}
+          onSubmitEditing={() => void withEmail()}
+          returnKeyType="send"
+        />
+        <Button title="Email me a code" loading={busy === "email"} onPress={() => void withEmail()} />
+      </View>
+      <Spacer />
+      {state === "signedOut" ? (
+        <Button
+          title="Continue without an account"
+          variant="ghost"
+          onPress={() => void continueAsGuest().then(() => router.replace("/(tabs)"))}
+        />
+      ) : (
+        <Button title="Not now" variant="ghost" onPress={() => router.back()} />
+      )}
+      <Spacer />
+      <Text style={{ color: t.muted, fontSize: 12, textAlign: "center", lineHeight: 18 }}>
+        By continuing you agree to the Terms and Privacy Policy.
+      </Text>
+    </Screen>
+  );
+}
+
+function messageOf(e: unknown): string {
+  return e instanceof Error ? e.message : String(e);
+}