@poly-x/next 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/server.cjs

@@ -36,6 +36,8 @@ function buildServerAuthClient(config) {
 */
 const VERIFIER_COOKIE = "polyx_pkce";
 const VERIFIER_MAX_AGE = 600;
+/** poly-auth's own floor (Joi: min 6, max 128) — reject early rather than round-trip. */
+const MIN_PASSWORD_LENGTH = 6;
 function adapt(store) {
 	return {
 		get: (name) => store.get(name)?.value,
@@ -92,6 +94,7 @@ function createAuthHandlers(handlersConfig = {}) {
 		async authenticate(request) {
 			const config = resolveNextConfig(handlersConfig);
 			const redirectUri = `${new URL(request.url).origin}${callbackPath}`;
+			const client = buildServerAuthClient(config);
 			let payload;
 			try {
 				payload = await request.json();
@@ -103,36 +106,63 @@ function createAuthHandlers(handlersConfig = {}) {
 			if (!email || !password) return Response.json({ status: "invalid_request" }, { status: 400 });
 			const organizationCode = typeof payload.organizationCode === "string" ? payload.organizationCode : void 0;
 			const tenantId = typeof payload.tenantId === "string" ? payload.tenantId : void 0;
-			const { verifier, challenge } = await (0, _poly_x_core.generatePkce)();
-			const state = (0, _poly_x_core.randomState)();
-			const outcome = await buildServerAuthClient(config).authorizeWithPassword({
+			const newPassword = typeof payload.newPassword === "string" ? payload.newPassword : void 0;
+			const confirmPassword = typeof payload.confirmPassword === "string" ? payload.confirmPassword : void 0;
+			/** One authorize attempt, mapped to the wire response (sealing the session on success). */
+			async function attempt(withPassword) {
+				const { verifier, challenge } = await (0, _poly_x_core.generatePkce)();
+				const outcome = await client.authorizeWithPassword({
+					email,
+					password: withPassword,
+					redirectUri,
+					state: (0, _poly_x_core.randomState)(),
+					challenge,
+					organizationCode,
+					tenantId
+				});
+				switch (outcome.type) {
+					case "authorized":
+						await newSession(adapt(await (0, next_headers.cookies)()), config).establishFromCode(outcome.code, verifier, redirectUri);
+						return Response.json({
+							status: "success",
+							redirectTo: afterSignInPath
+						});
+					case "select_tenant": return Response.json({
+						status: "select_tenant",
+						tenants: outcome.tenants,
+						state: outcome.state
+					});
+					case "password_change_required": return Response.json({
+						status: "password_change_required",
+						userId: outcome.userId
+					}, { status: 403 });
+					case "no_access": return Response.json({ status: "no_access" }, { status: 403 });
+					default: return Response.json({ status: "invalid_credentials" }, { status: 401 });
+				}
+			}
+			if (newPassword === void 0) return attempt(password);
+			if (newPassword.length < MIN_PASSWORD_LENGTH) return Response.json({
+				status: "weak_password",
+				minLength: MIN_PASSWORD_LENGTH
+			}, { status: 400 });
+			if (newPassword !== confirmPassword) return Response.json({ status: "password_mismatch" }, { status: 400 });
+			const { challenge } = await (0, _poly_x_core.generatePkce)();
+			const proof = await client.authorizeWithPassword({
 				email,
 				password,
 				redirectUri,
-				state,
+				state: (0, _poly_x_core.randomState)(),
 				challenge,
 				organizationCode,
 				tenantId
 			});
-			switch (outcome.type) {
-				case "authorized":
-					await newSession(adapt(await (0, next_headers.cookies)()), config).establishFromCode(outcome.code, verifier, redirectUri);
-					return Response.json({
-						status: "success",
-						redirectTo: afterSignInPath
-					});
-				case "select_tenant": return Response.json({
-					status: "select_tenant",
-					tenants: outcome.tenants,
-					state: outcome.state
-				});
-				case "password_change_required": return Response.json({
-					status: "password_change_required",
-					userId: outcome.userId
-				}, { status: 403 });
-				case "no_access": return Response.json({ status: "no_access" }, { status: 403 });
-				default: return Response.json({ status: "invalid_credentials" }, { status: 401 });
-			}
+			if (proof.type !== "password_change_required") return Response.json({ status: "invalid_credentials" }, { status: 401 });
+			await client.setPassword({
+				userId: proof.userId,
+				newPassword,
+				confirmPassword
+			});
+			return attempt(newPassword);
 		},
 		async callback(request) {
 			const config = resolveNextConfig(handlersConfig);

package/dist/server.d.cts

@@ -95,6 +95,11 @@ type AuthenticateResult = {
 } | {
   status: "password_change_required";
   userId: string;
+} | {
+  status: "weak_password";
+  minLength: number;
+} | {
+  status: "password_mismatch";
 } | {
   status: "no_access";
 } | {

package/dist/server.d.mts

@@ -95,6 +95,11 @@ type AuthenticateResult = {
 } | {
   status: "password_change_required";
   userId: string;
+} | {
+  status: "weak_password";
+  minLength: number;
+} | {
+  status: "password_mismatch";
 } | {
   status: "no_access";
 } | {

package/dist/server.mjs

@@ -35,6 +35,8 @@ function buildServerAuthClient(config) {
 */
 const VERIFIER_COOKIE = "polyx_pkce";
 const VERIFIER_MAX_AGE = 600;
+/** poly-auth's own floor (Joi: min 6, max 128) — reject early rather than round-trip. */
+const MIN_PASSWORD_LENGTH = 6;
 function adapt(store) {
 	return {
 		get: (name) => store.get(name)?.value,
@@ -91,6 +93,7 @@ function createAuthHandlers(handlersConfig = {}) {
 		async authenticate(request) {
 			const config = resolveNextConfig(handlersConfig);
 			const redirectUri = `${new URL(request.url).origin}${callbackPath}`;
+			const client = buildServerAuthClient(config);
 			let payload;
 			try {
 				payload = await request.json();
@@ -102,36 +105,63 @@ function createAuthHandlers(handlersConfig = {}) {
 			if (!email || !password) return Response.json({ status: "invalid_request" }, { status: 400 });
 			const organizationCode = typeof payload.organizationCode === "string" ? payload.organizationCode : void 0;
 			const tenantId = typeof payload.tenantId === "string" ? payload.tenantId : void 0;
-			const { verifier, challenge } = await generatePkce();
-			const state = randomState();
-			const outcome = await buildServerAuthClient(config).authorizeWithPassword({
+			const newPassword = typeof payload.newPassword === "string" ? payload.newPassword : void 0;
+			const confirmPassword = typeof payload.confirmPassword === "string" ? payload.confirmPassword : void 0;
+			/** One authorize attempt, mapped to the wire response (sealing the session on success). */
+			async function attempt(withPassword) {
+				const { verifier, challenge } = await generatePkce();
+				const outcome = await client.authorizeWithPassword({
+					email,
+					password: withPassword,
+					redirectUri,
+					state: randomState(),
+					challenge,
+					organizationCode,
+					tenantId
+				});
+				switch (outcome.type) {
+					case "authorized":
+						await newSession(adapt(await cookies()), config).establishFromCode(outcome.code, verifier, redirectUri);
+						return Response.json({
+							status: "success",
+							redirectTo: afterSignInPath
+						});
+					case "select_tenant": return Response.json({
+						status: "select_tenant",
+						tenants: outcome.tenants,
+						state: outcome.state
+					});
+					case "password_change_required": return Response.json({
+						status: "password_change_required",
+						userId: outcome.userId
+					}, { status: 403 });
+					case "no_access": return Response.json({ status: "no_access" }, { status: 403 });
+					default: return Response.json({ status: "invalid_credentials" }, { status: 401 });
+				}
+			}
+			if (newPassword === void 0) return attempt(password);
+			if (newPassword.length < MIN_PASSWORD_LENGTH) return Response.json({
+				status: "weak_password",
+				minLength: MIN_PASSWORD_LENGTH
+			}, { status: 400 });
+			if (newPassword !== confirmPassword) return Response.json({ status: "password_mismatch" }, { status: 400 });
+			const { challenge } = await generatePkce();
+			const proof = await client.authorizeWithPassword({
 				email,
 				password,
 				redirectUri,
-				state,
+				state: randomState(),
 				challenge,
 				organizationCode,
 				tenantId
 			});
-			switch (outcome.type) {
-				case "authorized":
-					await newSession(adapt(await cookies()), config).establishFromCode(outcome.code, verifier, redirectUri);
-					return Response.json({
-						status: "success",
-						redirectTo: afterSignInPath
-					});
-				case "select_tenant": return Response.json({
-					status: "select_tenant",
-					tenants: outcome.tenants,
-					state: outcome.state
-				});
-				case "password_change_required": return Response.json({
-					status: "password_change_required",
-					userId: outcome.userId
-				}, { status: 403 });
-				case "no_access": return Response.json({ status: "no_access" }, { status: 403 });
-				default: return Response.json({ status: "invalid_credentials" }, { status: 401 });
-			}
+			if (proof.type !== "password_change_required") return Response.json({ status: "invalid_credentials" }, { status: 401 });
+			await client.setPassword({
+				userId: proof.userId,
+				newPassword,
+				confirmPassword
+			});
+			return attempt(newPassword);
 		},
 		async callback(request) {
 			const config = resolveNextConfig(handlersConfig);

package/dist/styles.css

@@ -0,0 +1,379 @@
+/**
+ * @poly-x/react — default component styles.
+ *
+ * Import once, near the root of your app:
+ *   import "@poly-x/react/styles.css";   // or "@poly-x/next/styles.css"
+ *
+ * The SDK is a guest in your app: every rule is scoped under a `.polyx-*` class,
+ * there are no global element selectors, and nothing here leaks into your own
+ * markup. To theme it, override the custom properties below on any ancestor
+ * (`:root`, a wrapper div, …) — that is the supported theming surface. Dark mode
+ * follows the OS by default and defers to an explicit `.dark` / `[data-theme]`
+ * on a host ancestor when one is present.
+ */
+
+.polyx-signin {
+	/* Colors */
+	--polyx-brand: #4f46e5;
+	--polyx-brand-hover: #4338ca;
+	--polyx-brand-fg: #ffffff;
+	--polyx-bg: #ffffff;
+	--polyx-fg: #18181b;
+	--polyx-muted-fg: #71717a;
+	--polyx-border: #e4e4e7;
+	--polyx-input-bg: #ffffff;
+	--polyx-ring: #a5b4fc;
+	--polyx-danger: #dc2626;
+	--polyx-danger-bg: #fef2f2;
+	--polyx-page-bg: #fafafa;
+
+	/* Shape + type */
+	--polyx-radius: 0.75rem;
+	--polyx-radius-sm: 0.5rem;
+	--polyx-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+	--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 10px 30px rgb(0 0 0 / 0.07);
+
+	font-family: var(--polyx-font);
+	color: var(--polyx-fg);
+	-webkit-font-smoothing: antialiased;
+}
+
+/* Scoped box model — applies only inside our own subtree. */
+.polyx-signin,
+.polyx-signin *,
+.polyx-signin *::before,
+.polyx-signin *::after {
+	box-sizing: border-box;
+}
+
+/* Dark: follow the OS… */
+@media (prefers-color-scheme: dark) {
+	.polyx-signin {
+		--polyx-brand: #6366f1;
+		--polyx-brand-hover: #818cf8;
+		--polyx-bg: #18181b;
+		--polyx-fg: #fafafa;
+		--polyx-muted-fg: #a1a1aa;
+		--polyx-border: #3f3f46;
+		--polyx-input-bg: #27272a;
+		--polyx-ring: #4f46e5;
+		--polyx-danger: #f87171;
+		--polyx-danger-bg: #2a1616;
+		--polyx-page-bg: #09090b;
+		--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.35);
+	}
+}
+
+/* …but an explicit host theme wins over the OS preference (`:where` keeps
+   specificity at 0 so these stay as easy to override as the base rule). */
+:where(.dark, [data-theme="dark"]) .polyx-signin {
+	--polyx-brand: #6366f1;
+	--polyx-brand-hover: #818cf8;
+	--polyx-bg: #18181b;
+	--polyx-fg: #fafafa;
+	--polyx-muted-fg: #a1a1aa;
+	--polyx-border: #3f3f46;
+	--polyx-input-bg: #27272a;
+	--polyx-ring: #4f46e5;
+	--polyx-danger: #f87171;
+	--polyx-danger-bg: #2a1616;
+	--polyx-page-bg: #09090b;
+	--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.35);
+}
+
+:where(.light, [data-theme="light"]) .polyx-signin {
+	--polyx-brand: #4f46e5;
+	--polyx-brand-hover: #4338ca;
+	--polyx-bg: #ffffff;
+	--polyx-fg: #18181b;
+	--polyx-muted-fg: #71717a;
+	--polyx-border: #e4e4e7;
+	--polyx-input-bg: #ffffff;
+	--polyx-ring: #a5b4fc;
+	--polyx-danger: #dc2626;
+	--polyx-danger-bg: #fef2f2;
+	--polyx-page-bg: #fafafa;
+	--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 10px 30px rgb(0 0 0 / 0.07);
+}
+
+/* --- Variants ------------------------------------------------------------ */
+
+/* `card`: just the card — drop it anywhere in your own layout. */
+.polyx-signin--card {
+	display: block;
+}
+
+.polyx-signin__card {
+	width: 100%;
+	max-width: 27rem;
+	margin-inline: auto;
+	padding: 2.25rem;
+	background: var(--polyx-bg);
+	border: 1px solid var(--polyx-border);
+	border-radius: var(--polyx-radius);
+	box-shadow: var(--polyx-shadow);
+}
+
+/**
+ * `page`: owns the viewport. With brand content (a `logo`, a `tagline`, or a
+ * custom `panel`) it becomes a split layout — brand panel beside the form on
+ * wide screens, a slim brand band above it on narrow ones. With no brand content
+ * there's nothing to put in a panel, so it stays a single centered column.
+ */
+.polyx-signin--page {
+	display: grid;
+	grid-template-columns: 1fr;
+	min-height: 100dvh;
+}
+
+.polyx-signin--page.polyx-signin--split {
+	grid-template-rows: auto 1fr;
+}
+
+@media (min-width: 64rem) {
+	.polyx-signin--page.polyx-signin--split {
+		grid-template-columns: 1.1fr 1fr;
+		grid-template-rows: 1fr;
+	}
+}
+
+.polyx-signin__panel {
+	display: flex;
+	position: relative;
+	overflow: hidden;
+	align-items: center;
+	gap: 1rem;
+	padding: 1.25rem 1.5rem;
+	color: var(--polyx-brand-fg);
+	background: linear-gradient(145deg, var(--polyx-brand), color-mix(in srgb, var(--polyx-brand) 55%, #000));
+}
+
+@media (min-width: 64rem) {
+	.polyx-signin__panel {
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 2rem;
+		padding: 3.5rem;
+	}
+}
+
+/* Soft light-bloom so a bare brand panel still reads as designed, not as a flat fill. */
+.polyx-signin__panel::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	background:
+		radial-gradient(circle at 82% 12%, rgb(255 255 255 / 0.18), transparent 45%),
+		radial-gradient(circle at 12% 88%, rgb(255 255 255 / 0.1), transparent 42%);
+}
+
+.polyx-signin__panel-logo,
+.polyx-signin__tagline {
+	position: relative;
+	z-index: 1;
+}
+
+/* The tagline is the panel's headline — it only earns its space on wide screens. */
+.polyx-signin__tagline {
+	display: none;
+	margin: 0;
+	max-width: 18ch;
+	font-size: 2rem;
+	font-weight: 600;
+	line-height: 1.2;
+	letter-spacing: -0.02em;
+}
+
+@media (min-width: 64rem) {
+	.polyx-signin__tagline {
+		display: block;
+	}
+}
+
+.polyx-signin__main {
+	display: grid;
+	place-items: center;
+	padding: 2.5rem 1.5rem;
+	background: var(--polyx-page-bg);
+}
+
+/* On the page variant the form isn't a floating card — it sits on the page itself. */
+.polyx-signin--page .polyx-signin__card {
+	max-width: 25rem;
+	padding: 0;
+	background: transparent;
+	border: none;
+	box-shadow: none;
+}
+
+
+/* --- Header -------------------------------------------------------------- */
+
+.polyx-signin__header {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+	margin-bottom: 1.75rem;
+}
+
+.polyx-signin__logo {
+	display: flex;
+	margin-bottom: 0.75rem;
+}
+
+.polyx-signin__heading {
+	margin: 0;
+	font-size: 1.375rem;
+	font-weight: 600;
+	letter-spacing: -0.01em;
+	color: var(--polyx-fg);
+}
+
+.polyx-signin__subheading {
+	margin: 0;
+	font-size: 0.875rem;
+	color: var(--polyx-muted-fg);
+}
+
+/* --- Form ---------------------------------------------------------------- */
+
+.polyx-signin__form {
+	display: flex;
+	flex-direction: column;
+	gap: 1.125rem;
+}
+
+.polyx-signin__field {
+	display: flex;
+	flex-direction: column;
+	gap: 0.4375rem;
+}
+
+.polyx-signin__label {
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--polyx-fg);
+}
+
+.polyx-signin__input {
+	width: 100%;
+	height: 2.5rem;
+	padding: 0 0.75rem;
+	font: inherit;
+	font-size: 0.875rem;
+	color: var(--polyx-fg);
+	background: var(--polyx-input-bg);
+	border: 1px solid var(--polyx-border);
+	border-radius: var(--polyx-radius-sm);
+	outline: none;
+	transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.polyx-signin__input::placeholder {
+	color: var(--polyx-muted-fg);
+}
+
+.polyx-signin__input:focus-visible {
+	border-color: var(--polyx-brand);
+	box-shadow: 0 0 0 3px var(--polyx-ring);
+}
+
+.polyx-signin__input:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+/* --- Buttons ------------------------------------------------------------- */
+
+.polyx-signin__submit,
+.polyx-signin__tenant {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	min-height: 2.5rem;
+	padding: 0 1rem;
+	font: inherit;
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--polyx-brand-fg);
+	background: var(--polyx-brand);
+	border: 1px solid transparent;
+	border-radius: var(--polyx-radius-sm);
+	cursor: pointer;
+	transition: background-color 0.15s ease;
+}
+
+.polyx-signin__submit:hover:not(:disabled),
+.polyx-signin__tenant:hover:not(:disabled) {
+	background: var(--polyx-brand-hover);
+}
+
+.polyx-signin__submit:focus-visible,
+.polyx-signin__tenant:focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 3px var(--polyx-ring);
+}
+
+.polyx-signin__submit:disabled,
+.polyx-signin__tenant:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+/* --- Error --------------------------------------------------------------- */
+
+.polyx-signin__error {
+	margin: 0;
+	padding: 0.625rem 0.75rem;
+	font-size: 0.8125rem;
+	color: var(--polyx-danger);
+	background: var(--polyx-danger-bg);
+	border: 1px solid color-mix(in srgb, var(--polyx-danger) 30%, transparent);
+	border-radius: var(--polyx-radius-sm);
+}
+
+/* --- Footer -------------------------------------------------------------- */
+
+.polyx-signin__footer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.375rem;
+	margin-top: 1.5rem;
+	font-size: 0.75rem;
+	color: var(--polyx-muted-fg);
+}
+
+.polyx-signin__shield {
+	flex: none;
+	width: 0.875rem;
+	height: 0.875rem;
+	opacity: 0.85;
+}
+
+/* --- Workspace picker ---------------------------------------------------- */
+
+.polyx-signin__tenants {
+	display: flex;
+	flex-direction: column;
+	gap: 0.625rem;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+/* The picker's buttons read as choices, not as the primary CTA. */
+.polyx-signin__tenant {
+	justify-content: flex-start;
+	color: var(--polyx-fg);
+	background: var(--polyx-input-bg);
+	border-color: var(--polyx-border);
+}
+
+.polyx-signin__tenant:hover:not(:disabled) {
+	background: var(--polyx-input-bg);
+	border-color: var(--polyx-brand);
+}

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@poly-x/next",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "description": "PolyX SDK for Next.js App Router - components plus server helpers",
   "license": "MIT",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist"
   ],
@@ -38,14 +40,15 @@
         "types": "./dist/proxy.d.cts",
         "default": "./dist/proxy.cjs"
       }
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",
   "dependencies": {
-    "@poly-x/core": "0.1.0-alpha.2",
-    "@poly-x/react": "0.1.0-alpha.2"
+    "@poly-x/core": "0.1.0-alpha.4",
+    "@poly-x/react": "0.1.0-alpha.4"
   },
   "peerDependencies": {
     "next": ">=14",
@@ -68,7 +71,7 @@
     "react-dom": "^19.2.7"
   },
   "scripts": {
-    "build": "tsdown",
+    "build": "tsdown && node scripts/copy-styles.mjs",
     "test": "vitest run",
     "lint": "eslint src"
   }