I'm using Supabase Auth for the first time with a Next.js 14 (app router) project hosted on Vercel. I'm using the Supabase Auth UI (magic link), and my redirectTo link always redirects to the base URL unless I'm using localhost:3000—then it works as expected with. My base URL is being identified correctly, and I've added every version of my redirect URL to the URL Configuration in Supabase Auth based on information from the Supabase Auth docs and the Vercel docs. I found this issue on GitHub, but I don't totally understand it, and I'm not sure that it applies to my problem. I think my issue lies somewhere in my URL Configuration. This is my code to determine which base URL to use:
const getURL = () => {
return process.env.NEXT_PUBLIC_VERCEL_ENV === 'production'
? `https://petsitter-app.vercel.app`
: process.env.NEXT_PUBLIC_VERCEL_URL
? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
: `http://localhost:3000`;
}
This is what I have in my redirectTo in my Supabase Auth UI component:
redirectTo={`${baseURL}/client/create-account`}
This is a screenshot of the URLs in my URL Configuration in Supabase Auth. These URLs represent Vercel's preview URL links that are created by Vercel at deployment to the preview environment. I haven't attempted to test this in production because I think that it's going to fail since it's not working in preview.
If I'm not using localhost:3000, the redirectTo will not include /client/create-account.
ETA: I hardcoded the production link as my redirectTo link, and that seemed to work. Maybe using Vercel's preview link feature just isn't a good fit for Supabase Auth.
