@poly-x/react 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/index.cjs

@@ -352,14 +352,146 @@ function Protected({ children, fallback = null, loading = null }) {
 }
 //#endregion
 //#region src/components/sign-in.tsx
-/** Minimal sign-in trigger — popup by default. Style via `className`/children. */
-function SignIn({ children, className, ...options }) {
-	const { signIn } = useAuth();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "button",
-		className,
-		onClick: () => void signIn(options),
-		children: children ?? "Sign in"
+const DEFAULT_LABELS = {
+	emailLabel: "Email",
+	passwordLabel: "Password",
+	submit: "Sign in",
+	submitting: "Signing in…",
+	chooseWorkspace: "Choose a workspace",
+	invalidCredentials: "Invalid email or password.",
+	noAccess: "You don't have access to this application.",
+	passwordChangeRequired: "You must reset your password before you can sign in.",
+	genericError: "Something went wrong. Please try again."
+};
+/**
+* The embedded, Clerk-style sign-in form (D2b). Renders email/password inside the
+* consuming app and POSTs to the SDK's BFF (`@poly-x/next` `authenticate`), which
+* runs the credential authorize server-side and seals an httpOnly session — no
+* redirect to a hosted PolyX login page, no tokens or credentials in the browser
+* after submit. Handles the workspace picker (select_tenant) inline.
+*/
+function SignIn(props) {
+	const action = props.action ?? "/api/polyx/authenticate";
+	const labels = {
+		...DEFAULT_LABELS,
+		...props.labels
+	};
+	const [email, setEmail] = (0, react.useState)("");
+	const [password, setPassword] = (0, react.useState)("");
+	const [tenants, setTenants] = (0, react.useState)(null);
+	const [submitting, setSubmitting] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(null);
+	async function authenticate(tenantId) {
+		setSubmitting(true);
+		setError(null);
+		try {
+			const body = await (await fetch(action, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({
+					email,
+					password,
+					organizationCode: props.organizationCode,
+					tenantId
+				})
+			})).json().catch(() => ({}));
+			switch (body.status) {
+				case "success":
+					window.location.assign(props.afterSignInPath ?? body.redirectTo ?? "/");
+					return;
+				case "select_tenant":
+					setTenants(body.tenants ?? []);
+					return;
+				case "invalid_credentials":
+					setError(labels.invalidCredentials);
+					return;
+				case "no_access":
+					setError(labels.noAccess);
+					return;
+				case "password_change_required":
+					setError(labels.passwordChangeRequired);
+					if (body.userId) props.onPasswordChangeRequired?.(body.userId);
+					return;
+				default:
+					setError(labels.genericError);
+					return;
+			}
+		} catch {
+			setError(labels.genericError);
+		} finally {
+			setSubmitting(false);
+		}
+	}
+	function onSubmit(event) {
+		event.preventDefault();
+		authenticate();
+	}
+	if (tenants) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: props.className,
+		"data-polyx-signin": "select-tenant",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "polyx-signin__heading",
+				children: labels.chooseWorkspace
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "polyx-signin__tenants",
+				children: tenants.map((tenant) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "polyx-signin__tenant",
+					disabled: submitting,
+					onClick: () => void authenticate(tenant.tenantId),
+					children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
+				}) }, tenant.tenantId))
+			}),
+			error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				role: "alert",
+				className: "polyx-signin__error",
+				children: error
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		className: props.className,
+		"data-polyx-signin": "credentials",
+		onSubmit,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "polyx-signin__field",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labels.emailLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "email",
+					name: "email",
+					autoComplete: "username",
+					required: true,
+					value: email,
+					disabled: submitting,
+					onChange: (event) => setEmail(event.target.value)
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "polyx-signin__field",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labels.passwordLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "password",
+					name: "password",
+					autoComplete: "current-password",
+					required: true,
+					value: password,
+					disabled: submitting,
+					onChange: (event) => setPassword(event.target.value)
+				})]
+			}),
+			error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				role: "alert",
+				className: "polyx-signin__error",
+				children: error
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "submit",
+				className: "polyx-signin__submit",
+				disabled: submitting,
+				children: submitting ? labels.submitting : labels.submit
+			})
+		]
 	});
 }
 //#endregion

package/dist/index.d.cts

@@ -191,16 +191,39 @@ declare function Protected({
 }: ProtectedProps): ReactNode;
 //#endregion
 //#region src/components/sign-in.d.ts
-interface SignInProps extends SignInOptions {
-  children?: ReactNode;
+/** Every user-facing string, overridable for i18n / white-labelling. */
+interface SignInLabels {
+  emailLabel: string;
+  passwordLabel: string;
+  submit: string;
+  submitting: string;
+  chooseWorkspace: string;
+  invalidCredentials: string;
+  noAccess: string;
+  passwordChangeRequired: string;
+  genericError: string;
+}
+interface SignInProps {
+  /** BFF endpoint backed by `createAuthHandlers().authenticate`. Default `/api/polyx/authenticate`. */
+  action?: string;
+  /** Where to send the browser after success. Overrides the server's default redirect. */
+  afterSignInPath?: string;
+  /** Pre-scope the login to a single organization (skips org discovery). */
+  organizationCode?: string;
+  /** Applied to the root `<form>` / picker container — style via your own CSS. */
   className?: string;
+  labels?: Partial<SignInLabels>;
+  /** Fired when the backend requires the user to set a new password before continuing. */
+  onPasswordChangeRequired?: (userId: string) => void;
 }
-/** Minimal sign-in trigger — popup by default. Style via `className`/children. */
-declare function SignIn({
-  children,
-  className,
-  ...options
-}: SignInProps): ReactNode;
+/**
+ * The embedded, Clerk-style sign-in form (D2b). Renders email/password inside the
+ * consuming app and POSTs to the SDK's BFF (`@poly-x/next` `authenticate`), which
+ * runs the credential authorize server-side and seals an httpOnly session — no
+ * redirect to a hosted PolyX login page, no tokens or credentials in the browser
+ * after submit. Handles the workspace picker (select_tenant) inline.
+ */
+declare function SignIn(props: SignInProps): ReactNode;
 //#endregion
 //#region src/components/auth-callback.d.ts
 interface AuthCallbackProps {
@@ -220,4 +243,4 @@ declare function AuthCallback({
 declare const PACKAGE_NAME = "@poly-x/react";
 declare const version = "0.0.0";
 //#endregion
-export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInOptions, type SignInProps, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };
+export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };

package/dist/index.d.mts

@@ -191,16 +191,39 @@ declare function Protected({
 }: ProtectedProps): ReactNode;
 //#endregion
 //#region src/components/sign-in.d.ts
-interface SignInProps extends SignInOptions {
-  children?: ReactNode;
+/** Every user-facing string, overridable for i18n / white-labelling. */
+interface SignInLabels {
+  emailLabel: string;
+  passwordLabel: string;
+  submit: string;
+  submitting: string;
+  chooseWorkspace: string;
+  invalidCredentials: string;
+  noAccess: string;
+  passwordChangeRequired: string;
+  genericError: string;
+}
+interface SignInProps {
+  /** BFF endpoint backed by `createAuthHandlers().authenticate`. Default `/api/polyx/authenticate`. */
+  action?: string;
+  /** Where to send the browser after success. Overrides the server's default redirect. */
+  afterSignInPath?: string;
+  /** Pre-scope the login to a single organization (skips org discovery). */
+  organizationCode?: string;
+  /** Applied to the root `<form>` / picker container — style via your own CSS. */
   className?: string;
+  labels?: Partial<SignInLabels>;
+  /** Fired when the backend requires the user to set a new password before continuing. */
+  onPasswordChangeRequired?: (userId: string) => void;
 }
-/** Minimal sign-in trigger — popup by default. Style via `className`/children. */
-declare function SignIn({
-  children,
-  className,
-  ...options
-}: SignInProps): ReactNode;
+/**
+ * The embedded, Clerk-style sign-in form (D2b). Renders email/password inside the
+ * consuming app and POSTs to the SDK's BFF (`@poly-x/next` `authenticate`), which
+ * runs the credential authorize server-side and seals an httpOnly session — no
+ * redirect to a hosted PolyX login page, no tokens or credentials in the browser
+ * after submit. Handles the workspace picker (select_tenant) inline.
+ */
+declare function SignIn(props: SignInProps): ReactNode;
 //#endregion
 //#region src/components/auth-callback.d.ts
 interface AuthCallbackProps {
@@ -220,4 +243,4 @@ declare function AuthCallback({
 declare const PACKAGE_NAME = "@poly-x/react";
 declare const version = "0.0.0";
 //#endregion
-export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInOptions, type SignInProps, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };
+export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { AuthClient, FetchTransport, InMemoryLock, InMemoryPkceStore, InMemorySessionChannel, InMemorySessionStore, createSessionEngine, generatePkce, randomState, resolveConfig } from "@poly-x/core";
-import { createContext, useCallback, useContext, useEffect, useMemo, useSyncExternalStore } from "react";
-import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth-channel.ts
 var BroadcastAuthChannel = class {
 	supported;
@@ -351,14 +351,146 @@ function Protected({ children, fallback = null, loading = null }) {
 }
 //#endregion
 //#region src/components/sign-in.tsx
-/** Minimal sign-in trigger — popup by default. Style via `className`/children. */
-function SignIn({ children, className, ...options }) {
-	const { signIn } = useAuth();
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		className,
-		onClick: () => void signIn(options),
-		children: children ?? "Sign in"
+const DEFAULT_LABELS = {
+	emailLabel: "Email",
+	passwordLabel: "Password",
+	submit: "Sign in",
+	submitting: "Signing in…",
+	chooseWorkspace: "Choose a workspace",
+	invalidCredentials: "Invalid email or password.",
+	noAccess: "You don't have access to this application.",
+	passwordChangeRequired: "You must reset your password before you can sign in.",
+	genericError: "Something went wrong. Please try again."
+};
+/**
+* The embedded, Clerk-style sign-in form (D2b). Renders email/password inside the
+* consuming app and POSTs to the SDK's BFF (`@poly-x/next` `authenticate`), which
+* runs the credential authorize server-side and seals an httpOnly session — no
+* redirect to a hosted PolyX login page, no tokens or credentials in the browser
+* after submit. Handles the workspace picker (select_tenant) inline.
+*/
+function SignIn(props) {
+	const action = props.action ?? "/api/polyx/authenticate";
+	const labels = {
+		...DEFAULT_LABELS,
+		...props.labels
+	};
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [tenants, setTenants] = useState(null);
+	const [submitting, setSubmitting] = useState(false);
+	const [error, setError] = useState(null);
+	async function authenticate(tenantId) {
+		setSubmitting(true);
+		setError(null);
+		try {
+			const body = await (await fetch(action, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({
+					email,
+					password,
+					organizationCode: props.organizationCode,
+					tenantId
+				})
+			})).json().catch(() => ({}));
+			switch (body.status) {
+				case "success":
+					window.location.assign(props.afterSignInPath ?? body.redirectTo ?? "/");
+					return;
+				case "select_tenant":
+					setTenants(body.tenants ?? []);
+					return;
+				case "invalid_credentials":
+					setError(labels.invalidCredentials);
+					return;
+				case "no_access":
+					setError(labels.noAccess);
+					return;
+				case "password_change_required":
+					setError(labels.passwordChangeRequired);
+					if (body.userId) props.onPasswordChangeRequired?.(body.userId);
+					return;
+				default:
+					setError(labels.genericError);
+					return;
+			}
+		} catch {
+			setError(labels.genericError);
+		} finally {
+			setSubmitting(false);
+		}
+	}
+	function onSubmit(event) {
+		event.preventDefault();
+		authenticate();
+	}
+	if (tenants) return /* @__PURE__ */ jsxs("div", {
+		className: props.className,
+		"data-polyx-signin": "select-tenant",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "polyx-signin__heading",
+				children: labels.chooseWorkspace
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "polyx-signin__tenants",
+				children: tenants.map((tenant) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "polyx-signin__tenant",
+					disabled: submitting,
+					onClick: () => void authenticate(tenant.tenantId),
+					children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
+				}) }, tenant.tenantId))
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "polyx-signin__error",
+				children: error
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ jsxs("form", {
+		className: props.className,
+		"data-polyx-signin": "credentials",
+		onSubmit,
+		children: [
+			/* @__PURE__ */ jsxs("label", {
+				className: "polyx-signin__field",
+				children: [/* @__PURE__ */ jsx("span", { children: labels.emailLabel }), /* @__PURE__ */ jsx("input", {
+					type: "email",
+					name: "email",
+					autoComplete: "username",
+					required: true,
+					value: email,
+					disabled: submitting,
+					onChange: (event) => setEmail(event.target.value)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "polyx-signin__field",
+				children: [/* @__PURE__ */ jsx("span", { children: labels.passwordLabel }), /* @__PURE__ */ jsx("input", {
+					type: "password",
+					name: "password",
+					autoComplete: "current-password",
+					required: true,
+					value: password,
+					disabled: submitting,
+					onChange: (event) => setPassword(event.target.value)
+				})]
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "polyx-signin__error",
+				children: error
+			}) : null,
+			/* @__PURE__ */ jsx("button", {
+				type: "submit",
+				className: "polyx-signin__submit",
+				disabled: submitting,
+				children: submitting ? labels.submitting : labels.submit
+			})
+		]
 	});
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poly-x/react",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "description": "PolyX SDK for React SPAs - provider, hooks, drop-in auth UI",
   "license": "MIT",
   "type": "module",
@@ -24,7 +24,7 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",
   "dependencies": {
-    "@poly-x/core": "0.1.0-alpha.1"
+    "@poly-x/core": "0.1.0-alpha.2"
   },
   "peerDependencies": {
     "react": ">=18",