Created
November 17, 2025 08:19
-
-
Save itsanishjain/cf540940ff54c0c99e40b26f0be7254a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Working with Supabase + Next.js (Local) + Vercel (Production) | |
| This guide explains how to properly configure Supabase authentication redirects when developing locally with Next.js and deploying on Vercel. | |
| ✅ Supabase Dashboard Configuration | |
| Go to Supabase → Authentication → URL Configuration and set: | |
| Site URL | |
| Set this to your production domain, for example: | |
| Your Vercel domain: | |
| https://your-project.vercel.app | |
| Or your custom domain: | |
| https://yourdomain.com | |
| Redirect URLs | |
| Add the following: | |
| http://localhost:3000/** | |
| https://your-project.vercel.app/** | |
| https://your-custom-domain.com/** | |
| (Replace domains accordingly. You can use wildcard ** if needed.) | |
| ✅ Redirect URL Utility for Next.js | |
| Use this helper to dynamically build the proper redirect URL for both local and Vercel environments: | |
| export const getRedirectURL = (redirectTo: string = "/dashboard") => { | |
| let url = | |
| process.env.NEXT_PUBLIC_SITE_URL ?? // Custom or production domain | |
| process.env.NEXT_PUBLIC_VERCEL_URL ?? // Auto-set by Vercel | |
| "http://localhost:3000/"; | |
| // Ensure protocol exists for non-localhost environments | |
| url = url.startsWith("http") ? url : `https://${url}`; | |
| // Ensure trailing slash | |
| url = url.endsWith("/") ? url : `${url}/`; | |
| return `${url}api/auth/callback?redirectTo=${encodeURIComponent( | |
| redirectTo | |
| )}`; | |
| }; | |
| ✅ Usage Example (Backend Login Route) | |
| Call Supabase’s OTP auth with the generated redirect URL: | |
| const redirectURL = getRedirectURL("/dashboard"); | |
| const { error } = await supabase.auth.signInWithOtp({ | |
| email, | |
| options: { | |
| emailRedirectTo: redirectURL, | |
| }, | |
| }); | |
| 💡 Notes | |
| NEXT_PUBLIC_SITE_URL → Always set this in production (.env on Vercel) | |
| Example: | |
| NEXT_PUBLIC_SITE_URL=https://yourdomain.com | |
| NEXT_PUBLIC_VERCEL_URL → Automatically set by Vercel during deploy | |
| Example: | |
| your-project.vercel.app | |
| Local development defaults to: | |
| http://localhost:3000 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment