create-feltkit 0.3.8 → 0.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-feltkit",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "description": "Create a FeltKit application: npm create feltkit@latest my-app (add -- --template managed for Managed FeltDB)",
   "license": "MIT",
   "type": "module",

package/template/README.md

@@ -226,28 +226,22 @@ without their FeltDB settings.
 
    Open <http://localhost:3000>.
 
-4. **Sign in.** Production has no development sign-in (Ada and Grace are for development).
-   Until you connect your own login, sign in with a session token pasted into the app's sign-in
-   screen. On Vercel, `npx feltkit vercel deploy` printed yours. To sign in someone else (or
-   yourself again), run this in the project's folder:
-
-   ```bash
-   npx feltkit session create --env production --type user --id you --role member
-   ```
-
-   When the deployment's data is in FeltDB (Vercel, `--target hosted`, `--target self-hosted`), it
-   uses the deployment's settings from `.env.local` and the app keeps running; it refuses rather
-   than write anywhere else when they are missing. For the Node run, use `.feltkit/deploy` with
-   the app stopped (only one process may open its state). For the one-container Docker run, use a
-   one-off container on the same volume while the app's container is stopped:
-
-   ```bash
-   docker run --rm -v tasks-data:/data tasks node node_modules/@feltdb/feltkit/bin/feltkit.js session create --env production --type user --id you --role member
-   ```
+4. **Sign in.** Production has no development sign-in (Ada and Grace are for development). The
+   app has built-in accounts (`auth: { accounts: { roles: ["member"] } }` in `feltkit/app.ts`):
+   open it and create your account with an e-mail address and a password; anyone you share the
+   link with can do the same, and a new account is a member. Passwords are stored only as a
+   scrypt hash, in the app's own FeltDB. To close sign-up once your people have accounts, set
+   `signUp: false`. To give someone admin, or to use your own login instead, see
+   `auth.authenticate` and production Studio below.
+
+   The sign-in screen grows with configuration: add `email: { from: "auth@yourdomain" }` to
+   `auth.accounts` for "Forgot your password?" and address verification (development prints each
+   e-mail; production sends through your Mailerport service, `MAILPORT_URL` and
+   `MAILPORT_API_KEY`), and `auth.providers` for "Continue with Google / GitHub" (client id in
+   `feltkit/app.ts`, client secret as `FELTKIT_CREDENTIAL_<ID>_CLIENT_SECRET`).
 
    **On AppBoundry** (`npx feltkit build --target appboundry`, then `appboundry run tasks.app`),
-   `feltkit session create` does not apply: the artifact runs without this project or FeltKit's
-   CLI. AppBoundry's operators create users with your app's roles and issue their sessions:
+   AppBoundry's operators create users with your app's roles and issue their sessions:
 
    ```bash
    appboundry admin users add you --role member --state <installation>
@@ -256,8 +250,15 @@ without their FeltDB settings.
 
    See AppBoundry's production operations guide for bootstrapping the first operator.
 
-   For real users, add `auth.authenticate` to `feltkit({ ... })` to verify requests with your
-   identity provider.
+   Operators and scripts can still get a session token without an account:
+   `npx feltkit session create --env production --type user --id <id> --role <role>` in the
+   project's folder (it uses the deployment's FeltDB settings from `.env.local`). For the
+   one-container Docker run, use a one-off container on the same volume while the app's container
+   is stopped:
+
+   ```bash
+   docker run --rm -v tasks-data:/data tasks node node_modules/@feltdb/feltkit/bin/feltkit.js session create --env production --type user --id you --role member
+   ```
 
 5. **Manage it.** On Vercel, production Studio is on (at `/_feltkit/` of your app). Run
    `npx feltkit manage` for a one-time sign-in link, or use **Manage in production Studio** on

package/template/feltkit/app.ts

@@ -26,6 +26,9 @@ export const app = feltkit({
     // feltkit.operations.*: in production, admins are Studio's operators (npx feltkit operator grant).
     admin: ["intelligence.*", "credential.*", "configuration.*", "apikeys.*", "webhooks.*", "jobs.*", "schedules.*", "feltkit.operations.*"],
   },
+  // People sign up and sign in with an e-mail address and a password (stored in this app's FeltDB;
+  // only a hash of the password). A new account is a member.
+  auth: { accounts: { roles: ["member"] } },
   // Development-only identities. Sign in as them from the app or the dashboard.
   dev: {
     users: [

package/template/package.json

@@ -13,7 +13,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@feltdb/feltkit": "0.3.8",
+    "@feltdb/feltkit": "0.3.10",
     "react": "19.2.0",
     "react-dom": "19.2.0"
   },

package/template/src/App.tsx

@@ -19,7 +19,7 @@ function describe(error: unknown): string {
 }
 
 export function App() {
-  const { session, signInAsDevUser, signOut } = useSession();
+  const { session, signInAsDevUser, signIn, signUp, signOut } = useSession();
   const live = useConnectionState();
   const [notice, setNotice] = useState<Notice>(null);
   const principal = session?.principal ?? null;
@@ -44,13 +44,24 @@ export function App() {
 
   const report = (error: unknown) => setNotice({ tone: "error", text: describe(error) });
 
+  // A link back into the app: a provider sign-in, a password reset, or an e-mail verification.
+  const client = useFeltKit();
+  const [resetToken, setResetToken] = useState<string | null>(null);
+  useEffect(() => {
+    void client.handleRedirect().then((r) => {
+      if (r?.kind === "reset") setResetToken(r.token);
+      else if (r?.kind === "verified") setNotice({ tone: "info", text: `${r.email} is verified.` });
+      else if (r?.kind === "error" || r?.kind === "verify-failed") setNotice({ tone: "error", text: r.message });
+    });
+  }, [client]);
+
   return (
     <div className="shell">
       <header className="topbar">
         <div className="brand">
           <img className="mark" src="/feltkit-mark.png" width="30" height="30" alt="" />
           <span className="brand-name">Tasks</span>
-          {session && <span className={`env ${session.environment.production ? "env-prod" : ""}`}>{session.environment.name}</span>}
+          {session && !session.environment.production && <span className="env">{session.environment.name}</span>}
         </div>
         <div className="topbar-right">
           <span className={`live ${live ? "on" : ""}`} title={live ? "Live: changes from anyone appear here immediately" : "Connecting to the change stream…"}>
@@ -73,6 +84,11 @@ export function App() {
               </select>
             </label>
           )}
+          {principal && !session?.devUsers.length && (
+            <button className="ghost signout" onClick={() => void signOut().catch(report)} title={principal.displayName ?? principal.id}>
+              Sign out
+            </button>
+          )}
           <ThemeToggle />
           {session?.dashboard && (
             <a className="dashboard-link" href={session.dashboard} target="_blank" rel="noreferrer">
@@ -93,68 +109,180 @@ export function App() {
 
       {!session ? (
         <div className="center muted">Connecting…</div>
+      ) : resetToken ? (
+        <div className="center">
+          <div className="card narrow">
+            <ResetForm token={resetToken} onDone={() => (setResetToken(null), setNotice({ tone: "info", text: "Your password is set. Other sessions were signed out." }))} />
+          </div>
+        </div>
       ) : !principal ? (
-        <SignedOut devUsers={session.devUsers} onSignIn={(id) => signInAsDevUser(id).catch(report)} />
+        <SignedOut
+          devUsers={session.devUsers}
+          accounts={session.accounts ?? null}
+          onDevSignIn={(id) => signInAsDevUser(id).catch(report)}
+          onSignIn={signIn}
+          onSignUp={signUp}
+        />
       ) : (
         <Workspace canWrite={canWrite} canComplete={canComplete} role={principal.roles.join(", ")} onError={report} />
       )}
 
-      <footer className="footer">
-        Every project, task, and note lives in this app’s single FeltDB instance. Changes made by other people, agents (through AppPort), and services appear here live.
-      </footer>
+      {session && !session.environment.production && (
+        <footer className="footer">
+          Every project, task, and note lives in this app’s single FeltDB instance. Changes made by other people, agents (through AppPort), and services appear here live.
+        </footer>
+      )}
     </div>
   );
 }
 
-function SignedOut({ devUsers, onSignIn }: { devUsers: Array<{ id: string; name: string; roles: string[] }>; onSignIn: (id: string) => void }) {
+function SignedOut(props: {
+  devUsers: Array<{ id: string; name: string; roles: string[] }>;
+  accounts: { signUp: boolean; email?: boolean; providers?: Array<{ id: string; name: string }> } | null;
+  onDevSignIn: (id: string) => void;
+  onSignIn: (input: { email: string; password: string }) => Promise<void>;
+  onSignUp: (input: { email: string; password: string; name?: string }) => Promise<void>;
+}) {
   return (
     <div className="center">
       <div className="card narrow">
-        <h1>Sign in</h1>
-        {devUsers.length ? (
+        {props.devUsers.length ? (
           <>
+            <h1>Sign in</h1>
             <p className="muted">Development identities from feltkit/app.ts:</p>
             <div className="stack">
-              {devUsers.map((u) => (
-                <button key={u.id} className="secondary wide" onClick={() => onSignIn(u.id)}>
+              {props.devUsers.map((u) => (
+                <button key={u.id} className="secondary wide" onClick={() => props.onDevSignIn(u.id)}>
                   {u.name} <span className="muted">· {u.roles.join(", ")}</span>
                 </button>
               ))}
             </div>
           </>
+        ) : props.accounts ? (
+          <AccountForm signUpOpen={props.accounts.signUp} email={Boolean(props.accounts.email)} providers={props.accounts.providers ?? []} onSignIn={props.onSignIn} onSignUp={props.onSignUp} />
         ) : (
-          <TokenSignIn />
+          <>
+            <h1>Sign in</h1>
+            <p className="muted">Sign-in isn't available for this app yet.</p>
+          </>
         )}
       </div>
     </div>
   );
 }
 
-/**
- * Production has no development sign-in. Until auth.authenticate in feltkit/app.ts verifies your
- * users with your identity provider, sign in with a session token created on the server.
- */
-function TokenSignIn() {
+/** Sign in to an existing account, or create one (auth.accounts in feltkit/app.ts). */
+function AccountForm(props: {
+  signUpOpen: boolean;
+  /** The app sends account e-mail (auth.accounts.email): offer "forgot password". */
+  email: boolean;
+  providers: Array<{ id: string; name: string }>;
+  onSignIn: (input: { email: string; password: string }) => Promise<void>;
+  onSignUp: (input: { email: string; password: string; name?: string }) => Promise<void>;
+}) {
   const client = useFeltKit();
-  const [token, setToken] = useState("");
-  const submit = (e: FormEvent) => {
+  const [mode, setMode] = useState<"signin" | "signup" | "forgot">("signin");
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const creating = mode === "signup";
+  const forgot = mode === "forgot";
+  const go = (next: typeof mode) => (setMode(next), setError(null), setInfo(null));
+  const submit = async (e: FormEvent) => {
     e.preventDefault();
-    if (token.trim()) client.setToken(token.trim());
+    setError(null);
+    setInfo(null);
+    setBusy(true);
+    try {
+      if (forgot) setInfo((await client.requestPasswordReset(email)).message);
+      else if (creating) {
+        await props.onSignUp({ email, password, ...(name.trim() ? { name: name.trim() } : {}) });
+        if (!client.tokens.get()) setInfo("Check your e-mail: open the link we sent to verify your address, then sign in.");
+      } else await props.onSignIn({ email, password });
+    } catch (err) {
+      setError(describe(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <form className="stack" onSubmit={submit}>
+      <h1>{forgot ? "Reset your password" : creating ? "Create your account" : "Sign in"}</h1>
+      {!forgot &&
+        props.providers.map((p) => (
+          <button key={p.id} type="button" className="secondary wide" onClick={() => client.signInWith(p.id)}>
+            Continue with {p.name}
+          </button>
+        ))}
+      {!forgot && props.providers.length > 0 && <p className="muted small-text">or with your e-mail address</p>}
+      {creating && <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Name" aria-label="Name" autoComplete="name" />}
+      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="E-mail" aria-label="E-mail" autoComplete="email" required />
+      {!forgot && (
+        <input
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder={creating ? "Password (12+ characters)" : "Password"}
+          aria-label="Password"
+          autoComplete={creating ? "new-password" : "current-password"}
+          minLength={creating ? 12 : undefined}
+          required
+        />
+      )}
+      {error && <p className="error-text">{error}</p>}
+      {info && <p className="muted">{info}</p>}
+      <button type="submit" disabled={busy || !email || (!forgot && !password)}>
+        {busy ? "One moment…" : forgot ? "Send reset link" : creating ? "Create account" : "Sign in"}
+      </button>
+      {mode === "signin" && props.email && (
+        <p className="muted small-text">
+          <button type="button" className="link" onClick={() => go("forgot")}>
+            Forgot your password?
+          </button>
+        </p>
+      )}
+      {(props.signUpOpen || forgot) && (
+        <p className="muted small-text">
+          {forgot ? "Remembered it? " : creating ? "Already have an account? " : "New here? "}
+          <button type="button" className="link" onClick={() => go(creating || forgot ? "signin" : "signup")}>
+            {creating || forgot ? "Sign in" : "Create an account"}
+          </button>
+        </p>
+      )}
+    </form>
+  );
+}
+
+/** A password reset link opened: choose a new password. */
+function ResetForm({ token, onDone }: { token: string; onDone: () => void }) {
+  const client = useFeltKit();
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setBusy(true);
+    try {
+      await client.resetPassword(token, password);
+      onDone();
+    } catch (err) {
+      setError(describe(err));
+    } finally {
+      setBusy(false);
+    }
   };
   return (
     <form className="stack" onSubmit={submit}>
-      <p className="muted">
-        Sign in with a session token from whoever runs this deployment. If FeltKit deployed it, <code>npx feltkit vercel deploy</code> printed yours the first time; to make another, run
-        this in your project's folder (it uses your deployment's FeltDB settings from <code>.env.local</code>):
-      </p>
-      <code className="block">npx feltkit session create --env production --type user --id you --role member</code>
-      <p className="muted">If AppBoundry runs this app (from its <code>.app</code> artifact), its operator creates your user and issues your session instead:</p>
-      <code className="block">appboundry admin sessions issue --user you --state &lt;installation&gt;</code>
-      <input type="password" value={token} onChange={(e) => setToken(e.target.value)} placeholder="Session token (fks_…)" aria-label="Session token" autoComplete="off" />
-      <button type="submit" disabled={!token.trim()}>
-        Sign in
+      <h1>Choose a new password</h1>
+      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="New password (12+ characters)" aria-label="New password" autoComplete="new-password" minLength={12} required />
+      {error && <p className="error-text">{error}</p>}
+      <button type="submit" disabled={busy || !password}>
+        {busy ? "One moment…" : "Set password and sign in"}
       </button>
-      <p className="muted small-text">To sign people in with your own login, add auth.authenticate in feltkit/app.ts.</p>
     </form>
   );
 }

package/template/src/styles.css

@@ -127,3 +127,8 @@ code.block { display: block; padding: 8px 10px; border-radius: 6px; background:
   .identity, .identity select { max-width: 100%; min-width: 0; }
   .task-detail { padding-left: 16px; }
 }
+
+/* Account sign-in (auth.accounts) */
+button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
+button.ghost.signout { font-size: 14px; }
+.card form.stack input { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

package/template-managed/package.json

@@ -20,10 +20,10 @@
     "deploy:fly": "node scripts/deploy-fly.mjs"
   },
   "dependencies": {
-    "@feltdb/feltkit": "0.3.8"
+    "@feltdb/feltkit": "0.3.10"
   },
   "devDependencies": {
-    "@feltdb/core": "0.16.1",
+    "@feltdb/core": ">=0.17.1 <1.0.0",
     "@types/node": "22.19.1",
     "typescript": "5.9.3"
   }