@sjolystinnovation/app-kit 0.5.0 → 0.7.0

package/src/session/react/ProtectedGate.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, type ReactNode } from "react";
+import { useSessionGate } from "./useSessionGate";
+
+export interface ProtectedGateProps {
+  /** Where a signed-out visitor, or a session dead on arrival, is sent. */
+  loginHref: string;
+  /** What shows while the page may not render yet. */
+  fallback?: ReactNode | undefined;
+  children: ReactNode;
+}
+
+/**
+ * Renders a protected page only on a usable session, and keeps it rendered while the re-sign-in
+ * prompt recovers the session. Never redirects while the prompt is open.
+ */
+export function ProtectedGate({ loginHref, fallback = null, children }: ProtectedGateProps) {
+  const router = useRouter();
+  const { status, promptOpen, usable, wasUsable, mayRender } = useSessionGate();
+
+  useEffect(() => {
+    // A page opened on a dead session must not render, or the user starts work they cannot save.
+    // A session that dies later keeps the page, and the prompt recovers it in place.
+    if (promptOpen) return;
+    if (status === "unauthenticated" || (status === "authenticated" && !usable && !wasUsable)) {
+      // replace, so Back does not return to a page that only redirects again.
+      router.replace(loginHref);
+    }
+  }, [status, usable, wasUsable, promptOpen, router, loginHref]);
+
+  return mayRender ? children : fallback;
+}

package/src/session/react/RoleGate.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useState, type ReactNode } from "react";
+import { useSessionGate } from "./useSessionGate";
+
+interface RoleGateBase {
+  /** The role the page needs, as it appears in `session.user.roles`. */
+  role: string;
+  /** What shows while the session or its roles are not known yet. */
+  fallback?: ReactNode | undefined;
+  children: ReactNode;
+}
+
+/** Shows `denied` to a signed-in user without the role. */
+interface RoleGateWithDenied extends RoleGateBase {
+  denied: ReactNode;
+  deniedHref?: never;
+}
+
+/** Sends a signed-in user without the role to `deniedHref`. */
+interface RoleGateWithDeniedHref extends RoleGateBase {
+  deniedHref: string;
+  denied?: never;
+}
+
+export type RoleGateProps = RoleGateWithDenied | RoleGateWithDeniedHref;
+
+/**
+ * Renders its children only for a user with `role`. Place it inside `ProtectedGate`, which decides
+ * whether the session may render at all.
+ *
+ * While the re-sign-in prompt recovers a signed-out session there is no user, so the roles are
+ * unknown. The page stays up only on the path where the session last had the role.
+ */
+export function RoleGate(props: RoleGateProps) {
+  const { role, fallback = null, children } = props;
+  const { session, recovering, mayRender } = useSessionGate();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const roles = (session?.user as { roles?: string[] } | undefined)?.roles ?? [];
+  const hasRole = roles.includes(role);
+  const rolesKnown = session?.user != null;
+
+  // The path where the session last had the role. A user without it clears the pass. Set during
+  // render, the same way useSessionGate tracks the path it last passed. It starts as undefined, not
+  // null, because usePathname can return null.
+  const [roleAt, setRoleAt] = useState<string | null | undefined>(undefined);
+  if (hasRole && roleAt !== pathname) setRoleAt(pathname);
+  if (rolesKnown && !hasRole && roleAt !== undefined) setRoleAt(undefined);
+  const keepThroughRecovery = recovering && roleAt === pathname;
+
+  const allowed = hasRole || keepThroughRecovery;
+  const denied = mayRender && rolesKnown && !allowed;
+  const deniedHref = "deniedHref" in props ? props.deniedHref : undefined;
+
+  useEffect(() => {
+    // replace, so Back does not return to a page that only redirects again.
+    if (denied && deniedHref != null) router.replace(deniedHref);
+  }, [denied, deniedHref, router]);
+
+  if (mayRender && allowed) return children;
+  if (denied && "denied" in props) return props.denied;
+  return fallback;
+}

package/src/session/react/SessionExpiryGuard.tsx

@@ -0,0 +1,294 @@
+"use client";
+
+import { getSession, signOut, useSession } from "next-auth/react";
+import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
+import { Alert } from "../../ui/Alert";
+import { CredentialsForm } from "../../ui/CredentialsForm";
+import { SignInRejected, type CredentialsFormStrings } from "../../ui/credentialsFormStrings";
+import { withDefaults, type TextOverrides } from "../../ui/withDefaults";
+import {
+  closeSessionPrompt,
+  getSessionPromptOpen,
+  isTerminalSessionError,
+  openSessionPrompt,
+  subscribeSessionPrompt,
+} from "../expiry";
+import { defaultSessionExpiryGuardStrings, type SessionExpiryGuardStrings } from "./sessionExpiryGuardStrings";
+
+// The absolute expiry cannot be refreshed away, so the banner warns while there is still time.
+const WARN_BEFORE_MS = 30 * 60 * 1000;
+const MINUTE_MS = 60 * 1000;
+// The minutes left at which a screen reader hears the countdown again, after it first appears.
+const ANNOUNCE_AT_MINUTES = [10, 5, 1];
+
+// Timers pause while a computer sleeps, so no wait runs longer than this. The banner is then at most
+// this late after a wake. It also keeps every wait far below the browser's 32-bit timer limit.
+const MAX_WAIT_MS = 5 * MINUTE_MS;
+
+// How long until the banner text can next change: the warning starts, the minute count drops, or
+// the session expires. Null when nothing more can change.
+function msUntilNextChange(remaining: number): number | null {
+  if (remaining <= 0) return null;
+  const wait = remaining > WARN_BEFORE_MS ? remaining - WARN_BEFORE_MS : remaining % MINUTE_MS || MINUTE_MS;
+  return Math.min(wait, MAX_WAIT_MS);
+}
+
+
+export interface SessionExpiryGuardProps {
+  /** Where a sign-in as a different user is sent after it is signed out. */
+  loginHref: string;
+  /** Runs after the prompt signs the user back in, such as to show a toast. */
+  onRestored?: (() => void) | undefined;
+  strings?: TextOverrides<SessionExpiryGuardStrings> | undefined;
+  formStrings?: TextOverrides<CredentialsFormStrings> | undefined;
+}
+
+type User = { id?: string; email?: string | null };
+type Owner = { id: string; email: string };
+
+/**
+ * Warns before the session's absolute expiry, and signs the user back in without leaving the page
+ * when a request finds a dead session. Render it once, inside the SessionProvider.
+ */
+export function SessionExpiryGuard({ loginHref, onRestored, strings, formStrings }: SessionExpiryGuardProps) {
+  const text = withDefaults(defaultSessionExpiryGuardStrings, strings);
+  const { data: session, status } = useSession();
+  const sessionInfo = session as { user?: User; error?: string; absoluteExpiresAt?: number } | null;
+
+  const open = useSyncExternalStore(subscribeSessionPrompt, getSessionPromptOpen, () => false);
+
+  // The signed-in user. Latched, because a re-read after a lost cookie reports nobody.
+  const [owner, setOwner] = useState<Owner | null>(null);
+  const current = sessionInfo?.user;
+  // Not while the prompt is open, unless no owner is known yet. A sign-in in the prompt must be
+  // checked against the owner, not become it.
+  if (current?.id && current.id !== owner?.id && (!open || !owner)) {
+    setOwner({ id: current.id, email: current.email ?? "" });
+  }
+  // The user the session reports now, for the sign-in check when the read-back finds nobody.
+  const liveUser = useRef<User | undefined>(undefined);
+  useEffect(() => {
+    liveUser.current = current;
+  });
+
+  // The minutes left when the countdown banner opened the prompt. Null when a failed request opened
+  // it. Kept while the prompt is open, so the wording does not change under the user mid sign-in.
+  const [bannerMinutes, setBannerMinutes] = useState<number | null>(null);
+  // Cleared when the prompt closes, so a later prompt from a failed request does not reuse it.
+  const [wasOpen, setWasOpen] = useState(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (!open) setBannerMinutes(null);
+  }
+  // A sign-in is in flight. Closing then would hide its outcome.
+  const [pending, setPending] = useState(false);
+
+  // The clock lives in state, so rendering stays pure. A timer reads it again when the banner can
+  // change, and at least every few minutes.
+  const [now, setNow] = useState(() => Date.now());
+  const remaining =
+    status === "authenticated" && sessionInfo?.absoluteExpiresAt != null
+      ? sessionInfo.absoluteExpiresAt - now
+      : null;
+  useEffect(() => {
+    const wait = remaining == null ? null : msUntilNextChange(remaining);
+    if (wait == null) return;
+    const timer = window.setTimeout(() => setNow(Date.now()), wait);
+    return () => window.clearTimeout(timer);
+  }, [remaining]);
+  // A tab coming back, often after the computer slept, reads the clock again at once.
+  useEffect(() => {
+    const onVisible = () => {
+      if (document.visibilityState === "visible") setNow(Date.now());
+    };
+    document.addEventListener("visibilitychange", onVisible);
+    return () => document.removeEventListener("visibilitychange", onVisible);
+  }, []);
+
+  // Rounded up, so the last half minute reads 1 min, not 0.
+  const minutesLeft =
+    remaining != null && remaining > 0 && remaining <= WARN_BEFORE_MS ? Math.ceil(remaining / MINUTE_MS) : null;
+  const expired =
+    status === "authenticated" &&
+    (isTerminalSessionError(sessionInfo?.error) || (remaining != null && remaining <= 0));
+
+  const countdown = (minutes: number | null) => text.expiringSoon.replaceAll("{minutes}", String(minutes));
+
+  // The minutes a screen reader last heard. Every change of a status region is announced, so it
+  // changes only when the countdown starts and when it passes one of ANNOUNCE_AT_MINUTES.
+  const [announcedMinutes, setAnnouncedMinutes] = useState<number | null>(null);
+  const announceNow =
+    minutesLeft == null
+      ? null
+      : announcedMinutes == null || ANNOUNCE_AT_MINUTES.some((at) => minutesLeft <= at && announcedMinutes > at)
+        ? minutesLeft
+        : announcedMinutes;
+  if (announceNow !== announcedMinutes) setAnnouncedMinutes(announceNow);
+
+  // An open prompt stops the gate from redirecting, so the prompt closes when the guard unmounts.
+  useEffect(() => closeSessionPrompt, []);
+
+  // Who the prompt opened for. signIn replaces the session before it resolves, so the live owner
+  // would already be the account that just signed in.
+  const promptOwner = useRef<Owner | null>(null);
+  useEffect(() => {
+    if (!open) {
+      promptOwner.current = null;
+      return;
+    }
+    // Only on the way open. Reassigning while open would adopt the new account.
+    promptOwner.current ??= owner;
+  }, [open, owner]);
+
+  const dialog = useRef<HTMLDivElement | null>(null);
+  // The keydown handler is bound once per opening, so it reads pending through a ref.
+  const pendingRef = useRef(false);
+  const onPendingChange = (next: boolean) => {
+    pendingRef.current = next;
+    setPending(next);
+  };
+  const titleId = useId();
+
+  // Escape closes the dialog, except while a sign-in is pending. Tab cycles inside the dialog, even
+  // when focus has left it. Focus starts on the password field and returns where it was afterwards.
+  useEffect(() => {
+    if (!open) return;
+    const previous = document.activeElement as HTMLElement | null;
+    const focusable = () =>
+      Array.from(dialog.current?.querySelectorAll<HTMLElement>("input, button:not([disabled])") ?? []);
+
+    focusable()
+      .find((element) => element instanceof HTMLInputElement && element.type === "password")
+      ?.focus();
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        if (!pendingRef.current) closeSessionPrompt();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const elements = focusable();
+      const first = elements[0];
+      const last = elements[elements.length - 1];
+      if (!first || !last) return;
+      const edge = event.shiftKey ? first : last;
+      const outside = !dialog.current?.contains(document.activeElement);
+      if (outside || document.activeElement === edge) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+      }
+    };
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      // The control that opened the prompt may be gone by now, such as the banner's button.
+      if (previous?.isConnected) previous.focus();
+    };
+  }, [open]);
+
+  // A session read already in flight can answer after the sign-out and set the cookie again. So
+  // the session is checked and the sign-out repeated, and the page is left whatever happens.
+  const signOutFully = async () => {
+    for (let attempt = 0; attempt < 3; attempt++) {
+      try {
+        await signOut({ redirect: false });
+        if (!(await getSession({ broadcast: false }))) break;
+      } catch {
+        break;
+      }
+    }
+    window.location.assign(loginHref);
+  };
+
+  const signedIn = async () => {
+    // Read the session back, and only report success when it can save.
+    let next = (await getSession()) as { user?: User; error?: string } | null;
+    // A failed read-back with nobody known yet says nothing about who signed in, so read again.
+    for (let attempt = 0; attempt < 2 && !next && !liveUser.current?.id; attempt++) {
+      next = (await getSession({ broadcast: false })) as { user?: User; error?: string } | null;
+    }
+    // The form on the page belongs to whoever opened it. signIn has already replaced the session,
+    // so a different account is signed out, even when the read-back failed. The opener's draft
+    // stays stored under the opener's id, and comes back when they sign in.
+    const opener = promptOwner.current ?? owner;
+    // A session without an id counts as another account. When the read-back failed, only a known
+    // id counts.
+    const signedInId = next ? next.user?.id : liveUser.current?.id;
+    if (opener && (next || signedInId) && signedInId !== opener.id) {
+      await signOutFully();
+      throw new SignInRejected(text.wrongUser);
+    }
+    if (!next || isTerminalSessionError(next.error)) {
+      throw new SignInRejected(text.notRestored);
+    }
+    closeSessionPrompt();
+    onRestored?.();
+  };
+
+  return (
+    <>
+      {/* Mounted from the start, because a screen reader skips text that arrives with its region. */}
+      <div role="status" className="sr-only">
+        {!expired && announcedMinutes != null ? countdown(announcedMinutes) : ""}
+      </div>
+      <div role="alert" className="sr-only">
+        {expired ? text.expiredBody : ""}
+      </div>
+      {(expired || minutesLeft != null) && (
+        // At the bottom, because a sticky navbar usually holds the top at the same stacking level.
+        <div className="fixed inset-x-0 bottom-0 z-40">
+          <Alert variant="warning" role="none">
+            <div className="max-w-5xl mx-auto flex flex-wrap items-center justify-between gap-2">
+              <span>{expired ? text.expiredBody : countdown(minutesLeft)}</span>
+              <button
+                type="button"
+                onClick={() => {
+                  if (!expired) setBannerMinutes(minutesLeft);
+                  openSessionPrompt();
+                }}
+                className="font-semibold underline underline-offset-2"
+              >
+                {text.reSignIn}
+              </button>
+            </div>
+          </Alert>
+        </div>
+      )}
+
+      {open && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-dialog-backdrop px-4">
+          <div
+            ref={dialog}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={titleId}
+            className="w-full max-w-sm rounded-dialog bg-dialog-bg p-6 shadow-xl"
+          >
+            <h2 id={titleId} className="text-lg font-bold text-dialog-title">
+              {bannerMinutes != null ? text.reSignIn : text.expiredTitle}
+            </h2>
+            <p className="mt-1 mb-4 text-sm text-dialog-text">
+              {bannerMinutes != null ? countdown(bannerMinutes) : text.expiredBody}
+            </p>
+            <CredentialsForm
+              initialEmail={owner?.email ?? ""}
+              onSignedIn={signedIn}
+              strings={formStrings}
+              onPendingChange={onPendingChange}
+            >
+              <button
+                type="button"
+                onClick={closeSessionPrompt}
+                disabled={pending}
+                className="rounded-button border border-button-secondary-border px-4 text-sm font-medium text-button-secondary-text hover:bg-button-secondary-hover-bg"
+              >
+                {text.close}
+              </button>
+            </CredentialsForm>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/session/react/index.ts

@@ -1,2 +1,12 @@
+export { ProtectedGate } from "./ProtectedGate";
+export type { ProtectedGateProps } from "./ProtectedGate";
+export { SessionExpiryGuard } from "./SessionExpiryGuard";
+export type { SessionExpiryGuardProps } from "./SessionExpiryGuard";
+export { defaultSessionExpiryGuardStrings } from "./sessionExpiryGuardStrings";
+export type { SessionExpiryGuardStrings } from "./sessionExpiryGuardStrings";
 export { useSessionGate } from "./useSessionGate";
 export type { SessionGate } from "./useSessionGate";
+export { AppSessionProvider } from "./AppSessionProvider";
+export type { AppSessionProviderProps } from "./AppSessionProvider";
+export { RoleGate } from "./RoleGate";
+export type { RoleGateProps } from "./RoleGate";

package/src/session/react/sessionExpiryGuardStrings.ts

@@ -0,0 +1,26 @@
+// Plain values, with no "use client", so a server component can import them.
+
+/**
+ * The guard's text. Pass the app's own language. The defaults are English. Plain strings, so a
+ * server component can pass them.
+ */
+export interface SessionExpiryGuardStrings {
+  expiredTitle: string;
+  expiredBody: string;
+  /** Every `{minutes}` is replaced with the minutes left. */
+  expiringSoon: string;
+  reSignIn: string;
+  notRestored: string;
+  wrongUser: string;
+  close: string;
+}
+
+export const defaultSessionExpiryGuardStrings: SessionExpiryGuardStrings = {
+  expiredTitle: "Session expired",
+  expiredBody: "Your session has expired. Sign in again to save.",
+  expiringSoon: "Your session expires in {minutes} min. Sign in again to continue without interruption.",
+  reSignIn: "Sign in again",
+  notRestored: "We could not renew the session. Try again.",
+  wrongUser: "This page belongs to a different user. Sign in with the same account.",
+  close: "Close",
+};

package/src/styles.css

@@ -2,9 +2,9 @@
 @source ".";
 
 /*
- * Design tokens for the components. The defaults are stock Tailwind values, except the focus ring,
- * which uses the theme's --color-primary. Set a token in the app's own @theme to restyle, or in a
- * selector such as .dark for a scoped theme.
+ * Design tokens for the components. The defaults are stock Tailwind values, except the focus ring
+ * and the primary button, which use the theme's --color-primary and --color-primary-foreground. Set
+ * a token in the app's own @theme to restyle, or in a selector such as .dark for a scoped theme.
  */
 @theme default {
   --radius-alert: var(--radius-lg);
@@ -40,4 +40,17 @@
   --input-focus-ring-width: 2px;
   --color-input-toggle: var(--color-gray-400);
   --color-input-toggle-hover: var(--color-gray-600);
+
+  --radius-button: var(--radius-lg);
+  --color-button-primary-bg: var(--color-primary);
+  --color-button-primary-text: var(--color-primary-foreground);
+  --color-button-secondary-border: var(--color-gray-300);
+  --color-button-secondary-text: var(--color-gray-700);
+  --color-button-secondary-hover-bg: var(--color-gray-50);
+
+  --radius-dialog: var(--radius-xl);
+  --color-dialog-backdrop: color-mix(in oklab, var(--color-black) 40%, transparent);
+  --color-dialog-bg: var(--color-white);
+  --color-dialog-title: var(--color-gray-900);
+  --color-dialog-text: var(--color-gray-600);
 }

package/src/toast/index.ts

@@ -0,0 +1,11 @@
+import { toast as sonnerToast } from "sonner";
+import { getSessionPromptOpen } from "../session/expiry";
+
+// While the re-sign-in prompt is open it already tells the user why a request failed, so error
+// toasts stay quiet. Every other toast passes through.
+const error: typeof sonnerToast.error = (...args) => (getSessionPromptOpen() ? "" : sonnerToast.error(...args));
+
+/** sonner's `toast`, except that error toasts stay quiet while the re-sign-in prompt is open. */
+export const toast: typeof sonnerToast = new Proxy(sonnerToast, {
+  get: (target, property, receiver) => (property === "error" ? error : Reflect.get(target, property, receiver)),
+});

package/src/ui/Alert.tsx

@@ -4,10 +4,11 @@ import { cx } from "./cx";
 export interface AlertProps {
   variant?: "error" | "success" | "info" | "warning";
   /**
-   * Defaults to alert, which a screen reader interrupts for. Use status for text that keeps
-   * changing, such as a countdown, so it is not announced on every tick.
+   * Defaults to alert, which a screen reader interrupts for. A screen reader announces status
+   * without interrupting, on every change of its text. Use none when a separate live region
+   * announces the text.
    */
-  role?: "alert" | "status";
+  role?: "alert" | "status" | "none";
   /**
    * Classes for placing the alert, such as a margin. Restyle it through the theme variables. A
    * class that clashes with the alert's own wins or loses by the order Tailwind emits them in.

package/src/ui/CredentialsForm.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { signIn } from "next-auth/react";
+import { useState, type FormEvent, type ReactNode } from "react";
+import { SIGN_IN_ERRORS } from "../session/expiry";
+import { Alert } from "./Alert";
+import { PasswordInput } from "./PasswordInput";
+import {
+  SignInRejected,
+  defaultCredentialsFormStrings,
+  type CredentialsFormStrings,
+} from "./credentialsFormStrings";
+import { TextInput } from "./TextInput";
+import { withDefaults, type TextOverrides } from "./withDefaults";
+
+
+export interface CredentialsFormProps {
+  initialEmail?: string | undefined;
+  /** Runs after next-auth accepts the credentials. Throw `SignInRejected` to refuse with a reason. */
+  onSignedIn: () => void | Promise<void>;
+  /** Extra buttons next to the submit button, such as a close button. */
+  children?: ReactNode;
+  strings?: TextOverrides<CredentialsFormStrings> | undefined;
+  /** Runs when a sign-in starts and when it ends, such as to stop a dialog closing mid-request. */
+  onPendingChange?: ((pending: boolean) => void) | undefined;
+}
+
+// next-auth answers a stale CSRF token with its own sign-in page and ?csrf=true.
+function refusedForCsrf(url: string | null | undefined): boolean {
+  if (!url) return false;
+  const parsed = new URL(url, window.location.origin);
+  return parsed.pathname.endsWith("/signin") && parsed.searchParams.get("csrf") === "true";
+}
+
+/** Email and password sign-in through next-auth's credentials provider. */
+export function CredentialsForm({
+  initialEmail = "",
+  onSignedIn,
+  children,
+  strings,
+  onPendingChange,
+}: CredentialsFormProps) {
+  const text = withDefaults(defaultCredentialsFormStrings, strings);
+  const [email, setEmail] = useState(initialEmail);
+  // Follows initialEmail until the user types, so an email learned after mount still fills in.
+  const [emailTyped, setEmailTyped] = useState(false);
+  if (!emailTyped && email !== initialEmail) setEmail(initialEmail);
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    onPendingChange?.(true);
+    try {
+      const result = await signIn("credentials", { email, password, redirect: false });
+      if (result?.error) {
+        setError(result.error === SIGN_IN_ERRORS.unavailable ? text.signInUnavailable : text.invalidCredentials);
+        return;
+      }
+      // next-auth reports a stale CSRF token as a success, see refusedForCsrf.
+      if (!result?.ok || refusedForCsrf(result.url)) {
+        setError(text.somethingWentWrong);
+        return;
+      }
+      await onSignedIn();
+      setPassword("");
+    } catch (caught) {
+      setError(caught instanceof SignInRejected ? caught.message : text.somethingWentWrong);
+    } finally {
+      setSubmitting(false);
+      onPendingChange?.(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {error && <Alert variant="error">{error}</Alert>}
+      <TextInput
+        label={text.email}
+        name="email"
+        type="email"
+        value={email}
+        onChange={(e) => {
+          setEmailTyped(true);
+          setEmail(e.target.value);
+        }}
+        required
+      />
+      <PasswordInput
+        label={text.password}
+        name="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        required
+        showPasswordLabel={text.showPassword}
+        hidePasswordLabel={text.hidePassword}
+      />
+      <div className="flex gap-2">
+        <button
+          type="submit"
+          disabled={submitting}
+          className="flex-1 rounded-button bg-button-primary-bg text-button-primary-text font-semibold py-2.5 hover:brightness-95 disabled:opacity-60 transition"
+        >
+          {submitting ? text.signingIn : text.signIn}
+        </button>
+        {children}
+      </div>
+    </form>
+  );
+}