Subchapter 20.59

INSTRUCTIONS

references/members/INSTRUCTIONS.mdMarkdown20 KBView on GitHub

The members client is shipped as real files, not snippets to regenerate. It’s a complete custom login — email+password sign-up/sign-in, “Continue with Google/Facebook” (and custom SSO), a member session, an account area, and route gating — styled with your app’s design tokens (base44’s — the shadcn palette the design phase already set). Copy it into the app and wire the routes — you generate almost none of the auth code (the OAuth state machine, PKCE, the hidden-iframe token exchange, and the social all ship and are correct).

INSTRUCTIONS · Wix Vibe Headless · wix/skills · Skills Docs

src/index.css

/callback

The site’s Wix OAuth app (headless) is the auth target — members self-register, so there is nothing to seed (see Seeding below); the client renders the shipped logged-out state until a member signs in.
The Members Area app installed only if you need member profile data (name, photo, roles, custom fields). Pure “logged-in vs. not” gating needs no app — see Identity vs. profile below.
The public headless WIX_CLIENT_ID from your prompt (buyer-facing, safe to hardcode/commit).

OAuth-app allow-listing — the #1 gotcha, a manual owner-only step you can’t do from client code. Two different fields gate the two mechanisms:

Mechanism	What must be allow-listed	OAuth-app field	On `localhost:4321`?
credential (your form)	your app origin (the hidden iframe `postMessage`s the code back)	`allowedRedirectDomains`	✅ allowed by default
social / SSO	the exact `/callback` URL (full-page redirect target)	`allowedRedirectUris`	❌ must be added

localhost:4321 is Wix’s default-allowed dev origin, so credential login works there with zero setup; social still fails until you add http://localhost:4321/callback to allowedRedirectUris. Any non-default origin (deployed domain, other port) needs both the origin and <origin>/callback. Symptoms: unregistered origin → credential login hangs then throws MemberAuthError('timeout') (+ a console “postMessage… target origin does not match”); unregistered callback → the Wix authorize page shows “Invalid redirect URI” before returning, so the client can’t catch it.

⚠️ AGENT: surface this proactively. As soon as a run uses social/SSO (or deploys credential login to a non-4321 origin), tell the user the exact URIs to add and where (deep link under Point the user to their dashboard), and note that social login stays dead until they do it.

file	what it is
`context/MemberContext.jsx`	`useMember()` provider: current member, `loggedIn`, `refresh()`, `logout()`
`hooks/useLoginForm.js`	credential state machine (login/register/verify, error mapping) — logic only
`components/LoginForm.jsx`	email+password form UI (sign-in/sign-up tabs, verify-code + pending phases)
`components/SocialButtons.jsx`	“Continue with Google/Facebook” buttons (kick off the redirect)
`components/MemberMenu.jsx`	header account control — “Log in” vs. member name + log-out (like a cart button)
`components/RequireAuth.jsx`	route gate: renders children for a member, else redirects to `/login`
`components/WixManageBanner.jsx`	dev-only manage banner — drop it into your Layout (STEP 4)
`pages/Login.jsx`, `pages/Account.jsx`	the shipped login + account routes (`/login`, `/account`)
`pages/Callback.jsx`	social/SSO return route — mount at exactly `/callback`
`rest/wix-config.js`	you set the ids here (STEP 2)
`rest/wix-client.js` + `rest/wix-members-auth.js`	REST transport + the auth helper (copy verbatim)

import { useRef, useState, useEffect } from "react";
import { Routes, Route, Outlet } from "react-router-dom";
import { MemberProvider } from "@/context/MemberContext";
import WixManageBanner from "@/components/WixManageBanner";   // shipped, dev-only · default export, no props
import RequireAuth from "@/components/RequireAuth";           // shipped route gate
import Login from "@/pages/Login";                     // shipped · default export, no props
import Account from "@/pages/Account";                 // shipped · default export, no props
import Callback from "@/pages/Callback";               // shipped · default export, no props
import Home from "@/pages/Home";       // YOU build
import Header from "@/components/Header";   // YOU build — plain in-flow markup, NOT position:fixed
import Footer from "@/components/Footer";   // YOU build

function Layout() {
  const topRef = useRef(null);
  const [offset, setOffset] = useState(0);
  useEffect(() => {                                  // measure the fixed region → pad content below it
    const ro = new ResizeObserver(() => setOffset(topRef.current?.offsetHeight ?? 0));
    if (topRef.current) ro.observe(topRef.current);
    return () => ro.disconnect();
  }, []);
  return (<>
    <div ref={topRef} style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 50 }}>
      <WixManageBanner />                    {/* null in prod / when dismissed */}
      <Header />                             {/* your brand header, in-flow inside this fixed block */}
    </div>
    <div style={{ paddingTop: offset }}>     {/* clears the chrome; shrinks when the banner is dismissed */}
      <Outlet />                             {/* shipped Login/Account/Callback render here, untouched */}
      <Footer />
    </div>
  </>);
}

<MemberProvider>
  <Routes>
    <Route element={<Layout />}>                                          {/* chrome wraps all */}
      <Route path="/" element={<Home />} />                               {/* yours */}
      <Route path="/login" element={<Login />} />                         {/* shipped, as-is */}
      <Route path="/callback" element={<Callback />} />                   {/* shipped — must be /callback */}
      <Route path="/account" element={<RequireAuth><Account /></RequireAuth>} />  {/* gated, shipped */}
    </Route>
  </Routes>
</MemberProvider>

import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import MemberMenu from "@/components/MemberMenu";

// Responsive header: choose ONE branch with a state flag, so <MemberMenu/> mounts once.
// Do NOT render a desktop nav AND a mobile nav toggled by `hidden md:flex` / `md:hidden`:
// these navs are inline-styled, and an inline `display` beats a Tailwind class, so `hidden`
// never applies — BOTH branches render and you get two menus. One branch = one menu.
export function Header() {
  const [mobile, setMobile] = useState(() => window.innerWidth < 768);
  useEffect(() => {
    const onResize = () => setMobile(window.innerWidth < 768);
    window.addEventListener("resize", onResize);            // keep it reactive to viewport changes
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return (
    <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      {/* brand/logo */}
      {mobile
        ? <YourMenu />                                       // your hamburger + <MemberMenu/> here
        : <div style={{ display: "flex", gap: 24 }}><Link to="/">Home</Link><MemberMenu /></div>}
    </nav>
  );
}

import { useMember } from "@/context/MemberContext";

// useMember() gives:
// { member, loggedIn, loading, refresh(), logout(returnTo?) }
// - member is null for a visitor OR when the Members Area app isn't installed (loggedIn still true).
// - login/register happen in the shipped LoginForm; call refresh() after your own login call.

function Greeting() {
  const { loggedIn, member, loading } = useMember();
  if (loading) return null;
  return loggedIn ? <span>Hi, {member?.profile?.nickname || "member"}</span> : <a href="/login">Log in</a>;
}

// A member-only read runs as the member on the SAME shared client — no extra auth, no `elevate`:
import { wixApiRequest } from "@/rest/wix-client";
const { orders } = await wixApiRequest("/ecom/v1/orders/query", { body: { query: {} } }); // member's own

// (A) Credential — handle EVERY branch, not just SUCCESS. register/login/verifyEmail → { state, ... }:
import { login, register, verifyEmail, MemberAuthError } from "@/rest/wix-members-auth";
try {
  const res = await login(email, password);
  if (res.state === "SUCCESS") { /* logged in; res.member (or null w/o Members Area app) */ }
  else if (res.state === "REQUIRE_EMAIL_VERIFICATION") { /* 6-digit code emailed; verifyEmail(code, res.stateToken) */ }
  else if (res.state === "REQUIRE_OWNER_APPROVAL") { /* show a pending notice — not an error */ }
} catch (e) {
  if (e instanceof MemberAuthError) show(e.message); else throw e;   // .code: invalidCredentials, emailAlreadyExists, …
}
// Custom sign-up fields → register's 3rd arg `profile` ({ firstName, lastName, nickname, addresses, … }).
// Arbitrary customFields keys must be defined in the Members Area app first, or they're silently dropped.

// (B) Social / SSO — button + the shipped /callback page:
import { startSocialLogin, IDP } from "@/rest/wix-members-auth";
const callbackUri = new URL("/callback", window.location.origin).href;   // must be allow-listed
startSocialLogin(IDP.GOOGLE, callbackUri, window.location.pathname);      // custom SSO: pass a connectionId as idp

INSTRUCTIONS

INSTRUCTIONS

Prerequisites

STEP 1 — The client is already in `src/`

STEP 2 — Credentials

STEP 3 — Theme (nothing to style on the shipped components)

STEP 4 — Wire routes + provider (surgical `find_replace` on `src/App.jsx`, never a rewrite)

What you build (not shipped)

Using the client from your own UI (session, gating, “my …” reads)

Extending the client — the auth helper’s exports (copy as-is, do NOT re-derive)

Identity vs. profile — don’t conflate them

Hard rules

Point the user to their dashboard

Seeding

Verify (before declaring done)