@wix/agent-skills 1.15.1 → 1.16.0

package/skills/wix-vibe-headless/references/members/app/components/LoginForm.jsx

@@ -0,0 +1,101 @@
+// Credential login/sign-up form — a thin view over useLoginForm (all logic lives in the hook).
+// Styled with base44 design tokens (shadcn Tailwind classes); don't rewrite this JSX. Renders one of
+// three phases the hook drives: the email/password form, the 6-digit verification-code entry, or a
+// pending-approval notice.
+import { useLoginForm } from "@/hooks/useLoginForm";
+
+const inputCls =
+  "w-full py-[11px] px-3 box-border text-[15px] border border-input rounded-sm bg-background text-foreground";
+const labelCls = "block text-[13px] text-muted-foreground mb-1.5";
+
+export default function LoginForm({ onSuccess }) {
+  const f = useLoginForm({ onSuccess });
+
+  if (f.phase === "pending") {
+    return <Notice>Your account is awaiting owner approval. You'll be able to sign in once it's approved.</Notice>;
+  }
+
+  if (f.phase === "verify") {
+    return (
+      <form onSubmit={f.submitCode} className={formCls}>
+        <p className="text-muted-foreground m-0 leading-normal">
+          We emailed you a 6-digit code. Enter it to finish.
+        </p>
+        <div>
+          <label className={labelCls} htmlFor="mf-code">Verification code</label>
+          <input id="mf-code" className={inputCls} inputMode="numeric" autoComplete="one-time-code"
+            value={f.code} onChange={(e) => f.setCode(e.target.value)} />
+        </div>
+        {f.error && <ErrorText>{f.error}</ErrorText>}
+        <SubmitButton busy={f.busy}>Verify</SubmitButton>
+      </form>
+    );
+  }
+
+  return (
+    <form onSubmit={f.submit} className={formCls}>
+      <div className="flex gap-2">
+        <ModeTab active={f.mode === "login"} onClick={() => f.switchMode("login")}>Sign in</ModeTab>
+        <ModeTab active={f.mode === "register"} onClick={() => f.switchMode("register")}>Sign up</ModeTab>
+      </div>
+
+      {f.mode === "register" && (
+        <div className="flex gap-3">
+          <div className="flex-1">
+            <label className={labelCls} htmlFor="mf-first">First name</label>
+            <input id="mf-first" className={inputCls} value={f.fields.firstName}
+              onChange={(e) => f.setField("firstName", e.target.value)} />
+          </div>
+          <div className="flex-1">
+            <label className={labelCls} htmlFor="mf-last">Last name</label>
+            <input id="mf-last" className={inputCls} value={f.fields.lastName}
+              onChange={(e) => f.setField("lastName", e.target.value)} />
+          </div>
+        </div>
+      )}
+
+      <div>
+        <label className={labelCls} htmlFor="mf-email">Email</label>
+        <input id="mf-email" type="email" autoComplete="email" required className={inputCls}
+          value={f.fields.email} onChange={(e) => f.setField("email", e.target.value)} />
+      </div>
+      <div>
+        <label className={labelCls} htmlFor="mf-pass">Password</label>
+        <input id="mf-pass" type="password" required className={inputCls}
+          autoComplete={f.mode === "register" ? "new-password" : "current-password"}
+          value={f.fields.password} onChange={(e) => f.setField("password", e.target.value)} />
+      </div>
+
+      {f.error && <ErrorText>{f.error}</ErrorText>}
+      <SubmitButton busy={f.busy}>{f.mode === "register" ? "Create account" : "Sign in"}</SubmitButton>
+    </form>
+  );
+}
+
+const formCls = "flex flex-col gap-4";
+
+function ModeTab({ active, onClick, children }) {
+  return (
+    <button type="button" onClick={onClick}
+      className={`flex-1 py-2 px-0 cursor-pointer text-sm font-semibold border border-border rounded-sm ${active ? "bg-card text-foreground" : "bg-transparent text-muted-foreground"}`}
+    >{children}</button>
+  );
+}
+
+function SubmitButton({ busy, children }) {
+  return (
+    <button type="submit" disabled={busy}
+      className="px-6 py-3 cursor-pointer bg-primary text-primary-foreground border-none rounded-sm text-[15px] font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
+    >{busy ? "…" : children}</button>
+  );
+}
+
+function ErrorText({ children }) {
+  return <p role="alert" className="text-destructive m-0 text-sm">{children}</p>;
+}
+
+function Notice({ children }) {
+  return (
+    <p className="p-4 bg-card text-foreground border border-border rounded-lg leading-normal m-0">{children}</p>
+  );
+}

package/skills/wix-vibe-headless/references/members/app/components/MemberMenu.jsx

@@ -0,0 +1,33 @@
+// Header account control — the members analog of a cart button. Reads useMember() and renders the
+// session state: a "Log in" link for a visitor, or the member's name + a log-out button once signed
+// in. Drop it into the Header you build (STEP 4), same as the storefront's CartButton. Pure UI reading
+// useMember + base44 design tokens (shadcn Tailwind classes) — render it as-is; don't wrap it in your own auth logic.
+import { Link } from "react-router-dom";
+import { useMember } from "@/context/MemberContext";
+
+export default function MemberMenu() {
+  const { loggedIn, member, loading, logout } = useMember();
+
+  if (loading) return <span className="text-muted-foreground text-sm">…</span>;
+
+  if (!loggedIn) {
+    return (
+      <Link to="/login" className="text-primary no-underline text-sm font-semibold">Log in</Link>
+    );
+  }
+
+  // member may be null when logged in but the Members Area app isn't installed — fall back to a
+  // generic label rather than assuming a profile (see INSTRUCTIONS → identity vs. profile).
+  const name = member?.profile?.nickname || member?.contact?.firstName || member?.loginEmail || "Account";
+
+  return (
+    <div className="flex items-center gap-3">
+      <Link to="/account" className="text-foreground no-underline text-sm font-semibold">
+        {name}
+      </Link>
+      <button type="button" onClick={() => logout()}
+        className="bg-transparent border border-border rounded-full py-1 px-3 text-[13px] cursor-pointer text-muted-foreground"
+      >Log out</button>
+    </div>
+  );
+}

package/skills/wix-vibe-headless/references/members/app/components/RequireAuth.jsx

@@ -0,0 +1,21 @@
+// Route gate for member-only surfaces. Wrap any protected element in <RequireAuth> — it renders the
+// children only for a logged-in member, otherwise redirects to /login (carrying the attempted path so
+// login can return there). This is the gate the shipped Account page uses; reuse it for your own
+// member-only routes ("my orders", "my plans", …). Reads useMember; no styling of its own.
+import { Navigate, useLocation } from "react-router-dom";
+import { useMember } from "@/context/MemberContext";
+
+export default function RequireAuth({ children, fallback = "/login" }) {
+  const { loggedIn, loading } = useMember();
+  const location = useLocation();
+
+  // Wait for the initial session read before deciding — otherwise a logged-in member gets bounced to
+  // /login on first paint while the token check is still resolving.
+  if (loading) {
+    return <div className="p-12 text-center text-muted-foreground">Loading…</div>;
+  }
+  if (!loggedIn) {
+    return <Navigate to={fallback} replace state={{ from: location.pathname }} />;
+  }
+  return children;
+}

package/skills/wix-vibe-headless/references/members/app/components/SocialButtons.jsx

@@ -0,0 +1,29 @@
+// "Continue with Google / Facebook" buttons. Social/SSO is a FULL-PAGE redirect: this kicks it off
+// with startSocialLogin, which sends the browser to the provider and returns to your /callback route
+// (mount Callback there). callbackUri MUST be allow-listed on the OAuth app or Wix rejects it before
+// returning — see INSTRUCTIONS (allowedRedirectUris). Styled with base44 design tokens (shadcn Tailwind classes).
+import { startSocialLogin, IDP } from "@/rest/wix-members-auth";
+
+// The exact /callback URL that must be registered as an allowed redirect URI. `returnTo` is where
+// the member lands after login — carry the current path so they resume where they started.
+function go(idp) {
+  const callbackUri = new URL("/callback", window.location.origin).href;
+  startSocialLogin(idp, callbackUri, window.location.pathname);
+}
+
+export default function SocialButtons() {
+  return (
+    <div className="flex flex-col gap-2.5">
+      <ProviderButton onClick={() => go(IDP.GOOGLE)}>Continue with Google</ProviderButton>
+      <ProviderButton onClick={() => go(IDP.FACEBOOK)}>Continue with Facebook</ProviderButton>
+    </div>
+  );
+}
+
+function ProviderButton({ onClick, children }) {
+  return (
+    <button type="button" onClick={onClick}
+      className="w-full py-[11px] px-4 cursor-pointer text-[15px] font-semibold bg-background text-foreground border border-border rounded-sm"
+    >{children}</button>
+  );
+}

package/skills/wix-vibe-headless/references/members/app/context/MemberContext.jsx

@@ -0,0 +1,54 @@
+// Member auth state — mirrors the Wix SESSION on the shared client (never a local guess). Wrap the
+// app in <MemberProvider>; every component reads useMember(). Login mechanisms (credential/social)
+// write member tokens onto @/rest/wix-client via the auth helper; this provider reads that session
+// and exposes the current member + logout. Data wiring is correct as-is — do not re-derive it.
+//
+// NAMED useMember (not useAuth) ON PURPOSE: the Base44 App.jsx already ships a platform
+// AuthProvider/useAuth for the builder account — a second `useAuth` would shadow it. This is the
+// WIX member session, kept under its own name so the two never collide.
+import { createContext, useContext, useState, useEffect, useCallback } from "react";
+import { isLoggedIn, getCurrentMember, logout as apiLogout } from "@/rest/wix-members-auth";
+
+const MemberContext = createContext(null);
+
+export function MemberProvider({ children }) {
+  const [member, setMember] = useState(null);
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  // Re-read the session from the shared client. Call after a successful login so the header/account
+  // update without a reload. `member` stays null (with loggedIn true) when the Members Area app
+  // isn't installed — that's setup, not a bug (see INSTRUCTIONS → identity vs. profile).
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const active = isLoggedIn();
+      setLoggedIn(active);
+      setMember(active ? await getCurrentMember() : null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { refresh(); }, [refresh]);
+
+  // logout() clears local tokens then redirects through the Wix logout URL, so it navigates away;
+  // we still reset local state first for the instant before the redirect lands.
+  const logout = useCallback(async (returnTo) => {
+    setMember(null);
+    setLoggedIn(false);
+    await apiLogout(returnTo);
+  }, []);
+
+  return (
+    <MemberContext.Provider value={{ member, loggedIn, loading, refresh, logout }}>
+      {children}
+    </MemberContext.Provider>
+  );
+}
+
+export function useMember() {
+  const ctx = useContext(MemberContext);
+  if (!ctx) throw new Error("useMember must be used within <MemberProvider>");
+  return ctx;
+}

package/skills/wix-vibe-headless/references/members/app/hooks/useLoginForm.js

@@ -0,0 +1,77 @@
+// useLoginForm — all credential-auth logic, no markup: hold the form fields, run login/register,
+// and DRIVE THE STATE MACHINE. register()/login()/verifyEmail() resolve to { state, member?,
+// stateToken? }; SUCCESS is only one of the branches. Handling every branch (email verification,
+// owner approval) and mapping MemberAuthError to a message is the bug-prone part — keep it verbatim;
+// the LoginForm component only renders what this returns. Social/SSO does NOT go through here (it's
+// a full-page redirect — see SocialButtons + the /callback page).
+import { useState } from "react";
+import { login, register, verifyEmail, MemberAuthError } from "@/rest/wix-members-auth";
+import { useMember } from "@/context/MemberContext";
+
+export function useLoginForm({ onSuccess } = {}) {
+  const { refresh } = useMember();
+  const [mode, setMode] = useState("login");        // "login" | "register"
+  const [fields, setFields] = useState({ email: "", password: "", firstName: "", lastName: "" });
+  // phase drives which UI shows: the form, the 6-digit code entry, or a pending-approval notice.
+  const [phase, setPhase] = useState("form");        // "form" | "verify" | "pending"
+  const [stateToken, setStateToken] = useState(null);
+  const [code, setCode] = useState("");
+  const [error, setError] = useState(null);
+  const [busy, setBusy] = useState(false);
+
+  const setField = (name, value) => setFields((f) => ({ ...f, [name]: value }));
+
+  // Route a resolved { state } to the right phase. On SUCCESS refresh the member session (so the
+  // header/account update) and hand control back to the caller (navigate away).
+  async function applyResult(res) {
+    if (res.state === "SUCCESS") {
+      await refresh();
+      onSuccess?.(res.member);
+    } else if (res.state === "REQUIRE_EMAIL_VERIFICATION") {
+      setStateToken(res.stateToken);
+      setPhase("verify");
+    } else if (res.state === "REQUIRE_OWNER_APPROVAL") {
+      setPhase("pending");
+    }
+  }
+
+  // Wrap a helper call: clear the error, flip busy, map MemberAuthError to a shown message.
+  // emailAlreadyExists on register → bounce the user to the login tab instead of erroring out.
+  async function run(fn) {
+    setError(null);
+    setBusy(true);
+    try {
+      await applyResult(await fn());
+    } catch (e) {
+      if (e instanceof MemberAuthError) {
+        if (e.code === "emailAlreadyExists") { setMode("login"); setError(e.message); }
+        else setError(e.message);
+      } else throw e;
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const submit = (e) => {
+    e?.preventDefault?.();
+    const { email, password, firstName, lastName } = fields;
+    if (mode === "register") {
+      const profile = (firstName || lastName) ? { firstName, lastName } : undefined;
+      return run(() => register(email, password, profile));
+    }
+    return run(() => login(email, password));
+  };
+
+  const submitCode = (e) => {
+    e?.preventDefault?.();
+    return run(() => verifyEmail(code, stateToken));
+  };
+
+  const switchMode = (next) => { setMode(next); setError(null); };
+
+  return {
+    mode, switchMode, fields, setField,
+    phase, code, setCode,
+    error, busy, submit, submitCode,
+  };
+}

package/skills/wix-vibe-headless/references/members/app/pages/Account.jsx

@@ -0,0 +1,36 @@
+// Account page (`/account`) — the member's own profile + log out. Gate it with <RequireAuth> in the
+// router (STEP 4) so a visitor is bounced to /login. Reads the member from useMember(); shows the
+// identity-only fallback when the Members Area app isn't installed (member is null but loggedIn is
+// true — that's setup, not a bug). Styled with base44 design tokens (shadcn Tailwind classes).
+import { useMember } from "@/context/MemberContext";
+
+export default function Account() {
+  const { member, logout } = useMember();
+
+  const name = member?.profile?.nickname
+    || [member?.contact?.firstName, member?.contact?.lastName].filter(Boolean).join(" ")
+    || member?.loginEmail
+    || "Member";
+  const email = member?.loginEmail;
+  const photo = member?.profile?.photo?.url;
+
+  return (
+    <main className="max-w-[420px] mx-auto py-8 px-4">
+      <div className="flex flex-col items-center gap-3 text-center p-6 bg-card border border-border rounded-lg shadow-sm">
+        <div className="w-[72px] h-[72px] rounded-full overflow-hidden bg-background border border-border">
+          {photo && <img src={photo.startsWith("//") ? `https:${photo}` : photo} alt="" className="w-full h-full object-cover" />}
+        </div>
+        <h1 className="font-display m-0 text-[22px]">{name}</h1>
+        {email && <p className="text-muted-foreground m-0">{email}</p>}
+        {!member && (
+          <p className="text-muted-foreground m-0 text-[13px] leading-normal">
+            You're signed in. Install the Wix Members Area app to show profile details here.
+          </p>
+        )}
+        <button type="button" onClick={() => logout()}
+          className="mt-2 py-2.5 px-6 cursor-pointer text-sm font-semibold bg-primary text-primary-foreground border-none rounded-sm"
+        >Log out</button>
+      </div>
+    </main>
+  );
+}

package/skills/wix-vibe-headless/references/members/app/pages/Callback.jsx

@@ -0,0 +1,32 @@
+// Social/SSO callback page — mount at EXACTLY `/callback` (the URL you allow-list on the OAuth app;
+// it must match SocialButtons' callbackUri character-for-character). The provider redirects the whole
+// page back here with `#code`/`#state` in the hash; completeSocialLogin() verifies state, exchanges
+// the code for member tokens, and logs the member in on the shared client. Then refresh the session
+// and send them to `returnTo`. Styled with base44 design tokens (shadcn Tailwind classes).
+import { useEffect, useState } from "react";
+import { completeSocialLogin } from "@/rest/wix-members-auth";
+import { useMember } from "@/context/MemberContext";
+
+export default function Callback() {
+  const { refresh } = useMember();
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    completeSocialLogin()
+      .then(async ({ returnTo }) => {
+        await refresh();
+        if (!cancelled) window.location.replace(returnTo || "/");
+      })
+      .catch((e) => { if (!cancelled) setError(e.message || "Login failed."); });
+    return () => { cancelled = true; };
+  }, [refresh]);
+
+  return (
+    <main className="p-12 text-center text-muted-foreground">
+      {error
+        ? <p className="text-destructive" role="alert">{error} <a href="/login" className="text-primary">Try again</a></p>
+        : <p>Signing you in…</p>}
+    </main>
+  );
+}

package/skills/wix-vibe-headless/references/members/app/pages/Login.jsx

@@ -0,0 +1,35 @@
+// Login page (`/login`) — composes the shipped LoginForm (credential state machine) with
+// SocialButtons (Google/Facebook redirect). On credential SUCCESS it returns the member to where
+// they came from (RequireAuth stashes it in location.state.from) or home. Social login returns via
+// /callback instead. Styled with base44 design tokens (shadcn Tailwind classes) — don't rewrite this page to add chrome
+// (the Header/Footer live in the Layout).
+import { useNavigate, useLocation } from "react-router-dom";
+import LoginForm from "@/components/LoginForm";
+import SocialButtons from "@/components/SocialButtons";
+
+export default function Login() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const from = location.state?.from || "/";
+
+  return (
+    <main className="max-w-[420px] mx-auto py-8 px-4 flex flex-col gap-5">
+      <h1 className="font-display text-center m-0">Welcome</h1>
+
+      <LoginForm onSuccess={() => navigate(from, { replace: true })} />
+
+      <Divider>or</Divider>
+      <SocialButtons />
+    </main>
+  );
+}
+
+function Divider({ children }) {
+  return (
+    <div className="flex items-center gap-3 text-muted-foreground text-[13px]">
+      <span className="flex-1 h-px bg-border" />
+      {children}
+      <span className="flex-1 h-px bg-border" />
+    </div>
+  );
+}

package/skills/wix-vibe-headless/references/members/{wix-members-auth.js → app/rest/wix-members-auth.js}

@@ -41,9 +41,12 @@ import {
  * Members Area app or they're silently dropped. Social (B) can't collect any of
  * these — that's the reason to pick direct-credential.
  *
- * Docs (curl the .md): custom login <https://dev.wix.com/docs/go-headless/self-managed-headless/authentication/members/custom-login-page/custom-login/custom-login-using-the-js-sdk.md>
- * · external/social login <https://dev.wix.com/docs/rest/business-management/headless-authentication/redirects/create-redirect-session>
- * · Retrieve Tokens <https://dev.wix.com/docs/rest/business-management/headless-authentication/authentication/retrieve-tokens>
+ * Docs (curl the .md): Login https://dev.wix.com/docs/api-reference/business-management/headless/authentication/login-v-2.md
+ * · Register https://dev.wix.com/docs/api-reference/business-management/headless/authentication/register-v-2.md
+ * · Logout https://dev.wix.com/docs/api-reference/business-management/headless/authentication/logout.md
+ * · Change Password https://dev.wix.com/docs/api-reference/business-management/headless/authentication/change-password.md
+ * · Retrieve Tokens https://dev.wix.com/docs/api-reference/business-management/headless/authentication/retrieve-tokens.md
+ * · external/social login https://dev.wix.com/docs/api-reference/business-management/headless/redirects/create-redirect-session.md
  */
 
 const AUTH_BASE = "/_api/iam/authentication/v2";

package/skills/wix-vibe-headless/references/members/install/Register.jsx

@@ -0,0 +1,22 @@
+// Repair stub for `/register` — NOT part of the shipped route surface.
+//
+// This vertical has no registration page by design: sign-up is the "Sign up" tab inside the shipped
+// LoginForm (see components/LoginForm.jsx), and the routes are `/login`, `/callback`, `/account`.
+// Base44, however, seeds its OWN src/pages/Register.jsx (email/password + OTP against base44.auth)
+// into every custom-auth-enrolled app at app creation, before any Wix skill runs. deploy.cjs writes
+// this file over that leftover so a stale Base44 registration flow can't stay live — a redirect
+// rather than a delete, because App.jsx may already route `/register` and a missing import would
+// break the build.
+//
+// Lives outside `app/` on purpose: `app/` is copied into src/ for EVERY members install, and a fresh
+// app with no Base44 leftover has no use for this page.
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+export default function Register() {
+  const navigate = useNavigate();
+  useEffect(() => {
+    navigate("/login", { replace: true });
+  }, [navigate]);
+  return null;
+}

package/skills/wix-vibe-headless/references/members/seed/SEED.md

@@ -0,0 +1,22 @@
+# Members — seeding
+
+**Nothing to seed.** Members login is the identity layer: members **self-register** through the
+Wix login page, so there is no member to create at build time and nothing lands in a `seeded`
+map. There is intentionally no `seed-*.js` here.
+
+The members work is entirely **frontend wiring** (custom login, account area, gated content) —
+see this vertical's `INSTRUCTIONS.md` and the reference components.
+
+_Optional, off by default:_ only if a run's prompt explicitly asks to exercise the pricing-plans
+purchase path end-to-end, one test member may be created — keep this off so headless runs stay
+deterministic and don't stall on an interactive login. If you need that, use the **`wix-docs`**
+skill for the current member-create shape (source: `wix-headless/references/SEED.md` § members).
+
+## Reference
+Members self-register, so this vertical seeds nothing. These are the methods to read if you do reach
+for one — each page carries the exact body shape, the required permission scope, and the response
+envelope. `Create Member` needs an elevated credential; the rest run from the client.
+- Create Member (admin — pre-creating a member, e.g. a blog author): https://dev.wix.com/docs/api-reference/crm/members-contacts/members/member-management/members/create-member.md
+- Login: https://dev.wix.com/docs/api-reference/business-management/headless/authentication/login-v-2.md
+- Register: https://dev.wix.com/docs/api-reference/business-management/headless/authentication/register-v-2.md
+- Retrieve Tokens: https://dev.wix.com/docs/api-reference/business-management/headless/authentication/retrieve-tokens.md