@starci/hfs 5.1.0 → 5.3.0

package/templates/fe/skeleton-lite/apps/web/src/components/blocks/EmailDoorForm/component.tsx

@@ -0,0 +1,51 @@
+import { Button, Form, Input, Link, Text } from "@starci/grammar/common"
+
+/** One destination under the form: a sibling door or the sign-in page. */
+export interface EmailDoorLink {
+    readonly href: string
+    readonly label: string
+}
+
+/** Copy, fields, state and action supplied by the connected email-door block. */
+export interface EmailDoorFormBaseProps {
+    readonly props: {
+        readonly title: string
+        readonly description: string
+        /** The label of the email field, or undefined when the door takes none. */
+        readonly emailLabel: string | undefined
+        /** The label of the password field, or undefined when the door takes none. */
+        readonly passwordLabel: string | undefined
+        readonly submitLabel: string
+        readonly pending: boolean
+        /** The resolved message of the last refusal, or undefined. */
+        readonly errorMessage: string | undefined
+        /** The message shown once the back end accepted the request, or undefined while it has not. */
+        readonly doneMessage: string | undefined
+        readonly links: readonly EmailDoorLink[]
+    }
+    readonly on: { readonly submit: (input: FormData) => void }
+}
+
+/** Draws one email door (sign up, resend, forgot, reset) without reading navigation, copy or request state. */
+export const EmailDoorFormBase = (props: EmailDoorFormBaseProps) => (
+    <>
+        {props.props.doneMessage === undefined ? (
+            <Form label={props.props.title} isPending={props.props.pending} onSubmit={props.on.submit}>
+                <Text>{props.props.description}</Text>
+                {props.props.emailLabel === undefined ? null : <Input id="email-door-email" name="email" label={props.props.emailLabel} kind="email" isRequired />}
+                {props.props.passwordLabel === undefined ? null : <Input id="email-door-password" name="password" label={props.props.passwordLabel} kind="password" isRequired />}
+                {props.props.errorMessage === undefined ? null : <Text live="assertive">{props.props.errorMessage}</Text>}
+                <Button type="submit" intent="commit" isPending={props.props.pending}>
+                    {props.props.submitLabel}
+                </Button>
+            </Form>
+        ) : (
+            <Text live="polite">{props.props.doneMessage}</Text>
+        )}
+        {props.props.links.map((link) => (
+            <Link key={link.href} href={link.href}>
+                {link.label}
+            </Link>
+        ))}
+    </>
+)

package/templates/fe/skeleton-lite/apps/web/src/components/blocks/EmailDoorForm/index.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import { useLocale, useTranslations } from "next-intl"
+import { useEmailDoor } from "@/hooks/emailAuth"
+import type { EmailDoorFailure } from "@/hooks/emailAuth"
+import { APP_ROUTES } from "@/modules/routes"
+import { EmailDoorFormBase } from "./component"
+import type { EmailDoorLink } from "./component"
+
+/** The doors the block draws; the confirmation is a button, so the mailbox is confirmed by a person and not by a mail scanner opening the link. */
+type FormDoor = "signup" | "resend" | "forgot" | "reset" | "confirm"
+
+/** The door the block draws and, for the two link doors, the token of the link. */
+type EmailDoorFormProps = { readonly door: FormDoor; readonly token?: string | undefined }
+
+/** The words of one door. */
+interface DoorCopy {
+    readonly title: string
+    readonly description: string
+    readonly submit: string
+    readonly done: string
+    readonly email: string | undefined
+    readonly password: string | undefined
+}
+
+/** The value of a field of the submitted form, or undefined when it is missing. */
+const fieldOf = (input: FormData, name: string): string | undefined => {
+    const value = input.get(name)
+    return typeof value === "string" ? value : undefined
+}
+
+/** The language a mail is written in: the page's, when the back end writes mail in it. */
+const languageOf = (locale: string): "vi" | "en" | undefined => (locale === "vi" || locale === "en" ? locale : undefined)
+
+/** One email door of the lite sign-in as a form: sign up, resend the confirmation, forgot the password, or choose a new one from a link. */
+export const EmailDoorForm = (props: EmailDoorFormProps) => {
+    const t = useTranslations("app.emailAuth")
+    const locale = useLocale()
+    const { failure, done, pending, submit, reject } = useEmailDoor(props.door)
+    const copy = {
+        signup: { title: t("signup.title"), description: t("signup.description"), submit: t("signup.submit"), done: t("signup.done"), email: t("email"), password: t("password") },
+        resend: { title: t("resend.title"), description: t("resend.description"), submit: t("resend.submit"), done: t("resend.done"), email: t("email"), password: undefined },
+        forgot: { title: t("forgot.title"), description: t("forgot.description"), submit: t("forgot.submit"), done: t("forgot.done"), email: t("email"), password: undefined },
+        confirm: { title: t("confirm.title"), description: t("confirm.description"), submit: t("confirm.submit"), done: t("confirm.done"), email: undefined, password: undefined },
+        reset: { title: t("reset.title"), description: t("reset.description"), submit: t("reset.submit"), done: t("reset.done"), email: undefined, password: t("newPassword") },
+    } satisfies Record<FormDoor, DoorCopy>
+    const links = {
+        signup: [{ href: APP_ROUTES.home, label: t("toSignIn") }, { href: APP_ROUTES.resend, label: t("toResend") }],
+        resend: [{ href: APP_ROUTES.home, label: t("toSignIn") }],
+        forgot: [{ href: APP_ROUTES.home, label: t("toSignIn") }],
+        reset: [{ href: APP_ROUTES.home, label: t("toSignIn") }, { href: APP_ROUTES.forgot, label: t("toForgot") }],
+        confirm: [{ href: APP_ROUTES.home, label: t("toSignIn") }, { href: APP_ROUTES.resend, label: t("toResend") }],
+    } satisfies Record<FormDoor, readonly EmailDoorLink[]>
+    const failures = {
+        invalid: t("errors.invalid"),
+        password: t("errors.password"),
+        link: t("errors.link"),
+        tooMany: t("errors.tooMany"),
+        unavailable: t("errors.unavailable"),
+    } satisfies Record<EmailDoorFailure, string>
+    const chosen = copy[props.door]
+    const onSubmit = (input: FormData) => {
+        const email = fieldOf(input, "email")
+        const password = fieldOf(input, "password")
+        if ((chosen.email !== undefined && email === undefined) || (chosen.password !== undefined && password === undefined)) reject()
+        else submit({ email, password, token: props.token, language: languageOf(locale) })
+    }
+    return (
+        <EmailDoorFormBase
+            props={{
+                title: chosen.title,
+                description: chosen.description,
+                emailLabel: chosen.email,
+                passwordLabel: chosen.password,
+                submitLabel: chosen.submit,
+                pending,
+                errorMessage: failure === undefined ? undefined : failures[failure],
+                doneMessage: done ? chosen.done : undefined,
+                links: links[props.door],
+            }}
+            on={{ submit: onSubmit }}
+        />
+    )
+}

package/templates/fe/skeleton-lite/apps/web/src/components/composites/NotFoundNotice/index.tsx

@@ -1,4 +1,4 @@
-import { Heading, TextAction } from "@starci/grammar/common"
+import { Link, Page } from "@starci/grammar/common"
 
 /** The words of a missing page and the way home. */
 type NotFoundNoticeProps = {
@@ -9,10 +9,7 @@ type NotFoundNoticeProps = {
 
 /** A missing page with one destination back to the app's front door. */
 export const NotFoundNotice = (props: NotFoundNoticeProps) => (
-    <>
-        <Heading level={1}>{props.title}</Heading>
-        <TextAction appearance="inline" href={props.homeHref}>
-            {props.homeLabel}
-        </TextAction>
-    </>
+    <Page header={{ title: props.title }} measure="reading">
+        <Link href={props.homeHref}>{props.homeLabel}</Link>
+    </Page>
 )

package/templates/fe/skeleton-lite/apps/web/src/components/frames/SiteShell/index.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react"
-import { GrammarRoot, PageContainer, TextAction, TopBar, WorkspaceShell } from "@starci/grammar/common"
-import { siteShellClassNames } from "./classNames"
+import { GrammarRoot, Link, TopBar, WorkspaceShell } from "@starci/grammar/common"
 
 /** What the app chrome hands the shell. */
 type SiteShellProps = {

package/templates/fe/skeleton-lite/apps/web/src/features/pages/AppConfirmPage/index.tsx

@@ -0,0 +1,25 @@
+import type { ReactElement } from "react"
+import type { Metadata } from "next"
+import { Page } from "@starci/grammar/common"
+import { getTranslations } from "next-intl/server"
+import { EmailDoorForm } from "@/components/blocks/EmailDoorForm"
+
+/** The document title of the confirm page. */
+export const appConfirmMetadata = async (): Promise<Metadata> => {
+    const t = await getTranslations("app.emailAuth.confirm")
+    return { title: t("title") }
+}
+
+/** The query of the page: the link of the mail carries its token there. */
+type AppConfirmPageProps = { readonly searchParams: Promise<{ readonly token?: string | readonly string[] }> }
+
+/** The confirm door of the lite sign-in, drawn as one Grammar Page (R325). */
+export const AppConfirmPage = async (props: AppConfirmPageProps): Promise<ReactElement> => {
+    const { token } = await props.searchParams
+    const t = await getTranslations("app.emailAuth.confirm")
+    return (
+        <Page header={{ title: t("title") }} measure="reading">
+            <EmailDoorForm door="confirm" token={typeof token === "string" ? token : token?.[0]} />
+        </Page>
+    )
+}

package/templates/fe/skeleton-lite/apps/web/src/features/pages/AppForgotPage/index.tsx

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react"
+import type { Metadata } from "next"
+import { Page } from "@starci/grammar/common"
+import { getTranslations } from "next-intl/server"
+import { EmailDoorForm } from "@/components/blocks/EmailDoorForm"
+
+/** The document title of the forgot page. */
+export const appForgotMetadata = async (): Promise<Metadata> => {
+    const t = await getTranslations("app.emailAuth.forgot")
+    return { title: t("title") }
+}
+
+/** The forgot door of the lite sign-in, drawn as one Grammar Page (R325). */
+export const AppForgotPage = async (_props: Record<string, never>): Promise<ReactElement> => {
+    const t = await getTranslations("app.emailAuth.forgot")
+    return (
+        <Page header={{ title: t("title") }} measure="reading">
+            <EmailDoorForm door="forgot" />
+        </Page>
+    )
+}

package/templates/fe/skeleton-lite/apps/web/src/features/pages/AppHomePage/component.tsx

@@ -1,16 +1,24 @@
-import { Page } from "@starci/grammar/common"
+import { Link, Page } from "@starci/grammar/common"
 import { SignInForm } from "@/components/blocks/SignInForm"
 import { SignOutButton } from "@/components/blocks/SignOutButton"
 
-/** Props for the home page: its title. */
+/** Props for the home page: its title and the two doors beside the sign-in form. */
 export type AppHomePageBaseProps = {
-    readonly props: { readonly title: string }
+    readonly props: {
+        readonly title: string
+        readonly signupLabel: string
+        readonly signupHref: string
+        readonly forgotLabel: string
+        readonly forgotHref: string
+    }
 }
 
 /** Draws the front door as one Grammar Page (R325): the title heads the band, the body the sign-in form or the reader and sign-out. */
 export const AppHomePageBase = (props: AppHomePageBaseProps) => (
     <Page header={{ title: props.props.title }}>
         <SignInForm />
+        <Link href={props.props.signupHref}>{props.props.signupLabel}</Link>
+        <Link href={props.props.forgotHref}>{props.props.forgotLabel}</Link>
         <SignOutButton />
     </Page>
 )

package/templates/fe/skeleton-lite/apps/web/src/features/pages/AppHomePage/index.tsx

@@ -2,6 +2,7 @@ import type { ReactElement } from "react"
 import type { Metadata } from "next"
 import { getTranslations } from "next-intl/server"
 import { AppGuideOverlay } from "@/features/overlays/AppGuideOverlay"
+import { APP_ROUTES } from "@/modules/routes"
 import { AppHomePageBase } from "./component"
 
 /** The document title of the home page. */
@@ -15,7 +16,9 @@ export const AppHomePage = async (): Promise<ReactElement> => {
     const t = await getTranslations("app.home")
     return (
         <>
-            <AppHomePageBase props={{ title: t("title") }} />
+            <AppHomePageBase
+                props={{ title: t("title"), signupLabel: t("signup"), signupHref: APP_ROUTES.signup, forgotLabel: t("forgot"), forgotHref: APP_ROUTES.forgot }}
+            />
             <AppGuideOverlay />
         </>
     )

package/templates/fe/skeleton-lite/apps/web/src/features/pages/AppResendPage/index.tsx

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react"
+import type { Metadata } from "next"
+import { Page } from "@starci/grammar/common"
+import { getTranslations } from "next-intl/server"
+import { EmailDoorForm } from "@/components/blocks/EmailDoorForm"
+
+/** The document title of the resend page. */
+export const appResendMetadata = async (): Promise<Metadata> => {
+    const t = await getTranslations("app.emailAuth.resend")
+    return { title: t("title") }
+}
+
+/** The resend door of the lite sign-in, drawn as one Grammar Page (R325). */
+export const AppResendPage = async (_props: Record<string, never>): Promise<ReactElement> => {
+    const t = await getTranslations("app.emailAuth.resend")
+    return (
+        <Page header={{ title: t("title") }} measure="reading">
+            <EmailDoorForm door="resend" />
+        </Page>
+    )
+}

package/templates/fe/skeleton-lite/apps/web/src/features/pages/AppResetPage/index.tsx

@@ -0,0 +1,25 @@
+import type { ReactElement } from "react"
+import type { Metadata } from "next"
+import { Page } from "@starci/grammar/common"
+import { getTranslations } from "next-intl/server"
+import { EmailDoorForm } from "@/components/blocks/EmailDoorForm"
+
+/** The document title of the reset page. */
+export const appResetMetadata = async (): Promise<Metadata> => {
+    const t = await getTranslations("app.emailAuth.reset")
+    return { title: t("title") }
+}
+
+/** The query of the page: the link of the mail carries its token there. */
+type AppResetPageProps = { readonly searchParams: Promise<{ readonly token?: string | readonly string[] }> }
+
+/** The reset door of the lite sign-in, drawn as one Grammar Page (R325). */
+export const AppResetPage = async (props: AppResetPageProps): Promise<ReactElement> => {
+    const { token } = await props.searchParams
+    const t = await getTranslations("app.emailAuth.reset")
+    return (
+        <Page header={{ title: t("title") }} measure="reading">
+            <EmailDoorForm door="reset" token={typeof token === "string" ? token : token?.[0]} />
+        </Page>
+    )
+}

package/templates/fe/skeleton-lite/apps/web/src/features/pages/AppSignupPage/index.tsx

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react"
+import type { Metadata } from "next"
+import { Page } from "@starci/grammar/common"
+import { getTranslations } from "next-intl/server"
+import { EmailDoorForm } from "@/components/blocks/EmailDoorForm"
+
+/** The document title of the signup page. */
+export const appSignupMetadata = async (): Promise<Metadata> => {
+    const t = await getTranslations("app.emailAuth.signup")
+    return { title: t("title") }
+}
+
+/** The signup door of the lite sign-in, drawn as one Grammar Page (R325). */
+export const AppSignupPage = async (_props: Record<string, never>): Promise<ReactElement> => {
+    const t = await getTranslations("app.emailAuth.signup")
+    return (
+        <Page header={{ title: t("title") }} measure="reading">
+            <EmailDoorForm door="signup" />
+        </Page>
+    )
+}

package/templates/fe/skeleton-lite/apps/web/src/hooks/emailAuth/emailAuth.shared.ts

@@ -0,0 +1,12 @@
+import type { AuthFailure } from "@/modules/auth"
+
+/** Why an email door refused: input the back end rejected, a weak password, a dead link, too many tries or the back end unreachable. */
+export type EmailDoorFailure = "invalid" | "password" | "link" | "tooMany" | "unavailable"
+
+/** The failure a door's wire code and kind stand for. */
+export const failureOf = (failure: AuthFailure): EmailDoorFailure => {
+    if (failure.code === "IDENTITY_PASSWORD_INVALID") return "password"
+    if (failure.code === "IDENTITY_RESET_TOKEN_INVALID") return "link"
+    if (failure.code === "IDENTITY_TOO_MANY_ATTEMPTS" || failure.code === "429") return "tooMany"
+    return failure.kind === "invalid" ? "invalid" : "unavailable"
+}

package/templates/fe/skeleton-lite/apps/web/src/hooks/emailAuth/index.ts

@@ -0,0 +1,2 @@
+export { useEmailDoor } from "./useEmailDoor"
+export type { EmailDoorFailure } from "./useEmailDoor"

package/templates/fe/skeleton-lite/apps/web/src/hooks/emailAuth/useEmailDoor.ts

@@ -0,0 +1,32 @@
+"use client"
+
+import { useState, useTransition } from "react"
+import { sendEmailDoor } from "@/modules/auth"
+import type { EmailDoorName } from "@/modules/auth"
+import { failureOf } from "./emailAuth.shared"
+import type { EmailDoorFailure } from "./emailAuth.shared"
+
+export type { EmailDoorFailure } from "./emailAuth.shared"
+
+/** What an email door hook answers: whether a request runs, whether the back end accepted it, why it refused, the call itself and `reject`. */
+export interface EmailDoor {
+    readonly failure: EmailDoorFailure | undefined
+    readonly done: boolean
+    readonly pending: boolean
+    readonly submit: (body: Readonly<Record<string, string | undefined>>) => void
+    readonly reject: () => void
+}
+
+/** Calls one email door of the back end through modules/auth; a success sets `done`, a refusal its failure. */
+export const useEmailDoor = (door: EmailDoorName): EmailDoor => {
+    const [failure, setFailure] = useState<EmailDoorFailure>()
+    const [done, setDone] = useState(false)
+    const [pending, startTransition] = useTransition()
+    const submit = (body: Readonly<Record<string, string | undefined>>): void =>
+        startTransition(async () => {
+            const failed = await sendEmailDoor(door, body)
+            setFailure(failed === undefined ? undefined : failureOf(failed))
+            setDone(failed === undefined)
+        })
+    return { failure, done, pending, submit, reject: (): void => setFailure("invalid") }
+}

package/templates/fe/skeleton-lite/apps/web/src/modules/i18n/index.ts

@@ -1,2 +1,2 @@
-/** The locale served at the unprefixed path and used by the global error boundary. */
-export { DEFAULT_LOCALE, PRODUCT_TIME_ZONE, routing } from "./routing"
+/** The web app's description of its languages and the locale served at the unprefixed path (the global error boundary). */
+export { DEFAULT_LOCALE, i18n } from "./routing"

package/templates/fe/skeleton-lite/apps/web/src/modules/i18n/messages/en.json

@@ -5,7 +5,9 @@
       "brand": "{{project}}"
     },
     "home": {
-      "title": "Home"
+      "title": "Home",
+      "signup": "Create an account",
+      "forgot": "Forgot your password?"
     },
     "signIn": {
       "title": "Sign in",
@@ -52,6 +54,53 @@
       "title": "Getting started",
       "description": "Sign in to use the application. You can close this guide and open it again at any time.",
       "close": "Close"
+    },
+    "emailAuth": {
+      "email": "Email",
+      "password": "Password",
+      "newPassword": "New password",
+      "toSignIn": "Back to sign in",
+      "toResend": "Send the confirmation again",
+      "toForgot": "Request a new reset link",
+      "toSignup": "Create an account",
+      "toForgotPassword": "Forgot your password?",
+      "signup": {
+        "title": "Create an account",
+        "description": "Choose a password of at least 8 characters. We email a link to confirm your address.",
+        "submit": "Create account",
+        "done": "Check your inbox: we sent a link to confirm your email."
+      },
+      "resend": {
+        "title": "Confirm your email again",
+        "description": "Enter your address and we email a new confirmation link if the account is waiting for one.",
+        "submit": "Send the link",
+        "done": "If that address is waiting for confirmation, a new link is on its way."
+      },
+      "forgot": {
+        "title": "Forgot your password",
+        "description": "Enter your address and we email a link to choose a new password.",
+        "submit": "Send the link",
+        "done": "If that address has an account, a reset link is on its way."
+      },
+      "reset": {
+        "title": "Choose a new password",
+        "description": "The link works once. Every device is signed out when the password changes.",
+        "submit": "Save password",
+        "done": "Your password is changed. Sign in with the new one."
+      },
+      "confirm": {
+        "title": "Confirm your email",
+        "description": "Press the button to confirm your email address.",
+        "submit": "Confirm email",
+        "done": "Your email is confirmed. You can sign in."
+      },
+      "errors": {
+        "invalid": "Enter a valid value in every field.",
+        "password": "The password needs at least 8 characters and at most 72 bytes.",
+        "link": "The link is invalid or has expired. Request a new one.",
+        "tooMany": "Too many attempts. Try again later.",
+        "unavailable": "This is unavailable. Try again shortly."
+      }
     }
   }
 }

package/templates/fe/skeleton-lite/apps/web/src/modules/i18n/messages/vi.json

@@ -5,7 +5,9 @@
       "brand": "{{project}}"
     },
     "home": {
-      "title": "Trang chủ"
+      "title": "Trang chủ",
+      "signup": "Tạo tài khoản",
+      "forgot": "Quên mật khẩu?"
     },
     "signIn": {
       "title": "Đăng nhập",
@@ -52,6 +54,53 @@
       "title": "Bắt đầu",
       "description": "Đăng nhập để sử dụng ứng dụng. Bạn có thể đóng hướng dẫn này và mở lại bất cứ lúc nào.",
       "close": "Đóng"
+    },
+    "emailAuth": {
+      "email": "Email",
+      "password": "Mật khẩu",
+      "newPassword": "Mật khẩu mới",
+      "toSignIn": "Quay lại đăng nhập",
+      "toResend": "Gửi lại thư xác nhận",
+      "toForgot": "Yêu cầu liên kết đặt lại mới",
+      "toSignup": "Tạo tài khoản",
+      "toForgotPassword": "Quên mật khẩu?",
+      "signup": {
+        "title": "Tạo tài khoản",
+        "description": "Chọn mật khẩu ít nhất 8 ký tự. Chúng tôi gửi email một liên kết để xác nhận địa chỉ của bạn.",
+        "submit": "Tạo tài khoản",
+        "done": "Hãy kiểm tra hộp thư: chúng tôi đã gửi liên kết xác nhận email."
+      },
+      "resend": {
+        "title": "Xác nhận email lại",
+        "description": "Nhập địa chỉ của bạn, chúng tôi gửi liên kết xác nhận mới nếu tài khoản đang chờ xác nhận.",
+        "submit": "Gửi liên kết",
+        "done": "Nếu địa chỉ đó đang chờ xác nhận, một liên kết mới đang được gửi."
+      },
+      "forgot": {
+        "title": "Quên mật khẩu",
+        "description": "Nhập địa chỉ của bạn, chúng tôi gửi email một liên kết để chọn mật khẩu mới.",
+        "submit": "Gửi liên kết",
+        "done": "Nếu địa chỉ đó có tài khoản, một liên kết đặt lại đang được gửi."
+      },
+      "reset": {
+        "title": "Chọn mật khẩu mới",
+        "description": "Liên kết chỉ dùng được một lần. Mọi thiết bị sẽ bị đăng xuất khi đổi mật khẩu.",
+        "submit": "Lưu mật khẩu",
+        "done": "Mật khẩu đã được đổi. Hãy đăng nhập bằng mật khẩu mới."
+      },
+      "confirm": {
+        "title": "Xác nhận email",
+        "description": "Nhấn nút để xác nhận địa chỉ email của bạn.",
+        "submit": "Xác nhận email",
+        "done": "Email đã được xác nhận. Bạn có thể đăng nhập."
+      },
+      "errors": {
+        "invalid": "Hãy nhập giá trị hợp lệ ở mọi ô.",
+        "password": "Mật khẩu cần ít nhất 8 ký tự và tối đa 72 byte.",
+        "link": "Liên kết không hợp lệ hoặc đã hết hạn. Hãy yêu cầu liên kết mới.",
+        "tooMany": "Quá nhiều lần thử. Hãy thử lại sau.",
+        "unavailable": "Chưa thể thực hiện. Hãy thử lại sau."
+      }
     }
   }
 }

package/templates/fe/skeleton-lite/apps/web/src/modules/i18n/request.ts

@@ -1,35 +1,12 @@
-import "server-only"
-import { hasLocale } from "next-intl"
-import type { AbstractIntlMessages } from "next-intl"
-import { getRequestConfig } from "next-intl/server"
-import { headers } from "next/headers"
-import { PRODUCT_TIME_ZONE, routing } from "./routing"
-
-/** The message tree a catalog module exports as its default: the module is read as `unknown` and checked, never trusted as `any`. */
-const isMessages = (value: unknown): value is AbstractIntlMessages => typeof value === "object" && value !== null
-
-const messagesOf = (loaded: unknown): AbstractIntlMessages => {
-    const messages = typeof loaded === "object" && loaded !== null && "default" in loaded ? loaded.default : undefined
-    if (!isMessages(messages)) throw new TypeError("A message catalog module must export its messages as default")
-    return messages
-}
-
-/** The header the next-intl middleware sets on the request with the locale it negotiated. */
-const LOCALE_HEADER = "x-next-intl-locale"
+import { createRequestConfig } from "@starci/next-i18n/request"
+import type { I18nRequestConfig } from "@starci/next-i18n/request"
+import { i18n } from "./routing"
 
 /**
- * The request config next-intl's plugin loads. The locale is the one the middleware negotiated: this module is reachable from the proxy
- * through the navigation, and `next/root-params` can only be imported inside the app directory.
+ * The request config next-intl's plugin loads: the app's own catalogs over the shared stack. The locale is the one the proxy
+ * negotiated (a route the proxy does not negotiate reads the cookie, then the default); `next/root-params` can only be imported
+ * inside the app directory, so no route reader is passed.
  */
-const requestConfig: ReturnType<typeof getRequestConfig> = getRequestConfig(async () => {
-    const requested = (await headers()).get(LOCALE_HEADER)
-    const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale
-    return {
-        locale,
-        timeZone: PRODUCT_TIME_ZONE,
-        messages: messagesOf(await import(`./messages/${locale}.json`)),
-        getMessageFallback: ({ namespace, key }) => `web:${namespace ?? ""}.${key}`,
-    }
-})
+const requestConfig: I18nRequestConfig = createRequestConfig(i18n, { app: "web", loadMessages: (locale) => import(`./messages/${locale}.json`) })
 
 export default requestConfig

package/templates/fe/skeleton-lite/apps/web/src/modules/i18n/routing.ts

@@ -1,18 +1,17 @@
+import { defineI18n } from "@starci/next-i18n"
+import type { I18n } from "@starci/next-i18n"
+
 const LOCALES = ["vi", "en"] as const
 
-/** The locale served at the unprefixed path. */
-export const DEFAULT_LOCALE = "vi" as const
+/** The description of the web app's languages: the locales and the `as-needed` prefix mode that `defineI18n` types. */
+export type WebI18n = I18n<typeof LOCALES, "as-needed">
 
-/** The fixed product time zone used by the server and hydrated client. */
-export const PRODUCT_TIME_ZONE = "Asia/Ho_Chi_Minh"
+/** The locale served at the unprefixed path. */
+export const DEFAULT_LOCALE: WebI18n["defaultLocale"] = "vi"
 
-/** The one locale-routing table of the web app. */
-export const routing: {
-    readonly locales: typeof LOCALES
-    readonly defaultLocale: typeof DEFAULT_LOCALE
-    readonly localePrefix: "as-needed"
-} = {
-    locales: LOCALES,
-    defaultLocale: DEFAULT_LOCALE,
-    localePrefix: "as-needed" as const,
-}
+/**
+ * The one description of the web app's languages, read by the proxy, the request config and the locale layout: vi default, a prefix
+ * only when the locale is not the default, and a fixed time zone so the server and the hydrated client format the same instant the
+ * same way. The stack that reads it is `@starci/next-i18n`'s (FE-I18N-1).
+ */
+export const i18n: WebI18n = defineI18n({ locales: LOCALES, defaultLocale: DEFAULT_LOCALE, timeZone: "Asia/Ho_Chi_Minh" })

package/templates/fe/skeleton-lite/apps/web/src/modules/routes/index.ts

@@ -1,4 +1,9 @@
 /** Every internal destination the web app links to, named once. */
 export const APP_ROUTES = {
     home: "/",
+    signup: "/auth/signup",
+    resend: "/auth/resend",
+    forgot: "/auth/forgot",
+    confirm: "/auth/confirm",
+    reset: "/auth/reset",
 } as const

package/templates/fe/skeleton-lite/apps/web/src/proxy.ts

@@ -1,25 +1,12 @@
-import createMiddleware from "next-intl/middleware"
-import { NextResponse } from "next/server"
-import type { NextRequest } from "next/server"
-import { routing } from "@/modules/i18n"
-
-/** The paths outside locale routing: the liveness route and the framework's own assets. */
-const UNNEGOTIATED_ROOTS: ReadonlySet<string> = new Set(["health", "_next", "_vercel"])
-const negotiate = createMiddleware(routing)
-
-const firstSegment = (pathname: string): string => pathname.split("/")[1] ?? ""
-
-const isUnnegotiated = (pathname: string): boolean => {
-    const last = pathname.split("/").at(-1) ?? ""
-    return UNNEGOTIATED_ROOTS.has(firstSegment(pathname)) || (last.includes(".") && !last.endsWith("."))
-}
+import { createProxy } from "@starci/next-i18n/proxy"
+import type { LocaleProxy } from "@starci/next-i18n/proxy"
+import { i18n } from "@/modules/i18n"
 
 /**
  * Locale routing only. The session lives in the browser (modules/auth) and the back end verifies the access token of
  * every call, so the proxy neither reads nor refreshes it.
  */
-export const proxy = (request: NextRequest): NextResponse =>
-    isUnnegotiated(request.nextUrl.pathname) ? NextResponse.next() : negotiate(request)
+export const proxy: LocaleProxy = createProxy(i18n)
 
 /** Routes that pass through locale negotiation. */
 export const config = {