create-nexst-monorepo 0.1.0

package/template/apps/web/src/features/auth/lib/validator.ts

@@ -0,0 +1,49 @@
+import { z } from "zod";
+
+export type EmailProps = z.infer<ReturnType<typeof createEmailSchema>>;
+
+export type NewPasswordProps = z.infer<ReturnType<typeof createNewPasswordSchema>>;
+export type SignInProps = z.infer<ReturnType<typeof createSignInSchema>>;
+export type SignUpProps = z.infer<ReturnType<typeof createSignUpSchema>>;
+type Translate = (key: string) => string;
+
+const MIN_PASSWORD_LENGTH = 8;
+
+export function createEmailSchema(t: Translate) {
+  return z.object({
+    email: z.email(t("Auth.Errors.emailInvalid")),
+  });
+}
+
+export function createNewPasswordSchema(t: Translate) {
+  return z
+    .object({
+      confirmPassword: z.string().min(1, t("Auth.Errors.confirmPasswordRequired")),
+      password: z.string().min(MIN_PASSWORD_LENGTH, t("Auth.Errors.passwordTooShort")),
+    })
+    .refine((data) => data.password === data.confirmPassword, {
+      message: t("Auth.Errors.passwordsMustMatch"),
+      path: ["confirmPassword"],
+    });
+}
+
+export function createSignInSchema(t: Translate) {
+  return z.object({
+    email: z.email(t("Auth.Errors.emailInvalid")),
+    password: z.string().min(1, t("Auth.Errors.passwordRequired")),
+  });
+}
+
+export function createSignUpSchema(t: Translate) {
+  return z
+    .object({
+      confirmPassword: z.string().min(1, t("Auth.Errors.confirmPasswordRequired")),
+      email: z.email(t("Auth.Errors.emailInvalid")),
+      name: z.string().trim().min(1, t("Auth.Errors.nameRequired")).max(100),
+      password: z.string().min(MIN_PASSWORD_LENGTH, t("Auth.Errors.passwordTooShort")),
+    })
+    .refine((data) => data.password === data.confirmPassword, {
+      message: t("Auth.Errors.passwordsMustMatch"),
+      path: ["confirmPassword"],
+    });
+}

package/template/apps/web/src/features/auth/passkey-settings.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { KeyRound, Trash2 } from "lucide-react";
+import { useFormatter, useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { Button } from "@/components/button/button";
+import { authClient } from "@/lib/auth-client";
+
+const PASSKEYS_QUERY_KEY = ["passkeys"];
+
+/** Lists the signed-in user's passkeys and lets them add or delete one. */
+export function PasskeySettings() {
+  const t = useTranslations("Auth.Passkey");
+  const format = useFormatter();
+  const queryClient = useQueryClient();
+
+  const { data: passkeys = [], isLoading } = useQuery({
+    queryFn: async () => {
+      const { data, error } = await authClient.passkey.listUserPasskeys();
+      if (error) throw error;
+      return data ?? [];
+    },
+    queryKey: PASSKEYS_QUERY_KEY,
+  });
+
+  const refresh = () => queryClient.invalidateQueries({ queryKey: PASSKEYS_QUERY_KEY });
+
+  const { isPending: isAdding, mutate: addPasskey } = useMutation({
+    mutationFn: async () => {
+      const { error } = await authClient.passkey.addPasskey({ name: t("defaultName") });
+      if (error) throw error;
+    },
+    onError: () => toast.error(t("addError")),
+    onSuccess: async () => {
+      await refresh();
+      toast.success(t("added"));
+    },
+  });
+
+  const { isPending: isDeleting, mutate: deletePasskey } = useMutation({
+    mutationFn: async (id: string) => {
+      const { error } = await authClient.passkey.deletePasskey({ id });
+      if (error) throw error;
+    },
+    onError: () => toast.error(t("deleteError")),
+    onSuccess: async () => {
+      await refresh();
+      toast.success(t("deleted"));
+    },
+  });
+
+  return (
+    <section className="space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <h2 className="text-lg font-semibold">{t("title")}</h2>
+          <p className="text-muted-foreground mt-1 text-sm">{t("description")}</p>
+        </div>
+        <Button className="shrink-0" isLoading={isAdding} onClick={() => addPasskey()} size="sm">
+          {isAdding ? null : <KeyRound aria-hidden size={16} />}
+          {t("add")}
+        </Button>
+      </div>
+
+      {isLoading ? (
+        <p className="text-muted-foreground text-sm">{t("loading")}</p>
+      ) : passkeys.length === 0 ? (
+        <p className="text-muted-foreground bg-card border-border rounded-xl border p-4 text-sm">
+          {t("empty")}
+        </p>
+      ) : (
+        <ul className="space-y-2">
+          {passkeys.map((passkey) => {
+            const name = passkey.name || t("fallbackName");
+            return (
+              <li
+                className="bg-card border-border flex items-center gap-3 rounded-xl border p-4"
+                key={passkey.id}
+              >
+                <KeyRound aria-hidden className="text-primary shrink-0" size={19} />
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium">{name}</p>
+                  <p className="text-muted-foreground mt-0.5 text-xs">
+                    {t("createdAt", {
+                      date: format.dateTime(new Date(passkey.createdAt), { dateStyle: "medium" }),
+                    })}
+                  </p>
+                </div>
+                <Button
+                  aria-label={t("deleteLabel", { name })}
+                  disabled={isDeleting}
+                  onClick={() => deletePasskey(passkey.id)}
+                  size="icon"
+                  variant="ghost"
+                >
+                  <Trash2 aria-hidden size={17} />
+                </Button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </section>
+  );
+}

package/template/apps/web/src/features/auth/recovery-form.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { Alert } from "@/components/alert/alert";
+import { Button } from "@/components/button/button";
+import { Input } from "@/components/input/input";
+import { env } from "@/env";
+import { authClient, type AuthError } from "@/lib/auth-client";
+import { authFallbackMessage } from "./lib/auth-error";
+import { createEmailSchema, type EmailProps } from "./lib/validator";
+
+/** Requests a password-reset mail; the link lands on /reset-password?token=…. */
+export function RecoveryForm() {
+  const t = useTranslations("Auth.Recovery");
+  const tErrors = useTranslations("Auth.Errors");
+  const tAll = useTranslations();
+  const schema = useMemo(() => createEmailSchema(tAll), [tAll]);
+
+  const { formState, handleSubmit, register } = useForm<EmailProps>({
+    defaultValues: { email: "" },
+    resolver: zodResolver(schema),
+  });
+
+  const { error, isPending, isSuccess, mutate } = useMutation<void, AuthError, EmailProps>({
+    mutationFn: async ({ email }) => {
+      const { error } = await authClient.requestPasswordReset({
+        email,
+        redirectTo: `${env.NEXT_PUBLIC_HOST_URL}/reset-password`,
+      });
+      if (error) throw error;
+    },
+  });
+
+  if (isSuccess) {
+    return <Alert message={t("emailSent")} variant="success" />;
+  }
+
+  return (
+    <div className="w-full">
+      {error ? <Alert message={authFallbackMessage(error, tErrors)} variant="error" /> : null}
+      <form className="space-y-3.5" noValidate onSubmit={handleSubmit((data) => mutate(data))}>
+        <Input
+          autoComplete="email"
+          disabled={isPending}
+          error={formState.errors.email?.message}
+          label={t("emailLabel")}
+          placeholder={t("emailPlaceholder")}
+          type="email"
+          {...register("email")}
+        />
+        <Button className="w-full" isLoading={isPending} type="submit">
+          {t("submitButton")}
+        </Button>
+      </form>
+    </div>
+  );
+}

package/template/apps/web/src/features/auth/resend-verification-button.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { Button } from "@/components/button/button";
+import { authClient, type AuthError } from "@/lib/auth-client";
+import { authFallbackMessage } from "./lib/auth-error";
+
+export function ResendVerificationButton({ email }: Readonly<{ email: string }>) {
+  const t = useTranslations("Auth.Verify");
+  const tErrors = useTranslations("Auth.Errors");
+
+  const { isPending, isSuccess, mutate } = useMutation<void, AuthError>({
+    mutationFn: async () => {
+      const { error } = await authClient.sendVerificationEmail({
+        callbackURL: "/dashboard",
+        email,
+      });
+      if (error) throw error;
+    },
+    onError: (error) => toast.error(authFallbackMessage(error, tErrors)),
+  });
+
+  return (
+    <Button
+      disabled={isSuccess}
+      isLoading={isPending}
+      onClick={() => mutate()}
+      size="sm"
+      variant="secondary"
+    >
+      {isSuccess ? t("resent") : t("resendButton")}
+    </Button>
+  );
+}

package/template/apps/web/src/features/auth/reset-password-form.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { Alert } from "@/components/alert/alert";
+import { Button } from "@/components/button/button";
+import { Input } from "@/components/input/input";
+import { useRouter } from "@/i18n/navigation";
+import { authClient, type AuthError } from "@/lib/auth-client";
+import { authFallbackMessage } from "./lib/auth-error";
+import { createNewPasswordSchema, type NewPasswordProps } from "./lib/validator";
+
+export function ResetPasswordForm({ token }: Readonly<{ token: string }>) {
+  const router = useRouter();
+  const t = useTranslations("Auth.ResetPassword");
+  const tErrors = useTranslations("Auth.Errors");
+  const tAll = useTranslations();
+  const schema = useMemo(() => createNewPasswordSchema(tAll), [tAll]);
+
+  const { formState, handleSubmit, register } = useForm<NewPasswordProps>({
+    defaultValues: { confirmPassword: "", password: "" },
+    resolver: zodResolver(schema),
+  });
+
+  const { error, isPending, mutate } = useMutation<void, AuthError, NewPasswordProps>({
+    mutationFn: async ({ password }) => {
+      const { error } = await authClient.resetPassword({ newPassword: password, token });
+      if (error) throw error;
+    },
+    onSuccess: () => router.push("/sign-in"),
+  });
+
+  return (
+    <div className="w-full">
+      {error ? <Alert message={authFallbackMessage(error, tErrors)} variant="error" /> : null}
+      <form className="space-y-3.5" noValidate onSubmit={handleSubmit((data) => mutate(data))}>
+        <Input
+          autoComplete="new-password"
+          disabled={isPending}
+          error={formState.errors.password?.message}
+          label={t("passwordLabel")}
+          type="password"
+          {...register("password")}
+        />
+        <Input
+          autoComplete="new-password"
+          disabled={isPending}
+          error={formState.errors.confirmPassword?.message}
+          label={t("confirmPasswordLabel")}
+          type="password"
+          {...register("confirmPassword")}
+        />
+        <Button className="w-full" isLoading={isPending} type="submit">
+          {t("submitButton")}
+        </Button>
+      </form>
+    </div>
+  );
+}

package/template/apps/web/src/features/auth/sign-in-form.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { withContainer } from "~sb/decorators";
+import { SignInForm } from "./sign-in-form";
+
+const meta = {
+  component: SignInForm,
+  decorators: [withContainer()],
+} satisfies Meta<typeof SignInForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {};
+
+export const ValidationErrors: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Sign in" }));
+    await expect(await canvas.findByText("Enter a valid email address.")).toBeInTheDocument();
+  },
+};

package/template/apps/web/src/features/auth/sign-in-form.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { KeyRound } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { Alert } from "@/components/alert/alert";
+import { Button } from "@/components/button/button";
+import { Input } from "@/components/input/input";
+import { Link } from "@/i18n/navigation";
+import { authClient, type AuthError } from "@/lib/auth-client";
+import { AuthDivider } from "./auth-divider";
+import { GoogleAuthButton } from "./google-auth-button";
+import { authFallbackMessage } from "./lib/auth-error";
+import { getReturnTo } from "./lib/return-to";
+import { createSignInSchema, type SignInProps } from "./lib/validator";
+
+export function SignInForm() {
+  const t = useTranslations("Auth.SignIn");
+  const tErrors = useTranslations("Auth.Errors");
+  const tPasskey = useTranslations("Auth.Passkey");
+  const tAll = useTranslations();
+  const schema = useMemo(() => createSignInSchema(tAll), [tAll]);
+  const [googleError, setGoogleError] = useState<AuthError | null>(null);
+
+  const { formState, handleSubmit, register, setValue } = useForm<SignInProps>({
+    defaultValues: { email: "", password: "" },
+    resolver: zodResolver(schema),
+  });
+
+  const { error, isPending, mutate } = useMutation<void, AuthError, SignInProps>({
+    mutationFn: async ({ email, password }) => {
+      const { error } = await authClient.signIn.email({ email, password });
+      if (error) throw error;
+    },
+    onError: () => setValue("password", ""),
+    onSuccess: () => window.location.assign(getReturnTo() ?? "/dashboard"),
+  });
+
+  const {
+    error: passkeyError,
+    isPending: isPasskeyPending,
+    mutate: signInWithPasskey,
+  } = useMutation<void, AuthError>({
+    mutationFn: async () => {
+      const { error } = await authClient.signIn.passkey();
+      if (error) throw error;
+    },
+    onSuccess: () => window.location.assign(getReturnTo() ?? "/dashboard"),
+  });
+
+  const isAuthenticating = isPending || isPasskeyPending;
+
+  const otherError = passkeyError ?? googleError;
+  const errorMessage = error
+    ? error.code === "INVALID_EMAIL_OR_PASSWORD"
+      ? tErrors("invalidCredentials")
+      : authFallbackMessage(error, tErrors)
+    : otherError
+      ? authFallbackMessage(otherError, tErrors)
+      : null;
+
+  return (
+    <div className="w-full">
+      {errorMessage ? <Alert message={errorMessage} variant="error" /> : null}
+      <form
+        className="space-y-3.5"
+        data-testid="sign-in-form"
+        noValidate
+        onSubmit={handleSubmit((data) => mutate(data))}
+      >
+        <Input
+          autoComplete="email"
+          disabled={isAuthenticating}
+          error={formState.errors.email?.message}
+          label={t("emailLabel")}
+          placeholder={t("emailPlaceholder")}
+          type="email"
+          {...register("email")}
+        />
+        <Input
+          autoComplete="current-password"
+          disabled={isAuthenticating}
+          error={formState.errors.password?.message}
+          label={t("passwordLabel")}
+          type="password"
+          {...register("password")}
+        />
+        <div className="flex justify-end">
+          <Link className="text-link text-sm font-medium hover:underline" href="/recovery">
+            {t("forgotPassword")}
+          </Link>
+        </div>
+        <Button className="w-full" disabled={isPasskeyPending} isLoading={isPending} type="submit">
+          {t("submitButton")}
+        </Button>
+      </form>
+      <AuthDivider />
+      <div className="space-y-3">
+        <Button
+          className="w-full"
+          disabled={isPending}
+          isLoading={isPasskeyPending}
+          onClick={() => signInWithPasskey()}
+          variant="outline"
+        >
+          {isPasskeyPending ? null : <KeyRound aria-hidden size={18} />}
+          {isPasskeyPending ? tPasskey("signingIn") : tPasskey("signIn")}
+        </Button>
+        <GoogleAuthButton disabled={isAuthenticating} onError={setGoogleError} />
+      </div>
+    </div>
+  );
+}

package/template/apps/web/src/features/auth/sign-out-button.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { Button } from "@/components/button/button";
+import { authClient } from "@/lib/auth-client";
+
+export function SignOutButton() {
+  const t = useTranslations("Header");
+  const [isPending, setIsPending] = useState(false);
+
+  return (
+    <Button
+      isLoading={isPending}
+      onClick={async () => {
+        setIsPending(true);
+        await authClient.signOut();
+        window.location.assign("/");
+      }}
+      size="sm"
+      variant="outline"
+    >
+      {t("signOut")}
+    </Button>
+  );
+}

package/template/apps/web/src/features/auth/sign-up-form.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
+import { useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { Alert } from "@/components/alert/alert";
+import { Button } from "@/components/button/button";
+import { Input } from "@/components/input/input";
+import { useRouter } from "@/i18n/navigation";
+import { authClient, type AuthError, isGoogleEnabled } from "@/lib/auth-client";
+import { AuthDivider } from "./auth-divider";
+import { GoogleAuthButton } from "./google-auth-button";
+import { authFallbackMessage } from "./lib/auth-error";
+import { createSignUpSchema, type SignUpProps } from "./lib/validator";
+
+export function SignUpForm() {
+  const router = useRouter();
+  const t = useTranslations("Auth.SignUp");
+  const tErrors = useTranslations("Auth.Errors");
+  const tAll = useTranslations();
+  const schema = useMemo(() => createSignUpSchema(tAll), [tAll]);
+  const [googleError, setGoogleError] = useState<AuthError | null>(null);
+
+  const { formState, handleSubmit, register, setValue } = useForm<SignUpProps>({
+    defaultValues: { confirmPassword: "", email: "", name: "", password: "" },
+    resolver: zodResolver(schema),
+  });
+
+  const { error, isPending, mutate } = useMutation<void, AuthError, SignUpProps>({
+    mutationFn: async ({ email, name, password }) => {
+      const { error } = await authClient.signUp.email({ email, name, password });
+      if (error) throw error;
+    },
+    onError: () => {
+      setValue("password", "");
+      setValue("confirmPassword", "");
+    },
+    onSuccess: () => {
+      router.push("/verify");
+      router.refresh();
+    },
+  });
+
+  const errorMessage = error
+    ? error.code === "USER_ALREADY_EXISTS" || error.code === "USER_ALREADY_EXISTS_USE_ANOTHER_EMAIL"
+      ? tErrors("emailAlreadyExists")
+      : authFallbackMessage(error, tErrors)
+    : googleError
+      ? authFallbackMessage(googleError, tErrors)
+      : null;
+
+  return (
+    <div className="w-full">
+      {errorMessage ? <Alert message={errorMessage} variant="error" /> : null}
+      <form
+        className="space-y-3.5"
+        data-testid="sign-up-form"
+        noValidate
+        onSubmit={handleSubmit((data) => mutate(data))}
+      >
+        <Input
+          autoComplete="name"
+          disabled={isPending}
+          error={formState.errors.name?.message}
+          label={t("nameLabel")}
+          {...register("name")}
+        />
+        <Input
+          autoComplete="email"
+          disabled={isPending}
+          error={formState.errors.email?.message}
+          label={t("emailLabel")}
+          placeholder={t("emailPlaceholder")}
+          type="email"
+          {...register("email")}
+        />
+        <Input
+          autoComplete="new-password"
+          disabled={isPending}
+          error={formState.errors.password?.message}
+          label={t("passwordLabel")}
+          type="password"
+          {...register("password")}
+        />
+        <Input
+          autoComplete="new-password"
+          disabled={isPending}
+          error={formState.errors.confirmPassword?.message}
+          label={t("confirmPasswordLabel")}
+          type="password"
+          {...register("confirmPassword")}
+        />
+        <Button className="w-full" isLoading={isPending} type="submit">
+          {t("submitButton")}
+        </Button>
+      </form>
+      {isGoogleEnabled ? (
+        <>
+          <AuthDivider />
+          <GoogleAuthButton disabled={isPending} onError={setGoogleError} />
+        </>
+      ) : null}
+    </div>
+  );
+}

package/template/apps/web/src/features/shared/provider.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ThemeProvider } from "next-themes";
+import type { PropsWithChildren } from "react";
+import { getQueryClient } from "@/lib/query-client";
+
+export function Provider({ children }: Readonly<PropsWithChildren>) {
+  const queryClient = getQueryClient();
+
+  return (
+    <ThemeProvider attribute="class" disableTransitionOnChange>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </ThemeProvider>
+  );
+}

package/template/apps/web/src/features/shared/site-header.tsx

@@ -0,0 +1,48 @@
+import { getTranslations } from "next-intl/server";
+import { buttonVariants } from "@/components/button/button-variants"; // @if auth
+import { siteConfig } from "@/config/site";
+import { SignOutButton } from "@/features/auth/sign-out-button"; // @if auth
+import { Link } from "@/i18n/navigation";
+import { getSession } from "@/lib/auth"; // @if auth
+import { ThemeToggle } from "./theme-toggle";
+
+/** The header bar without session-dependent content, also used as the Suspense fallback. */
+export function HeaderFrame({ children }: Readonly<{ children?: React.ReactNode }>) {
+  return (
+    <header className="bg-background/90 fixed inset-x-0 top-0 z-20 h-16 border-b backdrop-blur-md">
+      <div className="mx-auto flex h-full max-w-5xl items-center justify-between px-4">
+        {children}
+      </div>
+    </header>
+  );
+}
+
+export async function SiteHeader() {
+  const t = await getTranslations("Header");
+  const session = await getSession(); // @if auth
+
+  return (
+    <HeaderFrame>
+      <Link className="text-base font-semibold tracking-tight" href="/">
+        {siteConfig.name}
+      </Link>
+      <nav aria-label={t("navigation")} className="flex items-center gap-2">
+        <ThemeToggle />
+        {/* @if auth */}
+        {session ? (
+          <>
+            <Link className={buttonVariants({ size: "sm", variant: "ghost" })} href="/dashboard">
+              {t("dashboard")}
+            </Link>
+            <SignOutButton />
+          </>
+        ) : (
+          <Link className={buttonVariants({ size: "sm", variant: "outline" })} href="/sign-in">
+            {t("signIn")}
+          </Link>
+        )}
+        {/* @endif */}
+      </nav>
+    </HeaderFrame>
+  );
+}

package/template/apps/web/src/features/shared/theme-toggle.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/button/button";
+
+/** Flips between light and dark; icons swap via the `dark` class, so no hydration mismatch. */
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const t = useTranslations("Header");
+
+  return (
+    <Button
+      aria-label={t("toggleTheme")}
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+      size="icon"
+      variant="ghost"
+    >
+      <Sun aria-hidden className="size-4.5 dark:hidden" />
+      <Moon aria-hidden className="hidden size-4.5 dark:block" />
+    </Button>
+  );
+}