@awsmbiz/create-inbis-app 0.0.0-stage → 0.1.0

package/template/modules/auth/files/web/src/account-menu.tsx

@@ -0,0 +1,25 @@
+import { useMe } from "./auth-client.js";
+import { t } from "./messages.js";
+import { Link, type Navigate } from "./navigation.js";
+
+/** The header's account link: "Sign in" for visitors, the user's name (to the account page) once signed in. */
+export function AccountMenu({ path, navigate }: { path: string; navigate: Navigate }) {
+  const [state] = useMe();
+  const className =
+    "text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline aria-[current=page]:font-medium aria-[current=page]:text-foreground";
+  if (state.status === "loading") return null;
+  if (state.status === "signed-out") {
+    return (
+      <Link href={`/sign-in?next=${encodeURIComponent(path)}`} navigate={navigate} className={className}>
+        {t("account.signIn")}
+      </Link>
+    );
+  }
+  const label = state.status === "signed-in" ? state.me.user.name : t("account.title");
+  return (
+    <Link href="/account" navigate={navigate} aria-current={path === "/account" ? "page" : undefined} className={className}>
+      <span className="sr-only">{t("account.title")}: </span>
+      {label}
+    </Link>
+  );
+}

package/template/modules/auth/files/web/src/account.tsx

@@ -0,0 +1,87 @@
+import { StepUpScreen, usePublicAuthConfig } from "@awsmbiz/inbis-auth-ui";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from "@awsmbiz/inbis-ui";
+import { useEffect } from "react";
+import { client, identityOf, useMe } from "./auth-client.js";
+import { t } from "./messages.js";
+import { Link } from "./navigation.js";
+import type { RouteContext } from "./routes.js";
+
+/**
+ * The signed-in user's account page: who is signed in, and links to two-factor
+ * authentication and sessions. Signed-out visitors are sent to sign-in and come back.
+ * A page of your own that needs a session follows the same pattern (`useMe`).
+ */
+export function AccountPage({ navigate }: RouteContext) {
+  const [state, refresh] = useMe();
+  const publicConfig = usePublicAuthConfig(client);
+
+  useEffect(() => {
+    if (state.status === "signed-out") navigate(`/sign-in?next=${encodeURIComponent("/account")}`, { replace: true });
+  }, [state, navigate]);
+
+  if (state.status === "requirement") {
+    // The session needs a second factor (or another sign-in method) before it may be used.
+    return (
+      <StepUpScreen
+        client={client}
+        requirement={state.requirement}
+        onSatisfied={refresh}
+        onSignInAgain={() => {
+          void client.signOut().then(() => {
+            navigate("/sign-in?next=%2Faccount");
+          });
+        }}
+      />
+    );
+  }
+  if (state.status !== "signed-in") return <p className="text-sm text-muted-foreground">{t("common.loading")}</p>;
+
+  const { me } = state;
+  const twoFactor = publicConfig.status === "ready" && publicConfig.config.twoFactor !== undefined;
+  const linkClass = "text-sm font-medium text-primary underline underline-offset-4";
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-semibold tracking-tight">{t("account.heading")}</h1>
+        <p className="text-muted-foreground">{t("account.signedInAs", { name: me.user.name, identity: identityOf(me) })}</p>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <h2>{t("account.security")}</h2>
+          </CardTitle>
+          <CardDescription>{t("account.securityDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ul className="flex flex-col gap-2">
+            {twoFactor ? (
+              <li>
+                <Link href="/account/security" navigate={navigate} className={linkClass}>
+                  {t("account.twoFactor")}
+                </Link>
+              </li>
+            ) : null}
+            <li>
+              <Link href="/account/sessions" navigate={navigate} className={linkClass}>
+                {t("account.sessions")}
+              </Link>
+            </li>
+          </ul>
+        </CardContent>
+      </Card>
+      {/* inbis:wire account.sections */}
+      <div>
+        <Button
+          variant="outline"
+          onClick={() => {
+            void client.signOut().then(() => {
+              navigate("/sign-in");
+            });
+          }}
+        >
+          {t("account.signOut")}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/template/modules/auth/files/web/src/auth-client.ts

@@ -0,0 +1,60 @@
+import { accessRequirementOf, createInbisAuthClient, type AccessRequirement } from "@awsmbiz/inbis-auth/client";
+import { useEffect, useState } from "react";
+
+// Same origin as the Worker serving this SPA.
+export const client = createInbisAuthClient();
+
+/** Where to go after signing in: `?next=` when it is a path on this site, else home. */
+export function nextPath(search: string): string {
+  const next = new URLSearchParams(search).get("next");
+  return next?.startsWith("/") === true && !next.startsWith("//") ? next : "/";
+}
+
+/** The signed-in user, as `GET /api/me` returns it. */
+export interface Me {
+  user: { id: string; name: string; email: string; phoneNumber: string | null; emailIsPlaceholder: boolean; role: "admin" | "user" };
+}
+
+export type MeState =
+  | { status: "loading" }
+  | { status: "signed-out" }
+  /** Signed in, but the session needs a second factor or a different sign-in first. */
+  | { status: "requirement"; requirement: AccessRequirement }
+  | { status: "signed-in"; me: Me };
+
+/** Asks `GET /api/me` who is signed in. `refresh` asks again (after signing in or out). */
+export function useMe(): [MeState, () => void] {
+  const [state, setState] = useState<MeState>({ status: "loading" });
+  const [attempt, setAttempt] = useState(0);
+  useEffect(() => {
+    let active = true;
+    void fetch("/api/me", { credentials: "include" })
+      .then(async (response): Promise<MeState> => {
+        if (response.status === 401) return { status: "signed-out" };
+        const requirement = await accessRequirementOf(response.clone());
+        if (requirement !== null) return { status: "requirement", requirement };
+        if (!response.ok) return { status: "signed-out" };
+        return { status: "signed-in", me: (await response.json()) as Me };
+      })
+      .then((next) => {
+        if (active) setState(next);
+      })
+      .catch(() => {
+        if (active) setState({ status: "signed-out" });
+      });
+    return () => {
+      active = false;
+    };
+  }, [attempt]);
+  return [
+    state,
+    () => {
+      setAttempt((n) => n + 1);
+    },
+  ];
+}
+
+/** How to show who is signed in: a phone-only user's email is a placeholder. */
+export function identityOf(me: Me): string {
+  return (me.user.emailIsPlaceholder ? me.user.phoneNumber : me.user.email) ?? "";
+}

package/template/modules/auth/files/web/src/auth-pages.tsx

@@ -0,0 +1,152 @@
+import {
+  AcceptInvitationScreen,
+  ForgotPasswordScreen,
+  PhoneSignInScreen,
+  ResetPasswordScreen,
+  SessionsScreen,
+  SignInScreen,
+  SignUpScreen,
+  TwoFactorSettingsScreen,
+  VerifyEmailScreen,
+} from "@awsmbiz/inbis-auth-ui";
+import { client, nextPath } from "./auth-client.js";
+import type { RouteContext } from "./routes.js";
+
+// The sign-in screens of @awsmbiz/inbis-auth-ui, each a full page of its own (bare
+// routes in routes.tsx). Each screen reads the server's public auth config, so it only
+// offers what the app has switched on (sign-up when registration is open, phone sign-in,
+// password reset, 2FA).
+
+/** Signs out, then opens sign-in, coming back to `next` afterwards. */
+function signInAgain({ navigate }: RouteContext, next: string) {
+  void client.signOut().then(() => {
+    navigate(`/sign-in?next=${encodeURIComponent(next)}`);
+  });
+}
+
+export function SignInPage({ navigate, search }: RouteContext) {
+  return (
+    <SignInScreen
+      client={client}
+      onSignedIn={() => {
+        navigate(nextPath(search));
+      }}
+      onCreateAccount={() => {
+        navigate("/sign-up");
+      }}
+      onForgotPassword={() => {
+        navigate("/forgot-password");
+      }}
+      onVerifyEmail={() => {
+        navigate("/verify-email");
+      }}
+      onPhoneSignIn={() => {
+        navigate(`/sign-in/phone${search}`);
+      }}
+    />
+  );
+}
+
+export function PhoneSignInPage({ navigate, search }: RouteContext) {
+  return (
+    <PhoneSignInScreen
+      client={client}
+      onSignedIn={() => {
+        navigate(nextPath(search));
+      }}
+      onSignIn={() => {
+        navigate(`/sign-in${search}`);
+      }}
+    />
+  );
+}
+
+export function SignUpPage({ navigate }: RouteContext) {
+  return (
+    <SignUpScreen
+      client={client}
+      // Email verification is required: the new account signs in after verifying.
+      callbackURL="/verify-email?verified=1"
+      onSignedUp={() => {
+        navigate("/verify-email?sent=1");
+      }}
+      onSignIn={() => {
+        navigate("/sign-in");
+      }}
+    />
+  );
+}
+
+export function ForgotPasswordPage({ navigate }: RouteContext) {
+  return (
+    <ForgotPasswordScreen
+      client={client}
+      onSignIn={() => {
+        navigate("/sign-in");
+      }}
+    />
+  );
+}
+
+export function ResetPasswordPage({ navigate }: RouteContext) {
+  return (
+    <ResetPasswordScreen
+      client={client}
+      onSignIn={() => {
+        navigate("/sign-in");
+      }}
+      onRequestNewLink={() => {
+        navigate("/forgot-password");
+      }}
+    />
+  );
+}
+
+export function VerifyEmailPage({ navigate, search }: RouteContext) {
+  return (
+    <VerifyEmailScreen
+      client={client}
+      search={search}
+      onSignIn={() => {
+        navigate("/sign-in");
+      }}
+    />
+  );
+}
+
+/** Invitation links (`registration.invitations.acceptPath`, default /accept-invitation). */
+export function AcceptInvitationPage({ navigate }: RouteContext) {
+  return (
+    <AcceptInvitationScreen
+      client={client}
+      onSignIn={() => {
+        navigate("/sign-in");
+      }}
+      onSignedIn={() => {
+        navigate("/account");
+      }}
+    />
+  );
+}
+
+export function SecurityPage(context: RouteContext) {
+  return (
+    <TwoFactorSettingsScreen
+      client={client}
+      onReauthenticate={() => {
+        signInAgain(context, "/account/security");
+      }}
+    />
+  );
+}
+
+export function SessionsPage(context: RouteContext) {
+  return (
+    <SessionsScreen
+      client={client}
+      onReauthenticate={() => {
+        signInAgain(context, "/account/sessions");
+      }}
+    />
+  );
+}

package/template/modules/auth/module.json

@@ -0,0 +1,56 @@
+{
+  "name": "auth",
+  "description": "Sign-in: email/password, phone OTP, 2FA, invitations, registration modes, bootstrap-admin, auth emails/SMS and the auth-ui screens.",
+  "order": 10,
+  "requires": [],
+  "bindings": {
+    "AUTH_DB": "the auth tables (@awsmbiz/inbis-auth migrations, same database)"
+  },
+  "dependencies": {
+    "@awsmbiz/inbis-auth": "workspace:*",
+    "@awsmbiz/inbis-auth-ui": "workspace:*",
+    "@awsmbiz/inbis-notifications": "workspace:*"
+  },
+  "devDependencies": {
+    "better-auth": "1.7.14"
+  },
+  "scripts": {
+    "db:seed": "node scripts/seed-user.mjs",
+    "auth:bootstrap-admin": "inbis-auth bootstrap-admin"
+  },
+  "points": {
+    "account.sections": {
+      "file": "web/src/account.tsx",
+      "description": "JSX after the account page's Security card (e.g. a Card); `me` (the signed-in user), `navigate` and `linkClass` are in scope."
+    }
+  },
+  "wiring": {
+    "worker.imports": "wiring/worker.imports.ts",
+    "worker.deps": "wiring/worker.deps.ts",
+    "worker.routes": "wiring/worker.routes.ts",
+    "index.imports": "wiring/index.imports.ts",
+    "index.setup": "wiring/index.setup.ts",
+    "index.deps": "wiring/index.deps.ts",
+    "env.bindings": "wiring/env.bindings.ts",
+    "wrangler.vars": { "dev": "wiring/vars.dev.jsonc", "staging": "wiring/vars.staging.jsonc", "production": "wiring/vars.production.jsonc" },
+    "wrangler.secrets": "wiring/secrets.jsonc",
+    "wrangler.bindings": { "staging": "wiring/bindings.deployed.jsonc", "production": "wiring/bindings.deployed.jsonc" },
+    "wrangler.d1": "wiring/d1.jsonc",
+    "devvars": "wiring/devvars.txt",
+    "test.env": "wiring/test.env.ts",
+    "test.migrate": "wiring/test.migrate.ts",
+    "vitest.bindings": "wiring/vitest.bindings.ts",
+    "playwright.imports": "wiring/playwright.imports.ts",
+    "playwright.setup": "wiring/playwright.setup.ts",
+    "playwright.vars": "wiring/playwright.vars.ts",
+    "playwright.servers": "wiring/playwright.servers.ts",
+    "web.routes.imports": "wiring/web.routes.imports.tsx",
+    "web.routes": "wiring/web.routes.tsx",
+    "web.layout.imports": "wiring/web.layout.imports.tsx",
+    "web.header": "wiring/web.header.tsx",
+    "web.messages": "wiring/web.messages.ts",
+    "web.styles": "wiring/web.styles.css",
+    "readme.modules": "wiring/readme.modules.md",
+    "readme.provisioning": "wiring/readme.provisioning.md"
+  }
+}

package/template/modules/auth/wiring/bindings.deployed.jsonc

@@ -0,0 +1,2 @@
+// The shared communication service (auth email and SMS), an RPC Worker.
+"services": [{ "binding": "COMMUNICATION_SERVICE", "service": "biz-cloud-communication-service" }],

package/template/modules/auth/wiring/d1.jsonc

@@ -0,0 +1,7 @@
+{
+  "binding": "AUTH_DB",
+  "database_name": "{{database_name}}",
+  "database_id": "{{database_id}}",
+  "migrations_dir": "node_modules/@awsmbiz/inbis-auth/migrations",
+  "migrations_table": "_inbis_auth_migrations"
+},

package/template/modules/auth/wiring/devvars.txt

@@ -0,0 +1,12 @@
+# Auth: signs sessions and encrypts 2FA secrets. Any random string of 32+ characters,
+# e.g. `openssl rand -base64 32`.
+AUTH_SECRET=change-me-to-a-random-string-of-32-plus-chars
+# Turnstile secret key. Locally, Cloudflare's testing secret that accepts any token
+# (pairs with the testing TURNSTILE_SITE_KEY below).
+TURNSTILE_SECRET_KEY=1x0000000000000000000000000000000AA
+# Local-only overrides, so a deployed environment's config also starts on this machine
+# (`wrangler dev --env staging`, e.g. the deploy workflow's dry-run smoke test): log
+# transports instead of the communication service, and Cloudflare's Turnstile testing site key.
+EMAIL_TRANSPORT=log
+SMS_TRANSPORT=log
+TURNSTILE_SITE_KEY=1x00000000000000000000AA

package/template/modules/auth/wiring/env.bindings.ts

@@ -0,0 +1,26 @@
+/** The auth tables (@awsmbiz/inbis-auth migrations); same database as DB. */
+AUTH_DB: D1Database;
+/** Public origin of this Worker (auth links, cookies; https outside localhost). */
+AUTH_BASE_URL: string;
+/** Secret: signs sessions and encrypts 2FA secrets (32+ random characters). */
+AUTH_SECRET: string;
+/** Secret: the Turnstile widget's secret key. */
+TURNSTILE_SECRET_KEY: string;
+/** The Turnstile widget's public site key. */
+TURNSTILE_SITE_KEY: string;
+/** Sender of auth emails, `Name <address>`, on a domain onboarded to the communication service. */
+EMAIL_FROM: string;
+/** "log" (local) or "communication-service". */
+EMAIL_TRANSPORT: string;
+/** "log" (local) or "communication-service". */
+SMS_TRANSPORT: string;
+/** The app's ID in the communication service. */
+APP_ID: string;
+/** SMS sender header and the registered template IDs (communication-service SMS). */
+SMS_HEADER: string;
+SMS_OTP_TEMPLATE_ID: string;
+SMS_INVITATION_TEMPLATE_ID: string;
+/** "true": local test mode (src/local-test-mode.ts); ignored off local hosts. */
+LOCAL_TEST_MODE?: string;
+/** The shared communication service (deployed environments only). */
+COMMUNICATION_SERVICE?: Fetcher;

package/template/modules/auth/wiring/index.deps.ts

@@ -0,0 +1 @@
+auth: { authConfig, ...notifications, ...(localTest ? { fetch: stubbedFetch((input, init) => fetch(input, init)) } : {}) },

package/template/modules/auth/wiring/index.imports.ts

@@ -0,0 +1,4 @@
+import { validateAuthConfig } from "@awsmbiz/inbis-auth";
+import { appAuthConfig } from "./auth-config.js";
+import { localTestMode, stubbedFetch } from "./local-test-mode.js";
+import { appNotifications } from "./notifications.js";

package/template/modules/auth/wiring/index.setup.ts

@@ -0,0 +1,7 @@
+const authConfig = appAuthConfig(env);
+validateAuthConfig(authConfig);
+const notifications = appNotifications(env, authConfig);
+// Playwright runs (LOCAL_TEST_MODE, local hosts only): no calls to Turnstile or Pwned Passwords.
+// Better Auth's captcha plugin calls the global fetch, so that is wrapped too.
+const localTest = localTestMode(env);
+if (localTest) globalThis.fetch = stubbedFetch(globalThis.fetch.bind(globalThis));

package/template/modules/auth/wiring/playwright.imports.ts

@@ -0,0 +1 @@
+import { authDevVars, authSeedCommands, BOOTSTRAP_PORT, BOOTSTRAP_STATE, BOOTSTRAP_URL } from "./e2e/auth-seeded.js";

package/template/modules/auth/wiring/playwright.servers.ts

@@ -0,0 +1,12 @@
+// Auth: a fresh installation with no users, for the first administrator
+// (e2e/auth-bootstrap-admin.spec.ts runs `inbis-auth bootstrap-admin` against it).
+{
+  command: [
+    `rm -rf ${BOOTSTRAP_STATE}`,
+    `inbis-db migrate --local --persist-to ${BOOTSTRAP_STATE}`,
+    `wrangler dev --port ${BOOTSTRAP_PORT} --persist-to ${BOOTSTRAP_STATE} ${authDevVars(BOOTSTRAP_URL)}`,
+  ].join(" && "),
+  url: `${BOOTSTRAP_URL}/health`,
+  reuseExistingServer: false,
+  timeout: 120_000,
+},

package/template/modules/auth/wiring/playwright.setup.ts

@@ -0,0 +1,2 @@
+// Auth: the users the specs sign in as (e2e/auth-seeded.ts).
+...authSeedCommands(STATE),

package/template/modules/auth/wiring/playwright.vars.ts

@@ -0,0 +1,2 @@
+// Auth: test secrets; local test mode answers Turnstile and Pwned Passwords locally.
+authDevVars(BASE_URL),

package/template/modules/auth/wiring/readme.modules.md

@@ -0,0 +1,30 @@
+## Sign-in (auth module)
+
+`@awsmbiz/inbis-auth` (Better Auth on D1), `@awsmbiz/inbis-auth-ui` (the screens) and
+`@awsmbiz/inbis-notifications` (auth emails and SMS).
+
+- **Choices** — `src/auth-choices.ts`: the sign-in methods, the registration mode and the
+  phone country allow/block lists chosen when the app was created. Change them there;
+  `src/auth-config.ts` turns them into the auth config (every other option is the
+  platform default; see the `@awsmbiz/inbis-auth` README). Registration modes: `open`
+  (anyone signs up), `invite-only` (administrators create accounts or invite),
+  `admin-only` (administrators create accounts; invitations are refused), `closed`
+  (only the first administrator). Phone countries are calling-code prefixes; there is
+  no default.
+- **Routes** — `src/auth.ts` mounts `/api/auth/*`, `GET /api/me` and, locally, the outboxes.
+  Protect your own routes with `requireAuth()` from `@awsmbiz/inbis-auth/hono`.
+- **Screens** — `/sign-in`, `/sign-in/phone`, `/sign-up`, `/forgot-password`,
+  `/reset-password`, `/verify-email`, `/accept-invitation`, `/account` (with
+  `/account/security` for 2FA and `/account/sessions`). The header links to sign-in or
+  the account page.
+- **Email and SMS** — locally (`EMAIL_TRANSPORT`/`SMS_TRANSPORT` = `log`) nothing is sent:
+  messages are printed and kept in a dev outbox, `GET /api/dev/outbox` and
+  `GET /api/dev/sms-outbox` (local hosts only). Deployed environments send through the
+  shared communication service (see Provisioning).
+- **First administrator** — `pnpm auth:bootstrap-admin --email you@example.com --url <app URL>`
+  prints a one-time invitation link (add `--remote --env production` for a deployed
+  database, `--send-email` to email it). Administrators set up 2FA on first use.
+- **Local users** — `pnpm db:seed [--email a@b.test] [--password '...'] [--role admin]`
+  adds a verified email + password user to the local database.
+- **Tests** — `test/auth.test.ts` (Workers) and `e2e/auth-*.spec.ts` (Playwright + axe)
+  read `src/auth-choices.ts` and skip the journeys the app has switched off.

package/template/modules/auth/wiring/readme.provisioning.md

@@ -0,0 +1,11 @@
+   Sign-in (auth module):
+   - `AUTH_SECRET`: 32+ random characters (`openssl rand -base64 32`); `TURNSTILE_SECRET_KEY`:
+     the secret of a [Turnstile widget](https://developers.cloudflare.com/turnstile/get-started/)
+     for the app's domains, whose site key goes in `TURNSTILE_SITE_KEY` in `wrangler.jsonc`.
+   - Email and SMS go through the shared communication service (`biz-cloud-communication-service`,
+     bound as `COMMUNICATION_SERVICE` in each deployed environment). Register the app with it
+     under `APP_ID` and onboard the sender domain of `EMAIL_FROM`. With phone sign-in on, register
+     the SMS texts in `src/notifications.ts` (`SMS_TEXTS`) and set `SMS_HEADER`,
+     `SMS_OTP_TEMPLATE_ID` and `SMS_INVITATION_TEMPLATE_ID`; startup fails while they are blank.
+   - After migrating and deploying (step 4), create the first administrator:
+     `pnpm auth:bootstrap-admin --email you@example.com --url https://<domain> --remote --env <env>`.

package/template/modules/auth/wiring/secrets.jsonc

@@ -0,0 +1,2 @@
+"AUTH_SECRET",
+"TURNSTILE_SECRET_KEY",

package/template/modules/auth/wiring/test.env.ts

@@ -0,0 +1 @@
+AUTH_MIGRATIONS: D1Migration[];

package/template/modules/auth/wiring/test.migrate.ts

@@ -0,0 +1 @@
+await applyD1Migrations(env.AUTH_DB, env.AUTH_MIGRATIONS, "_inbis_auth_migrations");

package/template/modules/auth/wiring/vars.dev.jsonc

@@ -0,0 +1,19 @@
+// Auth: public origin of this Worker; https gives production cookies (Secure, __Secure- prefix).
+"AUTH_BASE_URL": "http://localhost:8787",
+// Sender of auth emails (verification, password reset, invitations).
+"EMAIL_FROM": "React Hono App <no-reply@react-hono-app.example.com>",
+// "log": print emails/SMS and keep a local outbox (GET /api/dev/outbox, /api/dev/sms-outbox;
+// local hosts only). Deployed environments use "communication-service".
+"EMAIL_TRANSPORT": "log",
+"SMS_TRANSPORT": "log",
+// The app's ID in the communication service, and the SMS sender header and template IDs
+// (communication-service SMS only; see README). Unused locally.
+"APP_ID": "",
+"SMS_HEADER": "",
+"SMS_OTP_TEMPLATE_ID": "",
+"SMS_INVITATION_TEMPLATE_ID": "",
+// Cloudflare's Turnstile testing site key (always passes), paired with the testing secret
+// in .dev.vars.example: https://developers.cloudflare.com/turnstile/troubleshooting/testing/
+"TURNSTILE_SITE_KEY": "1x00000000000000000000AA",
+// "true": local test mode (src/local-test-mode.ts); the Playwright suite sets it.
+"LOCAL_TEST_MODE": "",

package/template/modules/auth/wiring/vars.production.jsonc

@@ -0,0 +1,13 @@
+// Auth: this environment's public origin.
+"AUTH_BASE_URL": "https://react-hono-app.example.com",
+"EMAIL_FROM": "React Hono App <no-reply@react-hono-app.example.com>",
+"EMAIL_TRANSPORT": "communication-service",
+"SMS_TRANSPORT": "communication-service",
+// Registered with the communication service before the first send (see README).
+"APP_ID": "react-hono-app",
+// From the app's SMS registration. Startup fails while these are blank and phone sign-in is on.
+"SMS_HEADER": "",
+"SMS_OTP_TEMPLATE_ID": "",
+"SMS_INVITATION_TEMPLATE_ID": "",
+// The deployed Turnstile widget's site key (its secret: TURNSTILE_SECRET_KEY). Startup fails while blank.
+"TURNSTILE_SITE_KEY": "",

package/template/modules/auth/wiring/vars.staging.jsonc

@@ -0,0 +1,13 @@
+// Auth: this environment's public origin.
+"AUTH_BASE_URL": "https://staging.react-hono-app.example.com",
+"EMAIL_FROM": "React Hono App <no-reply@react-hono-app.example.com>",
+"EMAIL_TRANSPORT": "communication-service",
+"SMS_TRANSPORT": "communication-service",
+// Registered with the communication service before the first send (see README).
+"APP_ID": "react-hono-app",
+// From the app's SMS registration. Startup fails while these are blank and phone sign-in is on.
+"SMS_HEADER": "",
+"SMS_OTP_TEMPLATE_ID": "",
+"SMS_INVITATION_TEMPLATE_ID": "",
+// The deployed Turnstile widget's site key (its secret: TURNSTILE_SECRET_KEY). Startup fails while blank.
+"TURNSTILE_SITE_KEY": "",

package/template/modules/auth/wiring/vitest.bindings.ts

@@ -0,0 +1,6 @@
+// Auth: a production-like https origin (Secure cookies), test-only secrets and
+// Cloudflare's Turnstile testing secret (siteverify is faked in test/auth-fixtures.ts).
+AUTH_BASE_URL: "https://app.example.test",
+AUTH_SECRET: "test-only-secret-0123456789abcdefghijklmnop",
+TURNSTILE_SECRET_KEY: "1x0000000000000000000000000000000AA",
+AUTH_MIGRATIONS: await readD1Migrations("./node_modules/@awsmbiz/inbis-auth/migrations"),

package/template/modules/auth/wiring/web.header.tsx

@@ -0,0 +1 @@
+<AccountMenu path={path} navigate={navigate} />

package/template/modules/auth/wiring/web.layout.imports.tsx

@@ -0,0 +1 @@
+import { AccountMenu } from "./account-menu.js";

package/template/modules/auth/wiring/web.messages.ts

@@ -0,0 +1,17 @@
+// Sign-in (auth module). The screens' own text comes from @awsmbiz/inbis-auth-ui.
+"auth.signIn.title": "Sign in",
+"auth.phoneSignIn.title": "Sign in with your phone",
+"auth.signUp.title": "Create an account",
+"auth.forgotPassword.title": "Forgot password",
+"auth.resetPassword.title": "Reset password",
+"auth.verifyEmail.title": "Verify your email",
+"auth.acceptInvitation.title": "Accept your invitation",
+"account.title": "Account",
+"account.heading": "Your account",
+"account.signedInAs": "Signed in as {name} ({identity}).",
+"account.security": "Security",
+"account.securityDescription": "Protect your account and see where you are signed in.",
+"account.twoFactor": "Two-factor authentication",
+"account.sessions": "Signed-in devices",
+"account.signIn": "Sign in",
+"account.signOut": "Sign out",

package/template/modules/auth/wiring/web.routes.imports.tsx

@@ -0,0 +1,12 @@
+import { AccountPage } from "./account.js";
+import {
+  AcceptInvitationPage,
+  ForgotPasswordPage,
+  PhoneSignInPage,
+  ResetPasswordPage,
+  SecurityPage,
+  SessionsPage,
+  SignInPage,
+  SignUpPage,
+  VerifyEmailPage,
+} from "./auth-pages.js";

package/template/modules/auth/wiring/web.routes.tsx

@@ -0,0 +1,11 @@
+// Sign-in (auth module): full-page screens, then the signed-in user's pages.
+{ path: "/sign-in", title: "auth.signIn.title", bare: true, render: (c) => <SignInPage {...c} /> },
+{ path: "/sign-in/phone", title: "auth.phoneSignIn.title", bare: true, render: (c) => <PhoneSignInPage {...c} /> },
+{ path: "/sign-up", title: "auth.signUp.title", bare: true, render: (c) => <SignUpPage {...c} /> },
+{ path: "/forgot-password", title: "auth.forgotPassword.title", bare: true, render: (c) => <ForgotPasswordPage {...c} /> },
+{ path: "/reset-password", title: "auth.resetPassword.title", bare: true, render: (c) => <ResetPasswordPage {...c} /> },
+{ path: "/verify-email", title: "auth.verifyEmail.title", bare: true, render: (c) => <VerifyEmailPage {...c} /> },
+{ path: "/accept-invitation", title: "auth.acceptInvitation.title", bare: true, render: (c) => <AcceptInvitationPage {...c} /> },
+{ path: "/account/security", title: "account.twoFactor", bare: true, render: (c) => <SecurityPage {...c} /> },
+{ path: "/account/sessions", title: "account.sessions", bare: true, render: (c) => <SessionsPage {...c} /> },
+{ path: "/account", title: "account.title", render: (c) => <AccountPage {...c} /> },

package/template/modules/auth/wiring/web.styles.css

@@ -0,0 +1 @@
+@import "@awsmbiz/inbis-auth-ui/styles.css";