Email Templates don't work on production (when using supabase UI to change them)

[chuckcg]

Hello,

For my use case, I have to change the email template for password reset.

Locally, I updated config.toml and used a .html file for my template, and it works perfectly. The mail I get in inbucket is exactly what I need.

Now, when I copy my .html file and put it in the Supabase UI to change the email template in production as well, it doesn't work. It keeps sending the default template.

There's nothing crazy about the template, it's mostly to change the link:

<h2>Reset Password !</h2>

<p>Follow this link to reset your password:</p>
<p>
  <a
    href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/dashboard/change-password"
    >Reset Password</a
  >
</p>

Here is my function that sends the email:

  const forgotPassword = async (formData: FormData) => {
    "use server";

    const email = formData.get("email") as string;
    const supabase = createClient();

    const { error } = await supabase.auth.resetPasswordForEmail(email, {
      redirectTo: process.env.NEXT_PUBLIC_URL + "/auth/confirm",
    });

    if (error) {
      console.error(error);
    }

    return redirect("/forgot-password/check-email");
  };

Am I doing something wrong ? Am I missing a step ?

---

Edit:
I just found something out: When I send the password request from supabase itself (Authentication > Users > Send password recovery), it does work ! It picks up the right template.

So maybe it's an issue with the way I ask for a password reset ? I can't find much else in the docs...

[GaryAustin1]

Have you edited the default template with a simple change to see if that works?
Sometimes if the template has a syntax error I've seen it send the default, although sometimes it will flag an error.
Does the preview option work?

[chuckcg]

Hey @GaryAustin1, thanks for your reply.

• Yes, I tried editing the default template with a very simple change; I still get the default template without my change.
• Yes, the preview option works perfectly.

[silentworks]

Are you sure you are updating the template on the correct project? or it could be that your email template is failing because of syntax error.

[chuckcg]

I wasn't on the correct project... Gosh.

Thanks

[vintagexav]

Supabase use their own email template for signup confirmation if syntax in your own email template is wrong.

if this occurs, problem might be in your template.
look in logs you might see:
for instance: {{ .ConfirmationURL \ } \ } → should be {{ .ConfirmationURL }}

error found in logs

  templatemailer: template type "confirmation": template:
  .../templates/confirmation:39: unexpected "\\\\" in operand

[Oussail]

✅ The solution to the issue! Save yourself days of headache 🧠💥

If you're dealing with the infamous on Next.js 14/15+:

invalid request: both auth code and code verifier should be non-empty

…especially in Next.js 14/15+ with Supabase and OAuth (Google, GitHub, etc.), then forget about chasing down xx-code-verifier. It's most likely getting lost somewhere between Supabase and your middleware/callback setup. After hours (read: days) of debugging, I finally found a reliable solution that works 🎉

---

💡 Solution: Use Supabase's verifyOtp flow instead

1. Create a route /auth/confirm/route.ts to handle the redirect + verification:

import { type EmailOtpType } from "@supabase/supabase-js";
import { NextRequest, NextResponse } from "next/server";
import { createClient } from "@/utils/supabase/server";

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const token_hash = searchParams.get("token_hash");
  const type = searchParams.get("type") as EmailOtpType | null;
  const next = searchParams.get("next") ?? "/";
  const redirectTo = request.nextUrl.clone();
  redirectTo.pathname = next;

  if (token_hash && type) {
    const supabase = await createClient();
    const { error } = await supabase.auth.verifyOtp({ type, token_hash });

    if (!error) {
      return NextResponse.redirect(redirectTo);
    }

    console.log("🚀 ~ GET ~ error:", error);
  }

  // Redirect to error page if something went wrong
  redirectTo.pathname = "/auth/auth-code-error";
  return NextResponse.redirect(redirectTo);
}

---

2. Update your Supabase password reset email template (Supabase Dashboard → Auth → Templates → Reset Password):

It's likely on :

https://supabase.com/dashboard/project/[YOUR_PROJECT_ID]/auth/templates

Update the reset password template :

<h2>Reset Password</h2>
<p>Follow this link to reset your password:</p>
<p>
  <a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/account/update-password">
    Reset Password
  </a>
</p>

---

3. Create the page /account/update-password/page.tsx where users will land after verification to actually update their password.

---

📚 Docs for reference:
https://supabase.com/docs/guides/auth/passwords?queryGroups=flow&flow=pkce#resetting-a-password

---

Hope this helps someone.
Let me know if you have questions!