Here's my package.json file, hope it helps:

1
{
2
  "private": true,
3
  "scripts": {
4
    "dev": "next dev",
5
    "build": "next build",
6
    "start": "next start"
7
  },
8
  "dependencies": {
9
    "@radix-ui/react-checkbox": "^1.1.1",
10
    "@radix-ui/react-dropdown-menu": "^2.1.1",
11
    "@radix-ui/react-label": "^2.1.0",
12
    "@radix-ui/react-slot": "^1.1.0",
13
    "@supabase/ssr": "latest",
14
    "@supabase/supabase-js": "latest",
15
    "autoprefixer": "10.4.20",
16
    "class-variance-authority": "^0.7.0",
17
    "clsx": "^2.1.1",
18
    "lucide-react": "^0.468.0",
19
    "next": "latest",
20
    "next-themes": "^0.4.3",
21
    "prettier": "^3.3.3",
22
    "react": "19.0.0",
23
    "react-dom": "19.0.0"
24
  },
25
  "devDependencies": {
26
    "@types/node": "22.10.2",
27
    "@types/react": "^19.0.2",
28
    "@types/react-dom": "19.0.2",
29
    "postcss": "8.4.49",
30
    "tailwind-merge": "^2.5.2",
31
    "tailwindcss": "3.4.17",
32
    "tailwindcss-animate": "^1.0.7",
33
    "typescript": "5.7.2"
34
  }
35
}

Here's the email template from my Supabase project:

1
<h2>Confirm your signup</h2>
2

3
<p>Follow this link to confirm your user:</p>
4

5
<p><a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">Confirm your mail</a></p>
6

Hi @richleach, welcome to the Vercel Community!

Thanks for explaining your issue in detail.

If you deploy your project on Vercel, you'll get a unique .vercel.app domain, which will be constant for your project's production deployment. So, you can replace the localhost:3000 with that in the production environment. In a similar way, you can also use a custom domain for your project.

For this you can also use the VERCEL_PROJECT_PRODUCTION_URL environment variable.

So sorry Anshuman, I should have noted that all of this is being run on my localhost:3000 , I haven't yet deployed it to Vercel. In my .env file I have the following: NEXT_PUBLIC_BASE_URL=http://localhost:3000

I'm guessing I have to change something in the email template? But I can't find any docs to support my case, which is where I'm still hung up.

Thanks so much for your input.

Rich

This is what you need to change.

... but the problem Pauline is that I've not even made this to production yet, I can't get the current configuration to work in my dev environment. It has to pass testing in dev before I can promote to prod. That's why I'm confused as to what to do to make the links in the email work. Any ideas? Thanks, Rich

k, here's what I found after debugging:

User goes to localhost:3000/sign-up, fills out form to sign up, hits submit. User receives email with link to confirm user. User clicks link and.... User is redirected to localhost:3000/auth/confirm which does not exist in this code. 404 message. After I created /auth/confirm/route.ts with the following code, it works as expected and user gets confirmed in Supabase db and the Next.js app forwards user to localhost:3000/protected as expected.

1
// /auth/confirm/route.ts
2
import { type EmailOtpType } from '@supabase/supabase-js'
3
import { type NextRequest } from 'next/server'
4

5
import { createClient } from "@/utils/supabase/server";
6
import { redirect } from 'next/navigation'
7

8
export async function GET(request: NextRequest) {
9
  const { searchParams } = new URL(request.url)
10
  const token_hash = searchParams.get('token_hash')
11
  const type = searchParams.get('type') as EmailOtpType | null
12
  const next = searchParams.get('next') ?? '/'
13

14
  if (token_hash && type) {
15
    const supabase = await createClient()
16

17
    const { error } = await supabase.auth.verifyOtp({
18
      type,
19
      token_hash,
20
    })
21
    if (!error) {
22
      // redirect user to specified redirect URL or root of app
23
      redirect(next)
24
    }
25
  }
26

27
  // redirect the user to an error page with some instructions
28
  redirect('/error')
29
}

Like I said after I made the above changes (and added the missing route handler) the app functions as expected.

So I guess my question is now

How do I submit a bug report against this template? It's broken without the added route handler.

Thanks,

Rich

Hi @richleach, glad that you figured it out. Also, thanks for sharing your solution here.

I tried cloning the project locally to verify your solution but the project worked for me out of the box. Then after comparing the code this is what my Supabase Sign up email template looks like:

From the code, I see that in the actions.ts file, the signUpAction action sets the emailRedirectTo URL to /auth/callback which exists in the application. So, everything worked fine for me.

Can you confirm you didn't change these presets?

Anshuman I also have the same content in my /app/actions.ts file.

That doesn't appear to be the issue, the issue is that /app/auth/confirm/route.ts is missing from the project. Once I added it (as I described above) the issue was resolved.

/app/auth/confirm/route.ts is missing and needs to be added.

Thanks,

Rich

OR...

...is the problem in the Supabase sign up email template? Your is different from mine, why is that? I did not make any changes to my sign up email template but it's different from yours, at least as posted....

Hi @richleach, that is my guess as well. When did you create this project?

The template I shared is what I got by default and it works out of the box with the repository for me. So, I'm not sure either.