feat: self-serve password reset flow in user settings (#236)

Author: hugodutka

internal/api/src/routes/auth/auth.client.ts

@@ -85,6 +85,15 @@ export const schemaResendPasswordResetResponse = z.object({
   ok: z.boolean(),
 });
 
+export const schemaChangePasswordRequest = z.object({
+  currentPassword: z.string(),
+  newPassword: z.string().min(8),
+});
+
+export const schemaChangePasswordResponse = z.object({
+  ok: z.boolean(),
+});
+
 export const schemaAuthProvider = z.object({
   id: z.string(),
   name: z.string(),
@@ -132,6 +141,10 @@ export type RequestPasswordResetResponse = z.infer<
 export type ResendPasswordResetResponse = z.infer<
   typeof schemaResendPasswordResetResponse
 >;
+export type ChangePasswordRequest = z.infer<typeof schemaChangePasswordRequest>;
+export type ChangePasswordResponse = z.infer<
+  typeof schemaChangePasswordResponse
+>;
 export type AuthProvider = z.infer<typeof schemaAuthProvider>;
 export type GetProvidersResponse = z.infer<typeof schemaGetProvidersResponse>;
 
@@ -354,6 +367,26 @@ export default class Auth {
     return response.json();
   }
 
+  /**
+   * changePassword changes the user's password.
+   * Requires authentication - user ID is taken from the session.
+   *
+   * @param request - The password change request.
+   * @returns A promise that resolves to the response.
+   */
+  public async changePassword(
+    request: ChangePasswordRequest
+  ): Promise<ChangePasswordResponse> {
+    const response = await this.client.request(
+      "POST",
+      "/api/auth/change-password",
+      JSON.stringify(request)
+    );
+
+    await assertResponseStatus(response, 200);
+    return response.json();
+  }
+
   /**
    * getProviders returns the available authentication providers.
    *

internal/api/src/routes/auth/auth.server.test.ts

@@ -1,4 +1,5 @@
 import { hash } from "bcrypt-ts";
+import Client from "@blink.so/api";
 import { afterEach, beforeEach, expect, test } from "bun:test";
 import { http, HttpResponse } from "msw";
 import { setupServer, SetupServerApi } from "msw/node";
@@ -1549,3 +1550,104 @@ test("POST /verify-email rejects suspended user", async () => {
   const data = (await res.json()) as { error: string };
   expect(data.error).toBe("Your account has been suspended");
 });
+
+// Change password tests
+
+const changePasswordTestCases = [
+  {
+    name: "successfully changes password",
+    hasPassword: true,
+    currentPassword: "oldpassword123",
+    newPassword: "newpassword456",
+    sendCurrentPassword: "oldpassword123",
+    expectedOk: true,
+  },
+  {
+    name: "with wrong current password returns error",
+    hasPassword: true,
+    currentPassword: "correctpassword",
+    newPassword: "newpassword456",
+    sendCurrentPassword: "wrongpassword",
+    expectedError: "Current password is incorrect",
+  },
+  {
+    name: "for user without password returns error",
+    hasPassword: false,
+    currentPassword: null,
+    newPassword: "newpassword456",
+    sendCurrentPassword: "anypassword",
+    expectedError: "Password authentication is not enabled for this account",
+  },
+  {
+    name: "with short new password returns error",
+    hasPassword: true,
+    currentPassword: "oldpassword123",
+    newPassword: "short",
+    sendCurrentPassword: "oldpassword123",
+    expectedError: "Too small: expected string to have >=8 characters",
+  },
+];
+
+test.each(changePasswordTestCases)(
+  "POST /change-password $name",
+  async ({
+    hasPassword,
+    currentPassword,
+    newPassword,
+    sendCurrentPassword,
+    expectedOk,
+    expectedError,
+  }) => {
+    const { helpers, bindings } = await serve();
+    const db = await bindings.database();
+
+    const { user, client } = await helpers.createUser({
+      email: `changepass-${Date.now()}@example.com`,
+    });
+
+    await db.updateUserByID({
+      id: user.id,
+      password: hasPassword ? await hash(currentPassword!, 10) : null,
+      email_verified: new Date(),
+    });
+
+    let error: string | undefined;
+    const data = await client.auth
+      .changePassword({
+        currentPassword: sendCurrentPassword,
+        newPassword,
+      })
+      .catch((err) => {
+        error = err instanceof Error ? err.message : "Unknown error";
+      });
+
+    if (expectedOk) {
+      expect(data?.ok).toBe(true);
+      // Verify password was actually changed
+      const { compare } = await import("bcrypt-ts");
+      const updatedUser = await db.selectUserByID(user.id);
+      expect(await compare(newPassword, updatedUser!.password!)).toBe(true);
+    }
+    if (expectedError) {
+      expect(error).toContain(expectedError);
+    }
+  }
+);
+
+test("POST /change-password without authentication returns unauthorized error", async () => {
+  const { url } = await serve();
+
+  const client = new Client({ baseURL: url.toString() });
+
+  let error: string | undefined;
+  await client.auth
+    .changePassword({
+      currentPassword: "oldpassword123",
+      newPassword: "newpassword456",
+    })
+    .catch((err) => {
+      error = err instanceof Error ? err.message : "Unknown error";
+    });
+
+  expect(error).toContain("Unauthorized");
+});

internal/api/src/routes/auth/auth.server.ts

@@ -10,15 +10,16 @@ import type { APIServer, Bindings } from "../../server";
 import { hashPassword } from "../../util/password";
 import { provisionUser } from "../provision-user";
 import {
+  SESSION_COOKIE_NAME,
+  SESSION_SECURE,
+  schemaChangePasswordRequest,
   schemaRequestEmailChangeRequest,
   schemaRequestPasswordResetRequest,
   schemaResetPasswordRequest,
   schemaSignInWithCredentialsRequest,
   schemaSignupRequest,
   schemaVerifyEmailChangeRequest,
   schemaVerifyEmailRequest,
-  SESSION_COOKIE_NAME,
-  SESSION_SECURE,
 } from "./auth.client";
 
 // ============================================================================
@@ -1311,4 +1312,44 @@ export default function mountAuth(server: APIServer) {
 
     return c.json({ ok: true });
   });
+
+  // POST /change-password - Change password for authenticated users
+  server.post(
+    "/change-password",
+    withAuth,
+    validator("json", (value) => {
+      return schemaChangePasswordRequest.parse(value);
+    }),
+    async (c) => {
+      const { currentPassword, newPassword } = c.req.valid("json");
+      const userId = c.get("user_id");
+      const db = await c.env.database();
+
+      // Get current user
+      const user = await db.selectUserByID(userId);
+      if (!user) {
+        return c.json({ error: "User not found" }, 404);
+      }
+
+      // Check if user has a password
+      if (!user.password) {
+        return c.json(
+          { error: "Password authentication is not enabled for this account" },
+          400
+        );
+      }
+
+      // Verify current password
+      const passwordValid = await compare(currentPassword, user.password);
+      if (!passwordValid) {
+        return c.json({ error: "Current password is incorrect" }, 401);
+      }
+
+      // Hash and update password
+      const hashedPassword = await hashPassword(newPassword);
+      await db.updateUserByID({ id: userId, password: hashedPassword });
+
+      return c.json({ ok: true });
+    }
+  );
 }

internal/site/app/(app)/[organization]/~/settings/change-password-dialog.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "@/components/ui/button";
+import { withMockClient } from "@/lib/api-client.mock";
+import { ChangePasswordDialog } from "./change-password-dialog";
+
+const meta: Meta<typeof ChangePasswordDialog> = {
+  title: "Page/UserSettings/ChangePasswordDialog",
+  component: ChangePasswordDialog,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    withMockClient((client) => {
+      client.auth.changePassword.mockResolvedValue({ ok: true });
+    }),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <ChangePasswordDialog
+      trigger={
+        <Button variant="outline" size="sm">
+          Change
+        </Button>
+      }
+    />
+  ),
+};