fix(plugin-auth): reduce password rate limit aggressiveness and reset limits on password change

.changeset/less-aggressive-password-rate-limits.md

@@ -0,0 +1,5 @@
+---
+'@baseplate-dev/plugin-auth': patch
+---
+
+Reduce password rate limit aggressiveness (15 attempts/hour for IP, 10 consecutive fails/hour), reset login rate limits after successful password reset, and improve error messages to suggest password reset when rate limited

examples/blog-with-auth/apps/admin/baseplate/generated/src/components/layouts/admin-layout.tsx

@@ -1,10 +1,11 @@
+import type React from 'react';
 import type { ReactElement } from 'react';
 
 import { Outlet } from '@tanstack/react-router';
 
 import { AsyncBoundary } from '../ui/async-boundary';
 import { Separator } from '../ui/separator';
-import { SidebarProvider, SidebarTrigger } from '../ui/sidebar';
+import { SidebarInset, SidebarProvider, SidebarTrigger } from '../ui/sidebar';
 import { AppBreadcrumbs } from './app-breadcrumbs';
 import { AppSidebar } from './app-sidebar';
 
@@ -14,23 +15,37 @@ interface Props {
 
 export function AdminLayout({ className }: Props): ReactElement {
   return (
-    <SidebarProvider className={className}>
+    <SidebarProvider
+      className={className}
+      style={
+        {
+          '--sidebar-width': 'calc(var(--spacing) * 72)',
+          '--header-height': 'calc(var(--spacing) * 12)',
+        } as React.CSSProperties
+      }
+    >
       <AppSidebar />
-      <div className="flex h-full w-full flex-col">
-        <header className="flex h-16 items-center gap-2 px-6">
-          <SidebarTrigger />
-          <Separator
-            orientation="vertical"
-            className="mr-2 data-[orientation=vertical]:h-4"
-          />
-          <AppBreadcrumbs />
+      <SidebarInset>
+        <header className="flex h-(--header-height) shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+          <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+            <SidebarTrigger className="-ml-1" />
+            <Separator
+              orientation="vertical"
+              className="mx-2 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-center"
+            />
+            <AppBreadcrumbs />
+          </div>
         </header>
-        <main className="flex-1 p-4">
-          <AsyncBoundary>
-            <Outlet />
-          </AsyncBoundary>
-        </main>
-      </div>
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-2">
+            <main className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+              <AsyncBoundary>
+                <Outlet />
+              </AsyncBoundary>
+            </main>
+          </div>
+        </div>
+      </SidebarInset>
     </SidebarProvider>
   );
 }

examples/blog-with-auth/apps/admin/baseplate/generated/src/routes/admin/index.tsx

@@ -29,7 +29,7 @@ function HomePage(): ReactElement {
   }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-4 p-4">
       <p>Welcome {data.viewer?.email ?? 'an anonymous user'}!</p>
     </div>
   );

examples/blog-with-auth/apps/admin/baseplate/generated/src/routes/auth_/forgot-password.tsx

@@ -31,7 +31,7 @@ export const Route = createFileRoute('/auth_/forgot-password')({
 
 const formSchema = z.object({
   email: z
-    .email()
+    .email('Please enter a valid email address')
     .max(PASSWORD_MAX_LENGTH)
     .transform((value) => value.toLowerCase()),
 });

examples/blog-with-auth/apps/admin/baseplate/generated/src/routes/auth_/login.tsx

@@ -43,8 +43,16 @@ export const Route = createFileRoute('/auth_/login')({
 });
 
 const formSchema = z.object({
-  email: z.email().transform((value) => value.toLowerCase()),
-  password: z.string().min(PASSWORD_MIN_LENGTH).max(PASSWORD_MAX_LENGTH),
+  email: z
+    .email('Please enter a valid email address')
+    .transform((value) => value.toLowerCase()),
+  password: z
+    .string()
+    .min(
+      PASSWORD_MIN_LENGTH,
+      `Password must be at least ${PASSWORD_MIN_LENGTH} characters`,
+    )
+    .max(PASSWORD_MAX_LENGTH),
 });
 
 type FormData = z.infer<typeof formSchema>;
@@ -96,6 +104,8 @@ function LoginPage(): React.JSX.Element {
       .catch((err: unknown) => {
         const errorCode = getApolloErrorCode(err, [
           'invalid-credentials',
+          'login-ip-rate-limited',
+          'login-consecutive-fails-blocked',
         ] as const);
         switch (errorCode) {
           case 'invalid-credentials': {
@@ -107,6 +117,15 @@ function LoginPage(): React.JSX.Element {
             );
             break;
           }
+          case 'login-ip-rate-limited':
+          case 'login-consecutive-fails-blocked': {
+            resetField('password');
+            setFormError('password', {
+              message:
+                'Too many failed login attempts. Please reset your password or try again later.',
+            });
+            break;
+          }
           default: {
             toast.error(
               logAndFormatError(err, 'Sorry, we could not log you in.'),

examples/blog-with-auth/apps/admin/baseplate/generated/src/routes/auth_/register.tsx

@@ -43,9 +43,17 @@ export const Route = createFileRoute('/auth_/register')({
 });
 
 const formSchema = /* TPL_REGISTER_SCHEMA:START */ z.object({
-  email: z.email().transform((value) => value.toLowerCase()),
-  name: z.string().min(1).max(100),
-  password: z.string().min(PASSWORD_MIN_LENGTH).max(PASSWORD_MAX_LENGTH),
+  email: z
+    .email('Please enter a valid email address')
+    .transform((value) => value.toLowerCase()),
+  name: z.string().min(1, 'Please enter your name').max(100),
+  password: z
+    .string()
+    .min(
+      PASSWORD_MIN_LENGTH,
+      `Password must be at least ${PASSWORD_MIN_LENGTH} characters`,
+    )
+    .max(PASSWORD_MAX_LENGTH),
 }); /* TPL_REGISTER_SCHEMA:END */
 
 type FormData = z.infer<typeof formSchema>;

examples/blog-with-auth/apps/admin/baseplate/generated/src/routes/auth_/reset-password.tsx

@@ -44,10 +44,19 @@ export const Route = createFileRoute('/auth_/reset-password')({
 
 const formSchema = z
   .object({
-    newPassword: z.string().min(PASSWORD_MIN_LENGTH).max(PASSWORD_MAX_LENGTH),
+    newPassword: z
+      .string()
+      .min(
+        PASSWORD_MIN_LENGTH,
+        `Password must be at least ${PASSWORD_MIN_LENGTH} characters`,
+      )
+      .max(PASSWORD_MAX_LENGTH),
     confirmPassword: z
       .string()
-      .min(PASSWORD_MIN_LENGTH)
+      .min(
+        PASSWORD_MIN_LENGTH,
+        `Password must be at least ${PASSWORD_MIN_LENGTH} characters`,
+      )
       .max(PASSWORD_MAX_LENGTH),
   })
   .refine((data) => data.newPassword === data.confirmPassword, {

examples/blog-with-auth/apps/admin/src/components/layouts/admin-layout.tsx

@@ -1,10 +1,11 @@
+import type React from 'react';
 import type { ReactElement } from 'react';
 
 import { Outlet } from '@tanstack/react-router';
 
 import { AsyncBoundary } from '../ui/async-boundary';
 import { Separator } from '../ui/separator';
-import { SidebarProvider, SidebarTrigger } from '../ui/sidebar';
+import { SidebarInset, SidebarProvider, SidebarTrigger } from '../ui/sidebar';
 import { AppBreadcrumbs } from './app-breadcrumbs';
 import { AppSidebar } from './app-sidebar';
 
@@ -14,23 +15,37 @@ interface Props {
 
 export function AdminLayout({ className }: Props): ReactElement {
   return (
-    <SidebarProvider className={className}>
+    <SidebarProvider
+      className={className}
+      style={
+        {
+          '--sidebar-width': 'calc(var(--spacing) * 72)',
+          '--header-height': 'calc(var(--spacing) * 12)',
+        } as React.CSSProperties
+      }
+    >
       <AppSidebar />
-      <div className="flex h-full w-full flex-col">
-        <header className="flex h-16 items-center gap-2 px-6">
-          <SidebarTrigger />
-          <Separator
-            orientation="vertical"
-            className="mr-2 data-[orientation=vertical]:h-4"
-          />
-          <AppBreadcrumbs />
+      <SidebarInset>
+        <header className="flex h-(--header-height) shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+          <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+            <SidebarTrigger className="-ml-1" />
+            <Separator
+              orientation="vertical"
+              className="mx-2 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-center"
+            />
+            <AppBreadcrumbs />
+          </div>
         </header>
-        <main className="flex-1 p-4">
-          <AsyncBoundary>
-            <Outlet />
-          </AsyncBoundary>
-        </main>
-      </div>
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-2">
+            <main className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+              <AsyncBoundary>
+                <Outlet />
+              </AsyncBoundary>
+            </main>
+          </div>
+        </div>
+      </SidebarInset>
     </SidebarProvider>
   );
 }

examples/blog-with-auth/apps/admin/src/routes/admin/index.tsx

@@ -29,7 +29,7 @@ function HomePage(): ReactElement {
   }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-4 p-4">
       <p>Welcome {data.viewer?.email ?? 'an anonymous user'}!</p>
     </div>
   );

examples/blog-with-auth/apps/admin/src/routes/auth_/forgot-password.tsx

@@ -31,7 +31,7 @@ export const Route = createFileRoute('/auth_/forgot-password')({
 
 const formSchema = z.object({
   email: z
-    .email()
+    .email('Please enter a valid email address')
     .max(PASSWORD_MAX_LENGTH)
     .transform((value) => value.toLowerCase()),
 });

examples/blog-with-auth/apps/admin/src/routes/auth_/login.tsx

@@ -43,8 +43,16 @@ export const Route = createFileRoute('/auth_/login')({
 });
 
 const formSchema = z.object({
-  email: z.email().transform((value) => value.toLowerCase()),
-  password: z.string().min(PASSWORD_MIN_LENGTH).max(PASSWORD_MAX_LENGTH),
+  email: z
+    .email('Please enter a valid email address')
+    .transform((value) => value.toLowerCase()),
+  password: z
+    .string()
+    .min(
+      PASSWORD_MIN_LENGTH,
+      `Password must be at least ${PASSWORD_MIN_LENGTH} characters`,
+    )
+    .max(PASSWORD_MAX_LENGTH),
 });
 
 type FormData = z.infer<typeof formSchema>;
@@ -96,6 +104,8 @@ function LoginPage(): React.JSX.Element {
       .catch((err: unknown) => {
         const errorCode = getApolloErrorCode(err, [
           'invalid-credentials',
+          'login-ip-rate-limited',
+          'login-consecutive-fails-blocked',
         ] as const);
         switch (errorCode) {
           case 'invalid-credentials': {
@@ -107,6 +117,15 @@ function LoginPage(): React.JSX.Element {
             );
             break;
           }
+          case 'login-ip-rate-limited':
+          case 'login-consecutive-fails-blocked': {
+            resetField('password');
+            setFormError('password', {
+              message:
+                'Too many failed login attempts. Please reset your password or try again later.',
+            });
+            break;
+          }
           default: {
             toast.error(
               logAndFormatError(err, 'Sorry, we could not log you in.'),

examples/blog-with-auth/apps/admin/src/routes/auth_/register.tsx

@@ -43,9 +43,17 @@ export const Route = createFileRoute('/auth_/register')({
 });
 
 const formSchema = /* TPL_REGISTER_SCHEMA:START */ z.object({
-  email: z.email().transform((value) => value.toLowerCase()),
-  name: z.string().min(1).max(100),
-  password: z.string().min(PASSWORD_MIN_LENGTH).max(PASSWORD_MAX_LENGTH),
+  email: z
+    .email('Please enter a valid email address')
+    .transform((value) => value.toLowerCase()),
+  name: z.string().min(1, 'Please enter your name').max(100),
+  password: z
+    .string()
+    .min(
+      PASSWORD_MIN_LENGTH,
+      `Password must be at least ${PASSWORD_MIN_LENGTH} characters`,
+    )
+    .max(PASSWORD_MAX_LENGTH),
 }); /* TPL_REGISTER_SCHEMA:END */
 
 type FormData = z.infer<typeof formSchema>;

examples/blog-with-auth/apps/admin/src/routes/auth_/reset-password.tsx

@@ -44,10 +44,19 @@ export const Route = createFileRoute('/auth_/reset-password')({
 
 const formSchema = z
   .object({
-    newPassword: z.string().min(PASSWORD_MIN_LENGTH).max(PASSWORD_MAX_LENGTH),
+    newPassword: z
+      .string()
+      .min(
+        PASSWORD_MIN_LENGTH,
+        `Password must be at least ${PASSWORD_MIN_LENGTH} characters`,
+      )
+      .max(PASSWORD_MAX_LENGTH),
     confirmPassword: z
       .string()
-      .min(PASSWORD_MIN_LENGTH)
+      .min(
+        PASSWORD_MIN_LENGTH,
+        `Password must be at least ${PASSWORD_MIN_LENGTH} characters`,
+      )
       .max(PASSWORD_MAX_LENGTH),
   })
   .refine((data) => data.newPassword === data.confirmPassword, {

examples/blog-with-auth/apps/backend/baseplate/generated/src/modules/accounts/auth/password/schema/password-reset.mutations.ts

@@ -44,10 +44,11 @@ builder.mutationField('resetPasswordWithToken', (t) =>
       token: t.input.field({ required: true, type: 'String' }),
       newPassword: t.input.field({ required: true, type: 'String' }),
     },
-    resolve: async (_root, { input }) =>
+    resolve: async (_root, { input }, context) =>
       completePasswordReset({
         token: input.token,
         newPassword: input.newPassword,
+        context,
       }),
   }),
 );

examples/blog-with-auth/apps/backend/baseplate/generated/src/modules/accounts/auth/password/services/password-reset.service.ts

@@ -23,6 +23,7 @@ import {
   PASSWORD_RESET_TOKEN_EXPIRY_SEC,
 } from '../constants/password.constants.js';
 import { createPasswordHash } from './password-hasher.service.js';
+import { resetLoginRateLimits } from './user-password.service.js';
 
 const PROVIDER_ID = 'email-password';
 const PASSWORD_RESET_TYPE = 'password-reset';
@@ -172,9 +173,11 @@ const completePasswordResetSchema = z.object({
 export async function completePasswordReset({
   token: rawToken,
   newPassword: rawNewPassword,
+  context,
 }: {
   token: string;
   newPassword: string;
+  context: RequestServiceContext;
 }): Promise<{ success: true }> {
   const { token, newPassword } = await completePasswordResetSchema
     .parseAsync({
@@ -230,6 +233,9 @@ export async function completePasswordReset({
     }),
   ]);
 
+  // Reset login rate limits so the user can log in with their new password
+  await resetLoginRateLimits({ email: user.email, ip: context.reqInfo.ip });
+
   // Send password changed confirmation email
   await sendEmail(
     /* TPL_PASSWORD_CHANGED_EMAIL:START */ PasswordChangedEmail /* TPL_PASSWORD_CHANGED_EMAIL:END */,