fix reset password flow

Author: dnywh

docs/supabase-local-first.md

@@ -130,6 +130,14 @@ If `.env.local` still points at `https://mfnaqdyunuafbwukbbyr.supabase.co`, the
 
 Peels intentionally uses the `54331`-`54334` range so you can run it alongside other Supabase projects that still use the default local ports.
 
+### Local auth emails
+
+Supabase captures local auth emails in Mailpit instead of sending them to a real inbox. After `npm run supabase:start`, open `http://127.0.0.1:54334` to inspect password reset, magic-link, invite, and email-change messages generated by the local stack.
+
+The local stack uses Supabase's built-in auth email templates unless the Send Email Auth Hook is configured locally. The Peels custom auth email implementation lives in `supabase/functions/send-email-for-auth-action`, but that function is only used when Supabase Auth is configured to call it as the `send_email` hook. Hosted environments configure that in Supabase Auth Hooks; the default local `config.toml` path keeps Mailpit simple and uses the built-in templates.
+
+For reset-password testing, use the reset link from Mailpit and keep the app running at `http://127.0.0.1:3000`. `supabase/config.toml` allow-lists `http://127.0.0.1:3000/**` and `http://localhost:3000/**` so Supabase can redirect through `/auth/complete` before landing on `/profile/reset-password`.
+
 ### Demo accounts
 
 Both local demo accounts use the password `peels-demo-password`.

e2e/auth.spec.ts

@@ -31,6 +31,25 @@ test("sign-in preserves a safe redirect_to", async ({ page }) => {
   await expect(page).toHaveURL(/\/profile$/);
 });
 
+test("password reset success page renders for signed-in users", async ({
+  page,
+}) => {
+  const successMessage =
+    "Your password has been updated. Let’s get back to composting!";
+
+  await signIn(page, {
+    email: HOST_EMAIL,
+    redirectTo: `/profile/reset-password?success=${encodeURIComponent(
+      successMessage
+    )}`,
+  });
+
+  await expect(
+    page.getByRole("heading", { name: "Password updated" })
+  ).toBeVisible();
+  await expect(page.getByText(successMessage)).toBeVisible();
+});
+
 test("sign-in normalises unsafe redirect_to values", async ({ page }) => {
   await signIn(page, {
     email: HOST_EMAIL,

src/app/(forms)/profile/reset-password/page.tsx

@@ -30,7 +30,7 @@ export default async function ResetPassword(props: {
         <Form as="container">
           <p>{searchParams.success}</p>
           {/* User is authenticated at this point so we can redirect them to a protected route */}
-          <Button href="/profile" variant="primary">
+          <Button href="/profile" variant="primary" width="full">
             {t("Actions.backToPeels")}
           </Button>
         </Form>

src/components/Button/Button.tsx

@@ -408,6 +408,8 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
     if (isLink) {
       const linkProps = getLinkButtonProps(restProps as LinkButtonRestProps);
       const rel = resolveExternalRel(linkProps.target, linkProps.rel);
+      const clickProps =
+        isDisabled || onClick ? { onClick: handleLinkClick } : {};
 
       return (
         <StyledLink
@@ -421,7 +423,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
           aria-disabled={isDisabled || undefined}
           aria-busy={isLoading || undefined}
           data-button-width={allProps.width ?? "contained"}
-          onClick={handleLinkClick}
+          {...clickProps}
           {...linkProps}
           rel={rel}
         >

supabase/config.toml

@@ -111,8 +111,13 @@ enabled = true
 # The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
 # in emails.
 site_url = "http://127.0.0.1:3000"
-# A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
-additional_redirect_urls = ["https://127.0.0.1:3000"]
+# A list of URLs that auth providers are permitted to redirect to post authentication.
+# Local auth emails use broad localhost wildcards so app flows can redirect through
+# /auth/complete and any other local callback paths used during development.
+additional_redirect_urls = [
+  "http://127.0.0.1:3000/**",
+  "http://localhost:3000/**",
+]
 # How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
 jwt_expiry = 3600
 # If disabled, the refresh token will never expire.