Configuring Environment-Specific Redirect URLs in Next.js with Supabase Auth

Question

I am developing a Next.js application with Supabase authentication. In my Supabase settings, the 'Site URL' is set to https://some-production-url.com for the production environment. However, for local development, I need the redirect URL to point to localhost:3000 instead. Currently, even during local development, the application redirects to the production URL. How can I configure different redirect URLs for the production and local environments?

Current Configuration:

• Supabase 'Site URL' is set to https://some-production-url.com.
• Authentication setup in my Next.js project:

async function signInWithSocialProvider(provider: any) {
    "use server"

    const origin = headers().get("origin")
    const cookieStore = cookies()
    const supabase = createClient(cookieStore)

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: provider,
      options: {
        redirectTo: `${origin}/auth/callback`,
      },
    })

    if (error) {
      console.error(error)
      return redirect("/login?message=Could not authenticate user")
    }

    redirect(data.url)
  }

Auth Callback:

import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"

export async function GET(request: Request) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get("code")

  if (code) {
    const cookieStore = cookies()
    const supabase = createClient(cookieStore)
    await supabase.auth.exchangeCodeForSession(code)
  }

  return NextResponse.redirect(requestUrl.origin)
}

Expected Behavior: When running the application locally, I expect Supabase authentication to redirect to localhost:3000 after successful authentication. In the production environment, it should redirect to https://some-production-url.com.

Actual Behavior: The application redirects to the production URL (https://production_url.com.) after authentication, regardless of the environment (local or production).

Attempted Solutions: I added localhost:3000 to the Redirect URLs section in Supabase alongside the Site URL. However, data.url in the authentication function always points towards the Site URL. Without using data.url, I am unable to make the authentication work.

Questions:

• How can I set up my Next.js application with Supabase auth to handle different redirect URLs for production and local development environments?

• Is there a way to dynamically set the redirect URL based on the environment the app is running in, such as using environment variables or some other method?

Any insights or guidance on how to resolve this issue would be greatly appreciated.

Answer 1

To address this issue add http://localhost:3000/** to your redirect URLs in Supabase under URL configuration. This is the recommended way by Supase docs.