Merge pull request #176 from marketingcroma/fix/auth-confirm-redirect-origin

fix(auth): usar NEXT_PUBLIC_APP_URL em vez do Host da requisição no /auth/confirm

Author: melgarafael

app/actions/auth/requestPasswordReset.ts

@@ -47,7 +47,11 @@ export async function requestPasswordReset(
 
   const supabase = await createClient();
   const { error } = await supabase.auth.resetPasswordForEmail(parsed.data.email, {
-    redirectTo: `${origin}/auth/confirm`,
+    // ?type=recovery sobrevive ao redirect do GoTrue (preserva query string
+    // existente ao anexar `code=`/`token_hash=`) — sem SMTP customizado o
+    // Supabase usa o template padrão dele, que só devolve `code` (PKCE), sem
+    // `type`; /auth/confirm depende deste param pra saber que é recovery.
+    redirectTo: `${origin}/auth/confirm?type=recovery`,
   });
 
   if (error) {

app/actions/auth/signUp.ts

@@ -52,7 +52,10 @@ export async function signUp(input: SignupInput): Promise<SignUpResult> {
     email: parsed.data.email,
     password: parsed.data.password,
     options: {
-      emailRedirectTo: `${origin}/auth/confirm`,
+      // Ver comentário equivalente em requestPasswordReset.ts: ?type=signup
+      // sobrevive ao redirect do GoTrue e é o que distingue este fluxo do de
+      // recovery quando a verificação chega via `code` (PKCE), não `token_hash`.
+      emailRedirectTo: `${origin}/auth/confirm?type=signup`,
       data: { org_name: parsed.data.org_name },
     },
   });

app/auth/confirm/route.ts

@@ -4,35 +4,55 @@ import type { EmailOtpType } from "@supabase/supabase-js";
 import { createClient } from "@/lib/supabase/server";
 import { ensureTenantForUser } from "@/lib/auth/provision";
 import { audit } from "@/lib/audit";
+import { env } from "@/lib/env";
 
 /**
- * GET /auth/confirm — troca o token do e-mail (token_hash) por uma sessão.
+ * GET /auth/confirm — troca o token do e-mail por uma sessão.
  *
- * É o destino único dos links de e-mail do GoTrue (templates customizados em
- * supabase/templates/): confirmação de signup E redefinição de senha.
+ * É o destino único dos links de e-mail do GoTrue: confirmação de signup E
+ * redefinição de senha. Dois formatos de link chegam aqui, dependendo de como
+ * o projeto Supabase está configurado:
+ *
+ * - `token_hash` + `type`: template de e-mail customizado (supabase/templates/)
+ *   linkando direto pro app — exige SMTP customizado configurado no painel
+ *   (sem isso o Supabase não deixa editar o corpo do e-mail).
+ * - `code` (PKCE): template PADRÃO do Supabase (nenhum SMTP customizado
+ *   configurado — caso mais comum em instalação fresca). O e-mail linka pro
+ *   `/auth/v1/verify` do próprio GoTrue, que valida e SÓ ENTÃO redireciona pra
+ *   cá com o code; não inclui `type`, por isso requestPasswordReset.ts e
+ *   signUp.ts anexam `?type=` no redirectTo/emailRedirectTo — é o único jeito
+ *   desse dado sobreviver ao hop pelo GoTrue nesse formato.
  *
  * - type=signup  → provisiona o tenant (org + membership admin) e entra no
  *                  onboarding. Provisionamento é idempotente (link clicado 2x).
  * - type=recovery → sessão de recovery estabelecida; segue para /login/reset
  *                  onde o usuário define a senha nova.
  *
- * Fluxo canônico do @supabase/ssr: verifyOtp grava os cookies de sessão via
- * cookies() do next/headers; o Next anexa os Set-Cookie ao redirect retornado.
+ * Fluxo canônico do @supabase/ssr: verifyOtp/exchangeCodeForSession grava os
+ * cookies de sessão via cookies() do next/headers; o Next anexa os Set-Cookie
+ * ao redirect retornado.
  */
 export async function GET(request: NextRequest) {
   const url = request.nextUrl;
   const tokenHash = url.searchParams.get("token_hash");
+  const code = url.searchParams.get("code");
   const type = url.searchParams.get("type") as EmailOtpType | null;
   const requestId = request.headers.get("x-request-id");
 
-  const redirectTo = (path: string) => NextResponse.redirect(new URL(path, url.origin));
+  // NUNCA usar url.origin aqui: é derivado do header Host, que o proxy/container
+  // pode entregar como o bind interno (ex.: 0.0.0.0:3000) em vez do domínio
+  // público — o link de recovery quebra silenciosamente para o usuário final.
+  const redirectTo = (path: string) => NextResponse.redirect(new URL(path, env.NEXT_PUBLIC_APP_URL));
 
-  if (!tokenHash || !type) {
+  if (!(tokenHash && type) && !code) {
     return redirectTo("/login?error=link_invalido");
   }
 
   const supabase = await createClient();
-  const { data, error } = await supabase.auth.verifyOtp({ type, token_hash: tokenHash });
+  const { data, error } =
+    tokenHash && type
+      ? await supabase.auth.verifyOtp({ type, token_hash: tokenHash })
+      : await supabase.auth.exchangeCodeForSession(code as string);
 
   if (error || !data.user) {
     await audit({

supabase/templates/confirmation.html

@@ -2,9 +2,13 @@
   <body style="font-family: sans-serif; color: #1a1a1a; max-width: 480px; margin: 0 auto; padding: 24px;">
     <h2 style="font-size: 18px;">Confirme seu e-mail</h2>
     <p>Sua conta no DeskcommCRM está quase pronta. Clique no botão abaixo para confirmar seu e-mail e ativar sua conta:</p>
+    <!--
+      `&`, nunca `?`: ver comentário equivalente em recovery.html. `.RedirectTo`
+      já chega com `?type=signup` embutido (app/actions/auth/signUp.ts).
+    -->
     <p style="margin: 24px 0;">
       <a
-        href="{{ .RedirectTo }}?token_hash={{ .TokenHash }}&type=signup"
+        href="{{ .RedirectTo }}&token_hash={{ .TokenHash }}"
         style="background: #4a5d52; color: #ffffff; padding: 10px 20px; border-radius: 6px; text-decoration: none; display: inline-block;"
         >Confirmar e-mail</a
       >

supabase/templates/recovery.html

@@ -2,9 +2,19 @@
   <body style="font-family: sans-serif; color: #1a1a1a; max-width: 480px; margin: 0 auto; padding: 24px;">
     <h2 style="font-size: 18px;">Redefinir senha</h2>
     <p>Recebemos um pedido para redefinir a senha da sua conta no DeskcommCRM. Clique no botão abaixo para escolher uma nova senha:</p>
+    <!--
+      `&`, nunca `?`: `.RedirectTo` já chega com `?type=recovery` embutido
+      (app/actions/auth/requestPasswordReset.ts) — é o que sobrevive ao hop
+      pelo GoTrue quando o link chega via PKCE (`code`) em vez de token_hash.
+      Usar `?` aqui duplica o separador (`...?type=recovery?token_hash=...`),
+      o parser de URL do browser para de reconhecer `token_hash` como
+      parâmetro (vira parte do valor de `type`), e /auth/confirm redireciona
+      pra `/login?error=link_invalido` mesmo com o link correto — medido nas
+      specs password-recovery.spec.ts e signup-journey.spec.ts.
+    -->
     <p style="margin: 24px 0;">
       <a
-        href="{{ .RedirectTo }}?token_hash={{ .TokenHash }}&type=recovery"
+        href="{{ .RedirectTo }}&token_hash={{ .TokenHash }}"
         style="background: #4a5d52; color: #ffffff; padding: 10px 20px; border-radius: 6px; text-decoration: none; display: inline-block;"
         >Redefinir senha</a
       >

tests/unit/link-de-email-tem-uma-query-so.test.ts

@@ -0,0 +1,85 @@
+/**
+ * O LINK DO E-MAIL DE AUTH É MONTADO POR DOIS ARQUIVOS QUE NÃO SE CONHECEM.
+ *
+ * Quem inicia a query é o Server Action (`?type=recovery` / `?type=signup` em
+ * `redirectTo`/`emailRedirectTo`); quem a continua é o template HTML que o
+ * GoTrue renderiza (`&token_hash={{ .TokenHash }}`). Um é TypeScript, o outro
+ * é HTML lido por um serviço em Go — nenhum compilador, tipo ou teste de
+ * unidade existente liga os dois.
+ *
+ * ## O defeito que fez este arquivo existir
+ *
+ * O template usava `?token_hash=...`. Quando o Action passou a anexar
+ * `?type=...` ao redirect (necessário porque, com o template PADRÃO do
+ * Supabase, o link chega via PKCE `code` e o `type` não sobrevive ao hop pelo
+ * GoTrue), o link virou:
+ *
+ *     /auth/confirm?type=recovery?token_hash=pkce_abc&type=recovery
+ *                               ↑ segundo `?`
+ *
+ * O parser de URL do browser trata tudo depois do PRIMEIRO `?` como query, e o
+ * segundo `?` vira parte do VALOR de `type`. `token_hash` deixa de ser um
+ * parâmetro, `/auth/confirm` recebe `null` e manda o usuário para
+ * `/login?error=link_invalido` — com um token perfeitamente válido na mão.
+ *
+ * Nada acusava: `typecheck`, `lint` e `test:unit` passam, porque HTML errado
+ * não compila nem é importado. O sintoma que o usuário vê ("link expirado") não
+ * se parece com a causa.
+ *
+ * ## O que se guarda
+ *
+ * Os DOIS sentidos, porque consertar um lado sozinho reintroduz o bug pelo
+ * outro: se o Action parar de abrir a query, o `&` do template passa a ser o
+ * separador errado e o link quebra igual.
+ */
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+import { describe, expect, it } from "vitest";
+
+const raiz = process.cwd();
+const ler = (p: string) => readFileSync(join(raiz, p), "utf8");
+
+const PARES = [
+  {
+    fluxo: "recovery",
+    action: "app/actions/auth/requestPasswordReset.ts",
+    template: "supabase/templates/recovery.html",
+  },
+  {
+    fluxo: "signup",
+    action: "app/actions/auth/signUp.ts",
+    template: "supabase/templates/confirmation.html",
+  },
+] as const;
+
+describe("o link do e-mail de auth tem UMA query só", () => {
+  for (const { fluxo, action, template } of PARES) {
+    it(`${fluxo}: o Action ABRE a query com ?type=`, () => {
+      const fonte = ler(action);
+      // Guarda de vacuidade: arquivo movido ou vazio faria o `toMatch` abaixo
+      // falhar por ausência de dado, e a mensagem não diria isso.
+      expect(fonte.length, `${action} veio vazio — o teste ficou cego`).toBeGreaterThan(200);
+      expect(
+        fonte,
+        `${action} precisa anexar ?type=${fluxo} ao redirect — é o que sobrevive ao hop do GoTrue no formato PKCE`,
+      ).toMatch(new RegExp(`/auth/confirm\\?type=${fluxo}`));
+    });
+
+    it(`${fluxo}: o template CONTINUA a query com &token_hash=`, () => {
+      const html = ler(template);
+      expect(html.length, `${template} veio vazio — o teste ficou cego`).toBeGreaterThan(200);
+
+      // A régua é o HREF, não o arquivo: a primeira versão deste teste usava
+      // `not.toContain("?token_hash")` sobre o texto inteiro e reprovou por
+      // causa do COMENTÁRIO que explica o bug. Medir o arquivo quando se quer
+      // medir um atributo é o mesmo erro que o gate do canal zernio cometia.
+      const href = /href="(\{\{ \.RedirectTo \}\}[^"]*)"/.exec(html)?.[1];
+      expect(href, `${template}: não achei o href do RedirectTo — o teste ficou cego`).toBeTruthy();
+      expect(
+        href,
+        `${template} precisa usar & (a query já foi aberta pelo Action); ? aqui duplica o separador e o browser para de enxergar token_hash`,
+      ).toBe("{{ .RedirectTo }}&token_hash={{ .TokenHash }}");
+    });
+  }
+});