@payez/next-mvp 4.8.4 → 4.8.6

package/dist/api-handlers/onboarding/signup.d.ts

@@ -0,0 +1,15 @@
+/**
+ * POST /api/onboarding/signup (4.8.6) - the "I was invited" entry's server half.
+ *
+ * Body: { email }. Forwards EXACTLY { email, client_id } to the IdP's anonymous POST /api/Onboarding/signup; the client id is this
+ * app's own (server env), never taken from the browser, and any other key in the request is dropped. The IdP answers a uniform 202
+ * whatever the address is (enumeration-safe) and emails the onboarding LINK only if the address was invited; so this route also
+ * answers ONE fixed body, whatever the IdP said (status, body, an outage) - the only signal is the email. A malformed address is
+ * refused here, locally, before any IdP call.
+ */
+import { NextRequest, NextResponse } from 'next/server';
+export declare const INVITED_SIGNUP_SENTENCE = "If this address was invited, a link is on its way.";
+export declare function POST(req: NextRequest): Promise<NextResponse<{
+    success: boolean;
+    message: string;
+}>>;

package/dist/api-handlers/onboarding/signup.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INVITED_SIGNUP_SENTENCE = void 0;
+exports.POST = POST;
+/**
+ * POST /api/onboarding/signup (4.8.6) - the "I was invited" entry's server half.
+ *
+ * Body: { email }. Forwards EXACTLY { email, client_id } to the IdP's anonymous POST /api/Onboarding/signup; the client id is this
+ * app's own (server env), never taken from the browser, and any other key in the request is dropped. The IdP answers a uniform 202
+ * whatever the address is (enumeration-safe) and emails the onboarding LINK only if the address was invited; so this route also
+ * answers ONE fixed body, whatever the IdP said (status, body, an outage) - the only signal is the email. A malformed address is
+ * refused here, locally, before any IdP call.
+ */
+const server_1 = require("next/server");
+const env_1 = require("../../config/env");
+const idp_url_guard_1 = require("../../lib/idp-url-guard");
+exports.INVITED_SIGNUP_SENTENCE = 'If this address was invited, a link is on its way.';
+const FIXED = { success: true, message: exports.INVITED_SIGNUP_SENTENCE };
+async function POST(req) {
+    const raw = (await req.json().catch(() => null));
+    const email = typeof raw?.email === 'string' ? raw.email.trim() : '';
+    if (!email || email.length > 254 || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        return server_1.NextResponse.json({ success: false, message: 'Enter a valid email address.', error: { code: 'INVALID_EMAIL' } }, { status: 400 });
+    }
+    const idpBase = env_1.ENV_CONFIG.IDP_URL;
+    const clientId = env_1.ENV_CONFIG.IDP_CLIENT_ID ?? env_1.ENV_CONFIG.CLIENT_ID;
+    if (!idpBase || clientId === undefined || clientId === null || String(clientId) === '') {
+        return server_1.NextResponse.json({ success: false, message: 'Sign-up is not configured.', error: { code: 'NOT_CONFIGURED' } }, { status: 500 });
+    }
+    try {
+        const url = `${idpBase}/api/Onboarding/signup`;
+        (0, idp_url_guard_1.assertAbsoluteIdpUrl)(url);
+        await fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+            body: JSON.stringify({ email, client_id: String(clientId) }),
+            cache: 'no-store',
+        });
+    }
+    catch {
+        /* the answer must not vary with the IdP's state */
+    }
+    return server_1.NextResponse.json(FIXED, { status: 202 });
+}

package/dist/components/auth/CredentialSignInForm.js

@@ -9,6 +9,7 @@ const TraditionalAuthSection_1 = require("./TraditionalAuthSection");
 const safe_callback_1 = require("../../auth/safe-callback");
 const authorize_resume_1 = require("../../lib/authorize-resume");
 const code_step_copy_1 = require("../../lib/code-step-copy");
+const DevCodeNotice_1 = require("./DevCodeNotice");
 const credential_sign_in_client_1 = require("../../lib/credential-sign-in-client");
 const inputStyle = {
     borderColor: 'var(--border-default, #e5e7eb)',
@@ -39,6 +40,7 @@ function CredentialSignInForm({ callbackUrl, fetchImpl, onSignedIn, showForgotPa
     const [fieldError, setFieldError] = (0, react_1.useState)(null);
     const [codeRequest, setCodeRequest] = (0, react_1.useState)(code_step_copy_1.NO_CODE_REQUEST);
     const [offerEmailCode, setOfferEmailCode] = (0, react_1.useState)(false);
+    const [devCode, setDevCode] = (0, react_1.useState)(null);
     const [emailCodeMsg, setEmailCodeMsg] = (0, react_1.useState)(null);
     async function submit(withCode) {
         setBusy(true);
@@ -56,6 +58,7 @@ function CredentialSignInForm({ callbackUrl, fetchImpl, onSignedIn, showForgotPa
             }
             if (r.kind === 'two_factor') {
                 setCodeRequest(r.codeRequest);
+                setDevCode(r.devCode);
                 setStep('code');
                 return;
             }
@@ -90,6 +93,7 @@ function CredentialSignInForm({ callbackUrl, fetchImpl, onSignedIn, showForgotPa
     function onBack() {
         setStep('credentials');
         setCodeRequest(code_step_copy_1.NO_CODE_REQUEST);
+        setDevCode(null);
         setCode('');
         setFieldError(null);
         setError(null);
@@ -103,6 +107,7 @@ function CredentialSignInForm({ callbackUrl, fetchImpl, onSignedIn, showForgotPa
             const r = await (0, credential_sign_in_client_1.requestEmailCode)(fetchImpl);
             if (r.kind === 'requested') {
                 setCodeRequest(r.codeRequest);
+                setDevCode(r.devCode);
                 setError(null);
                 setOfferEmailCode(false);
                 setEmailCodeMsg('We asked for a code to be emailed to you. Enter it above when it arrives.');
@@ -121,7 +126,7 @@ function CredentialSignInForm({ callbackUrl, fetchImpl, onSignedIn, showForgotPa
         return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "credential-sign-in-code-step", className: "text-left", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm mb-4", style: { color: 'var(--text-primary, #111827)' }, children: (0, code_step_copy_1.codeStepInstruction)(email, codeRequest) }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: onCodeSubmit, noValidate: true, className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "credential-code", className: "block text-sm font-medium mb-2", style: { color: 'var(--text-primary, #111827)' }, children: "Authentication code" }), (0, jsx_runtime_1.jsx)("input", { id: "credential-code", name: "code", type: "text", inputMode: "numeric", autoComplete: "one-time-code", required: true, placeholder: "000000", value: code, disabled: busy, onChange: (e) => {
                                         setCode(e.target.value);
                                         setFieldError(null);
-                                    }, className: "w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50", style: inputStyle })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: busy, className: "w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors", style: { background: 'var(--btn-primary-bg, #11B588)', color: 'var(--btn-primary-text, white)' }, children: busy ? 'Verifying…' : 'Verify' })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onBack, disabled: busy, className: "text-sm underline mt-4", style: { background: 'none', border: 'none', padding: 0, color: 'var(--text-muted, #6b7280)' }, children: "Back" }), problemLine, (offerEmailCode || emailCodeMsg) && ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "email-code-offer", className: "mt-4", children: [offerEmailCode && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => void askForEmailCode(), disabled: busy, className: "text-sm font-semibold underline", style: { background: 'none', border: 'none', padding: 0, color: 'var(--text-primary, #111827)' }, children: "Email me a code instead" })), emailCodeMsg && ((0, jsx_runtime_1.jsx)("p", { role: "status", "data-testid": "email-code-offer-msg", className: "text-sm mt-2", style: { color: 'var(--text-primary, #111827)' }, children: emailCodeMsg }))] }))] }));
+                                    }, className: "w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50", style: inputStyle }), (0, jsx_runtime_1.jsx)(DevCodeNotice_1.DevCodeNotice, { code: devCode })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: busy, className: "w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors", style: { background: 'var(--btn-primary-bg, #11B588)', color: 'var(--btn-primary-text, white)' }, children: busy ? 'Verifying…' : 'Verify' })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onBack, disabled: busy, className: "text-sm underline mt-4", style: { background: 'none', border: 'none', padding: 0, color: 'var(--text-muted, #6b7280)' }, children: "Back" }), problemLine, (offerEmailCode || emailCodeMsg) && ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "email-code-offer", className: "mt-4", children: [offerEmailCode && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => void askForEmailCode(), disabled: busy, className: "text-sm font-semibold underline", style: { background: 'none', border: 'none', padding: 0, color: 'var(--text-primary, #111827)' }, children: "Email me a code instead" })), emailCodeMsg && ((0, jsx_runtime_1.jsx)("p", { role: "status", "data-testid": "email-code-offer-msg", className: "text-sm mt-2", style: { color: 'var(--text-primary, #111827)' }, children: emailCodeMsg }))] }))] }));
     }
     return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "credential-sign-in", className: "text-left", children: [(0, jsx_runtime_1.jsx)(TraditionalAuthSection_1.TraditionalAuthSection, { email: email, password: password, onEmailChange: (v) => {
                     setEmail(v);

package/dist/components/auth/DevCodeNotice.d.ts

@@ -0,0 +1,10 @@
+/**
+ * AUTH-045 (BAPert 75627): on a DEV identity service that echoes the emailed sign-in code in its own answer (Email:DevCodeEcho, an
+ * IdP setting that is on only in Development), the sign-in form shows that code under the code box, because on a dev rig the email
+ * goes to nobody. This component is a PURE PASSTHROUGH of the server's `devVerificationCode`: it renders nothing unless it is given
+ * a non-empty string, and CredentialSignInForm gives it nothing but the value the door returned. There is no environment flag in the
+ * app, so a production IdP (echo off, field absent) can never make it appear.
+ */
+export declare function DevCodeNotice({ code }: {
+    code?: string | null;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/auth/DevCodeNotice.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevCodeNotice = DevCodeNotice;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * AUTH-045 (BAPert 75627): on a DEV identity service that echoes the emailed sign-in code in its own answer (Email:DevCodeEcho, an
+ * IdP setting that is on only in Development), the sign-in form shows that code under the code box, because on a dev rig the email
+ * goes to nobody. This component is a PURE PASSTHROUGH of the server's `devVerificationCode`: it renders nothing unless it is given
+ * a non-empty string, and CredentialSignInForm gives it nothing but the value the door returned. There is no environment flag in the
+ * app, so a production IdP (echo off, field absent) can never make it appear.
+ */
+function DevCodeNotice({ code }) {
+    if (typeof code !== 'string' || code === '')
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("p", { "data-testid": "dev-sign-in-code", className: "text-sm mt-3", style: { color: 'var(--text-muted, #6b7280)' }, children: ["Development sign-in code: ", (0, jsx_runtime_1.jsx)("strong", { children: code })] }));
+}

package/dist/components/auth/InvitedEntryLink.d.ts

@@ -0,0 +1,3 @@
+/** 4.8.6: the sign-in page's way in for a person who was invited. A plain link to /account-auth/signup (the "I was invited" page). */
+export declare function InvitedEntryLink(): import("react/jsx-runtime").JSX.Element;
+export default InvitedEntryLink;

package/dist/components/auth/InvitedEntryLink.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InvitedEntryLink = InvitedEntryLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/** 4.8.6: the sign-in page's way in for a person who was invited. A plain link to /account-auth/signup (the "I was invited" page). */
+function InvitedEntryLink() {
+    return ((0, jsx_runtime_1.jsx)("p", { className: "text-sm mt-4", style: { textAlign: 'center', color: 'var(--text-secondary, #6b7280)' }, children: (0, jsx_runtime_1.jsx)("a", { href: "/account-auth/signup", "data-testid": "invited-entry", style: { color: 'var(--text-primary, #111827)', fontWeight: 600, textDecoration: 'underline' }, children: "I was invited" }) }));
+}
+exports.default = InvitedEntryLink;

package/dist/lib/credential-sign-in-client.d.ts

@@ -22,6 +22,7 @@ export type CredentialSignInResult = {
 } | {
     kind: 'two_factor';
     codeRequest: CodeRequest;
+    devCode: string | null;
 } | {
     kind: 'rate_limited';
     message: string;

package/dist/lib/credential-sign-in-client.js

@@ -43,6 +43,10 @@ function validateCredentials(email, password) {
         errors.password = 'Enter your password.';
     return errors.email || errors.password ? errors : null;
 }
+/** The dev echo: the door passes the IdP's DevVerificationCode through as `devVerificationCode`. Nothing else is ever a dev code. */
+function readDevCode(body) {
+    return typeof body?.devVerificationCode === 'string' && body.devVerificationCode ? body.devVerificationCode : null;
+}
 function asString(v) {
     return typeof v === 'string' && v ? v : undefined;
 }
@@ -58,7 +62,7 @@ async function credentialSignIn(args, fetchImpl = (input, init) => fetch(input,
         if (res.status === 429)
             return { kind: 'rate_limited', message: asString(body?.error) ?? exports.MSG_RATE_LIMITED };
         if (body?.requiresTwoFactor)
-            return { kind: 'two_factor', codeRequest: (0, code_step_copy_1.readCodeRequest)(body) };
+            return { kind: 'two_factor', codeRequest: (0, code_step_copy_1.readCodeRequest)(body), devCode: readDevCode(body) };
         if (!res.ok || body?.success !== true) {
             return { kind: 'error', message: asString(body?.error) ?? exports.MSG_CANNOT_SIGN_IN, offerEmailCode: body?.offerEmailCode === true };
         }
@@ -78,7 +82,7 @@ async function requestEmailCode(fetchImpl = (input, init) => fetch(input, init))
             return {
                 kind: 'requested',
                 codeRequest: (0, code_step_copy_1.readCodeRequest)(body),
-                devCode: typeof body?.devVerificationCode === 'string' && body.devVerificationCode ? body.devVerificationCode : null,
+                devCode: readDevCode(body),
             };
         }
         return { kind: 'error', message: asString(body?.error) ?? exports.MSG_EMAIL_CODE_FAILED };

package/dist/lib/onboarding-code-client.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 4.8.6: the onboarding page asks the IdP to email the invitee a code (POST /api/onboarding/send-email-code, token-driven) and shows
+ * the emailed code ONLY when the IdP itself echoed it in that answer (Email:DevCodeEcho, Development only). Same rule as the sign-in
+ * form (AUTH-045): a pure passthrough of the server's `dev_verification_code`, only a non-empty STRING counts, no environment flag.
+ */
+export type OnboardingCodeResult = {
+    ok: boolean;
+    devCode: string | null;
+};
+export declare function requestOnboardingCode(onboardToken: string, fetchImpl?: typeof fetch): Promise<OnboardingCodeResult>;

package/dist/lib/onboarding-code-client.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.requestOnboardingCode = requestOnboardingCode;
+function pick(j) {
+    const o = j;
+    return o?.dev_verification_code ?? o?.data?.dev_verification_code ?? o?.data?.result?.dev_verification_code ?? o?.result?.dev_verification_code;
+}
+async function requestOnboardingCode(onboardToken, fetchImpl = fetch) {
+    try {
+        const res = await fetchImpl('/api/onboarding/send-email-code', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ onboard_token: onboardToken }),
+        });
+        const body = await res.json().catch(() => null);
+        const echoed = pick(body);
+        return { ok: res.ok, devCode: res.ok && typeof echoed === 'string' && echoed !== '' ? echoed : null };
+    }
+    catch {
+        return { ok: false, devCode: null };
+    }
+}

package/dist/pages/invited/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 4.8.6: the "I was invited" page. Mount at app/account-auth/signup/page.tsx:
+ *   export { default } from '@payez/next-mvp/pages/invited';
+ */
+export { default, INVITED_DONE_SENTENCE } from './page';

package/dist/pages/invited/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INVITED_DONE_SENTENCE = exports.default = void 0;
+/**
+ * 4.8.6: the "I was invited" page. Mount at app/account-auth/signup/page.tsx:
+ *   export { default } from '@payez/next-mvp/pages/invited';
+ */
+var page_1 = require("./page");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(page_1).default; } });
+Object.defineProperty(exports, "INVITED_DONE_SENTENCE", { enumerable: true, get: function () { return page_1.INVITED_DONE_SENTENCE; } });

package/dist/pages/invited/page.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 4.8.6: /account-auth/signup - "I was invited". The invitee types the address the invitation went to; the page posts it to the app's
+ * own /api/onboarding/signup and ALWAYS shows the same sentence afterwards, whatever came back (the IdP's answer is uniform and the
+ * page must not become an oracle for which addresses were invited). The onboarding link arrives by email.
+ */
+export declare const INVITED_DONE_SENTENCE = "If this address was invited, a link is on its way.";
+export default function InvitedSignupPage(): import("react/jsx-runtime").JSX.Element;

package/dist/pages/invited/page.js

@@ -0,0 +1,41 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INVITED_DONE_SENTENCE = void 0;
+exports.default = InvitedSignupPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/**
+ * 4.8.6: /account-auth/signup - "I was invited". The invitee types the address the invitation went to; the page posts it to the app's
+ * own /api/onboarding/signup and ALWAYS shows the same sentence afterwards, whatever came back (the IdP's answer is uniform and the
+ * page must not become an oracle for which addresses were invited). The onboarding link arrives by email.
+ */
+exports.INVITED_DONE_SENTENCE = 'If this address was invited, a link is on its way.';
+const INVITED_ERROR_SENTENCE = 'Enter the email address your invitation was sent to.';
+function InvitedSignupPage() {
+    const [email, setEmail] = (0, react_1.useState)('');
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [done, setDone] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    async function submit(e) {
+        e.preventDefault();
+        const value = email.trim();
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+            setError(INVITED_ERROR_SENTENCE);
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        try {
+            await fetch('/api/onboarding/signup', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email: value }),
+            });
+        }
+        catch { /* same sentence either way */ }
+        setBusy(false);
+        setDone(true);
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: { minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16, background: 'var(--bg-default, #f9fafb)' }, children: (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%', maxWidth: 420, background: 'var(--bg-card, #fff)', border: '1px solid var(--border-default, #e5e7eb)', borderRadius: 16, padding: 28 }, children: [(0, jsx_runtime_1.jsx)("h1", { style: { color: 'var(--text-primary)', fontSize: 20, fontWeight: 600, margin: 0 }, children: "I was invited" }), done ? ((0, jsx_runtime_1.jsx)("p", { role: "status", "data-testid": "invited-done", style: { color: 'var(--text-secondary)', fontSize: 14, marginTop: 12 }, children: exports.INVITED_DONE_SENTENCE })) : ((0, jsx_runtime_1.jsxs)("form", { onSubmit: submit, noValidate: true, style: { marginTop: 16 }, children: [(0, jsx_runtime_1.jsx)("p", { style: { color: 'var(--text-secondary)', fontSize: 14, marginTop: 0 }, children: "Enter the email address your invitation was sent to." }), (0, jsx_runtime_1.jsx)("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), autoComplete: "email", "aria-label": "Email address", placeholder: "you@example.com", "aria-invalid": error ? true : undefined, "aria-describedby": error ? 'invited-error' : undefined, style: { width: '100%', padding: '10px 12px', border: '1px solid var(--border-default, #d1d5db)', borderRadius: 10, fontSize: 15 } }), error && (0, jsx_runtime_1.jsx)("p", { id: "invited-error", role: "alert", style: { color: '#b00020', fontSize: 13, marginTop: 8 }, children: error }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: busy || !email, style: { marginTop: 14, width: '100%', padding: '10px 12px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: '#fff', fontWeight: 600, fontSize: 15, opacity: busy || !email ? 0.5 : 1 }, children: busy ? 'Sending…' : 'Send my link' })] })), (0, jsx_runtime_1.jsx)("p", { style: { marginTop: 16 }, children: (0, jsx_runtime_1.jsx)("a", { href: "/account-auth/login", style: { color: 'var(--text-primary)', fontWeight: 600, textDecoration: 'underline' }, children: "Back to sign in" }) })] }) }));
+}

package/dist/pages/onboarding/page.js

@@ -5,6 +5,8 @@ exports.default = OnboardingPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const navigation_1 = require("next/navigation");
+const DevCodeNotice_1 = require("../../components/auth/DevCodeNotice");
+const onboarding_code_client_1 = require("../../lib/onboarding-code-client");
 const H = { primary: 'var(--text-primary)', secondary: 'var(--text-secondary)', muted: 'var(--text-muted)' };
 function OnboardingContent() {
     const params = (0, navigation_1.useSearchParams)();
@@ -18,6 +20,23 @@ function OnboardingContent() {
     const [email, setEmail] = (0, react_1.useState)('');
     const [busy, setBusy] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
+    const [devCode, setDevCode] = (0, react_1.useState)(null);
+    const [codeNote, setCodeNote] = (0, react_1.useState)(null);
+    const sentFor = (0, react_1.useRef)(null);
+    // 4.8.6: the page asks for the code itself, once per token (nothing else ever sends it). The dev echo, if the IdP gave one in
+    // this answer, is shown under the code box; nothing else can make it appear.
+    async function sendCode() {
+        setCodeNote(null);
+        const r = await (0, onboarding_code_client_1.requestOnboardingCode)(onboardToken);
+        setDevCode(r.devCode);
+        setCodeNote(r.ok ? 'A new code was sent.' : 'We could not send a code. Try again in a moment.');
+    }
+    (0, react_1.useEffect)(() => {
+        if (!onboardToken || sentFor.current === onboardToken)
+            return;
+        sentFor.current = onboardToken;
+        void (0, onboarding_code_client_1.requestOnboardingCode)(onboardToken).then((r) => setDevCode(r.devCode));
+    }, [onboardToken]);
     // Step 1: tell the invitee which address the code went to (masked). Best
     // effort - a failure here does not block entering a code they were emailed.
     (0, react_1.useEffect)(() => {
@@ -97,7 +116,7 @@ function OnboardingContent() {
     }
     return ((0, jsx_runtime_1.jsxs)(Shell, { children: [step === 'code' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h1", { style: titleStyle, children: "Finish setting up your account" }), (0, jsx_runtime_1.jsx)("p", { style: { color: H.secondary, fontSize: 14, marginTop: 8 }, children: maskedEmail
                             ? `We emailed a 6-digit code to ${maskedEmail}. Enter it below.`
-                            : 'Enter the 6-digit code from your invitation email.' }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: submitCode, noValidate: true, style: { marginTop: 16 }, children: [(0, jsx_runtime_1.jsx)("input", { value: digits, onChange: (e) => setDigits(e.target.value.replace(/\D/g, '').slice(0, 6)), inputMode: "numeric", autoComplete: "one-time-code", "aria-label": "6-digit code", placeholder: "000000", style: { ...inputStyle, letterSpacing: 6, textAlign: 'center', fontFamily: 'monospace', fontSize: 20 } }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: busy || digits.length < 6, style: ctaStyle(busy || digits.length < 6), children: busy ? 'Verifying…' : 'Verify' })] })] })), step === 'password' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h1", { style: titleStyle, children: "Choose a password" }), (0, jsx_runtime_1.jsx)("p", { style: { color: H.secondary, fontSize: 14, marginTop: 8 }, children: "Set the password you will sign in with." }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: submitPassword, noValidate: true, style: { marginTop: 16 }, children: [(0, jsx_runtime_1.jsx)("input", { type: "password", value: password, onChange: (e) => setPassword(e.target.value), "aria-label": "New password", placeholder: "New password", style: inputStyle }), (0, jsx_runtime_1.jsx)("input", { type: "password", value: confirm, onChange: (e) => setConfirm(e.target.value), "aria-label": "Confirm password", placeholder: "Confirm password", style: { ...inputStyle, marginTop: 10 } }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: busy || !password || !confirm, style: ctaStyle(busy || !password || !confirm), children: busy ? 'Saving…' : 'Set password' })] })] })), step === 'done' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h1", { style: titleStyle, children: "You're all set." }), (0, jsx_runtime_1.jsx)("p", { style: { color: H.secondary, fontSize: 14, marginTop: 8 }, children: "Your account is ready. You can sign in now." }), (0, jsx_runtime_1.jsx)("p", { style: { marginTop: 16 }, children: (0, jsx_runtime_1.jsx)("a", { href: "/account-auth/login", style: linkStyle, children: "Go to sign in" }) })] })), error && (0, jsx_runtime_1.jsx)("p", { style: { color: '#b00020', fontSize: 13, marginTop: 12 }, children: error })] }));
+                            : 'We emailed you a 6-digit code. Enter it below.' }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: submitCode, noValidate: true, style: { marginTop: 16 }, children: [(0, jsx_runtime_1.jsx)("input", { value: digits, onChange: (e) => setDigits(e.target.value.replace(/\D/g, '').slice(0, 6)), inputMode: "numeric", autoComplete: "one-time-code", "aria-label": "6-digit code", placeholder: "000000", style: { ...inputStyle, letterSpacing: 6, textAlign: 'center', fontFamily: 'monospace', fontSize: 20 } }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: busy || digits.length < 6, style: ctaStyle(busy || digits.length < 6), children: busy ? 'Verifying…' : 'Verify' })] }), (0, jsx_runtime_1.jsx)(DevCodeNotice_1.DevCodeNotice, { code: devCode }), (0, jsx_runtime_1.jsxs)("p", { style: { marginTop: 12, fontSize: 13 }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => void sendCode(), "data-testid": "resend-code", style: { background: 'none', border: 'none', padding: 0, color: H.primary, fontWeight: 600, textDecoration: 'underline', cursor: 'pointer' }, children: "Send a new code" }), codeNote && (0, jsx_runtime_1.jsx)("span", { role: "status", style: { marginLeft: 8, color: H.secondary }, children: codeNote })] })] })), step === 'password' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h1", { style: titleStyle, children: "Choose a password" }), (0, jsx_runtime_1.jsx)("p", { style: { color: H.secondary, fontSize: 14, marginTop: 8 }, children: "Set the password you will sign in with." }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: submitPassword, noValidate: true, style: { marginTop: 16 }, children: [(0, jsx_runtime_1.jsx)("input", { type: "password", value: password, onChange: (e) => setPassword(e.target.value), "aria-label": "New password", placeholder: "New password", style: inputStyle }), (0, jsx_runtime_1.jsx)("input", { type: "password", value: confirm, onChange: (e) => setConfirm(e.target.value), "aria-label": "Confirm password", placeholder: "Confirm password", style: { ...inputStyle, marginTop: 10 } }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: busy || !password || !confirm, style: ctaStyle(busy || !password || !confirm), children: busy ? 'Saving…' : 'Set password' })] })] })), step === 'done' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h1", { style: titleStyle, children: "You're all set." }), (0, jsx_runtime_1.jsx)("p", { style: { color: H.secondary, fontSize: 14, marginTop: 8 }, children: "Your account is ready. You can sign in now." }), (0, jsx_runtime_1.jsx)("p", { style: { marginTop: 16 }, children: (0, jsx_runtime_1.jsx)("a", { href: "/account-auth/login", style: linkStyle, children: "Go to sign in" }) })] })), error && (0, jsx_runtime_1.jsx)("p", { style: { color: '#b00020', fontSize: 13, marginTop: 12 }, children: error })] }));
 }
 const titleStyle = { color: H.primary, fontSize: 20, fontWeight: 600, margin: 0 };
 const linkStyle = { color: H.primary, fontWeight: 600, textDecoration: 'underline' };

package/dist/routes/onboarding/index.d.ts

@@ -13,3 +13,4 @@ export { POST as verifyCodePOST } from '../../api-handlers/onboarding/verify-cod
 export { POST as sendEmailCodePOST } from '../../api-handlers/onboarding/send-email-code';
 export { POST as verifyWelcomeEmailPOST } from '../../api-handlers/onboarding/verify-welcome-email';
 export { POST as setPasswordPOST } from '../../api-handlers/onboarding/set-password';
+export { POST as signupPOST } from '../../api-handlers/onboarding/signup';

package/dist/routes/onboarding/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setPasswordPOST = exports.verifyWelcomeEmailPOST = exports.sendEmailCodePOST = exports.verifyCodePOST = void 0;
+exports.signupPOST = exports.setPasswordPOST = exports.verifyWelcomeEmailPOST = exports.sendEmailCodePOST = exports.verifyCodePOST = void 0;
 /**
  * Ready-to-use onboarding route handlers (PAY-2121).
  *
@@ -20,3 +20,5 @@ var verify_welcome_email_1 = require("../../api-handlers/onboarding/verify-welco
 Object.defineProperty(exports, "verifyWelcomeEmailPOST", { enumerable: true, get: function () { return verify_welcome_email_1.POST; } });
 var set_password_1 = require("../../api-handlers/onboarding/set-password");
 Object.defineProperty(exports, "setPasswordPOST", { enumerable: true, get: function () { return set_password_1.POST; } });
+var signup_1 = require("../../api-handlers/onboarding/signup");
+Object.defineProperty(exports, "signupPOST", { enumerable: true, get: function () { return signup_1.POST; } });

package/dist/routes/onboarding/signup.d.ts

@@ -0,0 +1,2 @@
+/** POST /api/onboarding/signup -> IdP anonymous Onboarding/signup (4.8.6, the "I was invited" entry). */
+export { POST } from '../../api-handlers/onboarding/signup';

package/dist/routes/onboarding/signup.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.POST = void 0;
+/** POST /api/onboarding/signup -> IdP anonymous Onboarding/signup (4.8.6, the "I was invited" entry). */
+var signup_1 = require("../../api-handlers/onboarding/signup");
+Object.defineProperty(exports, "POST", { enumerable: true, get: function () { return signup_1.POST; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payez/next-mvp",
-  "version": "4.8.4",
+  "version": "4.8.6",
   "sideEffects": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -1055,6 +1055,26 @@
       "require": "./dist/lib/bearer-fetch.js",
       "default": "./dist/lib/bearer-fetch.js"
     },
+    "./pages/invited": {
+      "types": "./dist/pages/invited/index.d.ts",
+      "require": "./dist/pages/invited/index.js",
+      "default": "./dist/pages/invited/index.js"
+    },
+    "./routes/onboarding/signup": {
+      "types": "./dist/routes/onboarding/signup.d.ts",
+      "require": "./dist/routes/onboarding/signup.js",
+      "default": "./dist/routes/onboarding/signup.js"
+    },
+    "./api-handlers/onboarding/signup": {
+      "types": "./dist/api-handlers/onboarding/signup.d.ts",
+      "require": "./dist/api-handlers/onboarding/signup.js",
+      "default": "./dist/api-handlers/onboarding/signup.js"
+    },
+    "./components/auth/InvitedEntryLink": {
+      "types": "./dist/components/auth/InvitedEntryLink.d.ts",
+      "require": "./dist/components/auth/InvitedEntryLink.js",
+      "default": "./dist/components/auth/InvitedEntryLink.js"
+    },
     "./components/auth/CredentialSignInForm": {
       "types": "./dist/components/auth/CredentialSignInForm.d.ts",
       "require": "./dist/components/auth/CredentialSignInForm.js",

package/src/api-handlers/onboarding/signup.ts

@@ -0,0 +1,41 @@
+/**
+ * POST /api/onboarding/signup (4.8.6) - the "I was invited" entry's server half.
+ *
+ * Body: { email }. Forwards EXACTLY { email, client_id } to the IdP's anonymous POST /api/Onboarding/signup; the client id is this
+ * app's own (server env), never taken from the browser, and any other key in the request is dropped. The IdP answers a uniform 202
+ * whatever the address is (enumeration-safe) and emails the onboarding LINK only if the address was invited; so this route also
+ * answers ONE fixed body, whatever the IdP said (status, body, an outage) - the only signal is the email. A malformed address is
+ * refused here, locally, before any IdP call.
+ */
+import { NextRequest, NextResponse } from 'next/server';
+import { ENV_CONFIG } from '../../config/env';
+import { assertAbsoluteIdpUrl } from '../../lib/idp-url-guard';
+
+export const INVITED_SIGNUP_SENTENCE = 'If this address was invited, a link is on its way.';
+const FIXED = { success: true, message: INVITED_SIGNUP_SENTENCE };
+
+export async function POST(req: NextRequest) {
+  const raw = (await req.json().catch(() => null)) as Record<string, unknown> | null;
+  const email = typeof raw?.email === 'string' ? raw.email.trim() : '';
+  if (!email || email.length > 254 || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    return NextResponse.json({ success: false, message: 'Enter a valid email address.', error: { code: 'INVALID_EMAIL' } }, { status: 400 });
+  }
+  const idpBase = ENV_CONFIG.IDP_URL;
+  const clientId = ENV_CONFIG.IDP_CLIENT_ID ?? ENV_CONFIG.CLIENT_ID;
+  if (!idpBase || clientId === undefined || clientId === null || String(clientId) === '') {
+    return NextResponse.json({ success: false, message: 'Sign-up is not configured.', error: { code: 'NOT_CONFIGURED' } }, { status: 500 });
+  }
+  try {
+    const url = `${idpBase}/api/Onboarding/signup`;
+    assertAbsoluteIdpUrl(url);
+    await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+      body: JSON.stringify({ email, client_id: String(clientId) }),
+      cache: 'no-store',
+    });
+  } catch {
+    /* the answer must not vary with the IdP's state */
+  }
+  return NextResponse.json(FIXED, { status: 202 });
+}

package/src/components/auth/CredentialSignInForm.tsx

@@ -5,6 +5,7 @@ import { TraditionalAuthSection } from './TraditionalAuthSection';
 import { safeCallbackPath } from '../../auth/safe-callback';
 import { authorizeResumeHref } from '../../lib/authorize-resume';
 import { NO_CODE_REQUEST, codeStepInstruction, type CodeRequest } from '../../lib/code-step-copy';
+import { DevCodeNotice } from './DevCodeNotice';
 import {
   credentialSignIn,
   requestEmailCode,
@@ -73,6 +74,7 @@ export function CredentialSignInForm({ callbackUrl, fetchImpl, onSignedIn, showF
   const [fieldError, setFieldError] = useState<string | null>(null);
   const [codeRequest, setCodeRequest] = useState<CodeRequest>(NO_CODE_REQUEST);
   const [offerEmailCode, setOfferEmailCode] = useState(false);
+  const [devCode, setDevCode] = useState<string | null>(null);
   const [emailCodeMsg, setEmailCodeMsg] = useState<string | null>(null);
 
   async function submit(withCode?: string) {
@@ -89,6 +91,7 @@ export function CredentialSignInForm({ callbackUrl, fetchImpl, onSignedIn, showF
       }
       if (r.kind === 'two_factor') {
         setCodeRequest(r.codeRequest);
+        setDevCode(r.devCode);
         setStep('code');
         return;
       }
@@ -124,6 +127,7 @@ export function CredentialSignInForm({ callbackUrl, fetchImpl, onSignedIn, showF
   function onBack() {
     setStep('credentials');
     setCodeRequest(NO_CODE_REQUEST);
+    setDevCode(null);
     setCode('');
     setFieldError(null);
     setError(null);
@@ -138,6 +142,7 @@ export function CredentialSignInForm({ callbackUrl, fetchImpl, onSignedIn, showF
       const r = await requestEmailCode(fetchImpl);
       if (r.kind === 'requested') {
         setCodeRequest(r.codeRequest);
+        setDevCode(r.devCode);
         setError(null);
         setOfferEmailCode(false);
         setEmailCodeMsg('We asked for a code to be emailed to you. Enter it above when it arrives.');
@@ -182,6 +187,7 @@ export function CredentialSignInForm({ callbackUrl, fetchImpl, onSignedIn, showF
               className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
               style={inputStyle}
             />
+            <DevCodeNotice code={devCode} />
           </div>
           <button
             type="submit"

package/src/components/auth/DevCodeNotice.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+/**
+ * AUTH-045 (BAPert 75627): on a DEV identity service that echoes the emailed sign-in code in its own answer (Email:DevCodeEcho, an
+ * IdP setting that is on only in Development), the sign-in form shows that code under the code box, because on a dev rig the email
+ * goes to nobody. This component is a PURE PASSTHROUGH of the server's `devVerificationCode`: it renders nothing unless it is given
+ * a non-empty string, and CredentialSignInForm gives it nothing but the value the door returned. There is no environment flag in the
+ * app, so a production IdP (echo off, field absent) can never make it appear.
+ */
+export function DevCodeNotice({ code }: { code?: string | null }) {
+  if (typeof code !== 'string' || code === '') return null;
+  return (
+    <p data-testid="dev-sign-in-code" className="text-sm mt-3" style={{ color: 'var(--text-muted, #6b7280)' }}>
+      Development sign-in code: <strong>{code}</strong>
+    </p>
+  );
+}

package/src/components/auth/InvitedEntryLink.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+/** 4.8.6: the sign-in page's way in for a person who was invited. A plain link to /account-auth/signup (the "I was invited" page). */
+export function InvitedEntryLink() {
+  return (
+    <p className="text-sm mt-4" style={{ textAlign: 'center', color: 'var(--text-secondary, #6b7280)' }}>
+      <a href="/account-auth/signup" data-testid="invited-entry" style={{ color: 'var(--text-primary, #111827)', fontWeight: 600, textDecoration: 'underline' }}>
+        I was invited
+      </a>
+    </p>
+  );
+}
+export default InvitedEntryLink;

package/src/lib/credential-sign-in-client.ts

@@ -22,7 +22,7 @@ export type FetchLike = (input: string, init?: RequestInit) => Promise<Response>
 
 export type CredentialSignInResult =
   | { kind: 'success' }
-  | { kind: 'two_factor'; codeRequest: CodeRequest }
+  | { kind: 'two_factor'; codeRequest: CodeRequest; devCode: string | null }
   | { kind: 'rate_limited'; message: string }
   | { kind: 'error'; message: string; offerEmailCode: boolean };
 
@@ -46,6 +46,11 @@ export function validateCredentials(email: string, password: string): { email?:
   return errors.email || errors.password ? errors : null;
 }
 
+/** The dev echo: the door passes the IdP's DevVerificationCode through as `devVerificationCode`. Nothing else is ever a dev code. */
+function readDevCode(body: any): string | null {
+  return typeof body?.devVerificationCode === 'string' && body.devVerificationCode ? body.devVerificationCode : null;
+}
+
 function asString(v: unknown): string | undefined {
   return typeof v === 'string' && v ? v : undefined;
 }
@@ -64,7 +69,7 @@ export async function credentialSignIn(
     const body: any = await res.json().catch(() => null);
 
     if (res.status === 429) return { kind: 'rate_limited', message: asString(body?.error) ?? MSG_RATE_LIMITED };
-    if (body?.requiresTwoFactor) return { kind: 'two_factor', codeRequest: readCodeRequest(body) };
+    if (body?.requiresTwoFactor) return { kind: 'two_factor', codeRequest: readCodeRequest(body), devCode: readDevCode(body) };
     if (!res.ok || body?.success !== true) {
       return { kind: 'error', message: asString(body?.error) ?? MSG_CANNOT_SIGN_IN, offerEmailCode: body?.offerEmailCode === true };
     }
@@ -89,7 +94,7 @@ export async function requestEmailCode(fetchImpl: FetchLike = (input, init) => f
       return {
         kind: 'requested',
         codeRequest: readCodeRequest(body),
-        devCode: typeof body?.devVerificationCode === 'string' && body.devVerificationCode ? body.devVerificationCode : null,
+        devCode: readDevCode(body),
       };
     }
     return { kind: 'error', message: asString(body?.error) ?? MSG_EMAIL_CODE_FAILED };

package/src/lib/onboarding-code-client.ts

@@ -0,0 +1,31 @@
+/**
+ * 4.8.6: the onboarding page asks the IdP to email the invitee a code (POST /api/onboarding/send-email-code, token-driven) and shows
+ * the emailed code ONLY when the IdP itself echoed it in that answer (Email:DevCodeEcho, Development only). Same rule as the sign-in
+ * form (AUTH-045): a pure passthrough of the server's `dev_verification_code`, only a non-empty STRING counts, no environment flag.
+ */
+export type OnboardingCodeResult = { ok: boolean; devCode: string | null };
+
+type Echo = { dev_verification_code?: unknown };
+
+function pick(j: unknown): unknown {
+  const o = j as (Echo & { data?: Echo & { result?: Echo }; result?: Echo }) | null;
+  return o?.dev_verification_code ?? o?.data?.dev_verification_code ?? o?.data?.result?.dev_verification_code ?? o?.result?.dev_verification_code;
+}
+
+export async function requestOnboardingCode(
+  onboardToken: string,
+  fetchImpl: typeof fetch = fetch,
+): Promise<OnboardingCodeResult> {
+  try {
+    const res = await fetchImpl('/api/onboarding/send-email-code', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ onboard_token: onboardToken }),
+    });
+    const body = await res.json().catch(() => null);
+    const echoed = pick(body);
+    return { ok: res.ok, devCode: res.ok && typeof echoed === 'string' && echoed !== '' ? echoed : null };
+  } catch {
+    return { ok: false, devCode: null };
+  }
+}

package/src/pages/invited/index.ts

@@ -0,0 +1,5 @@
+/**
+ * 4.8.6: the "I was invited" page. Mount at app/account-auth/signup/page.tsx:
+ *   export { default } from '@payez/next-mvp/pages/invited';
+ */
+export { default, INVITED_DONE_SENTENCE } from './page';

package/src/pages/invited/page.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React, { useState } from 'react';
+
+/**
+ * 4.8.6: /account-auth/signup - "I was invited". The invitee types the address the invitation went to; the page posts it to the app's
+ * own /api/onboarding/signup and ALWAYS shows the same sentence afterwards, whatever came back (the IdP's answer is uniform and the
+ * page must not become an oracle for which addresses were invited). The onboarding link arrives by email.
+ */
+export const INVITED_DONE_SENTENCE = 'If this address was invited, a link is on its way.';
+const INVITED_ERROR_SENTENCE = 'Enter the email address your invitation was sent to.';
+
+export default function InvitedSignupPage() {
+  const [email, setEmail] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    const value = email.trim();
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) { setError(INVITED_ERROR_SENTENCE); return; }
+    setBusy(true);
+    setError(null);
+    try {
+      await fetch('/api/onboarding/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: value }),
+      });
+    } catch { /* same sentence either way */ }
+    setBusy(false);
+    setDone(true);
+  }
+
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16, background: 'var(--bg-default, #f9fafb)' }}>
+      <div style={{ width: '100%', maxWidth: 420, background: 'var(--bg-card, #fff)', border: '1px solid var(--border-default, #e5e7eb)', borderRadius: 16, padding: 28 }}>
+        <h1 style={{ color: 'var(--text-primary)', fontSize: 20, fontWeight: 600, margin: 0 }}>I was invited</h1>
+        {done ? (
+          <p role="status" data-testid="invited-done" style={{ color: 'var(--text-secondary)', fontSize: 14, marginTop: 12 }}>{INVITED_DONE_SENTENCE}</p>
+        ) : (
+          <form onSubmit={submit} noValidate style={{ marginTop: 16 }}>
+            <p style={{ color: 'var(--text-secondary)', fontSize: 14, marginTop: 0 }}>Enter the email address your invitation was sent to.</p>
+            <input
+              type="email" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" aria-label="Email address" placeholder="you@example.com"
+              aria-invalid={error ? true : undefined} aria-describedby={error ? 'invited-error' : undefined}
+              style={{ width: '100%', padding: '10px 12px', border: '1px solid var(--border-default, #d1d5db)', borderRadius: 10, fontSize: 15 }}
+            />
+            {error && <p id="invited-error" role="alert" style={{ color: '#b00020', fontSize: 13, marginTop: 8 }}>{error}</p>}
+            <button type="submit" disabled={busy || !email} style={{ marginTop: 14, width: '100%', padding: '10px 12px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: '#fff', fontWeight: 600, fontSize: 15, opacity: busy || !email ? 0.5 : 1 }}>
+              {busy ? 'Sending…' : 'Send my link'}
+            </button>
+          </form>
+        )}
+        <p style={{ marginTop: 16 }}><a href="/account-auth/login" style={{ color: 'var(--text-primary)', fontWeight: 600, textDecoration: 'underline' }}>Back to sign in</a></p>
+      </div>
+    </div>
+  );
+}

package/src/pages/onboarding/page.tsx

@@ -1,7 +1,9 @@
 'use client';
 
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
+import { DevCodeNotice } from '../../components/auth/DevCodeNotice';
+import { requestOnboardingCode } from '../../lib/onboarding-code-client';
 
 /**
  * PAY-2121: the /account-auth/onboarding landing page.
@@ -44,6 +46,23 @@ function OnboardingContent() {
   const [email, setEmail] = useState('');
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [devCode, setDevCode] = useState<string | null>(null);
+  const [codeNote, setCodeNote] = useState<string | null>(null);
+  const sentFor = useRef<string | null>(null);
+
+  // 4.8.6: the page asks for the code itself, once per token (nothing else ever sends it). The dev echo, if the IdP gave one in
+  // this answer, is shown under the code box; nothing else can make it appear.
+  async function sendCode() {
+    setCodeNote(null);
+    const r = await requestOnboardingCode(onboardToken);
+    setDevCode(r.devCode);
+    setCodeNote(r.ok ? 'A new code was sent.' : 'We could not send a code. Try again in a moment.');
+  }
+  useEffect(() => {
+    if (!onboardToken || sentFor.current === onboardToken) return;
+    sentFor.current = onboardToken;
+    void requestOnboardingCode(onboardToken).then((r) => setDevCode(r.devCode));
+  }, [onboardToken]);
 
   // Step 1: tell the invitee which address the code went to (masked). Best
   // effort - a failure here does not block entering a code they were emailed.
@@ -133,7 +152,7 @@ function OnboardingContent() {
           <p style={{ color: H.secondary, fontSize: 14, marginTop: 8 }}>
             {maskedEmail
               ? `We emailed a 6-digit code to ${maskedEmail}. Enter it below.`
-              : 'Enter the 6-digit code from your invitation email.'}
+              : 'We emailed you a 6-digit code. Enter it below.'}
           </p>
           <form onSubmit={submitCode} noValidate style={{ marginTop: 16 }}>
             <input
@@ -149,6 +168,13 @@ function OnboardingContent() {
               {busy ? 'Verifying…' : 'Verify'}
             </button>
           </form>
+          <DevCodeNotice code={devCode} />
+          <p style={{ marginTop: 12, fontSize: 13 }}>
+            <button type="button" onClick={() => void sendCode()} data-testid="resend-code" style={{ background: 'none', border: 'none', padding: 0, color: H.primary, fontWeight: 600, textDecoration: 'underline', cursor: 'pointer' }}>
+              Send a new code
+            </button>
+            {codeNote && <span role="status" style={{ marginLeft: 8, color: H.secondary }}>{codeNote}</span>}
+          </p>
         </>
       )}
 

package/src/routes/onboarding/index.ts

@@ -13,3 +13,4 @@ export { POST as verifyCodePOST } from '../../api-handlers/onboarding/verify-cod
 export { POST as sendEmailCodePOST } from '../../api-handlers/onboarding/send-email-code';
 export { POST as verifyWelcomeEmailPOST } from '../../api-handlers/onboarding/verify-welcome-email';
 export { POST as setPasswordPOST } from '../../api-handlers/onboarding/set-password';
+export { POST as signupPOST } from '../../api-handlers/onboarding/signup';

package/src/routes/onboarding/signup.ts

@@ -0,0 +1,2 @@
+/** POST /api/onboarding/signup -> IdP anonymous Onboarding/signup (4.8.6, the "I was invited" entry). */
+export { POST } from '../../api-handlers/onboarding/signup';