@payez/next-mvp 4.8.4 → 4.8.5

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payez/next-mvp",
-  "version": "4.8.4",
+  "version": "4.8.5",
   "sideEffects": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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/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 };